le-kit 0.5.2 → 0.5.4

package/dist/components/le-code-input.js

@@ -1,265 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, transformTag } from '@stencil/core/internal/client';
-import { c as classnames } from './utils.js';
-import { d as defineCustomElement$2, a as defineCustomElement$3, b as defineCustomElement$4, c as defineCustomElement$5, e as defineCustomElement$8, f as defineCustomElement$9, g as defineCustomElement$a } from './le-button2.js';
-import { d as defineCustomElement$7 } from './le-dropdown-base2.js';
-import { d as defineCustomElement$6 } from './le-popover2.js';
-
-const leCodeInputCss = () => `:host{display:block;--le-input-bg:var(--le-color-surface, #ffffff);--le-input-color:var(--le-color-text-primary, #333333);--le-input-border:var(--le-border-width, 2px) solid var(--le-color-border-input, #007bff);--le-input-radius:var(--le-radius-sm, 4px);--le-input-border-focus:2px solid var(--le-color-focus);--le-input-border-focus-offset:2px}.le-code-input-wrapper{position:relative;display:flex;flex-direction:column}.le-input-label{display:block;margin-bottom:var(--le-spacing-2, 0.5rem);color:var(--le-text-color, inherit);font-size:var(--le-font-size-sm, 0.875rem);font-weight:500}.input-group{position:relative;display:inline-flex;width:fit-content}.ghost-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;z-index:10;cursor:text;color:transparent;background:transparent;caret-color:transparent;border:none;outline:none;letter-spacing:1em;}.ghost-input:disabled{cursor:not-allowed}.visual-container{display:flex;gap:var(--le-spacing-2, 8px);pointer-events:none;}.code-box{position:relative;width:var(--le-code-box-size, 32px);height:var(--le-code-box-size, 42px);display:flex;align-items:center;justify-content:center;background:var(--le-input-bg);border:var(--le-input-border);border-radius:var(--le-input-radius);color:var(--le-input-color);font-size:1.2rem;transition:all 0.15s ease-in-out;box-sizing:border-box;user-select:none}.code-box.active{outline:var(--le-input-border-focus);outline-offset:var(--le-input-border-focus-offset);z-index:1}.code-box.selected{background-color:SelectedItem;outline:var(--le-input-border-focus);outline-offset:var(--le-input-border-focus-offset)}.input-group.has-error .code-box{border:var(--le-input-border-error, 1px solid #ef4444)}.input-group.has-error .code-box.active{border-width:2px}:host(.disabled) .code-box{background-color:var(--le-color-disabled-bg, #f3f4f6);color:var(--le-color-disabled-text, #9ca3af);border-color:var(--le-color-disabled-border, #e5e7eb)}.le-input-description,:host(p){margin-top:var(--le-spacing-1, 0.25rem);color:var(--le-text-muted, #6b7280);font-size:var(--le-font-size-sm, 0.875rem)}`;
-
-const LeCodeInput$1 = /*@__PURE__*/ proxyCustomElement(class LeCodeInput extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.leChange = createEvent(this, "leChange", 7);
-        this.leInput = createEvent(this, "leInput", 7);
-        this.leFocus = createEvent(this, "leFocus", 7);
-        this.leBlur = createEvent(this, "leBlur", 7);
-    }
-    get el() { return this; }
-    /**
-     * The value of the input
-     */
-    value = '';
-    /**
-     * The name of the input
-     */
-    name;
-    /**
-     * Label for the input
-     */
-    label;
-    /**
-     * Length of the code (number of characters)
-     */
-    length = 6;
-    /**
-     * Description text displayed below the input
-     * in case there is a more complex markup,
-     * it can be provided via slot as well
-     */
-    description;
-    /**
-     * The type of code (numeric or alphanumeric)
-     * This affects the keyboard layout on mobile devices.
-     */
-    type = 'text';
-    /**
-     * Whether the input is disabled
-     */
-    disabled = false;
-    /**
-     * Whether the input is read-only
-     */
-    readonly = false;
-    /**
-     * External ID for linking with external systems
-     */
-    externalId;
-    /**
-     * Internal validation state (can be set externally manually or via simple check)
-     */
-    error = false;
-    /**
-     * Emitted when the value changes (on blur or Enter)
-     */
-    leChange;
-    /**
-     * Emitted when the input value changes (on keystroke)
-     */
-    leInput;
-    /**
-     * Emitted when the input is focused
-     */
-    leFocus;
-    /**
-     * Emitted when the input is blurred
-     */
-    leBlur;
-    isFocused = false;
-    selectionStart = 0;
-    selectionEnd = 0;
-    valueChanged(newValue) {
-        if (newValue && newValue.length > this.length) {
-            this.value = newValue.slice(0, this.length);
-        }
-    }
-    componentWillLoad() {
-        if (this.value && this.value.length > this.length) {
-            this.value = this.value.slice(0, this.length);
-        }
-    }
-    handleInput = (ev) => {
-        const input = ev.target;
-        let val = input.value;
-        // Enforce length limit
-        if (val.length > this.length) {
-            val = val.slice(0, this.length);
-            // We need to force update the input value if it exceeded length
-            // because Stencil prop update might not happen if value is same as prop but input is different
-            input.value = val;
-        }
-        this.value = val;
-        this.updateSelection(input);
-        this.leInput.emit({
-            value: this.value,
-            name: this.name,
-            externalId: this.externalId,
-        });
-    };
-    handleChange = () => {
-        this.leChange.emit({
-            value: this.value,
-            name: this.name,
-            externalId: this.externalId,
-        });
-    };
-    handleFocus = (ev) => {
-        this.isFocused = true;
-        const input = ev.target;
-        // Move cursor to the end on focus so typing appends to current value
-        window.requestAnimationFrame(() => {
-            const len = input.value.length;
-            input.setSelectionRange(len, len);
-            this.updateSelection(input);
-        });
-        this.leFocus.emit();
-    };
-    handleBlur = () => {
-        this.isFocused = false;
-        this.leBlur.emit();
-        // Trigger change on blur
-        this.handleChange();
-    };
-    handleSelect = (ev) => {
-        this.updateSelection(ev.target);
-    };
-    updateSelection(input) {
-        this.selectionStart = input.selectionStart || 0;
-        this.selectionEnd = input.selectionEnd || 0;
-    }
-    /**
-     * Helper to determine active index for focus ring
-     */
-    getActiveIndex() {
-        if (!this.isFocused)
-            return -1;
-        // If we have a range selection, usually focus ring is not shown or shown around selection?
-        // We'll stick to showing it at the cursor end (selectionEnd) or start?
-        // If range selected, `selectionStart` is start of range.
-        // If cursor is at the very end (pos == length), we highlight the last box
-        if (this.selectionStart === this.length && this.length > 0) {
-            return this.length - 1;
-        }
-        return this.selectionStart;
-    }
-    renderBoxes() {
-        const boxes = [];
-        const activeIndex = this.getActiveIndex();
-        const isRangeSelection = this.selectionEnd - this.selectionStart > 0;
-        for (let i = 0; i < this.length; i++) {
-            const char = this.value ? this.value[i] : '';
-            const isActive = this.isFocused && !isRangeSelection && i === activeIndex;
-            const isSelected = this.isFocused && isRangeSelection && i >= this.selectionStart && i < this.selectionEnd;
-            boxes.push(h("div", { class: classnames('code-box', {
-                    'active': isActive,
-                    'selected': isSelected,
-                    'has-value': !!char,
-                }) }, char));
-        }
-        return boxes;
-    }
-    render() {
-        return (h("le-component", { key: '74615aa06971f7b2883e4a8e6f77b76918722e53', component: "le-code-input", hostClass: classnames({ 'disabled': this.disabled, 'has-error': this.error }) }, h("div", { key: '423a974717f0676b266a362d0151540577ae8845', class: "le-code-input-wrapper" }, this.label && (h("label", { key: 'f2ba7d9c8a8a400ca31adc944919e4750785503d', class: "le-input-label", htmlFor: this.name }, this.label)), h("div", { key: 'f56b80ffc1362c164bdfe473877d934c252c9bd5', class: classnames('input-group', { 'has-error': this.error }) }, h("input", { key: 'a94d422a0884c731ecfc6221133d725057fbb87c', class: "ghost-input", id: this.name, name: this.name, type: "text", inputMode: this.type === 'number' ? 'numeric' : 'text', pattern: this.type === 'number' ? '[0-9]*' : undefined, autocomplete: "one-time-code", value: this.value, maxLength: this.length, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onSelect: this.handleSelect,
-            // Prevent browser autofill background from messing up visual
-            spellcheck: false, autoCapitalize: "none", autoCorrect: "off" }), h("div", { key: '9436ca5298d83aae923e762748d634b9517a3b17', class: "visual-container" }, this.renderBoxes())), !this.error && (h("div", { key: '398a377af9c6c26f441e94b3598a1007c64e6ea0', class: "le-input-description" }, h("le-slot", { key: '3d9a8c248efc57ffa026f9ffdf889599b276f344', name: "description", type: "text", tag: "p", label: "Description" }, h("slot", { key: '6873dec4bea990f9fe6de013e8fa729fc385871c', name: "description" }, this.description)))))));
-    }
-    static get watchers() { return {
-        "value": ["valueChanged"]
-    }; }
-    static get style() { return leCodeInputCss(); }
-}, [769, "le-code-input", {
-        "value": [1537],
-        "name": [1],
-        "label": [1],
-        "length": [2],
-        "description": [1],
-        "type": [1],
-        "disabled": [4],
-        "readonly": [4],
-        "externalId": [1, "external-id"],
-        "error": [4],
-        "isFocused": [32],
-        "selectionStart": [32],
-        "selectionEnd": [32]
-    }, undefined, {
-        "value": ["valueChanged"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["le-code-input", "le-button", "le-checkbox", "le-component", "le-dropdown-base", "le-popover", "le-popup", "le-select", "le-slot", "le-string-input"];
-    components.forEach(tagName => { switch (tagName) {
-        case "le-code-input":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), LeCodeInput$1);
-            }
-            break;
-        case "le-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$a();
-            }
-            break;
-        case "le-checkbox":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$9();
-            }
-            break;
-        case "le-component":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$8();
-            }
-            break;
-        case "le-dropdown-base":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$7();
-            }
-            break;
-        case "le-popover":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$6();
-            }
-            break;
-        case "le-popup":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$5();
-            }
-            break;
-        case "le-select":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
-            }
-            break;
-        case "le-slot":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
-            }
-            break;
-        case "le-string-input":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const LeCodeInput = LeCodeInput$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { LeCodeInput, defineCustomElement };
-//# sourceMappingURL=le-code-input.js.map
-
-//# sourceMappingURL=le-code-input.js.map

