@riverty/web-components 6.2.0 → 6.3.0

package/dist/collection/components/input/input.js

@@ -1,1572 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { appendControlToFormData } from "../../utils/formData";
-export class RInput {
-    constructor() {
-        /**
-         * Input type (e.g. `text`, `email`, `number`, `password`).
-         * See HTMLInputElement `type` for supported values.
-         */
-        this.type = 'text';
-        /**
-         * Current value. Mutable: can be changed programmatically or through user input.
-         */
-        this.value = '';
-        /**
-         * When `true` field renders valid/invalid marker within.
-        */
-        this.validityMarker = true;
-        /** Validity state passed from validateFormElement function after validation */
-        this.validityState = '';
-        /** Validity message passed from validateFormElement function after validation */
-        this.validityMessage = '';
-        /** Defines if the component has been touched by user */
-        this.touched = false;
-        /** Defines if the value has been changed by user interaction */
-        this.dirty = false;
-        /** Private flag to prevent validation during reset */
-        this.isResetting = false;
-        this.nativeElement = null;
-        this.uniqueId = `r-input-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
-        /**
-         * Initial attributes state
-         * */
-        this.initial = {};
-        this.getValidityStateData = (element) => {
-            let validityState = '';
-            let validityMessage = '';
-            if (this.type === 'email' && this.pattern) {
-                element.setCustomValidity('');
-                validityState = this.validEmailPattern ? 'valid' : 'patternMismatch';
-                validityMessage = this.validEmailPattern ? '' : this.patternMismatchMessage;
-                return { validityState, validityMessage };
-            }
-            for (const state in element.validity) {
-                if (element.validity[state]) {
-                    validityState = state;
-                    const customMessage = this[state + 'Message'];
-                    if (customMessage) {
-                        validityMessage = customMessage;
-                        return { validityState, validityMessage };
-                    }
-                    validityMessage = element.validationMessage;
-                    // Found an error, use it even if no custom message
-                    return { validityState, validityMessage };
-                }
-            }
-            // No errors found, field is valid
-            return { validityState: 'valid', validityMessage: '' };
-        };
-        this.validateFormElement = (element) => {
-            if (element === null)
-                return;
-            if (this.isNoValidate)
-                return;
-            if (this.error)
-                return;
-            // Trigger browser validation to populate validity states
-            if (element.checkValidity) {
-                element.checkValidity();
-            }
-            const { validityState, validityMessage } = this.getValidityStateData(element);
-            this.validityState = validityState;
-            this.validityMessage = validityMessage;
-            const isValid = this.validityState === 'valid';
-            this.valid = isValid;
-            this.invalid = !isValid;
-            this.rValidate.emit({
-                state: this.validityState,
-                message: this.validityMessage
-            });
-        };
-        this.onInput = (event) => {
-            if (this.readonly)
-                return;
-            this.value = event.target.value;
-            this.touched = true;
-            this.dirty = true;
-            const { host, value } = this;
-            this.rInput.emit({ element: host, value });
-        };
-        this.onChange = event => {
-            if (this.readonly)
-                return;
-            this.value = event.target.value;
-            this.touched = true;
-            this.dirty = true;
-            const { host, value } = this;
-            this.rChange.emit({ element: host, value });
-        };
-        this.onBlur = () => {
-            this.host.classList.remove('focused');
-            this.touched = true;
-            this.validateFormElement(this.nativeElement);
-            this.rBlur.emit();
-        };
-        this.onFocus = () => {
-            this.host.classList.add('focused');
-            this.rFocus.emit();
-        };
-        this.contributeToFormData = (event) => {
-            appendControlToFormData(this.nativeElement || this.host, event.formData);
-        };
-        this.onResetForm = () => {
-            if (this.readonly)
-                return;
-            this.isResetting = true;
-            this.markAsPristine();
-            this.validityState = null;
-            this.validityMessage = null;
-            // Restore initial value without triggering validation
-            if (this.nativeElement) {
-                this.nativeElement.value = this.initial['value'] || '';
-            }
-            this.value = this.initial['value'];
-            this.invalid = this.initial['invalid'];
-            this.valid = !this.invalid;
-            this.isResetting = false;
-            const { host, value } = this;
-            this.rReset.emit({ element: host, value });
-        };
-        this.onSubmitForm = (event) => {
-            if (this.isNoValidate)
-                return;
-            this.touched = true;
-            this.validateFormElement(this.nativeElement);
-            if (this.invalid) {
-                event.preventDefault();
-                event.stopPropagation();
-            }
-        };
-        this.handleKeyup = (event) => {
-            var _a, _b;
-            this.validateFormElement(this.nativeElement);
-            if (this.invalid && !this.isNoValidate)
-                return;
-            if (event.code === 'Enter') {
-                const submitEl = this.host.querySelector('[type="submit"]') ||
-                    ((_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.querySelector('[type="submit"]'));
-                if (submitEl && 'triggerClick' in submitEl) {
-                    submitEl === null || submitEl === void 0 ? void 0 : submitEl.triggerClick();
-                }
-                else {
-                    (_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.requestSubmit();
-                }
-            }
-        };
-        this.handleClick = () => {
-            this.host.shadowRoot.querySelector('input').focus();
-        };
-    }
-    /**
-     * Programmatically focus the native input element.
-     */
-    async setFocus() {
-        var _a;
-        (_a = this.nativeElement) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    /**
-     * Programmatically remove focus from the native input.
-     */
-    async setBlur() {
-        var _a;
-        (_a = this.nativeElement) === null || _a === void 0 ? void 0 : _a.blur();
-    }
-    /**
-     * Select (highlight) the entire current input value.
-     */
-    async select() {
-        var _a;
-        (_a = this.nativeElement) === null || _a === void 0 ? void 0 : _a.select();
-    }
-    /**
-     * Get the start index of the current text selection (or null if unavailable).
-     */
-    async getSelectionStart() {
-        var _a, _b;
-        return (_b = (_a = this.nativeElement) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : null;
-    }
-    /**
-     * Get the end index of the current text selection (or null if unavailable).
-     */
-    async getSelectionEnd() {
-        var _a, _b;
-        return (_b = (_a = this.nativeElement) === null || _a === void 0 ? void 0 : _a.selectionEnd) !== null && _b !== void 0 ? _b : null;
-    }
-    /**
-     * Set a selection (or caret) range within the value.
-     * @param start Start index (inclusive)
-     * @param end End index (exclusive)
-     * @param direction Selection direction (browser hint)
-     */
-    async setSelectionRange(start, end, direction = 'none') {
-        if (this.nativeElement) {
-            this.nativeElement.setSelectionRange(start, end, direction);
-        }
-    }
-    /**
-     * Retrieve the current value (returns empty string if unset).
-     */
-    async getValue() {
-        var _a;
-        return ((_a = this.nativeElement) === null || _a === void 0 ? void 0 : _a.value) || '';
-    }
-    /**
-     * Set the current value programmatically (does not fire native input/change automatically).
-     */
-    async setValue(value) {
-        if (this.nativeElement) {
-            this.nativeElement.value = value;
-        }
-        this.value = value;
-        this.validateFormElement(this.nativeElement);
-    }
-    /**
-     * Validates the input without triggering UI and returns a boolean indicating its validity.
-     * @returns A boolean indicating whether the input is valid.
-     */
-    async checkValidity() {
-        const { validityState } = this.getValidityStateData(this.nativeElement);
-        return validityState === 'valid';
-    }
-    /**
-     * Gets the touched state (whether user has interacted with the input)
-     */
-    async isTouched() {
-        return this.touched;
-    }
-    /**
-     * Gets the dirty state (whether value has been changed by user)
-     */
-    async isDirty() {
-        return this.dirty;
-    }
-    /**
-     * Resets touched and dirty states to pristine (untouched/clean)
-     */
-    async markAsPristine() {
-        this.touched = false;
-        this.dirty = false;
-    }
-    /** Identify wrapping form element */
-    get parentFormEl() {
-        return this.host.closest('form') || document.querySelector(`#${this.form}`) || null;
-    }
-    get ariaDescribedBy() {
-        const describedBy = `${this.uniqueId}-message`;
-        return this.hint ? `${this.uniqueId}-hint ${describedBy}` : describedBy;
-    }
-    get hasError() {
-        var _a;
-        return this.invalid && !!((_a = this.error) === null || _a === void 0 ? void 0 : _a.length);
-    }
-    get hasValidationError() {
-        return (this.validityState !== 'valid' || this.invalid) && !!(this.validityMessage || this.customErrorMessage);
-    }
-    get hasMessage() {
-        return this.hasError || this.hasValidationError;
-    }
-    /**
-     * Determine whether this element should be ignored
-     * during Constraint Validation API validation.
-     * */
-    get isNoValidate() {
-        var _a;
-        return (((_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.hasAttribute('novalidate')) ||
-            this.novalidate ||
-            false);
-    }
-    get hasTrailingSlot() {
-        return !!this.host.querySelector('[slot="trailing"]');
-    }
-    get validEmailPattern() {
-        const regex = new RegExp(this.pattern, 'u');
-        return regex.test(this.value);
-    }
-    componentWillLoad() {
-        this.initial['value'] = this.value;
-        this.initial['invalid'] = this.invalid;
-    }
-    connectFormEventListeners() {
-        var _a, _b, _c;
-        (_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.addEventListener('formdata', this.contributeToFormData);
-        (_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.addEventListener('submit', this.onSubmitForm, { capture: true });
-        (_c = this.parentFormEl) === null || _c === void 0 ? void 0 : _c.addEventListener('reset', this.onResetForm);
-    }
-    disconnectFormEventListeners() {
-        var _a, _b, _c;
-        (_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('formdata', this.contributeToFormData);
-        (_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('submit', this.onSubmitForm);
-        (_c = this.parentFormEl) === null || _c === void 0 ? void 0 : _c.removeEventListener('reset', this.onResetForm);
-    }
-    connectedCallback() {
-        this.connectFormEventListeners();
-        !!this.autofocus && queueMicrotask(() => { var _a; return (_a = this.host.querySelector('input[autofocus]')) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true }); });
-    }
-    disconnectedCallback() {
-        this.disconnectFormEventListeners();
-    }
-    handleValueChange() {
-        if (!this.isResetting) {
-            this.validateFormElement(this.nativeElement);
-        }
-    }
-    handleTypeChange() {
-        this.setValue(this.nativeElement.value);
-    }
-    render() {
-        const { name, placeholder, required, fieldIndicator, maxlength, minlength, min, max, value, disabled, form, pattern, invalid, valid, hint, label, internal, uniqueId, autocomplete, readonly, autofocus, passwordrules, enterkeyhint, spellcheck, autocapitalize, validityMarker } = this;
-        const inputAttrs = {
-            disabled,
-            readonly,
-            required,
-            label,
-            name,
-            placeholder,
-            maxlength,
-            minlength,
-            min,
-            max,
-            form,
-            pattern,
-            autocomplete,
-            autofocus: autofocus || null,
-            passwordrules,
-            enterkeyhint,
-            autocapitalize,
-            spellcheck,
-            inputmode: this.inputmode || null,
-            id: uniqueId,
-            'data-value': value,
-            'aria-placeholder': placeholder,
-            'aria-invalid': `${invalid || false}`,
-            'aria-required': `${required || false}`,
-            'aria-describedby': this.ariaDescribedBy
-        };
-        const labelAttr = label ? {
-            id: `${uniqueId}-label`,
-            fieldIndicator
-        } : {};
-        const renderValidationMarker = () => {
-            const icons = {
-                valid: 'circled-check',
-                invalid: 'circled-exclamation-mark'
-            };
-            const colors = {
-                valid: '--r-status-success-regular',
-                invalid: '--r-status-error-regular'
-            };
-            const shouldShowValidMarker = !!validityMarker && !!valid && !!value;
-            const shouldShowInvalidMarker = !!validityMarker && !!invalid;
-            if (!shouldShowValidMarker && !shouldShowInvalidMarker)
-                return null;
-            const iconName = shouldShowInvalidMarker ? icons.invalid : icons.valid;
-            const iconColor = shouldShowInvalidMarker ? colors.invalid : colors.valid;
-            return h("r-icon", { class: "r-input--validation-icon", "aria-hidden": "true", size: "s", name: iconName, color: iconColor });
-        };
-        // Filter out event listener properties based on naming convention.
-        // Pass them to native element.
-        const eventListeners = Object.entries(this).reduce((acc, [key, value]) => {
-            if (typeof value === 'function' && key.startsWith('on')) {
-                acc[key] = value;
-            }
-            return acc;
-        }, {});
-        return (h(Host, { onClick: this.handleClick, onKeyup: this.handleKeyup, "data-touched": `${this.touched}`, "data-dirty": `${this.dirty}` }, h("div", { class: internal ? 'visually-hidden' : 'r-input--label-container' }, h("label", { htmlFor: uniqueId }, label ?
-            h("r-label", Object.assign({ class: "r-input--label" }, labelAttr), label)
-            :
-                h("slot", { name: "label" })), h("slot", { name: "popover" })), hint &&
-            h("r-hint", { id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { class: "r-input--container" }, h("slot", { name: "leading" }), h("input", Object.assign({ class: "r-input--input", type: this.type }, inputAttrs, eventListeners, { ref: el => this.nativeElement = el, value: this.value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus })), h("div", { class: "r-input--trailing" }, this.readonly &&
-            h("r-icon", { class: "r-input--readonly-icon", name: "pen-disabled", size: "s" }), renderValidationMarker(), this.hasTrailingSlot &&
-            h("slot", { name: "trailing" }))), h("div", { id: `${uniqueId}-message`, "aria-live": !internal ? 'polite' : null, class: !internal ? 'r-input--message' : 'visually-hidden' }, h("slot", { name: "message" }, this.hasMessage && h("r-hint", { variant: valid ? 'success' : 'error' }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage))))));
-    }
-    static get is() { return "r-input"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["input.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["input.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "form": {
-                "type": "string",
-                "attribute": "form",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "ID of the form this input is associated with (mirrors native `form` attribute).\nUse when the input is not a direct descendant of the target form element."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "novalidate": {
-                "type": "boolean",
-                "attribute": "novalidate",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "If set, the field is skipped by built\u2011in (Constraint Validation API) validation logic.\nDoes not prevent custom validation you may trigger manually."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "type": {
-                "type": "string",
-                "attribute": "type",
-                "mutable": false,
-                "complexType": {
-                    "original": "InputType",
-                    "resolved": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
-                    "references": {
-                        "InputType": {
-                            "location": "import",
-                            "path": "./exports",
-                            "id": "src/components/input/exports.ts::InputType"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Input type (e.g. `text`, `email`, `number`, `password`).\nSee HTMLInputElement `type` for supported values."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "defaultValue": "'text'"
-            },
-            "name": {
-                "type": "string",
-                "attribute": "name",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Name used when contributing the value to form submission (`FormData` / POST body)."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "value": {
-                "type": "string",
-                "attribute": "value",
-                "mutable": true,
-                "complexType": {
-                    "original": "string | null",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Current value. Mutable: can be changed programmatically or through user input."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "defaultValue": "''"
-            },
-            "placeholder": {
-                "type": "string",
-                "attribute": "placeholder",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Placeholder hint text shown when the field is empty and unfocused."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "label": {
-                "type": "string",
-                "attribute": "label",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Label text describing the field. Provide for accessibility (or use the `label` slot)."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "fieldIndicator": {
-                "type": "string",
-                "attribute": "field-indicator",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Small marker string appended to the label (e.g. \u201COptional\u201D, localized markers, etc.)."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "internal": {
-                "type": "boolean",
-                "attribute": "internal",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "When true, hides visual label & messages (for internal layout use; accessibility still preserved)."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "hint": {
-                "type": "string",
-                "attribute": "hint",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Optional contextual help text displayed beneath the field."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "fullWidth": {
-                "type": "boolean",
-                "attribute": "full-width",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "When true, stretches the component horizontally to fill its container."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "valid": {
-                "type": "boolean",
-                "attribute": "valid",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Explicit valid state override (when set manually)."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "invalid": {
-                "type": "boolean",
-                "attribute": "invalid",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Explicit invalid state override (when set manually)."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "error": {
-                "type": "string",
-                "attribute": "error",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Manual error message independent of native validation messages.\nWhen set, native validation messages are suppressed."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "disabled": {
-                "type": "boolean",
-                "attribute": "disabled",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Disables the field (non-interactive, excluded from form submission)."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "required": {
-                "type": "boolean",
-                "attribute": "required",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Marks the field as required; failing to provide a value triggers `valueMissing`."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "maxlength": {
-                "type": "number",
-                "attribute": "maxlength",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Maximum character length (enforced by native input)."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "minlength": {
-                "type": "number",
-                "attribute": "minlength",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Minimum character length (validation only)."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "min": {
-                "type": "number",
-                "attribute": "min",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Minimum numeric/date value (for supported types)."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "max": {
-                "type": "number",
-                "attribute": "max",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Maximum numeric/date value (for supported types)."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "pattern": {
-                "type": "any",
-                "attribute": "pattern",
-                "mutable": false,
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Regex pattern the value must match (string form)."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "step": {
-                "type": "number",
-                "attribute": "step",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Step interval for numeric/date input types."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "valueMissingMessage": {
-                "type": "string",
-                "attribute": "value-missing-message",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Custom message for `valueMissing`."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "typeMismatchMessage": {
-                "type": "string",
-                "attribute": "type-mismatch-message",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Custom message for `typeMismatch`."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "patternMismatchMessage": {
-                "type": "string",
-                "attribute": "pattern-mismatch-message",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Custom message for `patternMismatch`."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "tooLongMessage": {
-                "type": "string",
-                "attribute": "too-long-message",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Custom message for `tooLong`."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "tooShortMessage": {
-                "type": "string",
-                "attribute": "too-short-message",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Custom message for `tooShort`."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "rangeOverflowMessage": {
-                "type": "string",
-                "attribute": "range-overflow-message",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Custom message for `rangeOverflow`."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "rangeUnderflowMessage": {
-                "type": "string",
-                "attribute": "range-underflow-message",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Custom message for `rangeUnderflow`."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "stepMismatchMessage": {
-                "type": "string",
-                "attribute": "step-mismatch-message",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Custom message for `stepMismatch`."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "badInputMessage": {
-                "type": "string",
-                "attribute": "bad-input-message",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Custom message for `badInput` (conversion / parsing failure)."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "customErrorMessage": {
-                "type": "string",
-                "attribute": "custom-error-message",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Custom message for `customError` (applies when set via `setCustomValidity()` logic internally)."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "autocomplete": {
-                "type": "string",
-                "attribute": "autocomplete",
-                "mutable": false,
-                "complexType": {
-                    "original": "InputAutocomplete",
-                    "resolved": "\"url\" | AutoFill | \"bday\" | \"sex\" | \"photo\" | \"language\"",
-                    "references": {
-                        "InputAutocomplete": {
-                            "location": "import",
-                            "path": "./exports",
-                            "id": "src/components/input/exports.ts::InputAutocomplete"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Native `autocomplete` hint for browsers / password managers."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "enterkeyhint": {
-                "type": "string",
-                "attribute": "enterkeyhint",
-                "mutable": false,
-                "complexType": {
-                    "original": "EnterKeyHint",
-                    "resolved": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\"",
-                    "references": {
-                        "EnterKeyHint": {
-                            "location": "import",
-                            "path": "./exports",
-                            "id": "src/components/input/exports.ts::EnterKeyHint"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Hint for the action label/icon on the virtual keyboard's enter key.\nUse cases:\n- `enter`: Default, generic newline/submit action\n- `done`: Finishes current input session (e.g., last field in a form)\n- `go`: Navigates to URL input target (e.g., URL bar)\n- `next`: Advances to next input field in a sequence\n- `previous`: Goes back to previous input field\n- `search`: Submits a search query\n- `send`: Sends a message (e.g., chat, email)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "spellcheck": {
-                "type": "boolean",
-                "attribute": "spellcheck",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Controls browser spell-checking for text input.\nWhen true, enables spell-checking; when false, disables it.\nBrowser default behavior applies when not specified."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "autocapitalize": {
-                "type": "string",
-                "attribute": "autocapitalize",
-                "mutable": false,
-                "complexType": {
-                    "original": "AutocapitalizeType",
-                    "resolved": "\"characters\" | \"none\" | \"off\" | \"on\" | \"sentences\" | \"words\"",
-                    "references": {
-                        "AutocapitalizeType": {
-                            "location": "import",
-                            "path": "./exports",
-                            "id": "src/components/input/exports.ts::AutocapitalizeType"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Controls automatic capitalization of text input on mobile devices.\n- `off` or `none`: No automatic capitalization\n- `on` or `sentences`: Capitalize first letter of each sentence (default for most text inputs)\n- `words`: Capitalize first letter of each word\n- `characters`: Capitalize all characters"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "passwordrules": {
-                "type": "string",
-                "attribute": "passwordrules",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Safari-specific password rules for strong password generation (password inputs only).\nFormat: \"minlength: X; required: lower; required: upper; required: digit; required: special;\"\nThis attribute is Safari-specific and will be ignored by other browsers.\nSee: https://developer.apple.com/documentation/security/password_autofill/customizing_password_autofill_rules"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "autofocus": {
-                "type": "boolean",
-                "attribute": "autofocus",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Automatically focus the input when it is first rendered.\nMirrors native `autofocus` attribute behavior. Avoid using multiple times per page."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "readonly": {
-                "type": "boolean",
-                "attribute": "readonly",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Read-only mode (mirrors native `readonly`): value cannot be changed by the user,\nbut the field can still receive focus, be selected, and be submitted with a form."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "inputmode": {
-                "type": "string",
-                "attribute": "inputmode",
-                "mutable": false,
-                "complexType": {
-                    "original": "InputMode",
-                    "resolved": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\"",
-                    "references": {
-                        "InputMode": {
-                            "location": "import",
-                            "path": "./exports",
-                            "id": "src/components/input/exports.ts::InputMode"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Hint to the browser about which keyboard to display on mobile devices."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "validityMarker": {
-                "type": "boolean",
-                "attribute": "validity-marker",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "When `true` field renders valid/invalid marker within."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "defaultValue": "true"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "validityState": {},
-            "validityMessage": {},
-            "touched": {},
-            "dirty": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "rValidate",
-                "name": "rValidate",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted after each validation attempt (native or triggered logic)."
-                },
-                "complexType": {
-                    "original": "{\n    state: string,\n    message: string\n  }",
-                    "resolved": "{ state: string; message: string; }",
-                    "references": {}
-                }
-            }, {
-                "method": "rInput",
-                "name": "rInput",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted on each user input (mirrors native `input` semantics)."
-                },
-                "complexType": {
-                    "original": "{\n    element: HTMLRInputElement,\n    value: any\n  }",
-                    "resolved": "{ element: HTMLRInputElement; value: any; }",
-                    "references": {
-                        "HTMLRInputElement": {
-                            "location": "global",
-                            "id": "global::HTMLRInputElement"
-                        }
-                    }
-                }
-            }, {
-                "method": "rBlur",
-                "name": "rBlur",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the input loses focus."
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }, {
-                "method": "rFocus",
-                "name": "rFocus",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the input receives focus."
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }, {
-                "method": "rChange",
-                "name": "rChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the committed value changes (mirrors native `change` semantics)."
-                },
-                "complexType": {
-                    "original": "{\n    element: HTMLRInputElement,\n    value: any\n  }",
-                    "resolved": "{ element: HTMLRInputElement; value: any; }",
-                    "references": {
-                        "HTMLRInputElement": {
-                            "location": "global",
-                            "id": "global::HTMLRInputElement"
-                        }
-                    }
-                }
-            }, {
-                "method": "rReset",
-                "name": "rReset",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when a parent form is reset and the field restores its initial value."
-                },
-                "complexType": {
-                    "original": "{\n    element: HTMLRInputElement,\n    value: any\n  }",
-                    "resolved": "{ element: HTMLRInputElement; value: any; }",
-                    "references": {
-                        "HTMLRInputElement": {
-                            "location": "global",
-                            "id": "global::HTMLRInputElement"
-                        }
-                    }
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "setFocus": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Programmatically focus the native input element.",
-                    "tags": []
-                }
-            },
-            "setBlur": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Programmatically remove focus from the native input.",
-                    "tags": []
-                }
-            },
-            "select": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Select (highlight) the entire current input value.",
-                    "tags": []
-                }
-            },
-            "getSelectionStart": {
-                "complexType": {
-                    "signature": "() => Promise<number | null>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<number>"
-                },
-                "docs": {
-                    "text": "Get the start index of the current text selection (or null if unavailable).",
-                    "tags": []
-                }
-            },
-            "getSelectionEnd": {
-                "complexType": {
-                    "signature": "() => Promise<number | null>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<number>"
-                },
-                "docs": {
-                    "text": "Get the end index of the current text selection (or null if unavailable).",
-                    "tags": []
-                }
-            },
-            "setSelectionRange": {
-                "complexType": {
-                    "signature": "(start: number, end: number, direction?: \"forward\" | \"backward\" | \"none\") => Promise<void>",
-                    "parameters": [{
-                            "name": "start",
-                            "type": "number",
-                            "docs": "Start index (inclusive)"
-                        }, {
-                            "name": "end",
-                            "type": "number",
-                            "docs": "End index (exclusive)"
-                        }, {
-                            "name": "direction",
-                            "type": "\"none\" | \"forward\" | \"backward\"",
-                            "docs": "Selection direction (browser hint)"
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Set a selection (or caret) range within the value.",
-                    "tags": [{
-                            "name": "param",
-                            "text": "start Start index (inclusive)"
-                        }, {
-                            "name": "param",
-                            "text": "end End index (exclusive)"
-                        }, {
-                            "name": "param",
-                            "text": "direction Selection direction (browser hint)"
-                        }]
-                }
-            },
-            "getValue": {
-                "complexType": {
-                    "signature": "() => Promise<string>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<string>"
-                },
-                "docs": {
-                    "text": "Retrieve the current value (returns empty string if unset).",
-                    "tags": []
-                }
-            },
-            "setValue": {
-                "complexType": {
-                    "signature": "(value: string) => Promise<void>",
-                    "parameters": [{
-                            "name": "value",
-                            "type": "string",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Set the current value programmatically (does not fire native input/change automatically).",
-                    "tags": []
-                }
-            },
-            "checkValidity": {
-                "complexType": {
-                    "signature": "() => Promise<boolean>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<boolean>"
-                },
-                "docs": {
-                    "text": "Validates the input without triggering UI and returns a boolean indicating its validity.",
-                    "tags": [{
-                            "name": "returns",
-                            "text": "A boolean indicating whether the input is valid."
-                        }]
-                }
-            },
-            "isTouched": {
-                "complexType": {
-                    "signature": "() => Promise<boolean>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<boolean>"
-                },
-                "docs": {
-                    "text": "Gets the touched state (whether user has interacted with the input)",
-                    "tags": []
-                }
-            },
-            "isDirty": {
-                "complexType": {
-                    "signature": "() => Promise<boolean>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<boolean>"
-                },
-                "docs": {
-                    "text": "Gets the dirty state (whether value has been changed by user)",
-                    "tags": []
-                }
-            },
-            "markAsPristine": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Resets touched and dirty states to pristine (untouched/clean)",
-                    "tags": []
-                }
-            }
-        };
-    }
-    static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "value",
-                "methodName": "handleValueChange"
-            }, {
-                "propName": "type",
-                "methodName": "handleTypeChange"
-            }];
-    }
-}