@diwacopilot/components 1.0.0

package/dist/collection/components/diwa-pagination/diwa-pagination-utils.js

@@ -0,0 +1,110 @@
+/**
+ * Universal pagination model generation algorithm.
+ *
+ * Ported from an upstream pagination algorithm:
+ *   packages/components/src/components/pagination/pagination-utils.ts
+ *   (which was itself adapted from ultimate-pagination)
+ *
+ * Kept: ItemType, PaginationItem, PaginationOptions, createRange,
+ *       createPaginationItems, getTotalPages, getCurrentActivePage.
+ * Dropped: deprecated allyLabel* types, maxNumberOfPageLinks.
+ */
+export var ItemType;
+(function (ItemType) {
+    ItemType[ItemType["PAGE"] = 0] = "PAGE";
+    ItemType[ItemType["ELLIPSIS"] = 1] = "ELLIPSIS";
+    ItemType[ItemType["PREVIOUS"] = 2] = "PREVIOUS";
+    ItemType[ItemType["NEXT"] = 3] = "NEXT";
+})(ItemType || (ItemType = {}));
+// ── Internal helpers ────────────────────────────────────────────────────────
+const ellipsisItem = {
+    type: ItemType.ELLIPSIS,
+    isActive: false,
+};
+const createPreviousPageLink = (options) => {
+    const { activePage } = options;
+    return {
+        type: ItemType.PREVIOUS,
+        value: Math.max(1, activePage - 1),
+        isActive: activePage > 1,
+    };
+};
+const createNextPageLink = (options) => {
+    const { activePage, pageTotal } = options;
+    return {
+        type: ItemType.NEXT,
+        value: Math.min(pageTotal, activePage + 1),
+        isActive: activePage < pageTotal,
+    };
+};
+const createPageFunctionFactory = ({ activePage, }) => {
+    return (pageNumber) => ({
+        type: ItemType.PAGE,
+        value: pageNumber,
+        isActive: pageNumber === activePage,
+        isBeforeCurrent: pageNumber === activePage - 1,
+        isBeforeBeforeCurrent: pageNumber === activePage - 2,
+        isAfterCurrent: pageNumber === activePage + 1,
+        isAfterAfterCurrent: pageNumber === activePage + 2,
+    });
+};
+// ── Public API ──────────────────────────────────────────────────────────────
+export const createRange = (start, end) => Array.from(new Array(end - start + 1), (_, i) => i + start);
+/**
+ * Builds the ordered list of pagination items (PREVIOUS, PAGE, ELLIPSIS, NEXT)
+ * for the given options. The caller is responsible for clamping `activePage`
+ * before passing it in — use `getCurrentActivePage()`.
+ */
+export const createPaginationItems = (options) => {
+    const { pageTotal, activePage, showLastPage } = options;
+    const pageRange = 1;
+    const boundaryPagesRange = 1;
+    const ellipsisSize = 1;
+    const paginationItems = [createPreviousPageLink(options)];
+    const createPage = createPageFunctionFactory(options);
+    // All pages fit without ellipsis
+    if (1 + 2 * ellipsisSize + 2 * boundaryPagesRange >= pageTotal) {
+        const allPages = createRange(1, pageTotal).map(createPage);
+        paginationItems.push(...allPages);
+    }
+    else {
+        // First page
+        paginationItems.push(createPage(1));
+        // Middle group
+        const middlePagesStart = Math.min(Math.max(activePage - pageRange, 2 + ellipsisSize), pageTotal - ellipsisSize - 2 - (showLastPage ? 1 : 0));
+        const middlePagesEnd = middlePagesStart + 2;
+        const middlePages = createRange(middlePagesStart, middlePagesEnd).map(createPage);
+        // Ellipsis / page before middle group
+        const firstEllipsisPageNumber = middlePagesStart - 1;
+        const showPageInsteadOfFirstEllipsis = firstEllipsisPageNumber === 2;
+        const firstEllipsisOrPage = showPageInsteadOfFirstEllipsis
+            ? createPage(firstEllipsisPageNumber)
+            : ellipsisItem;
+        paginationItems.push(firstEllipsisOrPage);
+        paginationItems.push(...middlePages);
+        // Ellipsis / page after middle group
+        const lastEllipsisPageNumber = middlePagesEnd + 1;
+        const showPageInsteadOfLastEllipsis = lastEllipsisPageNumber === pageTotal - (showLastPage ? 1 : 0);
+        const lastEllipsisOrPage = showPageInsteadOfLastEllipsis
+            ? createPage(lastEllipsisPageNumber)
+            : ellipsisItem;
+        paginationItems.push(lastEllipsisOrPage);
+        if (showLastPage) {
+            paginationItems.push(createPage(pageTotal));
+        }
+    }
+    paginationItems.push(createNextPageLink(options));
+    return paginationItems;
+};
+/** Clamps activePage to a valid range [1, totalPages]. */
+export const getCurrentActivePage = (activePage, totalPages) => {
+    return activePage < 1 ? 1 : activePage > totalPages ? totalPages : activePage;
+};
+/** Derives total page count, guarding against zero/negative inputs. */
+export const getTotalPages = (totalItemsCount, itemsPerPage) => {
+    if (itemsPerPage < 1)
+        return 1;
+    const total = totalItemsCount < 1 ? 1 : totalItemsCount;
+    return Math.ceil(total / itemsPerPage);
+};
+//# sourceMappingURL=diwa-pagination-utils.js.map