package/dist/components/le-code-input.js.map

@@ -1 +0,0 @@
-{"file":"le-code-input.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,MAAM,CAAC,kiEAAkiE,CAAC;;MCsBpjEA,aAAW,iBAAAC,kBAAA,CAAA,MAAA,WAAA,SAAA,WAAA,CAAA;;;;;;;;;;;;;AAGtB;;AAEG;IACqC,KAAK,GAAW,EAAE;AAE1D;;AAEG;AACK,IAAA,IAAI;AAEZ;;AAEG;AACK,IAAA,KAAK;AAEb;;AAEG;IACK,MAAM,GAAW,CAAC;AAE1B;;;;AAIG;AACK,IAAA,WAAW;AAEnB;;;AAGG;IACK,IAAI,GAAsB,MAAM;AAExC;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACK,IAAA,UAAU;AAElB;;AAEG;IACK,KAAK,GAAY,KAAK;AAE9B;;AAEG;AACM,IAAA,QAAQ;AAEjB;;AAEG;AACM,IAAA,OAAO;AAEhB;;AAEG;AACM,IAAA,OAAO;AAEhB;;AAEG;AACM,IAAA,MAAM;IAEE,SAAS,GAAY,KAAK;IAC1B,cAAc,GAAW,CAAC;IAC1B,YAAY,GAAW,CAAC;AAGzC,IAAA,YAAY,CAAC,QAAgB,EAAA;QAC3B,IAAI,QAAQ,IAAI,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE;AAC7C,YAAA,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC;;;IAI/C,iBAAiB,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE;AACjD,YAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC;;;AAIzC,IAAA,WAAW,GAAG,CAAC,EAAS,KAAI;AAClC,QAAA,MAAM,KAAK,GAAG,EAAE,CAAC,MAA0B;AAC3C,QAAA,IAAI,GAAG,GAAG,KAAK,CAAC,KAAK;;QAGrB,IAAI,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE;YAC5B,GAAG,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC;;;AAG/B,YAAA,KAAK,CAAC,KAAK,GAAG,GAAG;;AAGnB,QAAA,IAAI,CAAC,KAAK,GAAG,GAAG;AAChB,QAAA,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC;AAE3B,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;YAChB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,UAAU,EAAE,IAAI,CAAC,UAAU;AAC5B,SAAA,CAAC;AACJ,KAAC;IAEO,YAAY,GAAG,MAAK;AAC1B,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;YACjB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,UAAU,EAAE,IAAI,CAAC,UAAU;AAC5B,SAAA,CAAC;AACJ,KAAC;AAEO,IAAA,WAAW,GAAG,CAAC,EAAS,KAAI;AAClC,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACrB,QAAA,MAAM,KAAK,GAAG,EAAE,CAAC,MAA0B;;AAG3C,QAAA,MAAM,CAAC,qBAAqB,CAAC,MAAK;AAChC,YAAA,MAAM,GAAG,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM;AAC9B,YAAA,KAAK,CAAC,iBAAiB,CAAC,GAAG,EAAE,GAAG,CAAC;AACjC,YAAA,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC;AAC7B,SAAC,CAAC;AAEF,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;AACrB,KAAC;IAEO,UAAU,GAAG,MAAK;AACxB,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACtB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;;QAElB,IAAI,CAAC,YAAY,EAAE;AACrB,KAAC;AAEO,IAAA,YAAY,GAAG,CAAC,EAAS,KAAI;AACnC,QAAA,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC,MAA0B,CAAC;AACrD,KAAC;AAEO,IAAA,eAAe,CAAC,KAAuB,EAAA;QAC7C,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,cAAc,IAAI,CAAC;QAC/C,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,IAAI,CAAC;;AAG7C;;AAEG;IACK,cAAc,GAAA;QACpB,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,OAAO,EAAE;;;;;AAO9B,QAAA,IAAI,IAAI,CAAC,cAAc,KAAK,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;AAC1D,YAAA,OAAO,IAAI,CAAC,MAAM,GAAG,CAAC;;QAGxB,OAAO,IAAI,CAAC,cAAc;;IAGpB,WAAW,GAAA;QACjB,MAAM,KAAK,GAAG,EAAE;AAChB,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE;QACzC,MAAM,gBAAgB,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,cAAc,GAAG,CAAC;AAEpE,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACpC,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,EAAE;AAC5C,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,IAAI,CAAC,gBAAgB,IAAI,CAAC,KAAK,WAAW;AACzE,YAAA,MAAM,UAAU,GACd,IAAI,CAAC,SAAS,IAAI,gBAAgB,IAAI,CAAC,IAAI,IAAI,CAAC,cAAc,IAAI,CAAC,GAAG,IAAI,CAAC,YAAY;AAEzF,YAAA,KAAK,CAAC,IAAI,CACR,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE,UAAU,CAAC,UAAU,EAAE;AAC5B,oBAAA,QAAQ,EAAE,QAAQ;AAClB,oBAAA,UAAU,EAAE,UAAU;oBACtB,WAAW,EAAE,CAAC,CAAC,IAAI;AACpB,iBAAA,CAAC,EAED,EAAA,IAAI,CACD,CACP;;AAEH,QAAA,OAAO,KAAK;;IAGd,MAAM,GAAA;QACJ,QACE,qEACE,SAAS,EAAC,eAAe,EACzB,SAAS,EAAE,UAAU,CAAC,EAAE,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAE,WAAW,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,EAAA,EAE7E,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAC/B,IAAI,CAAC,KAAK,KACT,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAA,EAC7C,IAAI,CAAC,KAAK,CACL,CACT,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,UAAU,CAAC,aAAa,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,EAAA,EAChE,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EACnB,EAAE,EAAE,IAAI,CAAC,IAAI,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ,GAAG,SAAS,GAAG,MAAM,EACtD,OAAO,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ,GAAG,QAAQ,GAAG,SAAS,EACtD,YAAY,EAAC,eAAe,EAC5B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,MAAM,EACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,QAAQ,EAAE,IAAI,CAAC,YAAY;;YAE3B,UAAU,EAAE,KAAK,EACjB,cAAc,EAAC,MAAM,EACrB,WAAW,EAAC,KAAK,EACjB,CAAA,EAEF,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAAE,IAAI,CAAC,WAAW,EAAE,CAAO,CACpD,EAEL,CAAC,IAAI,CAAC,KAAK,KACV,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC/B,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,EAAC,GAAG,EAAC,KAAK,EAAC,aAAa,EAAA,EACjE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,aAAa,EAAA,EAAE,IAAI,CAAC,WAAW,CAAQ,CAC1C,CACN,CACP,CACG,CACO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["LeCodeInput","__stencil_proxyCustomElement"],"sources":["src/components/le-code-input/le-code-input.css?tag=le-code-input&encapsulation=shadow","src/components/le-code-input/le-code-input.tsx"],"sourcesContent":[":host {\n  display: block;\n\n  --le-input-bg: var(--le-color-surface, #ffffff);\n  --le-input-color: var(--le-color-text-primary, #333333);\n  --le-input-border: var(--le-border-width, 2px) solid var(--le-color-border-input, #007bff);\n  --le-input-radius: var(--le-radius-sm, 4px);\n  --le-input-border-focus: 2px solid var(--le-color-focus);\n  --le-input-border-focus-offset: 2px;\n}\n\n.le-code-input-wrapper {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n\n.le-input-label {\n  display: block;\n  margin-bottom: var(--le-spacing-2, 0.5rem);\n  color: var(--le-text-color, inherit);\n  font-size: var(--le-font-size-sm, 0.875rem);\n  font-weight: 500;\n}\n\n.input-group {\n  position: relative;\n  display: inline-flex;\n  width: fit-content;\n}\n\n.ghost-input {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  z-index: 10;\n  cursor: text;\n  color: transparent;\n  background: transparent;\n  caret-color: transparent;\n  border: none;\n  outline: none;\n  letter-spacing: 1em; /* Try to match boxes? */\n}\n\n.ghost-input:disabled {\n  cursor: not-allowed;\n}\n\n.visual-container {\n  display: flex;\n  gap: var(--le-spacing-2, 8px);\n  pointer-events: none; /* Let clicks pass to ghost input */\n}\n\n.code-box {\n  position: relative;\n  width: var(--le-code-box-size, 32px);\n  height: var(--le-code-box-size, 42px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--le-input-bg);\n  border: var(--le-input-border);\n  border-radius: var(--le-input-radius);\n  color: var(--le-input-color);\n  font-size: 1.2rem;\n  transition: all 0.15s ease-in-out;\n  box-sizing: border-box;\n  user-select: none;\n}\n\n.code-box.active {\n  outline: var(--le-input-border-focus);\n  outline-offset: var(--le-input-border-focus-offset);\n  z-index: 1;\n}\n\n.code-box.selected {\n  background-color: SelectedItem;\n  outline: var(--le-input-border-focus);\n  outline-offset: var(--le-input-border-focus-offset);\n}\n\n.input-group.has-error .code-box {\n  border: var(--le-input-border-error, 1px solid #ef4444);\n}\n\n.input-group.has-error .code-box.active {\n  border-width: 2px;\n}\n\n:host(.disabled) .code-box {\n  background-color: var(--le-color-disabled-bg, #f3f4f6);\n  color: var(--le-color-disabled-text, #9ca3af);\n  border-color: var(--le-color-disabled-border, #e5e7eb);\n}\n\n.le-input-description,\n:host(p) {\n  margin-top: var(--le-spacing-1, 0.25rem);\n  color: var(--le-text-muted, #6b7280);\n  font-size: var(--le-font-size-sm, 0.875rem);\n}\n","import { Component, Prop, Event, EventEmitter, State, h, Element, Watch } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A one-time code input component with individual frames for each character.\n * Supports standard copy/paste and range selection behaviors.\n *\n * @slot description - Additional description text displayed below the input\n *\n * @cssprop --le-code-box-size - Size of each character box (default: 40px width, 48px height)\n * @cssprop --le-input-bg - Input background color\n * @cssprop --le-input-color - Input text color\n * @cssprop --le-input-border - Input border style\n * @cssprop --le-input-border-focus - Input border style when focused\n * @cssprop --le-input-border-error - Input border style when invalid\n * @cssprop --le-input-radius - Input border radius\n */\n@Component({\n  tag: 'le-code-input',\n  styleUrl: 'le-code-input.css',\n  shadow: true,\n})\nexport class LeCodeInput {\n  @Element() el: HTMLElement;\n\n  /**\n   * The value of the input\n   */\n  @Prop({ mutable: true, reflect: true }) value: string = '';\n\n  /**\n   * The name of the input\n   */\n  @Prop() name: string;\n\n  /**\n   * Label for the input\n   */\n  @Prop() label: string;\n\n  /**\n   * Length of the code (number of characters)\n   */\n  @Prop() length: number = 6;\n\n  /**\n   * Description text displayed below the input\n   * in case there is a more complex markup,\n   * it can be provided via slot as well\n   */\n  @Prop() description?: string;\n\n  /**\n   * The type of code (numeric or alphanumeric)\n   * This affects the keyboard layout on mobile devices.\n   */\n  @Prop() type: 'text' | 'number' = 'text';\n\n  /**\n   * Whether the input is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the input is read-only\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * External ID for linking with external systems\n   */\n  @Prop() externalId: string;\n\n  /**\n   * Internal validation state (can be set externally manually or via simple check)\n   */\n  @Prop() error: boolean = false;\n\n  /**\n   * Emitted when the value changes (on blur or Enter)\n   */\n  @Event() leChange: EventEmitter<{ value: string; name: string; externalId: string }>;\n\n  /**\n   * Emitted when the input value changes (on keystroke)\n   */\n  @Event() leInput: EventEmitter<{ value: string; name: string; externalId: string }>;\n\n  /**\n   * Emitted when the input is focused\n   */\n  @Event() leFocus: EventEmitter<void>;\n\n  /**\n   * Emitted when the input is blurred\n   */\n  @Event() leBlur: EventEmitter<void>;\n\n  @State() private isFocused: boolean = false;\n  @State() private selectionStart: number = 0;\n  @State() private selectionEnd: number = 0;\n\n  @Watch('value')\n  valueChanged(newValue: string) {\n    if (newValue && newValue.length > this.length) {\n      this.value = newValue.slice(0, this.length);\n    }\n  }\n\n  componentWillLoad() {\n    if (this.value && this.value.length > this.length) {\n      this.value = this.value.slice(0, this.length);\n    }\n  }\n\n  private handleInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement;\n    let val = input.value;\n\n    // Enforce length limit\n    if (val.length > this.length) {\n      val = val.slice(0, this.length);\n      // We need to force update the input value if it exceeded length\n      // because Stencil prop update might not happen if value is same as prop but input is different\n      input.value = val;\n    }\n\n    this.value = val;\n    this.updateSelection(input);\n\n    this.leInput.emit({\n      value: this.value,\n      name: this.name,\n      externalId: this.externalId,\n    });\n  };\n\n  private handleChange = () => {\n    this.leChange.emit({\n      value: this.value,\n      name: this.name,\n      externalId: this.externalId,\n    });\n  };\n\n  private handleFocus = (ev: Event) => {\n    this.isFocused = true;\n    const input = ev.target as HTMLInputElement;\n\n    // Move cursor to the end on focus so typing appends to current value\n    window.requestAnimationFrame(() => {\n      const len = input.value.length;\n      input.setSelectionRange(len, len);\n      this.updateSelection(input);\n    });\n\n    this.leFocus.emit();\n  };\n\n  private handleBlur = () => {\n    this.isFocused = false;\n    this.leBlur.emit();\n    // Trigger change on blur\n    this.handleChange();\n  };\n\n  private handleSelect = (ev: Event) => {\n    this.updateSelection(ev.target as HTMLInputElement);\n  };\n\n  private updateSelection(input: HTMLInputElement) {\n    this.selectionStart = input.selectionStart || 0;\n    this.selectionEnd = input.selectionEnd || 0;\n  }\n\n  /**\n   * Helper to determine active index for focus ring\n   */\n  private getActiveIndex(): number {\n    if (!this.isFocused) return -1;\n\n    // If we have a range selection, usually focus ring is not shown or shown around selection?\n    // We'll stick to showing it at the cursor end (selectionEnd) or start?\n    // If range selected, `selectionStart` is start of range.\n\n    // If cursor is at the very end (pos == length), we highlight the last box\n    if (this.selectionStart === this.length && this.length > 0) {\n      return this.length - 1;\n    }\n\n    return this.selectionStart;\n  }\n\n  private renderBoxes() {\n    const boxes = [];\n    const activeIndex = this.getActiveIndex();\n    const isRangeSelection = this.selectionEnd - this.selectionStart > 0;\n\n    for (let i = 0; i < this.length; i++) {\n      const char = this.value ? this.value[i] : '';\n      const isActive = this.isFocused && !isRangeSelection && i === activeIndex;\n      const isSelected =\n        this.isFocused && isRangeSelection && i >= this.selectionStart && i < this.selectionEnd;\n\n      boxes.push(\n        <div\n          class={classnames('code-box', {\n            'active': isActive,\n            'selected': isSelected,\n            'has-value': !!char,\n          })}\n        >\n          {char}\n        </div>,\n      );\n    }\n    return boxes;\n  }\n\n  render() {\n    return (\n      <le-component\n        component=\"le-code-input\"\n        hostClass={classnames({ 'disabled': this.disabled, 'has-error': this.error })}\n      >\n        <div class=\"le-code-input-wrapper\">\n          {this.label && (\n            <label class=\"le-input-label\" htmlFor={this.name}>\n              {this.label}\n            </label>\n          )}\n\n          <div class={classnames('input-group', { 'has-error': this.error })}>\n            <input\n              class=\"ghost-input\"\n              id={this.name}\n              name={this.name}\n              type=\"text\"\n              inputMode={this.type === 'number' ? 'numeric' : 'text'}\n              pattern={this.type === 'number' ? '[0-9]*' : undefined}\n              autocomplete=\"one-time-code\"\n              value={this.value}\n              maxLength={this.length}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              onInput={this.handleInput}\n              onFocus={this.handleFocus}\n              onBlur={this.handleBlur}\n              onSelect={this.handleSelect}\n              // Prevent browser autofill background from messing up visual\n              spellcheck={false}\n              autoCapitalize=\"none\"\n              autoCorrect=\"off\"\n            />\n\n            <div class=\"visual-container\">{this.renderBoxes()}</div>\n          </div>\n\n          {!this.error && (\n            <div class=\"le-input-description\">\n              <le-slot name=\"description\" type=\"text\" tag=\"p\" label=\"Description\">\n                <slot name=\"description\">{this.description}</slot>\n              </le-slot>\n            </div>\n          )}\n        </div>\n      </le-component>\n    );\n  }\n}\n"],"version":3}

package/dist/components/le-collapse.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface LeCollapse extends Components.LeCollapse, HTMLElement {}
-export const LeCollapse: {
-    prototype: LeCollapse;
-    new (): LeCollapse;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/le-collapse.js

@@ -1,9 +0,0 @@
-import { L as LeCollapse$1, d as defineCustomElement$1 } from './le-collapse2.js';
-
-const LeCollapse = LeCollapse$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { LeCollapse, defineCustomElement };
-//# sourceMappingURL=le-collapse.js.map
-
-//# sourceMappingURL=le-collapse.js.map

package/dist/components/le-collapse.js.map

@@ -1 +0,0 @@
-{"file":"le-collapse.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/le-collapse2.js

@@ -1,138 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host, transformTag } from '@stencil/core/internal/client';
-import { d as defineCustomElement$1, a as defineCustomElement$2, b as defineCustomElement$3, c as defineCustomElement$4, e as defineCustomElement$7, f as defineCustomElement$8, g as defineCustomElement$9 } from './le-button2.js';
-import { d as defineCustomElement$6 } from './le-dropdown-base2.js';
-import { d as defineCustomElement$5 } from './le-popover2.js';
-
-const leCollapseCss = () => `:host{--le-collapse-duration:var(--le-transition-normal);display:grid;grid-template-rows:1fr;opacity:1;transition:grid-template-rows var(--le-collapse-duration),
-    opacity var(--le-collapse-duration)}:host([data-open="false"]),:host([closed]){grid-template-rows:0fr;opacity:0}:host([no-fading][data-open="false"]),:host([no-fading][closed]){opacity:1}.region{display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}.region.scroll-down{justify-content:flex-start}`;
-
-const LeCollapse = /*@__PURE__*/ proxyCustomElement(class LeCollapse extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-    }
-    get el() { return this; }
-    /**
-     * Since Stencil boolean props default to `false` when the attribute is missing.
-     * instead of `open` defaulting to `true`, using a `closed` prop.
-     */
-    closed = false;
-    /** Whether the content should scroll down from the top when open. */
-    scrollDown = false;
-    /** Stop fading the content when collapsing/expanding. */
-    noFading = false;
-    /** If true, collapse/expand based on the nearest header shrink event. */
-    collapseOnHeaderShrink = false;
-    /**
-     * Handles `leHeaderShrinkChange` events from the `le-header`.
-     * In case multiple headers are present, only the nearest one in the DOM tree is used.
-     */
-    handleHeaderShrink(ev) {
-        const e = ev;
-        this.headerShrunk = !!e.detail?.shrunk;
-    }
-    headerShrunk = false;
-    componentDidLoad() {
-        this.applyOpenState();
-    }
-    onOpenChange() {
-        this.applyOpenState();
-    }
-    onDrivenStateChange() {
-        this.applyOpenState();
-    }
-    shouldBeOpen() {
-        if (this.closed)
-            return false;
-        if (this.collapseOnHeaderShrink && this.headerShrunk)
-            return false;
-        return true;
-    }
-    applyOpenState() {
-        const nextOpen = this.shouldBeOpen();
-        this.el.toggleAttribute('data-open', nextOpen);
-    }
-    render() {
-        return (h(Host, { key: 'e0882ec40ed132dbd6eeaa43da4aff03b6e45352', "data-open": this.shouldBeOpen() ? 'true' : 'false' }, h("le-component", { key: '55c98e5382ddd6b5ef8a8f506f9a2901fc0b48ce', component: "le-collapse" }, h("div", { key: '0bcfa5aada8a7a6f9c86011e6a3dfa5bbb5e08c4', class: { 'region': true, 'scroll-down': this.scrollDown }, part: "region" }, h("slot", { key: '7b762e372802512a287ae98d4aeecdb3160bb54e' })))));
-    }
-    static get watchers() { return {
-        "open": ["onOpenChange"],
-        "headerShrunk": ["onDrivenStateChange"]
-    }; }
-    static get style() { return leCollapseCss(); }
-}, [769, "le-collapse", {
-        "closed": [1540],
-        "scrollDown": [516, "scroll-down"],
-        "noFading": [516, "no-fading"],
-        "collapseOnHeaderShrink": [516, "collapse-on-header-shrink"],
-        "headerShrunk": [32]
-    }, [[8, "leHeaderShrinkChange", "handleHeaderShrink"]], {
-        "open": ["onOpenChange"],
-        "headerShrunk": ["onDrivenStateChange"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["le-collapse", "le-button", "le-checkbox", "le-component", "le-dropdown-base", "le-popover", "le-popup", "le-select", "le-slot", "le-string-input"];
-    components.forEach(tagName => { switch (tagName) {
-        case "le-collapse":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), LeCollapse);
-            }
-            break;
-        case "le-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$9();
-            }
-            break;
-        case "le-checkbox":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$8();
-            }
-            break;
-        case "le-component":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$7();
-            }
-            break;
-        case "le-dropdown-base":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$6();
-            }
-            break;
-        case "le-popover":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$5();
-            }
-            break;
-        case "le-popup":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
-            }
-            break;
-        case "le-select":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
-            }
-            break;
-        case "le-slot":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-        case "le-string-input":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { LeCollapse as L, defineCustomElement as d };
-//# sourceMappingURL=le-collapse2.js.map
-
-//# sourceMappingURL=le-collapse2.js.map

