@diwacopilot/components 1.1.1 → 1.2.1

package/dist-custom-elements/diwa-pagination.js

@@ -1,329 +1 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-5eacc7d0.js';
-import { g as getFocusStyle, a as getReducedMotionStyle } from './p-70bbb21a.js';
-
-const getComponentCss = () => `
-
-  /* ── Host ─────────────────────────────────────────────────────────── */
-
-  :host {
-    display: block;
-    font-family: var(--diwa-font-family-base);
-    outline: none;
-  }
-
-  :host([hidden]) {
-    display: none;
-  }
-
-  /* ── Nav wrapper ──────────────────────────────────────────────────── */
-
-  .nav {
-    display: flex;
-    justify-content: center;
-    user-select: none;
-  }
-
-  /* ── Item list ────────────────────────────────────────────────────── */
-
-  .list {
-    display: flex;
-    align-items: center;
-    gap: var(--diwa-space-1);
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  /* Extra breathing room between prev/next and the page number group */
-  .list > li:first-child {
-    margin-inline-end: var(--diwa-space-2);
-  }
-
-  .list > li:last-child {
-    margin-inline-start: var(--diwa-space-2);
-  }
-
-  /* ── Shared button base ───────────────────────────────────────────── */
-
-  .btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--diwa-pagination-item-size);
-    height: var(--diwa-pagination-item-size);
-    box-sizing: border-box;
-    padding: 0;
-    border: var(--diwa-border-width-medium) solid transparent;
-    border-radius: var(--diwa-radius-md);
-    background: transparent;
-    color: var(--diwa-text-primary);
-    font-size: var(--diwa-font-size-sm);
-    font-family: inherit;
-    font-weight: var(--diwa-font-weight-normal);
-    line-height: 1;
-    cursor: pointer;
-    transition: background-color var(--diwa-transition-fast),
-                border-color var(--diwa-transition-fast);
-  }
-
-  /* ── Hover ────────────────────────────────────────────────────────── */
-
-  .btn:hover:not(:disabled):not([aria-current]) {
-    background: var(--diwa-bg-hover);
-  }
-
-  /* ── Active page ──────────────────────────────────────────────────── */
-
-  /* Diwa brand treatment: bottom accent line instead of PDS border box */
-  .btn[aria-current="page"] {
-    border-bottom-color: var(--diwa-accent);
-    cursor: default;
-  }
-
-  /* ── Disabled (prev/next at boundaries) ──────────────────────────── */
-
-  .btn:disabled {
-    opacity: 0.38;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  /* ── Ellipsis ─────────────────────────────────────────────────────── */
-
-  .ellipsis {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--diwa-pagination-item-size);
-    height: var(--diwa-pagination-item-size);
-    color: var(--diwa-text-secondary);
-    font-size: var(--diwa-font-size-sm);
-    cursor: default;
-    user-select: none;
-  }
-
-  /* ── Focus ring ───────────────────────────────────────────────────── */
-
-  ${getFocusStyle('.btn')}
-
-  /* ── Reduced motion ───────────────────────────────────────────────── */
-
-  ${getReducedMotionStyle('.btn')}
-`;
-
-/**
- * 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.
- */
-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 ──────────────────────────────────────────────────────────────
-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()`.
- */
-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]. */
-const getCurrentActivePage = (activePage, totalPages) => {
-    return activePage < 1 ? 1 : activePage > totalPages ? totalPages : activePage;
-};
-/** Derives total page count, guarding against zero/negative inputs. */
-const getTotalPages = (totalItemsCount, itemsPerPage) => {
-    if (itemsPerPage < 1)
-        return 1;
-    const total = totalItemsCount < 1 ? 1 : totalItemsCount;
-    return Math.ceil(total / itemsPerPage);
-};
-
-const DiwaPagination$1 = /*@__PURE__*/ proxyCustomElement(class DiwaPagination extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.update = createEvent(this, "update", 1);
-        // ──────────────────────────────────────────────────────────────
-        // 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: '4fa5cadb5296b7e23cc779e5ec159244fcde6c4a', "data-theme": this.theme }, h("style", { key: '64ecd996a2a54cad3762f31430dfc1c8ef6a8b8f', innerHTML: getComponentCss() }), h("nav", { key: 'a8ff37dbf716a7c270e5493539418da43ae94b5f', "aria-label": rootLabel, class: "nav" }, h("ul", { key: '3a980124988ec73d6a4c0becbe76351b66522544', 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 delegatesFocus() { return true; }
-    get host() { return this; }
-}, [17, "diwa-pagination", {
-        "theme": [513],
-        "totalItemsCount": [2, "total-items-count"],
-        "itemsPerPage": [2, "items-per-page"],
-        "activePage": [1026, "active-page"],
-        "showLastPage": [4, "show-last-page"],
-        "intl": [16]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["diwa-pagination"];
-    components.forEach(tagName => { switch (tagName) {
-        case "diwa-pagination":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DiwaPagination$1);
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const DiwaPagination = DiwaPagination$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DiwaPagination, defineCustomElement };
-
-//# sourceMappingURL=diwa-pagination.js.map
+import{t as n,p as e,H as t,c as i,h as a,a as r}from"./index.js";import{b as s,a as o}from"./p-C8h0Vfqp.js";var l;!function(n){n[n.PAGE=0]="PAGE",n[n.ELLIPSIS=1]="ELLIPSIS",n[n.PREVIOUS=2]="PREVIOUS",n[n.NEXT=3]="NEXT"}(l||(l={}));const d={type:l.ELLIPSIS,isActive:!1},c=n=>{const{activePage:e}=n;return{type:l.PREVIOUS,value:Math.max(1,e-1),isActive:e>1}},p=(n,e)=>Array.from(Array(e-n+1),((e,t)=>t+n)),u=e(class extends t{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.update=i(this,"update",1),this.theme="dark",this.totalItemsCount=1,this.itemsPerPage=1,this.activePage=1,this.showLastPage=!0,this.intl={root:"Pagination",prev:"Previous page",next:"Next page",page:"Page"}}handleClick(n){n!==this.activePage&&(this.update.emit({page:n,previousPage:this.activePage}),this.activePage=n)}render(){var n,e,t,i,u;const h=((n,e)=>e<1?1:Math.ceil((n<1?1:n)/e))(this.totalItemsCount,this.itemsPerPage),g=(n=>{const{pageTotal:e,activePage:t,showLastPage:i}=n,a=[c(n)],r=(({activePage:n})=>e=>({type:l.PAGE,value:e,isActive:e===n,isBeforeCurrent:e===n-1,isBeforeBeforeCurrent:e===n-2,isAfterCurrent:e===n+1,isAfterAfterCurrent:e===n+2}))(n);if(5>=e){const n=p(1,e).map(r);a.push(...n)}else{a.push(r(1));const n=Math.min(Math.max(t-1,3),e-1-2-(i?1:0)),s=n+2,o=p(n,s).map(r),l=n-1,c=2===l?r(l):d;a.push(c),a.push(...o);const u=s+1,h=u===e-(i?1:0)?r(u):d;a.push(h),i&&a.push(r(e))}return a.push((n=>{const{activePage:e,pageTotal:t}=n;return{type:l.NEXT,value:Math.min(t,e+1),isActive:e<t}})(n)),a})({activePage:((n,e)=>n<1?1:n>e?e:n)(this.activePage,h),pageTotal:h,showLastPage:this.showLastPage}),v=null!==(n=this.intl)&&void 0!==n?n:{},b=null!==(e=v.root)&&void 0!==e?e:"Pagination",f=null!==(t=v.prev)&&void 0!==t?t:"Previous page",m=null!==(i=v.next)&&void 0!==i?i:"Next page",w=null!==(u=v.page)&&void 0!==u?u:"Page";return a(r,{key:"e6c7aa31aabb891a607d3e5396a5c4413bd36195","data-theme":this.theme},a("style",{key:"58206c30ec4ba3dd4c2972bee88dceba92099e3b",innerHTML:`\n\n  /* ── Host ─────────────────────────────────────────────────────────── */\n\n  :host {\n    display: block;\n    font-family: var(--diwa-font-family-base);\n    outline: none;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* ── Nav wrapper ──────────────────────────────────────────────────── */\n\n  .nav {\n    display: flex;\n    justify-content: center;\n    user-select: none;\n  }\n\n  /* ── Item list ────────────────────────────────────────────────────── */\n\n  .list {\n    display: flex;\n    align-items: center;\n    gap: var(--diwa-space-1);\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  /* Extra breathing room between prev/next and the page number group */\n  .list > li:first-child {\n    margin-inline-end: var(--diwa-space-2);\n  }\n\n  .list > li:last-child {\n    margin-inline-start: var(--diwa-space-2);\n  }\n\n  /* ── Shared button base ───────────────────────────────────────────── */\n\n  .btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--diwa-pagination-item-size);\n    height: var(--diwa-pagination-item-size);\n    box-sizing: border-box;\n    padding: 0;\n    border: var(--diwa-border-width-medium) solid transparent;\n    border-radius: var(--diwa-radius-md);\n    background: transparent;\n    color: var(--diwa-text-primary);\n    font-size: var(--diwa-font-size-sm);\n    font-family: inherit;\n    font-weight: var(--diwa-font-weight-normal);\n    line-height: 1;\n    cursor: pointer;\n    transition: background-color var(--diwa-transition-fast),\n                border-color var(--diwa-transition-fast);\n  }\n\n  /* ── Hover ────────────────────────────────────────────────────────── */\n\n  .btn:hover:not(:disabled):not([aria-current]) {\n    background: var(--diwa-bg-hover);\n  }\n\n  /* ── Active page ──────────────────────────────────────────────────── */\n\n  /* Diwa brand treatment: bottom accent line instead of PDS border box */\n  .btn[aria-current="page"] {\n    border-bottom-color: var(--diwa-accent);\n    cursor: default;\n  }\n\n  /* ── Disabled (prev/next at boundaries) ──────────────────────────── */\n\n  .btn:disabled {\n    opacity: 0.38;\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  /* ── Ellipsis ─────────────────────────────────────────────────────── */\n\n  .ellipsis {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--diwa-pagination-item-size);\n    height: var(--diwa-pagination-item-size);\n    color: var(--diwa-text-secondary);\n    font-size: var(--diwa-font-size-sm);\n    cursor: default;\n    user-select: none;\n  }\n\n  /* ── Focus ring ───────────────────────────────────────────────────── */\n\n  ${s(".btn")}\n\n  /* ── Reduced motion ───────────────────────────────────────────────── */\n\n  ${o(".btn")}\n`}),a("nav",{key:"437c5abf36082bdbc21ae6f72c77edc1c5c2a0a0","aria-label":b,class:"nav"},a("ul",{key:"94930f888757eb824f0d71c4d8c75ed53f0599c5",class:"list"},g.map(((n,e)=>{const{type:t,isActive:i,value:r}=n;return t===l.PREVIOUS?a("li",{key:"prev"},a("button",{class:"btn",disabled:!i,"aria-label":f,onClick:()=>i&&this.handleClick(r)},a("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"},a("polyline",{points:"15 18 9 12 15 6"})))):t===l.NEXT?a("li",{key:"next"},a("button",{class:"btn",disabled:!i,"aria-label":m,onClick:()=>i&&this.handleClick(r)},a("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"},a("polyline",{points:"9 18 15 12 9 6"})))):t===l.ELLIPSIS?a("li",{key:"ellipsis-"+e},a("span",{class:"ellipsis","aria-hidden":"true"},"…")):a("li",{key:r},a("button",{class:"btn","aria-label":`${w} ${r}`,"aria-current":i?"page":void 0,onClick:()=>this.handleClick(r)},r))})))))}static get delegatesFocus(){return!0}get host(){return this}},[17,"diwa-pagination",{theme:[513],totalItemsCount:[2,"total-items-count"],itemsPerPage:[2,"items-per-page"],activePage:[1026,"active-page"],showLastPage:[4,"show-last-page"],intl:[16]}]);function h(){"undefined"!=typeof customElements&&["diwa-pagination"].forEach((e=>{"diwa-pagination"===e&&(customElements.get(n(e))||customElements.define(n(e),u))}))}h();const g=u,v=h;export{g as DiwaPagination,v as defineCustomElement}

package/dist-custom-elements/diwa-pin-code.js

@@ -1,220 +1 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-5eacc7d0.js';
-import { a as getReducedMotionStyle } from './p-70bbb21a.js';
-
-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')}
-  `;
-};
-
-const DiwaPinCode$1 = /*@__PURE__*/ proxyCustomElement(class DiwaPinCode extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.update = createEvent(this, "update", 1);
-        /** Visible label text. */
-        this.label = '';
-        /** Supplementary description below the label. */
-        this.description = '';
-        /** Validation state. */
-        this.state = 'none';
-        /** Feedback message. */
-        this.message = '';
-        /** Number of input boxes (1–6). */
-        this.length = 4;
-        /** Current value string. Length should match the length prop. */
-        this.value = '';
-        /** Input type — "number" restricts input to digits; "password" masks the value. */
-        this.type = 'number';
-        /** Whether the pin code is required. */
-        this.required = false;
-        /** Disables all input boxes. */
-        this.disabled = false;
-        /** Renders compact input boxes. */
-        this.compact = false;
-        /** Hides the visible label while preserving it as accessible name. */
-        this.hideLabel = false;
-        /** Adapts the color when used on a light or dark background. */
-        this.theme = 'dark';
-        this.handleInput = (e, index) => {
-            const input = e.target;
-            const char = input.value.slice(-1);
-            if (this.type === 'number' && char && !/^\d$/.test(char)) {
-                input.value = '';
-                return;
-            }
-            input.value = char;
-            if (char) {
-                const boxes = this.getBoxes();
-                if (index < boxes.length - 1) {
-                    boxes[index + 1].focus();
-                    boxes[index + 1].select();
-                }
-            }
-            this.emitUpdate();
-        };
-        this.handleKeyDown = (e, index) => {
-            const boxes = this.getBoxes();
-            const input = e.target;
-            if (e.key === 'Backspace' && !input.value && index > 0) {
-                boxes[index - 1].focus();
-                boxes[index - 1].select();
-            }
-            else if (e.key === 'ArrowLeft' && index > 0) {
-                boxes[index - 1].focus();
-            }
-            else if (e.key === 'ArrowRight' && index < boxes.length - 1) {
-                boxes[index + 1].focus();
-            }
-        };
-        this.handlePaste = (e) => {
-            var _a, _b;
-            e.preventDefault();
-            const text = (_b = (_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text')) !== null && _b !== void 0 ? _b : '';
-            const digits = this.type === 'number' ? text.replace(/\D/g, '') : text;
-            const boxes = this.getBoxes();
-            digits.slice(0, this.length).split('').forEach((char, i) => {
-                if (boxes[i])
-                    boxes[i].value = char;
-            });
-            const lastFilled = Math.min(digits.length, this.length) - 1;
-            if (lastFilled >= 0) {
-                boxes[lastFilled].focus();
-                boxes[lastFilled].select();
-            }
-            this.emitUpdate();
-        };
-    }
-    getBoxes() {
-        var _a, _b;
-        return Array.from((_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.box')) !== null && _b !== void 0 ? _b : []);
-    }
-    emitUpdate() {
-        const boxes = this.getBoxes();
-        const value = boxes.map((b) => b.value).join('');
-        const isComplete = value.length === this.length && !value.includes('');
-        this.update.emit({ value, isComplete });
-    }
-    render() {
-        const safeLength = Math.max(1, Math.min(6, this.length));
-        const valueChars = this.value.padEnd(safeLength, '').slice(0, safeLength);
-        const descId = 'desc';
-        const msgId = 'msg';
-        return (h(Host, { key: 'fd84239857264ac7ff2d70388a1b57ed28c139e1', "data-theme": this.theme }, h("style", { key: '8ca52e841f42b85be9b805443f76636e67108b00', innerHTML: getComponentCss(this.state, this.disabled, this.compact) }), h("div", { key: 'b9295c2b897c58294b87e069e874682f6882c526', class: "root" }, !this.hideLabel && this.label && (h("div", { key: 'f53aa0736441db633eb7756c57091f5c86932781', class: "label-row" }, h("span", { key: '95e0e0bf33034fe78d914046450a5eaddfdefadc', class: "label" }, this.label, this.required && h("span", { key: '8197798944a90f35349b68537d90670949451034', class: "required", "aria-hidden": "true" }, " *")))), h("div", { key: '8e7638e8c78f0f1b4ae673828d8c14682d39a76a', class: "boxes", role: "group", "aria-label": this.hideLabel && this.label ? this.label : undefined }, Array.from({ length: safeLength }).map((_, i) => {
-            var _a;
-            return (h("input", { key: i, class: "box", type: this.type === 'password' ? 'password' : 'text', inputMode: this.type === 'number' ? 'numeric' : 'text', maxLength: 1, value: (_a = valueChars[i]) !== null && _a !== void 0 ? _a : '', disabled: this.disabled, required: this.required && i === 0, "aria-label": `Digit ${i + 1} of ${safeLength}`, "aria-describedby": i === 0 ? (this.message ? msgId : this.description ? descId : undefined) : undefined, onInput: (e) => this.handleInput(e, i), onKeyDown: (e) => this.handleKeyDown(e, i), onPaste: i === 0 ? this.handlePaste : undefined, onFocus: (e) => e.target.select(), autocomplete: i === 0 ? 'one-time-code' : 'off' }));
-        })), !this.message && this.description && (h("p", { key: 'e596640dd57e61edcc854a19671d417c3fd1bf1d', id: descId, class: "description" }, this.description)), this.message && (h("p", { key: '33741de2a6c5fa2e7d1072d5bf8d846cc54b6ddf', id: msgId, class: "message" }, this.message)))));
-    }
-    static get delegatesFocus() { return true; }
-    get host() { return this; }
-}, [17, "diwa-pin-code", {
-        "label": [1],
-        "description": [1],
-        "state": [1],
-        "message": [1],
-        "length": [2],
-        "value": [1],
-        "type": [1],
-        "required": [516],
-        "disabled": [516],
-        "compact": [4],
-        "hideLabel": [4, "hide-label"],
-        "theme": [513]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["diwa-pin-code"];
-    components.forEach(tagName => { switch (tagName) {
-        case "diwa-pin-code":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DiwaPinCode$1);
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const DiwaPinCode = DiwaPinCode$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DiwaPinCode, defineCustomElement };
-
-//# sourceMappingURL=diwa-pin-code.js.map
+import{t as i,p as e,H as t,c as n,h as a,a as s}from"./index.js";import{a as o}from"./p-C8h0Vfqp.js";const r=(i,e,t)=>{const n=t?"36px":"44px";return`\n    :host {\n      display: inline-block;\n      font-family: var(--diwa-font-family-base);\n      outline: none;\n    }\n    :host([hidden]) {\n      display: none;\n    }\n    .root {\n      display: flex;\n      flex-direction: column;\n      gap: var(--diwa-space-2);\n    }\n    .label-row {\n      display: flex;\n      align-items: baseline;\n      gap: var(--diwa-space-1);\n    }\n    .label {\n      font-size: var(--diwa-font-size-sm);\n      font-weight: var(--diwa-font-weight-semibold);\n      color: var(--diwa-text-secondary);\n      line-height: var(--diwa-line-height-normal);\n    }\n    .required {\n      color: var(--diwa-notification-error);\n    }\n    .boxes {\n      display: flex;\n      gap: var(--diwa-space-3);\n    }\n    .box {\n      width: ${n};\n      height: ${n};\n      padding: 0;\n      text-align: center;\n      font-family: var(--diwa-font-family-base);\n      font-size: ${t?"var(--diwa-font-size-base)":"var(--diwa-font-size-lg)"};\n      font-weight: var(--diwa-font-weight-semibold);\n      color: var(--diwa-text-primary);\n      background: var(--diwa-bg-input);\n      border: var(--diwa-border-width-thin) solid ${"error"===i?"var(--diwa-notification-error)":"success"===i?"var(--diwa-notification-success)":"var(--diwa-input-border, var(--diwa-border))"};\n      border-radius: var(--diwa-radius-md);\n      outline: none;\n      transition: border-color var(--diwa-transition-base);\n      box-sizing: border-box;\n      ${e?"opacity: 0.5; pointer-events: none;":""}\n    }\n    .box:focus {\n      border-color: var(--diwa-input-border-focus, var(--diwa-border-focus));\n    }\n    .description {\n      font-size: var(--diwa-font-size-sm);\n      color: var(--diwa-text-secondary);\n      line-height: var(--diwa-line-height-normal);\n      margin: 0;\n    }\n    .message {\n      font-size: var(--diwa-font-size-sm);\n      color: ${"error"===i?"var(--diwa-notification-error)":"success"===i?"var(--diwa-notification-success)":"var(--diwa-text-secondary)"};\n      line-height: var(--diwa-line-height-normal);\n      margin: 0;\n    }\n\n    ${o("input")}\n  `},d=e(class extends t{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.update=n(this,"update",1),this.label="",this.description="",this.state="none",this.message="",this.length=4,this.value="",this.type="number",this.required=!1,this.disabled=!1,this.compact=!1,this.hideLabel=!1,this.theme="dark",this.handleInput=(i,e)=>{const t=i.target,n=t.value.slice(-1);if("number"!==this.type||!n||/^\d$/.test(n)){if(t.value=n,n){const i=this.getBoxes();e<i.length-1&&(i[e+1].focus(),i[e+1].select())}this.emitUpdate()}else t.value=""},this.handleKeyDown=(i,e)=>{const t=this.getBoxes();"Backspace"===i.key&&!i.target.value&&e>0?(t[e-1].focus(),t[e-1].select()):"ArrowLeft"===i.key&&e>0?t[e-1].focus():"ArrowRight"===i.key&&e<t.length-1&&t[e+1].focus()},this.handlePaste=i=>{var e,t;i.preventDefault();const n=null!==(t=null===(e=i.clipboardData)||void 0===e?void 0:e.getData("text"))&&void 0!==t?t:"",a="number"===this.type?n.replace(/\D/g,""):n,s=this.getBoxes();a.slice(0,this.length).split("").forEach(((i,e)=>{s[e]&&(s[e].value=i)}));const o=Math.min(a.length,this.length)-1;o>=0&&(s[o].focus(),s[o].select()),this.emitUpdate()}}getBoxes(){var i,e;return Array.from(null!==(e=null===(i=this.host.shadowRoot)||void 0===i?void 0:i.querySelectorAll(".box"))&&void 0!==e?e:[])}emitUpdate(){const i=this.getBoxes().map((i=>i.value)).join(""),e=i.length===this.length&&!i.includes("");this.update.emit({value:i,isComplete:e})}render(){const i=Math.max(1,Math.min(6,this.length)),e=this.value.padEnd(i,"").slice(0,i),t="desc";return a(s,{key:"42b316cecb07dd8f38bc0dfe35f2d660071c9d0a","data-theme":this.theme},a("style",{key:"f621d085b00e66aa985160e59df85cd15363c1e6",innerHTML:r(this.state,this.disabled,this.compact)}),a("div",{key:"46f2f396909e1378f6ea3c6175e9c250888fb7f2",class:"root"},!this.hideLabel&&this.label&&a("div",{key:"7a0ed287315f44d87b3b2285799872b031ee85d2",class:"label-row"},a("span",{key:"677e5c6bbfdf9a1fac7ed2357f9b035bbf058c23",class:"label"},this.label,this.required&&a("span",{key:"7acfcc3a89f97eada2c483269828e51390ece4f1",class:"required","aria-hidden":"true"}," *"))),a("div",{key:"b89f8ac92e1f5818fff9e005bda7ae6860fe3ea3",class:"boxes",role:"group","aria-label":this.hideLabel&&this.label?this.label:void 0},Array.from({length:i}).map(((n,s)=>{var o;return a("input",{key:s,class:"box",type:"password"===this.type?"password":"text",inputMode:"number"===this.type?"numeric":"text",maxLength:1,value:null!==(o=e[s])&&void 0!==o?o:"",disabled:this.disabled,required:this.required&&0===s,"aria-label":`Digit ${s+1} of ${i}`,"aria-describedby":0===s?this.message?"msg":this.description?t:void 0:void 0,onInput:i=>this.handleInput(i,s),onKeyDown:i=>this.handleKeyDown(i,s),onPaste:0===s?this.handlePaste:void 0,onFocus:i=>i.target.select(),autocomplete:0===s?"one-time-code":"off"})}))),!this.message&&this.description&&a("p",{key:"77dedd816520995799988a9dcdfa5cc2019f76ce",id:t,class:"description"},this.description),this.message&&a("p",{key:"886e7f76acc8c15e965bd680ddedc6b100939f0d",id:"msg",class:"message"},this.message)))}static get delegatesFocus(){return!0}get host(){return this}},[17,"diwa-pin-code",{label:[1],description:[1],state:[1],message:[1],length:[2],value:[1],type:[1],required:[516],disabled:[516],compact:[4],hideLabel:[4,"hide-label"],theme:[513]}]);function c(){"undefined"!=typeof customElements&&["diwa-pin-code"].forEach((e=>{"diwa-pin-code"===e&&(customElements.get(i(e))||customElements.define(i(e),d))}))}c();const h=d,l=c;export{h as DiwaPinCode,l as defineCustomElement}