package/dist/collection/components/diwa-pagination/diwa-pagination-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-pagination-utils.js","sourceRoot":"","sources":["../../../src/components/diwa-pagination/diwa-pagination-utils.ts"],"names":[],"mappings":"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","sourcesContent":["/**\r\n * Universal pagination model generation algorithm.\r\n *\r\n * Ported from an upstream pagination algorithm:\n *   packages/components/src/components/pagination/pagination-utils.ts\r\n *   (which was itself adapted from ultimate-pagination)\r\n *\r\n * Kept: ItemType, PaginationItem, PaginationOptions, createRange,\r\n *       createPaginationItems, getTotalPages, getCurrentActivePage.\r\n * Dropped: deprecated allyLabel* types, maxNumberOfPageLinks.\r\n */\r\n\r\nexport type PaginationOptions = {\r\n  activePage: number;\r\n  pageTotal: number;\r\n  showLastPage: boolean;\r\n};\r\n\r\nexport type PaginationItem = {\r\n  /** Page number — relevant for clickable PAGE items; undefined for ELLIPSIS. */\r\n  value?: number;\r\n  /** True for the active page, and true for prev/next when they are actionable. */\r\n  isActive: boolean;\r\n  /** Positional flags used for responsive class names (future use). */\r\n  isBeforeCurrent?: boolean;\r\n  isBeforeBeforeCurrent?: boolean;\r\n  isAfterCurrent?: boolean;\r\n  isAfterAfterCurrent?: boolean;\r\n  type: ItemType;\r\n};\r\n\r\nexport enum ItemType {\r\n  PAGE = 0,\r\n  ELLIPSIS = 1,\r\n  PREVIOUS = 2,\r\n  NEXT = 3,\r\n}\r\n\r\n// ── Internal helpers ────────────────────────────────────────────────────────\r\n\r\nconst ellipsisItem: PaginationItem = {\r\n  type: ItemType.ELLIPSIS,\r\n  isActive: false,\r\n};\r\n\r\nconst createPreviousPageLink = (options: PaginationOptions): PaginationItem => {\r\n  const { activePage } = options;\r\n  return {\r\n    type: ItemType.PREVIOUS,\r\n    value: Math.max(1, activePage - 1),\r\n    isActive: activePage > 1,\r\n  };\r\n};\r\n\r\nconst createNextPageLink = (options: PaginationOptions): PaginationItem => {\r\n  const { activePage, pageTotal } = options;\r\n  return {\r\n    type: ItemType.NEXT,\r\n    value: Math.min(pageTotal, activePage + 1),\r\n    isActive: activePage < pageTotal,\r\n  };\r\n};\r\n\r\nconst createPageFunctionFactory = ({\r\n  activePage,\r\n}: PaginationOptions): ((pageNumber: number) => PaginationItem) => {\r\n  return (pageNumber): PaginationItem => ({\r\n    type: ItemType.PAGE,\r\n    value: pageNumber,\r\n    isActive: pageNumber === activePage,\r\n    isBeforeCurrent: pageNumber === activePage - 1,\r\n    isBeforeBeforeCurrent: pageNumber === activePage - 2,\r\n    isAfterCurrent: pageNumber === activePage + 1,\r\n    isAfterAfterCurrent: pageNumber === activePage + 2,\r\n  });\r\n};\r\n\r\n// ── Public API ──────────────────────────────────────────────────────────────\r\n\r\nexport const createRange = (start: number, end: number): number[] =>\r\n  Array.from(new Array(end - start + 1), (_, i) => i + start);\r\n\r\n/**\r\n * Builds the ordered list of pagination items (PREVIOUS, PAGE, ELLIPSIS, NEXT)\r\n * for the given options. The caller is responsible for clamping `activePage`\r\n * before passing it in — use `getCurrentActivePage()`.\r\n */\r\nexport const createPaginationItems = (options: PaginationOptions): PaginationItem[] => {\r\n  const { pageTotal, activePage, showLastPage } = options;\r\n\r\n  const pageRange = 1;\r\n  const boundaryPagesRange = 1;\r\n  const ellipsisSize = 1;\r\n  const paginationItems: PaginationItem[] = [createPreviousPageLink(options)];\r\n  const createPage = createPageFunctionFactory(options);\r\n\r\n  // All pages fit without ellipsis\r\n  if (1 + 2 * ellipsisSize + 2 * boundaryPagesRange >= pageTotal) {\r\n    const allPages = createRange(1, pageTotal).map(createPage);\r\n    paginationItems.push(...allPages);\r\n  } else {\r\n    // First page\r\n    paginationItems.push(createPage(1));\r\n\r\n    // Middle group\r\n    const middlePagesStart = Math.min(\r\n      Math.max(activePage - pageRange, 2 + ellipsisSize),\r\n      pageTotal - ellipsisSize - 2 - (showLastPage ? 1 : 0),\r\n    );\r\n    const middlePagesEnd = middlePagesStart + 2;\r\n    const middlePages = createRange(middlePagesStart, middlePagesEnd).map(createPage);\r\n\r\n    // Ellipsis / page before middle group\r\n    const firstEllipsisPageNumber = middlePagesStart - 1;\r\n    const showPageInsteadOfFirstEllipsis = firstEllipsisPageNumber === 2;\r\n    const firstEllipsisOrPage = showPageInsteadOfFirstEllipsis\r\n      ? createPage(firstEllipsisPageNumber)\r\n      : ellipsisItem;\r\n\r\n    paginationItems.push(firstEllipsisOrPage);\r\n\r\n    paginationItems.push(...middlePages);\r\n\r\n    // Ellipsis / page after middle group\r\n    const lastEllipsisPageNumber = middlePagesEnd + 1;\r\n    const showPageInsteadOfLastEllipsis =\r\n      lastEllipsisPageNumber === pageTotal - (showLastPage ? 1 : 0);\r\n    const lastEllipsisOrPage = showPageInsteadOfLastEllipsis\r\n      ? createPage(lastEllipsisPageNumber)\r\n      : ellipsisItem;\r\n    paginationItems.push(lastEllipsisOrPage);\r\n\r\n    if (showLastPage) {\r\n      paginationItems.push(createPage(pageTotal));\r\n    }\r\n  }\r\n\r\n  paginationItems.push(createNextPageLink(options));\r\n  return paginationItems;\r\n};\r\n\r\n/** Clamps activePage to a valid range [1, totalPages]. */\r\nexport const getCurrentActivePage = (activePage: number, totalPages: number): number => {\r\n  return activePage < 1 ? 1 : activePage > totalPages ? totalPages : activePage;\r\n};\r\n\r\n/** Derives total page count, guarding against zero/negative inputs. */\r\nexport const getTotalPages = (totalItemsCount: number, itemsPerPage: number): number => {\r\n  if (itemsPerPage < 1) return 1;\r\n  const total = totalItemsCount < 1 ? 1 : totalItemsCount;\r\n  return Math.ceil(total / itemsPerPage);\r\n};\r\n"]}

