@xmesh/system-design 0.0.1

package/dist/lit/components/pagination/index.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from "lit";
+import type { TemplateResult } from "lit";
+type PaginationSize = "xs" | "sm" | "md" | "lg";
+export interface PaginationPageChangeDetail {
+    page: number;
+}
+declare class XmPagination extends LitElement {
+    page: number;
+    total: number;
+    siblings: number;
+    size: PaginationSize;
+    render(): TemplateResult;
+    private _clamp;
+    private _goto;
+    private _pageWindow;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "xm-pagination": XmPagination;
+    }
+}
+export {};

package/dist/lit/components/pagination/index.js

@@ -0,0 +1,184 @@
+/*
+  pagination/index.ts — <xm-pagination>, numbered page controls.
+
+  <xm-pagination> — prev / numbered pages (with ellipsis truncation) / next.
+  The current page is the coral page indicator. Edge controls disable on the
+  first / last page with the shared reduced-emphasis treatment.
+
+  Authoring:
+    <xm-pagination page="5" total="20"></xm-pagination>
+    el.addEventListener("xm-pagination-page-change", (e) => e.detail.page);
+
+  Properties:
+    page       Number — current page (1-based; uncontrolled-first initial)
+    total      Number — total page count
+    siblings   Number — page buttons on each side of current (default 1)
+    size       "xs" | "sm" | "md" | "lg"   (default "md")
+
+  Events (both carry detail.page: number; bubbles + composed):
+    xm-pagination-page-change   canonical paging event (AGENTS.md contract)
+    change                      native-tier mirror (AD-8a); identical payload
+
+  Surface / ink (AD-13): a transparent control row tracing its host surface.
+  The current page is a coral chip (on-primary ink, matched to the coral fill);
+  idle pages take on-surface-variant ink. Hairline 1px borders only.
+
+  Shadow DOM; Lit from lit; sibling + primitives CSS via
+  the built-file-relative new URL(...). Prev/next chevrons are shared
+  primitives icons. BEM block `pagination`.
+*/
+var __decorate = (this && this.__decorate) || function (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;
+};
+import { LitElement, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+// Resolve CSS relative to the *built* file:
+// lit/build/components/pagination/index.js → ../...
+const PAGINATION_CSS = new URL("../pagination/index.css", import.meta.url).href;
+const PRIMITIVES_CSS = new URL("../primitives/index.css", import.meta.url).href;
+let XmPagination = class XmPagination extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.page = 1;
+        this.total = 1;
+        this.siblings = 1;
+        this.size = "md";
+    }
+    render() {
+        const total = Math.max(1, Math.floor(this.total));
+        const page = this._clamp(this.page, total);
+        const size = ["xs", "sm", "md", "lg"].includes(this.size)
+            ? this.size
+            : "md";
+        const tokens = this._pageWindow(page, total);
+        const atFirst = page <= 1;
+        const atLast = page >= total;
+        return html `
+      <link rel="stylesheet" href="${PRIMITIVES_CSS}" />
+      <link rel="stylesheet" href="${PAGINATION_CSS}" />
+      <style>
+        :host {
+          display: inline-block;
+        }
+        :host([hidden]) {
+          display: none;
+        }
+      </style>
+      <nav class="pagination pagination--${size}" aria-label="Pagination">
+        <button
+          type="button"
+          class="pagination__item pagination__prev"
+          aria-label="Previous page"
+          ?disabled=${atFirst}
+          @click=${() => this._goto(page - 1, total)}
+        >
+          <xm-chevron-left-icon size="16"></xm-chevron-left-icon>
+        </button>
+
+        ${tokens.map((token) => token === "ellipsis"
+            ? html `<span class="pagination__ellipsis" aria-hidden="true">…</span>`
+            : html `
+                <button
+                  type="button"
+                  class="pagination__item pagination__page ${token === page
+                ? "pagination__page--current"
+                : ""}"
+                  aria-label="Page ${token}"
+                  aria-current=${token === page ? "page" : nothing}
+                  @click=${() => this._goto(token, total)}
+                >
+                  ${token}
+                </button>
+              `)}
+
+        <button
+          type="button"
+          class="pagination__item pagination__next"
+          aria-label="Next page"
+          ?disabled=${atLast}
+          @click=${() => this._goto(page + 1, total)}
+        >
+          <xm-chevron-right-icon size="16"></xm-chevron-right-icon>
+        </button>
+      </nav>
+    `;
+    }
+    _clamp(value, total) {
+        const n = Math.floor(value);
+        if (Number.isNaN(n) || n < 1)
+            return 1;
+        if (n > total)
+            return total;
+        return n;
+    }
+    _goto(target, total) {
+        const next = this._clamp(target, total);
+        if (next === this.page)
+            return;
+        this.page = next;
+        const detail = { page: next };
+        this.dispatchEvent(new CustomEvent("xm-pagination-page-change", {
+            detail,
+            bubbles: true,
+            composed: true,
+        }));
+        this.dispatchEvent(new CustomEvent("change", {
+            detail,
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    // Compute the visible page window with ellipsis truncation, e.g.
+    // 1 … 4 5 6 … 20. Always shows first + last; `siblings` pages flank current.
+    _pageWindow(page, total) {
+        const siblings = Math.max(0, Math.floor(this.siblings));
+        // First + last + current + 2*siblings + 2 ellipses ≈ the dense threshold.
+        const dense = siblings * 2 + 5;
+        if (total <= dense) {
+            return Array.from({ length: total }, (_, i) => i + 1);
+        }
+        const left = Math.max(page - siblings, 1);
+        const right = Math.min(page + siblings, total);
+        const showLeftEllipsis = left > 2;
+        const showRightEllipsis = right < total - 1;
+        const tokens = [1];
+        if (showLeftEllipsis) {
+            tokens.push("ellipsis");
+        }
+        else {
+            for (let p = 2; p < left; p++)
+                tokens.push(p);
+        }
+        for (let p = left; p <= right; p++) {
+            if (p !== 1 && p !== total)
+                tokens.push(p);
+        }
+        if (showRightEllipsis) {
+            tokens.push("ellipsis");
+        }
+        else {
+            for (let p = right + 1; p < total; p++)
+                tokens.push(p);
+        }
+        tokens.push(total);
+        return tokens;
+    }
+};
+__decorate([
+    property({ type: Number })
+], XmPagination.prototype, "page", void 0);
+__decorate([
+    property({ type: Number })
+], XmPagination.prototype, "total", void 0);
+__decorate([
+    property({ type: Number })
+], XmPagination.prototype, "siblings", void 0);
+__decorate([
+    property({ type: String })
+], XmPagination.prototype, "size", void 0);
+XmPagination = __decorate([
+    customElement("xm-pagination")
+], XmPagination);