@reliability-design/web 1.2.0 → 1.3.1

package/dist/components/rel-pagination/rel-pagination.ts

@@ -1,425 +1,442 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import "../../styles/vars-v2.css";
-
-type DensityType = "comfortable" | "compact";
-type VariantType = "default" | "icons";
-type PageItem =
-  | { type: "page"; value: number }
-  | { type: "ellipsis" }
-  | { type: "spacer" }
-  | { type: "prev" }
-  | { type: "next" };
-
-@customElement("rel-pagination")
-export class RelPagination extends LitElement {
-  @property({ type: Number }) page?: number;
-  @property({ type: Number }) defaultPage = 1;
-  @property({ type: Number }) totalPages = 0;
-  @property({ type: Number }) siblingCount = 1;
-  @property({ type: Number }) boundaryCount = 1;
-  @property({ type: Boolean, reflect: true }) disabled = false;
-  @property({ type: String }) density: DensityType = "comfortable";
-  @property({ type: String }) variant: VariantType = "default";
-  @property({ type: String }) hrefTemplate = "";
-  @property({ type: String }) ariaLabel = "Pagination";
-
-  @state() private currentPage = 1;
-
-  static styles = css`
-    :host {
-      display: inline-block;
-      font-family: var(--rel-fontFamilies-primary);
-    }
-
-    nav {
-      display: flex;
-      align-items: center;
-      gap: var(--rel-spacing-space-2xs);
-      min-width: max-content;
-    }
-
-    nav.compact {
-      gap: var(--rel-spacing-space-3xs);
-    }
-
-    button,
-    a {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 40px;
-      height: 40px;
-      padding: 0;
-      font-family: var(--rel-fontFamilies-primary);
-      font-size: var(--rel-fontSizes-sm);
-      font-weight: var(--rel-fontWeights-medium);
-      color: var(--rel-color-text-heading);
-      background: var(--rel-color-bg-primary);
-      border: var(--rel-borders-width-stroke-100) solid var(--rel-color-border-default);
-      border-radius: var(--rel-borders-radius-border-radius-200);
-      cursor: pointer;
-      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
-      text-decoration: none;
-      outline: none;
-      user-select: none;
-    }
-
-    button.prev-btn, button.next-btn,
-    a.prev-btn, a.next-btn {
-      width: auto;
-      padding: 0 var(--rel-spacing-space-sm);
-    }
-
-    nav.compact button,
-    nav.compact a {
-      width: 32px;
-      height: 32px;
-      padding: 0;
-      font-size: var(--rel-fontSizes-xs);
-    }
-
-    nav.compact button.prev-btn, nav.compact button.next-btn,
-    nav.compact a.prev-btn, nav.compact a.next-btn {
-      width: auto;
-      padding: 0 var(--rel-spacing-space-xs);
-    }
-
-    button:hover:not(:disabled),
-    a:hover:not([aria-disabled="true"]) {
-      background: var(--rel-color-bg-secondary);
-      border-color: var(--rel-color-text-primary);
-    }
-
-    button:focus-visible,
-    a:focus-visible {
-      outline: 2px solid var(--rel-colors-blue-primary);
-      outline-offset: 2px;
-    }
-
-    button:disabled,
-    a[aria-disabled="true"] {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    button[aria-current="page"],
-    a[aria-current="page"] {
-      background: var(--rel-color-bg-selected);
-      color: var(--rel-color-text-primary);
-      border-color: var(--rel-color-text-heading);
-      font-weight: var(--rel-fontWeights-semibold);
-    }
-
-    button[aria-current="page"]:hover,
-    a[aria-current="page"]:hover {
-      background: var(--rel-color-bg-selected);
-      border-color: var(--rel-color-text-heading);
-    }
-
-    .ellipsis {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 40px;
-      height: 40px;
-      color: var(--rel-color-text-placeholder);
-      font-size: var(--rel-fontSizes-sm);
-      user-select: none;
-    }
-
-    nav.compact .ellipsis {
-      width: 32px;
-      height: 32px;
-      font-size: var(--rel-fontSizes-xs);
-    }
-
-    .pagination-spacer {
-      display: inline-flex;
-      width: 40px;
-      height: 40px;
-    }
-
-    nav.compact .pagination-spacer {
-      width: 32px;
-      height: 32px;
-    }
-
-    .icon {
-      width: 16px;
-      height: 16px;
-      display: inline-block;
-    }
-
-    nav.compact .icon {
-      width: 14px;
-      height: 14px;
-    }
-
-    :host([disabled]) {
-      cursor: not-allowed;
-    }
-
-    :host([disabled]) nav {
-      opacity: 0.5;
-      pointer-events: none;
-    }
-  `;
-
-  connectedCallback() {
-    super.connectedCallback();
-    // Manually parse numeric attributes in case they were set before upgrade
-    const totalPagesAttr = this.getAttribute('total-pages');
-    if (totalPagesAttr) {
-      this.totalPages = Number(totalPagesAttr);
-    }
-    const pageAttr = this.getAttribute('page');
-    if (pageAttr) {
-      this.page = Number(pageAttr);
-    }
-    const defaultPageAttr = this.getAttribute('default-page');
-    if (defaultPageAttr) {
-      this.defaultPage = Number(defaultPageAttr);
-    }
-    this.currentPage = this.page ?? this.defaultPage;
-  }
-
-  updated(changedProperties: Map<string, any>) {
-    // Handle controlled mode: sync currentPage with page prop
-    if (changedProperties.has("page") && this.page !== undefined) {
-      this.currentPage = this.page;
-    }
-  }
-
-  private get activePage(): number {
-    return this.page ?? this.currentPage;
-  }
-
-  private generatePageItems(): PageItem[] {
-    const items: PageItem[] = [];
-    const current = this.activePage;
-    const total = this.totalPages;
-
-    if (total <= 0) return items;
-
-    items.push({ type: "prev" });
-
-    if (total <= 7) {
-      for (let i = 1; i <= total; i++) {
-        items.push({ type: "page", value: i });
-      }
-    } else if (current <= 4) {
-      // Near start: [1, 2, 3, 4, 5] [ellipsis] [last]
-      for (let i = 1; i <= 5; i++) {
-        items.push({ type: "page", value: i });
-      }
-      items.push({ type: "ellipsis" });
-      items.push({ type: "page", value: total });
-    } else if (current >= total - 3) {
-      // Near end: [1] [ellipsis] [last-4, last-3, last-2, last-1, last]
-      items.push({ type: "page", value: 1 });
-      items.push({ type: "ellipsis" });
-      for (let i = total - 4; i <= total; i++) {
-        items.push({ type: "page", value: i });
-      }
-    } else {
-      // Middle: [1] [ellipsis] [current-1, current, current+1] [ellipsis] [last]
-      items.push({ type: "page", value: 1 });
-      items.push({ type: "ellipsis" });
-      items.push({ type: "page", value: current - 1 });
-      items.push({ type: "page", value: current });
-      items.push({ type: "page", value: current + 1 });
-      items.push({ type: "ellipsis" });
-      items.push({ type: "page", value: total });
-    }
-
-    items.push({ type: "next" });
-
-    return items;
-  }
-
-  private handlePageChange(newPage: number) {
-    if (this.disabled || newPage < 1 || newPage > this.totalPages || newPage === this.activePage) {
-      return;
-    }
-
-    // If uncontrolled, update internal state
-    if (this.page === undefined) {
-      this.currentPage = newPage;
-    }
-
-    // Always emit event
-    this.dispatchEvent(
-      new CustomEvent("rel-change", {
-        detail: { page: newPage },
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  private getHref(page: number): string {
-    if (!this.hrefTemplate) return "#";
-    return this.hrefTemplate.replace(/\{page\}/, String(page));
-  }
-
-  private handleKeyDown(event: KeyboardEvent, callback: () => void) {
-    if (event.key === "Enter" || event.key === " ") {
-      event.preventDefault();
-      callback();
-    }
-  }
-
-  private renderPrevIcon() {
-    return html`
-      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-        <path d="M15 18l-6-6 6-6" />
-      </svg>
-    `;
-  }
-
-  private renderNextIcon() {
-    return html`
-      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-        <path d="M9 18l6-6-6-6" />
-      </svg>
-    `;
-  }
-
-  private renderItem(item: PageItem) {
-    const current = this.activePage;
-    const useLinks = !!this.hrefTemplate;
-
-    if (item.type === "spacer") {
-      return html`<span class="pagination-spacer"></span>`;
-    }
-
-    if (item.type === "ellipsis") {
-      return html`<span class="ellipsis">…</span>`;
-    }
-
-    if (item.type === "prev") {
-      const disabled = current === 1 || this.disabled;
-      const targetPage = current - 1;
-
-      if (useLinks) {
-        const href = disabled ? "#" : this.getHref(targetPage);
-        return html`
-          <a
-            href="${href}"
-            class="prev-btn"
-            aria-label="Go to previous page"
-            aria-disabled="${disabled}"
-            @click="${(e: Event) => {
-              if (disabled) {
-                e.preventDefault();
-                return;
-              }
-              e.preventDefault();
-              this.handlePageChange(targetPage);
-            }}"
-          >
-            ${this.variant === "icons" ? this.renderPrevIcon() : "Previous"}
-          </a>
-        `;
-      }
-
-      return html`
-        <button
-          type="button"
-          class="prev-btn"
-          aria-label="Go to previous page"
-          ?disabled="${disabled}"
-          @click="${() => this.handlePageChange(targetPage)}"
-        >
-          ${this.variant === "icons" ? this.renderPrevIcon() : "Previous"}
-        </button>
-      `;
-    }
-
-    if (item.type === "next") {
-      const disabled = current === this.totalPages || this.disabled;
-      const targetPage = current + 1;
-
-      if (useLinks) {
-        const href = disabled ? "#" : this.getHref(targetPage);
-        return html`
-          <a
-            href="${href}"
-            class="next-btn"
-            aria-label="Go to next page"
-            aria-disabled="${disabled}"
-            @click="${(e: Event) => {
-              if (disabled) {
-                e.preventDefault();
-                return;
-              }
-              e.preventDefault();
-              this.handlePageChange(targetPage);
-            }}"
-          >
-            ${this.variant === "icons" ? this.renderNextIcon() : "Next"}
-          </a>
-        `;
-      }
-
-      return html`
-        <button
-          type="button"
-          class="next-btn"
-          aria-label="Go to next page"
-          ?disabled="${disabled}"
-          @click="${() => this.handlePageChange(targetPage)}"
-        >
-          ${this.variant === "icons" ? this.renderNextIcon() : "Next"}
-        </button>
-      `;
-    }
-
-    // Page item
-    const pageNum = item.value;
-    const isCurrent = pageNum === current;
-
-    if (useLinks) {
-      const href = this.getHref(pageNum);
-      return html`
-        <a
-          href="${href}"
-          aria-label="Go to page ${pageNum}"
-          aria-current="${isCurrent ? "page" : "false"}"
-          @click="${(e: Event) => {
-            e.preventDefault();
-            this.handlePageChange(pageNum);
-          }}"
-        >
-          ${pageNum}
-        </a>
-      `;
-    }
-
-    return html`
-      <button
-        type="button"
-        aria-label="Go to page ${pageNum}"
-        aria-current="${isCurrent ? "page" : "false"}"
-        @click="${() => this.handlePageChange(pageNum)}"
-      >
-        ${pageNum}
-      </button>
-    `;
-  }
-
-  render() {
-    const items = this.generatePageItems();
-
-    return html`
-      <nav
-        class="${this.density === "compact" ? "compact" : ""}"
-        aria-label="${this.ariaLabel}"
-        role="navigation"
-      >
-        ${items.map((item) => this.renderItem(item))}
-      </nav>
-    `;
-  }
-}
+import { LitElement, html, css } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import "../../styles/vars-v2.css";
+
+@customElement("rel-pagination")
+export class RelPagination extends LitElement {
+  /** Layout type from Figma: extended (numbered pages), compact (prev/next + page text), count-text (range + nav) */
+  @property({ type: String, reflect: true })
+  type: "extended" | "compact" | "count-text" = "extended";
+
+  /** Controlled current page */
+  @property({ type: Number }) page?: number;
+  /** Uncontrolled starting page */
+  @property({ type: Number }) defaultPage = 1;
+  /** Total number of pages */
+  @property({ type: Number }) totalPages = 0;
+  /** Total items (used with perPage to auto-compute totalPages in count-text mode) */
+  @property({ type: Number }) totalItems = 0;
+  /** Items per page (count-text mode) */
+  @property({ type: Number }) perPage = 10;
+  /** Show "Viewing page X of Y" label below extended pagination */
+  @property({ type: Boolean }) showLabel = false;
+  @property({ type: Boolean, reflect: true }) disabled = false;
+  @property({ type: String }) hrefTemplate = "";
+  @property({ type: String }) ariaLabel = "Pagination";
+
+  @state() private currentPage = 1;
+
+  static styles = css`
+    :host {
+      display: inline-block;
+      font-family: var(--rel-fontFamilies-primary, 'Poppins', sans-serif);
+    }
+
+    :host([type="count-text"]) {
+      display: block;
+      width: 100%;
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    :host([disabled]) button {
+      pointer-events: none;
+    }
+
+    /* ── Root / Stack containers ──────────────────────────────── */
+
+    .pag-root {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 16px;
+    }
+
+    .pag-stack {
+      display: inline-flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .pag-count {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 16px;
+      width: 100%;
+    }
+
+    /* count-text right-side nav: no gap (40+24+40 = 104px, matches Figma) */
+    .pag-count-nav {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    /* ── Page number list (tighter 4px gap) ──────────────────── */
+
+    .pag-numbers {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    /* ── Prev / Next — circular buttons ──────────────────────── */
+
+    .pag-nav-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+      padding: 0;
+      border-radius: 1000px;
+      border: 1px solid #e5e5e5;
+      background: #ffffff;
+      cursor: pointer;
+      color: #0b0b0b;
+      box-sizing: border-box;
+      transition: background 0.15s ease;
+      flex-shrink: 0;
+    }
+
+    .pag-nav-btn:hover:not(:disabled) {
+      background: #f5f5f5;
+    }
+
+    .pag-nav-btn:focus-visible {
+      outline: 2px solid var(--rel-color-border-focus, #0059f4);
+      outline-offset: 2px;
+    }
+
+    .pag-nav-btn:disabled {
+      opacity: 0.35;
+      cursor: not-allowed;
+    }
+
+    .pag-nav-btn svg {
+      width: 20px;
+      height: 20px;
+    }
+
+    /* ── Page number buttons — square with 8px radius ─────────── */
+
+    .pag-page-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+      padding: 8px;
+      border-radius: 8px;
+      border: 1px solid #e5e5e5;
+      background: #ffffff;
+      cursor: pointer;
+      font-family: inherit;
+      font-size: 14px;
+      font-weight: 500;
+      letter-spacing: -0.3px;
+      color: #0b0b0b;
+      line-height: 22px;
+      box-sizing: border-box;
+      transition: background 0.15s ease, border-color 0.15s ease;
+    }
+
+    .pag-page-btn:hover {
+      background: #f5f5f5;
+    }
+
+    .pag-page-btn:focus-visible {
+      outline: 2px solid var(--rel-color-border-focus, #0059f4);
+      outline-offset: 2px;
+    }
+
+    .pag-page-btn[aria-current="page"] {
+      background: #e5e5e5;
+      border-color: #0b0b0b;
+    }
+
+    /* ── Ellipsis ─────────────────────────────────────────────── */
+
+    .pag-ellipsis {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+      font-size: 14px;
+      font-weight: 500;
+      letter-spacing: -0.3px;
+      color: #0b0b0b;
+      user-select: none;
+    }
+
+    /* ── Compact: "Page X of Y" ───────────────────────────────── */
+
+    .pag-page-text {
+      font-size: 14px;
+      font-weight: 500;
+      letter-spacing: -0.3px;
+      color: #0b0b0b;
+      line-height: 22px;
+      white-space: nowrap;
+    }
+
+    /* ── Count-text: "1-5 of 50" ─────────────────────────────── */
+
+    .pag-count-text {
+      font-size: 14px;
+      font-weight: 500;
+      letter-spacing: -0.3px;
+      color: #0b0b0b;
+      line-height: 22px;
+      white-space: nowrap;
+    }
+
+    /* ── Count-text: inline current page number ───────────────── */
+
+    .pag-current-num {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 40px;
+      font-size: 14px;
+      font-weight: 500;
+      letter-spacing: -0.3px;
+      color: #0b0b0b;
+      line-height: 22px;
+    }
+
+    /* ── Extended sub-label ───────────────────────────────────── */
+
+    .pag-label {
+      font-size: 14px;
+      font-weight: 400;
+      letter-spacing: -0.3px;
+      color: #7d7d7d;
+      line-height: 22px;
+      text-align: center;
+    }
+
+    /* ── Dark mode ───────────────────────────────────────────── */
+
+    :host-context([data-theme="dark"]) .pag-nav-btn,
+    [data-theme="dark"] .pag-nav-btn {
+      background: #1a1a1a;
+      border-color: #333333;
+      color: #f5f5f5;
+    }
+
+    :host-context([data-theme="dark"]) .pag-nav-btn:hover:not(:disabled),
+    [data-theme="dark"] .pag-nav-btn:hover:not(:disabled) {
+      background: #2b2b2b;
+    }
+
+    :host-context([data-theme="dark"]) .pag-page-btn,
+    [data-theme="dark"] .pag-page-btn {
+      background: #1a1a1a;
+      border-color: #333333;
+      color: #f5f5f5;
+    }
+
+    :host-context([data-theme="dark"]) .pag-page-btn:hover,
+    [data-theme="dark"] .pag-page-btn:hover {
+      background: #2b2b2b;
+    }
+
+    :host-context([data-theme="dark"]) .pag-page-btn[aria-current="page"],
+    [data-theme="dark"] .pag-page-btn[aria-current="page"] {
+      background: #333333;
+      border-color: #f5f5f5;
+    }
+
+    :host-context([data-theme="dark"]) .pag-ellipsis,
+    :host-context([data-theme="dark"]) .pag-page-text,
+    :host-context([data-theme="dark"]) .pag-count-text,
+    :host-context([data-theme="dark"]) .pag-current-num,
+    [data-theme="dark"] .pag-ellipsis,
+    [data-theme="dark"] .pag-page-text,
+    [data-theme="dark"] .pag-count-text,
+    [data-theme="dark"] .pag-current-num {
+      color: #f5f5f5;
+    }
+
+    :host-context([data-theme="dark"]) .pag-label,
+    [data-theme="dark"] .pag-label {
+      color: #a3a3a3;
+    }
+  `;
+
+  connectedCallback() {
+    super.connectedCallback();
+    const totalPagesAttr = this.getAttribute("total-pages");
+    if (totalPagesAttr) this.totalPages = Number(totalPagesAttr);
+    const pageAttr = this.getAttribute("page");
+    if (pageAttr) this.page = Number(pageAttr);
+    const defaultPageAttr = this.getAttribute("default-page");
+    if (defaultPageAttr) this.defaultPage = Number(defaultPageAttr);
+    const totalItemsAttr = this.getAttribute("total-items");
+    if (totalItemsAttr) this.totalItems = Number(totalItemsAttr);
+    const perPageAttr = this.getAttribute("per-page");
+    if (perPageAttr) this.perPage = Number(perPageAttr);
+    this.currentPage = this.page ?? this.defaultPage;
+  }
+
+  updated(changedProperties: Map<string, unknown>) {
+    if (changedProperties.has("page") && this.page !== undefined) {
+      this.currentPage = this.page;
+    }
+  }
+
+  private get activePage(): number {
+    return this.page ?? this.currentPage;
+  }
+
+  private get computedTotalPages(): number {
+    if (this.totalPages > 0) return this.totalPages;
+    if (this.totalItems > 0 && this.perPage > 0) {
+      return Math.ceil(this.totalItems / this.perPage);
+    }
+    return 0;
+  }
+
+  private generatePageNumbers(): number[] {
+    const pages: number[] = [];
+    const current = this.activePage;
+    const total = this.computedTotalPages;
+    if (total <= 0) return pages;
+    if (total <= 7) {
+      for (let i = 1; i <= total; i++) pages.push(i);
+    } else if (current <= 4) {
+      for (let i = 1; i <= 5; i++) pages.push(i);
+      pages.push(-1);
+      pages.push(total);
+    } else if (current >= total - 3) {
+      pages.push(1);
+      pages.push(-1);
+      for (let i = total - 4; i <= total; i++) pages.push(i);
+    } else {
+      pages.push(1);
+      pages.push(-1);
+      pages.push(current - 1);
+      pages.push(current);
+      pages.push(current + 1);
+      pages.push(-1);
+      pages.push(total);
+    }
+    return pages;
+  }
+
+  private handlePageChange(newPage: number) {
+    const total = this.computedTotalPages;
+    if (this.disabled || newPage < 1 || newPage > total || newPage === this.activePage) return;
+    if (this.page === undefined) this.currentPage = newPage;
+    this.dispatchEvent(
+      new CustomEvent("rel-change", {
+        detail: { page: newPage },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  private renderChevronLeft() {
+    return html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>`;
+  }
+
+  private renderChevronRight() {
+    return html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>`;
+  }
+
+  private renderNavBtn(dir: "prev" | "next") {
+    const current = this.activePage;
+    const total = this.computedTotalPages;
+    const isPrev = dir === "prev";
+    const isDisabled = isPrev ? current <= 1 : current >= total;
+    const targetPage = isPrev ? current - 1 : current + 1;
+
+    return html`
+      <button
+        type="button"
+        class="pag-nav-btn"
+        aria-label="${isPrev ? "Previous page" : "Next page"}"
+        ?disabled="${isDisabled}"
+        @click="${() => this.handlePageChange(targetPage)}"
+      >
+        ${isPrev ? this.renderChevronLeft() : this.renderChevronRight()}
+      </button>
+    `;
+  }
+
+  private renderExtended() {
+    const pages = this.generatePageNumbers();
+    const current = this.activePage;
+    const total = this.computedTotalPages;
+
+    return html`
+      <div class="pag-root" role="navigation" aria-label="${this.ariaLabel}">
+        <div class="pag-stack">
+          ${this.renderNavBtn("prev")}
+          <div class="pag-numbers">
+            ${pages.map((p) =>
+              p === -1
+                ? html`<span class="pag-ellipsis">...</span>`
+                : html`<button
+                    type="button"
+                    class="pag-page-btn"
+                    aria-label="Page ${p}"
+                    aria-current="${p === current ? "page" : "false"}"
+                    @click="${() => this.handlePageChange(p)}"
+                  >${p}</button>`
+            )}
+          </div>
+          ${this.renderNavBtn("next")}
+        </div>
+        ${this.showLabel
+          ? html`<span class="pag-label">Viewing page ${current} of ${total}</span>`
+          : null}
+      </div>
+    `;
+  }
+
+  private renderCompact() {
+    const current = this.activePage;
+    const total = this.computedTotalPages;
+
+    return html`
+      <div class="pag-stack" role="navigation" aria-label="${this.ariaLabel}">
+        ${this.renderNavBtn("prev")}
+        <span class="pag-page-text">Page ${current} of ${total}</span>
+        ${this.renderNavBtn("next")}
+      </div>
+    `;
+  }
+
+  private renderCountText() {
+    const current = this.activePage;
+    const total = this.computedTotalPages;
+    const effectiveTotalItems = this.totalItems > 0 ? this.totalItems : total * this.perPage;
+    const start = (current - 1) * this.perPage + 1;
+    const end = Math.min(current * this.perPage, effectiveTotalItems);
+
+    return html`
+      <div class="pag-count" role="navigation" aria-label="${this.ariaLabel}">
+        <span class="pag-count-text">${start}–${end} of ${effectiveTotalItems}</span>
+        <div class="pag-count-nav">
+          ${this.renderNavBtn("prev")}
+          <span class="pag-current-num">${current}</span>
+          ${this.renderNavBtn("next")}
+        </div>
+      </div>
+    `;
+  }
+
+  render() {
+    if (this.type === "compact") return this.renderCompact();
+    if (this.type === "count-text") return this.renderCountText();
+    return this.renderExtended();
+  }
+}