package/dist/collection/components/diwa-pagination/diwa-pagination.js

@@ -0,0 +1,258 @@
+import { Host, h } from "@stencil/core";
+import { getComponentCss } from "./diwa-pagination-styles";
+import { createPaginationItems, getCurrentActivePage, getTotalPages, ItemType, } from "./diwa-pagination-utils";
+/**
+ * @component diwa-pagination
+ *
+ * Splits a large data set across numbered pages with previous and next navigation.
+ * Renders up to 7 page items (prev + pages/ellipsis + next) matching Diwa's
+ * pagination visual and API contract.
+ *
+ * The active page is indicated with a bottom accent line (`--diwa-accent`) rather
+ * than a border box, keeping Diwa's minimal aesthetic.
+ *
+ * Semi-controlled: `activePage` is mutable — it updates internally on click AND
+ * emits an `update` event so the consumer can sync external state.
+ *
+ * Usage:
+ *   <diwa-pagination total-items-count="500" items-per-page="25" active-page="1"
+ *     onupdate={e => setPage(e.detail.page)} />
+ *
+ * Source lineage:
+ *   components/src/components/pagination/pagination.tsx
+ */
+export class DiwaPagination {
+    constructor() {
+        // ──────────────────────────────────────────────────────────────
+        // Props
+        // ──────────────────────────────────────────────────────────────
+        /** Per-component theme override (`light` / `dark`). */
+        this.theme = 'dark';
+        /** Total number of items in the data set. */
+        this.totalItemsCount = 1;
+        /** Number of items shown per page. */
+        this.itemsPerPage = 1;
+        /**
+         * Index of the currently active page (1-based).
+         * Semi-controlled: mutates internally on click and emits `update`.
+         */
+        this.activePage = 1;
+        /** Show a direct link to the last page (in addition to the prev/next buttons). */
+        this.showLastPage = true;
+        /**
+         * Override the default aria-label wording for prev/next/page buttons and the nav element.
+         * Useful for localisation.
+         * Default: `{ root: 'Pagination', prev: 'Previous page', next: 'Next page', page: 'Page' }`
+         */
+        this.intl = {
+            root: 'Pagination',
+            prev: 'Previous page',
+            next: 'Next page',
+            page: 'Page',
+        };
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Private helpers
+    // ──────────────────────────────────────────────────────────────
+    handleClick(page) {
+        if (page !== this.activePage) {
+            this.update.emit({ page, previousPage: this.activePage });
+            this.activePage = page;
+        }
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Render
+    // ──────────────────────────────────────────────────────────────
+    render() {
+        var _a, _b, _c, _d, _e;
+        const pageTotal = getTotalPages(this.totalItemsCount, this.itemsPerPage);
+        const currentPage = getCurrentActivePage(this.activePage, pageTotal);
+        const items = createPaginationItems({
+            activePage: currentPage,
+            pageTotal,
+            showLastPage: this.showLastPage,
+        });
+        const intl = (_a = this.intl) !== null && _a !== void 0 ? _a : {};
+        const rootLabel = (_b = intl.root) !== null && _b !== void 0 ? _b : 'Pagination';
+        const prevLabel = (_c = intl.prev) !== null && _c !== void 0 ? _c : 'Previous page';
+        const nextLabel = (_d = intl.next) !== null && _d !== void 0 ? _d : 'Next page';
+        const pageLabel = (_e = intl.page) !== null && _e !== void 0 ? _e : 'Page';
+        return (h(Host, { key: '5ab4f9042518982631f8b0276acc3de703344ab7', "data-theme": this.theme }, h("style", { key: '83777127af3cd7fba90bcf359c0727ecb478019d', innerHTML: getComponentCss() }), h("nav", { key: '9ba68ea091b61589dd7ef2b9bda3fab01f841efd', "aria-label": rootLabel, class: "nav" }, h("ul", { key: '819b9d7b344ec50b2a15241278438e18bb20cdfb', class: "list" }, items.map((item, index) => {
+            const { type, isActive, value } = item;
+            if (type === ItemType.PREVIOUS) {
+                return (h("li", { key: "prev" }, h("button", { class: "btn", disabled: !isActive, "aria-label": prevLabel, onClick: () => isActive && this.handleClick(value) }, h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("polyline", { points: "15 18 9 12 15 6" })))));
+            }
+            if (type === ItemType.NEXT) {
+                return (h("li", { key: "next" }, h("button", { class: "btn", disabled: !isActive, "aria-label": nextLabel, onClick: () => isActive && this.handleClick(value) }, h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("polyline", { points: "9 18 15 12 9 6" })))));
+            }
+            if (type === ItemType.ELLIPSIS) {
+                return (h("li", { key: `ellipsis-${index}` }, h("span", { class: "ellipsis", "aria-hidden": "true" }, "\u2026")));
+            }
+            // ItemType.PAGE
+            return (h("li", { key: value }, h("button", { class: "btn", "aria-label": `${pageLabel} ${value}`, "aria-current": isActive ? 'page' : undefined, onClick: () => this.handleClick(value) }, value)));
+        })))));
+    }
+    static get is() { return "diwa-pagination"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Theme",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {
+                        "Theme": {
+                            "location": "import",
+                            "path": "../../utils/styles",
+                            "id": "src/utils/styles.ts::Theme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Per-component theme override (`light` / `dark`)."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": true,
+                "defaultValue": "'dark'"
+            },
+            "totalItemsCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Total number of items in the data set."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "total-items-count",
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "itemsPerPage": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of items shown per page."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "items-per-page",
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "activePage": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Index of the currently active page (1-based).\r\nSemi-controlled: mutates internally on click and emits `update`."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "active-page",
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "showLastPage": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show a direct link to the last page (in addition to the prev/next buttons)."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-last-page",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "intl": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "PaginationIntl",
+                    "resolved": "{ root?: string | undefined; prev?: string | undefined; next?: string | undefined; page?: string | undefined; }",
+                    "references": {
+                        "PaginationIntl": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-pagination/types.ts::PaginationIntl"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Override the default aria-label wording for prev/next/page buttons and the nav element.\r\nUseful for localisation.\r\nDefault: `{ root: 'Pagination', prev: 'Previous page', next: 'Next page', page: 'Page' }`"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{\r\n    root: 'Pagination',\r\n    prev: 'Previous page',\r\n    next: 'Next page',\r\n    page: 'Page',\r\n  }"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "update",
+                "name": "update",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user navigates to a different page.\r\n\r\nReact consumers: use the lowercase `onupdate` prop:\r\n```jsx\r\n<diwa-pagination onupdate={e => setPage(e.detail.page)} />\r\n```"
+                },
+                "complexType": {
+                    "original": "PaginationUpdateEventDetail",
+                    "resolved": "{ page: number; previousPage: number; }",
+                    "references": {
+                        "PaginationUpdateEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-pagination/types.ts::PaginationUpdateEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=diwa-pagination.js.map

package/dist/collection/components/diwa-pagination/diwa-pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-pagination.js","sourceRoot":"","sources":["../../../src/components/diwa-pagination/diwa-pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAqB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAG5F,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EACL,qBAAqB,EACrB,oBAAoB,EACpB,aAAa,EACb,QAAQ,GACT,MAAM,yBAAyB,CAAC;AAEjC;;;;;;;;;;;;;;;;;;;GAmBG;AAKH,MAAM,OAAO,cAAc;IAJ3B;QAOE,iEAAiE;QACjE,QAAQ;QACR,iEAAiE;QAEjE,uDAAuD;QAC9B,UAAK,GAAU,MAAM,CAAC;QAE/C,6CAA6C;QACrC,oBAAe,GAAW,CAAC,CAAC;QAEpC,sCAAsC;QAC9B,iBAAY,GAAW,CAAC,CAAC;QAEjC;;;WAGG;QACsB,eAAU,GAAW,CAAC,CAAC;QAEhD,kFAAkF;QAC1E,iBAAY,GAAY,IAAI,CAAC;QAErC;;;;WAIG;QACK,SAAI,GAAmB;YAC7B,IAAI,EAAE,YAAY;YAClB,IAAI,EAAE,eAAe;YACrB,IAAI,EAAE,WAAW;YACjB,IAAI,EAAE,MAAM;SACb,CAAC;KA4IH;IA3HC,iEAAiE;IACjE,kBAAkB;IAClB,iEAAiE;IAEzD,WAAW,CAAC,IAAY;QAC9B,IAAI,IAAI,KAAK,IAAI,CAAC,UAAU,EAAE,CAAC;YAC7B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;YAC1D,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACzB,CAAC;IACH,CAAC;IAED,iEAAiE;IACjE,SAAS;IACT,iEAAiE;IAEjE,MAAM;;QACJ,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QACzE,MAAM,WAAW,GAAG,oBAAoB,CAAC,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;QACrE,MAAM,KAAK,GAAG,qBAAqB,CAAC;YAClC,UAAU,EAAE,WAAW;YACvB,SAAS;YACT,YAAY,EAAE,IAAI,CAAC,YAAY;SAChC,CAAC,CAAC;QAEH,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,IAAI,mCAAI,EAAE,CAAC;QAC7B,MAAM,SAAS,GAAG,MAAA,IAAI,CAAC,IAAI,mCAAI,YAAY,CAAC;QAC5C,MAAM,SAAS,GAAG,MAAA,IAAI,CAAC,IAAI,mCAAI,eAAe,CAAC;QAC/C,MAAM,SAAS,GAAG,MAAA,IAAI,CAAC,IAAI,mCAAI,WAAW,CAAC;QAC3C,MAAM,SAAS,GAAG,MAAA,IAAI,CAAC,IAAI,mCAAI,MAAM,CAAC;QAEtC,OAAO,CACL,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK;YAC1B,8DAAO,SAAS,EAAE,eAAe,EAAE,GAAI;YACvC,0EAAiB,SAAS,EAAE,KAAK,EAAC,KAAK;gBACrC,2DAAI,KAAK,EAAC,MAAM,IACb,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;oBACzB,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;oBAEvC,IAAI,IAAI,KAAK,QAAQ,CAAC,QAAQ,EAAE,CAAC;wBAC/B,OAAO,CACL,UAAI,GAAG,EAAC,MAAM;4BACZ,cACE,KAAK,EAAC,KAAK,EACX,QAAQ,EAAE,CAAC,QAAQ,gBACP,SAAS,EACrB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,CAAC,KAAM,CAAC;gCAGnD,WACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,kBACR,GAAG,oBACD,OAAO,qBACN,OAAO,iBACX,MAAM;oCAElB,gBAAU,MAAM,EAAC,iBAAiB,GAAG,CACjC,CACC,CACN,CACN,CAAC;oBACJ,CAAC;oBAED,IAAI,IAAI,KAAK,QAAQ,CAAC,IAAI,EAAE,CAAC;wBAC3B,OAAO,CACL,UAAI,GAAG,EAAC,MAAM;4BACZ,cACE,KAAK,EAAC,KAAK,EACX,QAAQ,EAAE,CAAC,QAAQ,gBACP,SAAS,EACrB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,CAAC,KAAM,CAAC;gCAGnD,WACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,kBACR,GAAG,oBACD,OAAO,qBACN,OAAO,iBACX,MAAM;oCAElB,gBAAU,MAAM,EAAC,gBAAgB,GAAG,CAChC,CACC,CACN,CACN,CAAC;oBACJ,CAAC;oBAED,IAAI,IAAI,KAAK,QAAQ,CAAC,QAAQ,EAAE,CAAC;wBAC/B,OAAO,CACL,UAAI,GAAG,EAAE,YAAY,KAAK,EAAE;4BAC1B,YAAM,KAAK,EAAC,UAAU,iBAAa,MAAM,aAElC,CACJ,CACN,CAAC;oBACJ,CAAC;oBAED,gBAAgB;oBAChB,OAAO,CACL,UAAI,GAAG,EAAE,KAAK;wBACZ,cACE,KAAK,EAAC,KAAK,gBACC,GAAG,SAAS,IAAI,KAAK,EAAE,kBACrB,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC3C,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAM,CAAC,IAEtC,KAAK,CACC,CACN,CACN,CAAC;gBACJ,CAAC,CAAC,CACC,CACD,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, type EventEmitter, Host, Prop, h } from '@stencil/core';\r\nimport type { Theme } from '../../utils/styles';\r\nimport type { PaginationIntl, PaginationUpdateEventDetail } from './types';\r\nimport { getComponentCss } from './diwa-pagination-styles';\r\nimport {\r\n  createPaginationItems,\r\n  getCurrentActivePage,\r\n  getTotalPages,\r\n  ItemType,\r\n} from './diwa-pagination-utils';\r\n\r\n/**\r\n * @component diwa-pagination\r\n *\r\n * Splits a large data set across numbered pages with previous and next navigation.\r\n * Renders up to 7 page items (prev + pages/ellipsis + next) matching Diwa's\n * pagination visual and API contract.\n *\r\n * The active page is indicated with a bottom accent line (`--diwa-accent`) rather\r\n * than a border box, keeping Diwa's minimal aesthetic.\r\n *\r\n * Semi-controlled: `activePage` is mutable — it updates internally on click AND\r\n * emits an `update` event so the consumer can sync external state.\r\n *\r\n * Usage:\r\n *   <diwa-pagination total-items-count=\"500\" items-per-page=\"25\" active-page=\"1\"\r\n *     onupdate={e => setPage(e.detail.page)} />\r\n *\r\n * Source lineage:\n *   components/src/components/pagination/pagination.tsx\n */\r\n@Component({\r\n  tag: 'diwa-pagination',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaPagination {\r\n  @Element() host!: HTMLDiwaPaginationElement;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Props\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** Per-component theme override (`light` / `dark`). */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /** Total number of items in the data set. */\r\n  @Prop() totalItemsCount: number = 1;\r\n\r\n  /** Number of items shown per page. */\r\n  @Prop() itemsPerPage: number = 1;\r\n\r\n  /**\r\n   * Index of the currently active page (1-based).\r\n   * Semi-controlled: mutates internally on click and emits `update`.\r\n   */\r\n  @Prop({ mutable: true }) activePage: number = 1;\r\n\r\n  /** Show a direct link to the last page (in addition to the prev/next buttons). */\r\n  @Prop() showLastPage: boolean = true;\r\n\r\n  /**\r\n   * Override the default aria-label wording for prev/next/page buttons and the nav element.\r\n   * Useful for localisation.\r\n   * Default: `{ root: 'Pagination', prev: 'Previous page', next: 'Next page', page: 'Page' }`\r\n   */\r\n  @Prop() intl: PaginationIntl = {\r\n    root: 'Pagination',\r\n    prev: 'Previous page',\r\n    next: 'Next page',\r\n    page: 'Page',\r\n  };\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Events\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /**\r\n   * Emitted when the user navigates to a different page.\r\n   *\r\n   * React consumers: use the lowercase `onupdate` prop:\r\n   * ```jsx\r\n   * <diwa-pagination onupdate={e => setPage(e.detail.page)} />\r\n   * ```\r\n   */\r\n  @Event({ bubbles: false, composed: false })\r\n  update!: EventEmitter<PaginationUpdateEventDetail>;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Private helpers\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  private handleClick(page: number): void {\r\n    if (page !== this.activePage) {\r\n      this.update.emit({ page, previousPage: this.activePage });\r\n      this.activePage = page;\r\n    }\r\n  }\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  render() {\r\n    const pageTotal = getTotalPages(this.totalItemsCount, this.itemsPerPage);\r\n    const currentPage = getCurrentActivePage(this.activePage, pageTotal);\r\n    const items = createPaginationItems({\r\n      activePage: currentPage,\r\n      pageTotal,\r\n      showLastPage: this.showLastPage,\r\n    });\r\n\r\n    const intl = this.intl ?? {};\r\n    const rootLabel = intl.root ?? 'Pagination';\r\n    const prevLabel = intl.prev ?? 'Previous page';\r\n    const nextLabel = intl.next ?? 'Next page';\r\n    const pageLabel = intl.page ?? 'Page';\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss()} />\r\n        <nav aria-label={rootLabel} class=\"nav\">\r\n          <ul class=\"list\">\r\n            {items.map((item, index) => {\r\n              const { type, isActive, value } = item;\r\n\r\n              if (type === ItemType.PREVIOUS) {\r\n                return (\r\n                  <li key=\"prev\">\r\n                    <button\r\n                      class=\"btn\"\r\n                      disabled={!isActive}\r\n                      aria-label={prevLabel}\r\n                      onClick={() => isActive && this.handleClick(value!)}\r\n                    >\r\n                      {/* Lucide ChevronLeft 16×16 */}\r\n                      <svg\r\n                        width=\"16\"\r\n                        height=\"16\"\r\n                        viewBox=\"0 0 24 24\"\r\n                        fill=\"none\"\r\n                        stroke=\"currentColor\"\r\n                        stroke-width=\"2\"\r\n                        stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\"\r\n                        aria-hidden=\"true\"\r\n                      >\r\n                        <polyline points=\"15 18 9 12 15 6\" />\r\n                      </svg>\r\n                    </button>\r\n                  </li>\r\n                );\r\n              }\r\n\r\n              if (type === ItemType.NEXT) {\r\n                return (\r\n                  <li key=\"next\">\r\n                    <button\r\n                      class=\"btn\"\r\n                      disabled={!isActive}\r\n                      aria-label={nextLabel}\r\n                      onClick={() => isActive && this.handleClick(value!)}\r\n                    >\r\n                      {/* Lucide ChevronRight 16×16 */}\r\n                      <svg\r\n                        width=\"16\"\r\n                        height=\"16\"\r\n                        viewBox=\"0 0 24 24\"\r\n                        fill=\"none\"\r\n                        stroke=\"currentColor\"\r\n                        stroke-width=\"2\"\r\n                        stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\"\r\n                        aria-hidden=\"true\"\r\n                      >\r\n                        <polyline points=\"9 18 15 12 9 6\" />\r\n                      </svg>\r\n                    </button>\r\n                  </li>\r\n                );\r\n              }\r\n\r\n              if (type === ItemType.ELLIPSIS) {\r\n                return (\r\n                  <li key={`ellipsis-${index}`}>\r\n                    <span class=\"ellipsis\" aria-hidden=\"true\">\r\n                      …\r\n                    </span>\r\n                  </li>\r\n                );\r\n              }\r\n\r\n              // ItemType.PAGE\r\n              return (\r\n                <li key={value}>\r\n                  <button\r\n                    class=\"btn\"\r\n                    aria-label={`${pageLabel} ${value}`}\r\n                    aria-current={isActive ? 'page' : undefined}\r\n                    onClick={() => this.handleClick(value!)}\r\n                  >\r\n                    {value}\r\n                  </button>\r\n                </li>\r\n              );\r\n            })}\r\n          </ul>\r\n        </nav>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/diwa-pagination/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/collection/components/diwa-pagination/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/diwa-pagination/types.ts"],"names":[],"mappings":"AAAA;;GAEG","sourcesContent":["/**\r\n * diwa-pagination — Public TypeScript types\r\n */\r\n\r\n/** Override the default wording used for aria-labels on prev/next and page buttons. */\r\nexport type PaginationIntl = Partial<Record<'root' | 'prev' | 'next' | 'page', string>>;\r\n\r\n/** Emitted by the `update` event when the active page changes. */\r\nexport type PaginationUpdateEventDetail = {\r\n  page: number;\r\n  previousPage: number;\r\n};\r\n"]}

package/dist/collection/components/diwa-pin-code/diwa-pin-code-styles.js

@@ -0,0 +1,82 @@
+import { getReducedMotionStyle } from "../../utils/styles";
+export const getComponentCss = (state, disabled, compact) => {
+    const borderColor = state === 'error'
+        ? 'var(--diwa-notification-error)'
+        : state === 'success'
+            ? 'var(--diwa-notification-success)'
+            : 'var(--diwa-input-border, var(--diwa-border))';
+    const messageColor = state === 'error'
+        ? 'var(--diwa-notification-error)'
+        : state === 'success'
+            ? 'var(--diwa-notification-success)'
+            : 'var(--diwa-text-secondary)';
+    const boxSize = compact ? '36px' : '44px';
+    return `
+    :host {
+      display: inline-block;
+      font-family: var(--diwa-font-family-base);
+      outline: none;
+    }
+    :host([hidden]) {
+      display: none;
+    }
+    .root {
+      display: flex;
+      flex-direction: column;
+      gap: var(--diwa-space-2);
+    }
+    .label-row {
+      display: flex;
+      align-items: baseline;
+      gap: var(--diwa-space-1);
+    }
+    .label {
+      font-size: var(--diwa-font-size-sm);
+      font-weight: var(--diwa-font-weight-semibold);
+      color: var(--diwa-text-secondary);
+      line-height: var(--diwa-line-height-normal);
+    }
+    .required {
+      color: var(--diwa-notification-error);
+    }
+    .boxes {
+      display: flex;
+      gap: var(--diwa-space-3);
+    }
+    .box {
+      width: ${boxSize};
+      height: ${boxSize};
+      padding: 0;
+      text-align: center;
+      font-family: var(--diwa-font-family-base);
+      font-size: ${compact ? 'var(--diwa-font-size-base)' : 'var(--diwa-font-size-lg)'};
+      font-weight: var(--diwa-font-weight-semibold);
+      color: var(--diwa-text-primary);
+      background: var(--diwa-bg-input);
+      border: var(--diwa-border-width-thin) solid ${borderColor};
+      border-radius: var(--diwa-radius-md);
+      outline: none;
+      transition: border-color var(--diwa-transition-base);
+      box-sizing: border-box;
+      ${disabled ? 'opacity: 0.5; pointer-events: none;' : ''}
+    }
+    .box:focus {
+      border-color: var(--diwa-input-border-focus, var(--diwa-border-focus));
+    }
+    .description {
+      font-size: var(--diwa-font-size-sm);
+      color: var(--diwa-text-secondary);
+      line-height: var(--diwa-line-height-normal);
+      margin: 0;
+    }
+    .message {
+      font-size: var(--diwa-font-size-sm);
+      color: ${messageColor};
+      line-height: var(--diwa-line-height-normal);
+      margin: 0;
+    }
+
+    ${getReducedMotionStyle('input')}
+  `;
+};
+//# sourceMappingURL=diwa-pin-code-styles.js.map

package/dist/collection/components/diwa-pin-code/diwa-pin-code-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-pin-code-styles.js","sourceRoot":"","sources":["../../../src/components/diwa-pin-code/diwa-pin-code-styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAE3D,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,KAAsB,EACtB,QAAiB,EACjB,OAAgB,EACR,EAAE;IACV,MAAM,WAAW,GACf,KAAK,KAAK,OAAO;QACf,CAAC,CAAC,gCAAgC;QAClC,CAAC,CAAC,KAAK,KAAK,SAAS;YACnB,CAAC,CAAC,kCAAkC;YACpC,CAAC,CAAC,8CAA8C,CAAC;IAEvD,MAAM,YAAY,GAChB,KAAK,KAAK,OAAO;QACf,CAAC,CAAC,gCAAgC;QAClC,CAAC,CAAC,KAAK,KAAK,SAAS;YACnB,CAAC,CAAC,kCAAkC;YACpC,CAAC,CAAC,4BAA4B,CAAC;IAErC,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;IAE1C,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAiCM,OAAO;gBACN,OAAO;;;;mBAIJ,OAAO,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,0BAA0B;;;;oDAIlC,WAAW;;;;;QAKvD,QAAQ,CAAC,CAAC,CAAC,qCAAqC,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;eAa9C,YAAY;;;;;MAKrB,qBAAqB,CAAC,OAAO,CAAC;GACjC,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import type { InputFieldState } from '../diwa-input/types';\r\nimport { getReducedMotionStyle } from '../../utils/styles';\r\n\r\nexport const getComponentCss = (\r\n  state: InputFieldState,\r\n  disabled: boolean,\r\n  compact: boolean,\r\n): string => {\r\n  const borderColor =\r\n    state === 'error'\r\n      ? 'var(--diwa-notification-error)'\r\n      : state === 'success'\r\n        ? 'var(--diwa-notification-success)'\r\n        : 'var(--diwa-input-border, var(--diwa-border))';\r\n\r\n  const messageColor =\r\n    state === 'error'\r\n      ? 'var(--diwa-notification-error)'\r\n      : state === 'success'\r\n        ? 'var(--diwa-notification-success)'\r\n        : 'var(--diwa-text-secondary)';\r\n\r\n  const boxSize = compact ? '36px' : '44px';\r\n\r\n  return `\r\n    :host {\r\n      display: inline-block;\r\n      font-family: var(--diwa-font-family-base);\r\n      outline: none;\r\n    }\r\n    :host([hidden]) {\r\n      display: none;\r\n    }\r\n    .root {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: var(--diwa-space-2);\r\n    }\r\n    .label-row {\r\n      display: flex;\r\n      align-items: baseline;\r\n      gap: var(--diwa-space-1);\r\n    }\r\n    .label {\r\n      font-size: var(--diwa-font-size-sm);\r\n      font-weight: var(--diwa-font-weight-semibold);\r\n      color: var(--diwa-text-secondary);\r\n      line-height: var(--diwa-line-height-normal);\r\n    }\r\n    .required {\r\n      color: var(--diwa-notification-error);\r\n    }\r\n    .boxes {\r\n      display: flex;\r\n      gap: var(--diwa-space-3);\r\n    }\r\n    .box {\r\n      width: ${boxSize};\r\n      height: ${boxSize};\r\n      padding: 0;\r\n      text-align: center;\r\n      font-family: var(--diwa-font-family-base);\r\n      font-size: ${compact ? 'var(--diwa-font-size-base)' : 'var(--diwa-font-size-lg)'};\r\n      font-weight: var(--diwa-font-weight-semibold);\r\n      color: var(--diwa-text-primary);\r\n      background: var(--diwa-bg-input);\r\n      border: var(--diwa-border-width-thin) solid ${borderColor};\r\n      border-radius: var(--diwa-radius-md);\r\n      outline: none;\r\n      transition: border-color var(--diwa-transition-base);\r\n      box-sizing: border-box;\r\n      ${disabled ? 'opacity: 0.5; pointer-events: none;' : ''}\r\n    }\r\n    .box:focus {\r\n      border-color: var(--diwa-input-border-focus, var(--diwa-border-focus));\r\n    }\r\n    .description {\r\n      font-size: var(--diwa-font-size-sm);\r\n      color: var(--diwa-text-secondary);\r\n      line-height: var(--diwa-line-height-normal);\r\n      margin: 0;\r\n    }\r\n    .message {\r\n      font-size: var(--diwa-font-size-sm);\r\n      color: ${messageColor};\r\n      line-height: var(--diwa-line-height-normal);\r\n      margin: 0;\r\n    }\r\n\r\n    ${getReducedMotionStyle('input')}\r\n  `;\r\n};\r\n"]}