package/dist/components/le-collapse2.js.map

@@ -1 +0,0 @@
-{"file":"le-collapse2.js","mappings":";;;;;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC;AAC7B,kUAAkU,CAAC;;MCwBtT,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAA,WAAA,CAAA;;;;;;;;;AAGrB;;;AAGG;IACqC,MAAM,GAAY,KAAK;;IAGZ,UAAU,GAAY,KAAK;;IAG7B,QAAQ,GAAY,KAAK;;IAGT,sBAAsB,GACrF,KAAK;AAEP;;;AAGG;AAEH,IAAA,kBAAkB,CAAC,EAAS,EAAA;QAC1B,MAAM,CAAC,GAAG,EAAsC;QAChD,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,MAAM;;IAGvB,YAAY,GAAY,KAAK;IAE9C,gBAAgB,GAAA;QACd,IAAI,CAAC,cAAc,EAAE;;IAIb,YAAY,GAAA;QACpB,IAAI,CAAC,cAAc,EAAE;;IAIb,mBAAmB,GAAA;QAC3B,IAAI,CAAC,cAAc,EAAE;;IAGf,YAAY,GAAA;QAClB,IAAI,IAAI,CAAC,MAAM;AAAE,YAAA,OAAO,KAAK;AAC7B,QAAA,IAAI,IAAI,CAAC,sBAAsB,IAAI,IAAI,CAAC,YAAY;AAAE,YAAA,OAAO,KAAK;AAClE,QAAA,OAAO,IAAI;;IAGL,cAAc,GAAA;AACpB,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,EAAE;QACpC,IAAI,CAAC,EAAE,CAAC,eAAe,CAAC,WAAW,EAAE,QAAQ,CAAC;;IAGhD,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,WAAA,EAAY,IAAI,CAAC,YAAY,EAAE,GAAG,MAAM,GAAG,OAAO,EAAA,EACrD,CAAc,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,SAAS,EAAC,aAAa,EAAA,EACnC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,IAAI,EAAC,QAAQ,EAAA,EAC3E,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACO,CACV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/le-collapse/le-collapse.css?tag=le-collapse&encapsulation=shadow","src/components/le-collapse/le-collapse.tsx"],"sourcesContent":[":host {\n  --le-collapse-duration: var(--le-transition-normal);\n\n  display: grid;\n  grid-template-rows: 1fr;\n  opacity: 1;\n  transition:\n    grid-template-rows var(--le-collapse-duration),\n    opacity var(--le-collapse-duration);\n}\n\n:host([data-open=\"false\"]),\n:host([closed]) {\n  grid-template-rows: 0fr;\n  opacity: 0;\n}\n:host([no-fading][data-open=\"false\"]),\n:host([no-fading][closed]) {\n  opacity: 1;\n}\n\n.region {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  overflow: hidden;\n}\n\n.region.scroll-down {\n  justify-content: flex-start;\n}\n","import { Component, Element, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\n\nexport type LeCollapseAnimation = 'fade' | 'collapse' | 'fade-collapse';\n\n/**\n * Animated show/hide wrapper.\n *\n * Supports height collapse (auto->0) and/or fading.\n * Can optionally listen to the nearest `le-header` shrink events.\n *\n * @slot - Content to animate\n *\n * @cssprop --le-collapse-duration - Transition duration\n *\n * @csspart region - Collapsible region\n * @csspart content - Inner content\n *\n * @cmsEditable true\n * @cmsCategory Layout\n */\n@Component({\n  tag: 'le-collapse',\n  styleUrl: 'le-collapse.css',\n  shadow: true,\n})\nexport class LeCollapse {\n  @Element() el: HTMLElement;\n\n  /**\n   * Since Stencil boolean props default to `false` when the attribute is missing.\n   * instead of `open` defaulting to `true`, using a `closed` prop.\n   */\n  @Prop({ mutable: true, reflect: true }) closed: boolean = false;\n\n  /** Whether the content should scroll down from the top when open. */\n  @Prop({ attribute: 'scroll-down', reflect: true }) scrollDown: boolean = false;\n\n  /** Stop fading the content when collapsing/expanding. */\n  @Prop({ attribute: 'no-fading', reflect: true }) noFading: boolean = false;\n\n  /** If true, collapse/expand based on the nearest header shrink event. */\n  @Prop({ attribute: 'collapse-on-header-shrink', reflect: true }) collapseOnHeaderShrink: boolean =\n    false;\n\n  /**\n   * Handles `leHeaderShrinkChange` events from the `le-header`.\n   * In case multiple headers are present, only the nearest one in the DOM tree is used.\n   */\n  @Listen('leHeaderShrinkChange', { target: 'window' })\n  handleHeaderShrink(ev: Event) {\n    const e = ev as CustomEvent<{ shrunk: boolean }>;\n    this.headerShrunk = !!e.detail?.shrunk;\n  }\n\n  @State() private headerShrunk: boolean = false;\n\n  componentDidLoad() {\n    this.applyOpenState();\n  }\n\n  @Watch('open')\n  protected onOpenChange() {\n    this.applyOpenState();\n  }\n\n  @Watch('headerShrunk')\n  protected onDrivenStateChange() {\n    this.applyOpenState();\n  }\n\n  private shouldBeOpen() {\n    if (this.closed) return false;\n    if (this.collapseOnHeaderShrink && this.headerShrunk) return false;\n    return true;\n  }\n\n  private applyOpenState() {\n    const nextOpen = this.shouldBeOpen();\n    this.el.toggleAttribute('data-open', nextOpen);\n  }\n\n  render() {\n    return (\n      <Host data-open={this.shouldBeOpen() ? 'true' : 'false'}>\n        <le-component component=\"le-collapse\">\n          <div class={{ 'region': true, 'scroll-down': this.scrollDown }} part=\"region\">\n            <slot></slot>\n          </div>\n        </le-component>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/le-combobox.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface LeCombobox extends Components.LeCombobox, HTMLElement {}
-export const LeCombobox: {
-    prototype: LeCombobox;
-    new (): LeCombobox;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;