@duskmoon-dev/el-pagination 0.4.0

package/dist/cjs/index.js

@@ -0,0 +1,362 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __moduleCache = /* @__PURE__ */ new WeakMap;
+var __toCommonJS = (from) => {
+  var entry = __moduleCache.get(from), desc;
+  if (entry)
+    return entry;
+  entry = __defProp({}, "__esModule", { value: true });
+  if (from && typeof from === "object" || typeof from === "function")
+    __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    }));
+  __moduleCache.set(from, entry);
+  return entry;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+
+// src/index.ts
+var exports_src = {};
+__export(exports_src, {
+  register: () => register,
+  ElDmPagination: () => ElDmPagination
+});
+module.exports = __toCommonJS(exports_src);
+
+// src/el-dm-pagination.ts
+var import_el_core = require("@duskmoon-dev/el-core");
+var styles = import_el_core.css`
+  :host {
+    display: inline-flex;
+    vertical-align: middle;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  .pagination {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-family: inherit;
+  }
+
+  .pagination-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--color-border, #d1d5db);
+    background: var(--color-surface, #ffffff);
+    color: var(--color-text, #374151);
+    cursor: pointer;
+    font-family: inherit;
+    font-weight: 500;
+    transition:
+      background-color 0.15s ease,
+      border-color 0.15s ease,
+      color 0.15s ease;
+    border-radius: var(--radius-md, 0.375rem);
+    min-width: 2rem;
+    height: 2rem;
+    padding: 0 0.5rem;
+    font-size: 0.875rem;
+    line-height: 1;
+  }
+
+  .pagination-btn:hover:not(:disabled) {
+    background: var(--color-surface-hover, #f3f4f6);
+    border-color: var(--color-border-hover, #9ca3af);
+  }
+
+  .pagination-btn:focus-visible {
+    outline: 2px solid var(--color-primary, #3b82f6);
+    outline-offset: 2px;
+  }
+
+  .pagination-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .pagination-btn.active {
+    background: var(--color-primary, #3b82f6);
+    border-color: var(--color-primary, #3b82f6);
+    color: var(--color-primary-contrast, #ffffff);
+  }
+
+  .pagination-btn.nav-btn {
+    padding: 0 0.375rem;
+  }
+
+  .pagination-btn.nav-btn svg {
+    width: 1em;
+    height: 1em;
+  }
+
+  .ellipsis {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2rem;
+    height: 2rem;
+    color: var(--color-text-muted, #6b7280);
+    font-size: 0.875rem;
+    user-select: none;
+  }
+
+  /* Size variants */
+  :host([size='xs']) .pagination-btn {
+    min-width: 1.5rem;
+    height: 1.5rem;
+    padding: 0 0.25rem;
+    font-size: 0.75rem;
+    border-radius: var(--radius-sm, 0.25rem);
+  }
+
+  :host([size='xs']) .ellipsis {
+    min-width: 1.5rem;
+    height: 1.5rem;
+    font-size: 0.75rem;
+  }
+
+  :host([size='sm']) .pagination-btn {
+    min-width: 1.75rem;
+    height: 1.75rem;
+    padding: 0 0.375rem;
+    font-size: 0.8125rem;
+  }
+
+  :host([size='sm']) .ellipsis {
+    min-width: 1.75rem;
+    height: 1.75rem;
+    font-size: 0.8125rem;
+  }
+
+  :host([size='lg']) .pagination-btn {
+    min-width: 2.5rem;
+    height: 2.5rem;
+    padding: 0 0.75rem;
+    font-size: 1rem;
+  }
+
+  :host([size='lg']) .ellipsis {
+    min-width: 2.5rem;
+    height: 2.5rem;
+    font-size: 1rem;
+  }
+
+  /* Color variants */
+  :host([color='secondary']) .pagination-btn.active {
+    background: var(--color-secondary, #8b5cf6);
+    border-color: var(--color-secondary, #8b5cf6);
+    color: var(--color-secondary-contrast, #ffffff);
+  }
+
+  :host([color='secondary']) .pagination-btn:focus-visible {
+    outline-color: var(--color-secondary, #8b5cf6);
+  }
+
+  :host([color='neutral']) .pagination-btn.active {
+    background: var(--color-neutral, #6b7280);
+    border-color: var(--color-neutral, #6b7280);
+    color: var(--color-neutral-contrast, #ffffff);
+  }
+
+  :host([color='neutral']) .pagination-btn:focus-visible {
+    outline-color: var(--color-neutral, #6b7280);
+  }
+`;
+var ICONS = {
+  first: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M15.79 14.77a.75.75 0 01-1.06.02l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 111.04 1.08L11.832 10l3.938 3.71a.75.75 0 01.02 1.06zm-6 0a.75.75 0 01-1.06.02l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 111.04 1.08L5.832 10l3.938 3.71a.75.75 0 01.02 1.06z" clip-rule="evenodd"/></svg>`,
+  prev: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd"/></svg>`,
+  next: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd"/></svg>`,
+  last: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4.21 5.23a.75.75 0 011.06-.02l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 11-1.04-1.08L8.168 10 4.23 6.29a.75.75 0 01-.02-1.06zm6 0a.75.75 0 011.06-.02l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 11-1.04-1.08L14.168 10l-3.938-3.71a.75.75 0 01-.02-1.06z" clip-rule="evenodd"/></svg>`
+};
+
+class ElDmPagination extends import_el_core.BaseElement {
+  static properties = {
+    total: { type: Number, reflect: true, default: 1 },
+    current: { type: Number, reflect: true, default: 1 },
+    siblings: { type: Number, reflect: true, default: 1 },
+    boundaries: { type: Number, reflect: true, default: 1 },
+    size: { type: String, reflect: true },
+    color: { type: String, reflect: true }
+  };
+  constructor() {
+    super();
+    this.attachStyles(styles);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("click", this._handleClick.bind(this));
+    this.addEventListener("keydown", this._handleKeydown.bind(this));
+  }
+  _getPageRange() {
+    const total = Math.max(1, this.total);
+    const current = Math.min(Math.max(1, this.current), total);
+    const siblings = Math.max(0, this.siblings);
+    const boundaries = Math.max(0, this.boundaries);
+    const totalPageNumbers = boundaries * 2 + siblings * 2 + 3;
+    if (total <= totalPageNumbers) {
+      return Array.from({ length: total }, (_, i) => i + 1);
+    }
+    const leftSiblingIndex = Math.max(current - siblings, boundaries + 1);
+    const rightSiblingIndex = Math.min(current + siblings, total - boundaries);
+    const showLeftEllipsis = leftSiblingIndex > boundaries + 2;
+    const showRightEllipsis = rightSiblingIndex < total - boundaries - 1;
+    const pages = [];
+    for (let i = 1;i <= boundaries; i++) {
+      pages.push(i);
+    }
+    if (showLeftEllipsis) {
+      pages.push("ellipsis");
+    } else if (boundaries + 1 < leftSiblingIndex) {
+      pages.push(boundaries + 1);
+    }
+    for (let i = leftSiblingIndex;i <= rightSiblingIndex; i++) {
+      if (i > boundaries && i <= total - boundaries) {
+        pages.push(i);
+      }
+    }
+    if (showRightEllipsis) {
+      pages.push("ellipsis");
+    } else if (rightSiblingIndex < total - boundaries) {
+      pages.push(total - boundaries);
+    }
+    for (let i = total - boundaries + 1;i <= total; i++) {
+      if (i > 0 && !pages.includes(i)) {
+        pages.push(i);
+      }
+    }
+    return pages;
+  }
+  _goToPage(page) {
+    const newPage = Math.min(Math.max(1, page), this.total);
+    if (newPage !== this.current) {
+      this.current = newPage;
+      this.emit("change", { page: newPage });
+    }
+  }
+  _handleClick(event) {
+    const target = event.target;
+    const button = target.closest("button");
+    if (!button || button.disabled)
+      return;
+    const action = button.dataset.action;
+    const page = button.dataset.page;
+    if (action === "first") {
+      this._goToPage(1);
+    } else if (action === "prev") {
+      this._goToPage(this.current - 1);
+    } else if (action === "next") {
+      this._goToPage(this.current + 1);
+    } else if (action === "last") {
+      this._goToPage(this.total);
+    } else if (page) {
+      this._goToPage(parseInt(page, 10));
+    }
+  }
+  _handleKeydown(event) {
+    switch (event.key) {
+      case "ArrowLeft":
+        event.preventDefault();
+        this._goToPage(this.current - 1);
+        break;
+      case "ArrowRight":
+        event.preventDefault();
+        this._goToPage(this.current + 1);
+        break;
+      case "Home":
+        event.preventDefault();
+        this._goToPage(1);
+        break;
+      case "End":
+        event.preventDefault();
+        this._goToPage(this.total);
+        break;
+    }
+  }
+  render() {
+    const total = Math.max(1, this.total);
+    const current = Math.min(Math.max(1, this.current), total);
+    const pages = this._getPageRange();
+    const isFirstPage = current === 1;
+    const isLastPage = current === total;
+    let pagesHtml = "";
+    let ellipsisCount = 0;
+    for (const page of pages) {
+      if (page === "ellipsis") {
+        ellipsisCount++;
+        pagesHtml += `
+          <span class="ellipsis" part="ellipsis" aria-hidden="true">...</span>
+        `;
+      } else {
+        const isActive = page === current;
+        pagesHtml += `
+          <button
+            class="pagination-btn${isActive ? " active" : ""}"
+            part="page"
+            data-page="${page}"
+            aria-label="Page ${page}"
+            aria-current="${isActive ? "page" : "false"}"
+          >${page}</button>
+        `;
+      }
+    }
+    return `
+      <nav class="pagination" part="container" role="navigation" aria-label="Pagination">
+        <button
+          class="pagination-btn nav-btn"
+          part="button"
+          data-action="first"
+          aria-label="Go to first page"
+          ${isFirstPage ? "disabled" : ""}
+        >${ICONS.first}</button>
+        <button
+          class="pagination-btn nav-btn"
+          part="button"
+          data-action="prev"
+          aria-label="Go to previous page"
+          ${isFirstPage ? "disabled" : ""}
+        >${ICONS.prev}</button>
+        ${pagesHtml}
+        <button
+          class="pagination-btn nav-btn"
+          part="button"
+          data-action="next"
+          aria-label="Go to next page"
+          ${isLastPage ? "disabled" : ""}
+        >${ICONS.next}</button>
+        <button
+          class="pagination-btn nav-btn"
+          part="button"
+          data-action="last"
+          aria-label="Go to last page"
+          ${isLastPage ? "disabled" : ""}
+        >${ICONS.last}</button>
+      </nav>
+    `;
+  }
+}
+
+// src/index.ts
+function register() {
+  if (!customElements.get("el-dm-pagination")) {
+    customElements.define("el-dm-pagination", ElDmPagination);
+  }
+}
+
+//# debugId=780D3D2CA6D67FB664756E2164756E21
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1,11 @@
+{
+  "version": 3,
+  "sources": ["../../src/el-dm-pagination.ts", "../../src/index.ts"],
+  "sourcesContent": [
+    "/**\n * DuskMoon Pagination Element\n *\n * A customizable pagination component for page navigation.\n * Supports first/last, previous/next buttons, and page number display with ellipsis.\n *\n * @element el-dm-pagination\n *\n * @attr {number} total - Total number of pages\n * @attr {number} current - Current active page (1-indexed)\n * @attr {number} siblings - Number of pages to show around current page\n * @attr {number} boundaries - Number of pages to show at start/end\n * @attr {string} size - Button size: xs, sm, md, lg\n * @attr {string} color - Color variant: primary, secondary, neutral\n *\n * @csspart container - The pagination container\n * @csspart button - Navigation buttons (first, prev, next, last)\n * @csspart page - Page number buttons\n * @csspart ellipsis - Ellipsis indicators\n *\n * @fires change - Fired when the current page changes, detail: { page: number }\n */\n\nimport { BaseElement, css } from '@duskmoon-dev/el-core';\n\nexport type PaginationSize = 'xs' | 'sm' | 'md' | 'lg';\nexport type PaginationColor = 'primary' | 'secondary' | 'neutral';\n\nconst styles = css`\n  :host {\n    display: inline-flex;\n    vertical-align: middle;\n  }\n\n  :host([hidden]) {\n    display: none !important;\n  }\n\n  .pagination {\n    display: flex;\n    align-items: center;\n    gap: 0.25rem;\n    font-family: inherit;\n  }\n\n  .pagination-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border, #d1d5db);\n    background: var(--color-surface, #ffffff);\n    color: var(--color-text, #374151);\n    cursor: pointer;\n    font-family: inherit;\n    font-weight: 500;\n    transition:\n      background-color 0.15s ease,\n      border-color 0.15s ease,\n      color 0.15s ease;\n    border-radius: var(--radius-md, 0.375rem);\n    min-width: 2rem;\n    height: 2rem;\n    padding: 0 0.5rem;\n    font-size: 0.875rem;\n    line-height: 1;\n  }\n\n  .pagination-btn:hover:not(:disabled) {\n    background: var(--color-surface-hover, #f3f4f6);\n    border-color: var(--color-border-hover, #9ca3af);\n  }\n\n  .pagination-btn:focus-visible {\n    outline: 2px solid var(--color-primary, #3b82f6);\n    outline-offset: 2px;\n  }\n\n  .pagination-btn:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .pagination-btn.active {\n    background: var(--color-primary, #3b82f6);\n    border-color: var(--color-primary, #3b82f6);\n    color: var(--color-primary-contrast, #ffffff);\n  }\n\n  .pagination-btn.nav-btn {\n    padding: 0 0.375rem;\n  }\n\n  .pagination-btn.nav-btn svg {\n    width: 1em;\n    height: 1em;\n  }\n\n  .ellipsis {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 2rem;\n    height: 2rem;\n    color: var(--color-text-muted, #6b7280);\n    font-size: 0.875rem;\n    user-select: none;\n  }\n\n  /* Size variants */\n  :host([size='xs']) .pagination-btn {\n    min-width: 1.5rem;\n    height: 1.5rem;\n    padding: 0 0.25rem;\n    font-size: 0.75rem;\n    border-radius: var(--radius-sm, 0.25rem);\n  }\n\n  :host([size='xs']) .ellipsis {\n    min-width: 1.5rem;\n    height: 1.5rem;\n    font-size: 0.75rem;\n  }\n\n  :host([size='sm']) .pagination-btn {\n    min-width: 1.75rem;\n    height: 1.75rem;\n    padding: 0 0.375rem;\n    font-size: 0.8125rem;\n  }\n\n  :host([size='sm']) .ellipsis {\n    min-width: 1.75rem;\n    height: 1.75rem;\n    font-size: 0.8125rem;\n  }\n\n  :host([size='lg']) .pagination-btn {\n    min-width: 2.5rem;\n    height: 2.5rem;\n    padding: 0 0.75rem;\n    font-size: 1rem;\n  }\n\n  :host([size='lg']) .ellipsis {\n    min-width: 2.5rem;\n    height: 2.5rem;\n    font-size: 1rem;\n  }\n\n  /* Color variants */\n  :host([color='secondary']) .pagination-btn.active {\n    background: var(--color-secondary, #8b5cf6);\n    border-color: var(--color-secondary, #8b5cf6);\n    color: var(--color-secondary-contrast, #ffffff);\n  }\n\n  :host([color='secondary']) .pagination-btn:focus-visible {\n    outline-color: var(--color-secondary, #8b5cf6);\n  }\n\n  :host([color='neutral']) .pagination-btn.active {\n    background: var(--color-neutral, #6b7280);\n    border-color: var(--color-neutral, #6b7280);\n    color: var(--color-neutral-contrast, #ffffff);\n  }\n\n  :host([color='neutral']) .pagination-btn:focus-visible {\n    outline-color: var(--color-neutral, #6b7280);\n  }\n`;\n\n// SVG icons for navigation buttons\nconst ICONS = {\n  first: `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M15.79 14.77a.75.75 0 01-1.06.02l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 111.04 1.08L11.832 10l3.938 3.71a.75.75 0 01.02 1.06zm-6 0a.75.75 0 01-1.06.02l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 111.04 1.08L5.832 10l3.938 3.71a.75.75 0 01.02 1.06z\" clip-rule=\"evenodd\"/></svg>`,\n  prev: `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\" clip-rule=\"evenodd\"/></svg>`,\n  next: `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\" clip-rule=\"evenodd\"/></svg>`,\n  last: `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M4.21 5.23a.75.75 0 011.06-.02l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 11-1.04-1.08L8.168 10 4.23 6.29a.75.75 0 01-.02-1.06zm6 0a.75.75 0 011.06-.02l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 11-1.04-1.08L14.168 10l-3.938-3.71a.75.75 0 01-.02-1.06z\" clip-rule=\"evenodd\"/></svg>`,\n};\n\nexport class ElDmPagination extends BaseElement {\n  static properties = {\n    total: { type: Number, reflect: true, default: 1 },\n    current: { type: Number, reflect: true, default: 1 },\n    siblings: { type: Number, reflect: true, default: 1 },\n    boundaries: { type: Number, reflect: true, default: 1 },\n    size: { type: String, reflect: true },\n    color: { type: String, reflect: true },\n  };\n\n  /** Total number of pages */\n  declare total: number;\n\n  /** Current active page (1-indexed) */\n  declare current: number;\n\n  /** Number of pages shown around the current page */\n  declare siblings: number;\n\n  /** Number of pages shown at the start and end */\n  declare boundaries: number;\n\n  /** Button size: xs, sm, md, lg */\n  declare size: PaginationSize;\n\n  /** Color variant: primary, secondary, neutral */\n  declare color: PaginationColor;\n\n  constructor() {\n    super();\n    this.attachStyles(styles);\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('click', this._handleClick.bind(this));\n    this.addEventListener('keydown', this._handleKeydown.bind(this));\n  }\n\n  /**\n   * Calculate the range of page numbers to display\n   */\n  private _getPageRange(): (number | 'ellipsis')[] {\n    const total = Math.max(1, this.total);\n    const current = Math.min(Math.max(1, this.current), total);\n    const siblings = Math.max(0, this.siblings);\n    const boundaries = Math.max(0, this.boundaries);\n\n    // If total pages fit without ellipsis\n    const totalPageNumbers = boundaries * 2 + siblings * 2 + 3; // boundaries + siblings + current + 2 ellipsis spots\n    if (total <= totalPageNumbers) {\n      return Array.from({ length: total }, (_, i) => i + 1);\n    }\n\n    const leftSiblingIndex = Math.max(current - siblings, boundaries + 1);\n    const rightSiblingIndex = Math.min(current + siblings, total - boundaries);\n\n    const showLeftEllipsis = leftSiblingIndex > boundaries + 2;\n    const showRightEllipsis = rightSiblingIndex < total - boundaries - 1;\n\n    const pages: (number | 'ellipsis')[] = [];\n\n    // Add left boundary pages\n    for (let i = 1; i <= boundaries; i++) {\n      pages.push(i);\n    }\n\n    // Add left ellipsis or connecting page\n    if (showLeftEllipsis) {\n      pages.push('ellipsis');\n    } else if (boundaries + 1 < leftSiblingIndex) {\n      pages.push(boundaries + 1);\n    }\n\n    // Add sibling pages and current page\n    for (let i = leftSiblingIndex; i <= rightSiblingIndex; i++) {\n      if (i > boundaries && i <= total - boundaries) {\n        pages.push(i);\n      }\n    }\n\n    // Add right ellipsis or connecting page\n    if (showRightEllipsis) {\n      pages.push('ellipsis');\n    } else if (rightSiblingIndex < total - boundaries) {\n      pages.push(total - boundaries);\n    }\n\n    // Add right boundary pages\n    for (let i = total - boundaries + 1; i <= total; i++) {\n      if (i > 0 && !pages.includes(i)) {\n        pages.push(i);\n      }\n    }\n\n    return pages;\n  }\n\n  /**\n   * Navigate to a specific page\n   */\n  private _goToPage(page: number): void {\n    const newPage = Math.min(Math.max(1, page), this.total);\n    if (newPage !== this.current) {\n      this.current = newPage;\n      this.emit('change', { page: newPage });\n    }\n  }\n\n  /**\n   * Handle click events on pagination buttons\n   */\n  private _handleClick(event: Event): void {\n    const target = event.target as HTMLElement;\n    const button = target.closest('button');\n\n    if (!button || button.disabled) return;\n\n    const action = button.dataset.action;\n    const page = button.dataset.page;\n\n    if (action === 'first') {\n      this._goToPage(1);\n    } else if (action === 'prev') {\n      this._goToPage(this.current - 1);\n    } else if (action === 'next') {\n      this._goToPage(this.current + 1);\n    } else if (action === 'last') {\n      this._goToPage(this.total);\n    } else if (page) {\n      this._goToPage(parseInt(page, 10));\n    }\n  }\n\n  /**\n   * Handle keyboard navigation\n   */\n  private _handleKeydown(event: KeyboardEvent): void {\n    switch (event.key) {\n      case 'ArrowLeft':\n        event.preventDefault();\n        this._goToPage(this.current - 1);\n        break;\n      case 'ArrowRight':\n        event.preventDefault();\n        this._goToPage(this.current + 1);\n        break;\n      case 'Home':\n        event.preventDefault();\n        this._goToPage(1);\n        break;\n      case 'End':\n        event.preventDefault();\n        this._goToPage(this.total);\n        break;\n    }\n  }\n\n  render(): string {\n    const total = Math.max(1, this.total);\n    const current = Math.min(Math.max(1, this.current), total);\n    const pages = this._getPageRange();\n\n    const isFirstPage = current === 1;\n    const isLastPage = current === total;\n\n    let pagesHtml = '';\n    let ellipsisCount = 0;\n\n    for (const page of pages) {\n      if (page === 'ellipsis') {\n        ellipsisCount++;\n        pagesHtml += `\n          <span class=\"ellipsis\" part=\"ellipsis\" aria-hidden=\"true\">...</span>\n        `;\n      } else {\n        const isActive = page === current;\n        pagesHtml += `\n          <button\n            class=\"pagination-btn${isActive ? ' active' : ''}\"\n            part=\"page\"\n            data-page=\"${page}\"\n            aria-label=\"Page ${page}\"\n            aria-current=\"${isActive ? 'page' : 'false'}\"\n          >${page}</button>\n        `;\n      }\n    }\n\n    return `\n      <nav class=\"pagination\" part=\"container\" role=\"navigation\" aria-label=\"Pagination\">\n        <button\n          class=\"pagination-btn nav-btn\"\n          part=\"button\"\n          data-action=\"first\"\n          aria-label=\"Go to first page\"\n          ${isFirstPage ? 'disabled' : ''}\n        >${ICONS.first}</button>\n        <button\n          class=\"pagination-btn nav-btn\"\n          part=\"button\"\n          data-action=\"prev\"\n          aria-label=\"Go to previous page\"\n          ${isFirstPage ? 'disabled' : ''}\n        >${ICONS.prev}</button>\n        ${pagesHtml}\n        <button\n          class=\"pagination-btn nav-btn\"\n          part=\"button\"\n          data-action=\"next\"\n          aria-label=\"Go to next page\"\n          ${isLastPage ? 'disabled' : ''}\n        >${ICONS.next}</button>\n        <button\n          class=\"pagination-btn nav-btn\"\n          part=\"button\"\n          data-action=\"last\"\n          aria-label=\"Go to last page\"\n          ${isLastPage ? 'disabled' : ''}\n        >${ICONS.last}</button>\n      </nav>\n    `;\n  }\n}\n",
+    "/**\n * @duskmoon-dev/el-pagination\n *\n * DuskMoon Pagination custom element\n */\n\nimport { ElDmPagination } from './el-dm-pagination.js';\n\nexport { ElDmPagination };\n\n/**\n * Register the el-dm-pagination custom element\n *\n * @example\n * ```ts\n * import { register } from '@duskmoon-dev/el-pagination';\n * register();\n * ```\n */\nexport function register(): void {\n  if (!customElements.get('el-dm-pagination')) {\n    customElements.define('el-dm-pagination', ElDmPagination);\n  }\n}\n"
+  ],
+  "mappings": "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",
+  "debugId": "780D3D2CA6D67FB664756E2164756E21",
+  "names": []
+}