@riverty/web-components 6.3.0 → 6.3.1

package/dist/esm/r-input.entry.js

@@ -0,0 +1,616 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CTxpqopm.js';
+import { a as appendControlToFormData } from './formData-DvLT8-y3.js';
+
+/**
+ * Native HTML input attributes that can be passed through.
+ * Using Set for O(1) lookup performance instead of O(n) array includes.
+ */
+const nativeInputAttributesSet = new Set([
+    'accept', 'autocorrect', 'capture', 'dirname',
+    'height', 'incremental', 'list', 'multiple', 'size', 'src', 'width'
+]);
+/**
+ * Special case mappings for attributes that need custom camelCase conversion
+ * beyond simple hyphen-based transformation. Maps HTML attribute name (lowercase)
+ * to JSX property name (camelCase).
+ */
+const attributeCamelCaseMap = {
+    'autocorrect': 'autoCorrect',
+};
+/**
+ * Component-specific props that should NOT be passed to the native input.
+ * Using Set for O(1) lookup performance.
+ */
+const excludedAttributesSet = new Set([
+    'internal', 'full-width', 'fullwidth', 'validity-marker', 'validitymarker',
+    'error', 'valid', 'invalid', 'hint', 'field-indicator', 'fieldindicator',
+    'value-missing-message', 'valuemissingmessage', 'type-mismatch-message', 'typemismatchmessage',
+    'pattern-mismatch-message', 'patternmismatchmessage', 'too-long-message', 'toolongmessage',
+    'too-short-message', 'tooshortmessage', 'range-overflow-message', 'rangeoverflowmessage',
+    'range-underflow-message', 'rangeunderflowmessage', 'step-mismatch-message', 'stepmismatchmessage',
+    'bad-input-message', 'badinputmessage', 'custom-error-message', 'customerrormessage'
+]);
+/**
+ * Framework/DOM-specific attributes that should never be passed through.
+ */
+const frameworkAttributesSet = new Set([
+    'class', 'style', 'id', 'slot', 'ref', 'key'
+]);
+/**
+ * ARIA attributes that are already handled explicitly by the component
+ * and should not be passed through to avoid conflicts.
+ */
+const managedAriaAttributesSet = new Set([
+    'aria-invalid',
+    'aria-required',
+    'aria-placeholder',
+    'aria-describedby',
+    'data-value'
+]);
+
+const inputCss = ":host{display:inline-flex;flex-direction:column;vertical-align:top;--r-label--margin-bottom:0}:host slot{display:contents}:host([readonly]:not([readonly=false])){--r-input--container--background-color:var(--r-background-soft, #f3f1f0);--r-input--container--border-color:transparent transparent var(--r-border-soft, #686868) transparent;--r-input--container--cursor:text}:host(:hover:not([disabled]:not([disabled=false])):not([readonly]:not([readonly=false]))){--r-input--container--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host(.focused){--r-input--container--box-shadow:0 0 0 6px var(--r-border-focused-outlined);--r-input--container--outline:2px solid var(--r-border-focused);--r-input--container--outline-offset:2px}:host(:active:not([disabled]:not([disabled=false])):not([readonly]:not([readonly=false]))){--r-input--container--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host([expanded]:not([expanded=false])),:host([full-width]:not([full-width=false])){display:block}:host([disabled]:not([disabled=false])){--r-input--container--opacity:0.4;--r-input--container--cursor:not-allowed;--r-input--container--pointer-events:none;--r-input--container--background-color:transparent}:host([invalid]:not([invalid=false])){--r-input--container--border-color:var(--r-status-error-regular, #b00c15);--r-input--container--background-color:var(--r-status-error-soft, #fef6f6)}:host([size]){--r-input--width:auto;--r-input--input--width:auto;--r-input--container--display:inline-flex}.r-input{display:var(--r-input--display, flex);flex:var(--r-input--flex, 1);flex-direction:var(--r-input--flex-direction, column);width:var(--r-input--width, auto);font-family:var(--r-input--font-family, system-ui);position:var(--r-input--position, relative);border-radius:var(--r-input--border-radius, 0);cursor:var(--r-input--cursor, inherit)}.r-input--label-container{display:var(--r-input--label-container--display, flex);gap:var(--r-input--label-container--gap, var(--r-spacing-100, 1rem));align-items:var(--r-input--label-container--align-items, center);justify-content:var(--r-input--label-container--align-items, space-between)}.r-input--label-container ::slotted([slot=popover]){display:var(--r-input--popover--display, inline-flex);height:var(--r-input--popover--height, var(--r-spacing-150, 1.5));align-items:var(--r-input--popover--align-items, center);justify-content:var(--r-input--popover--justify-content, center);margin-right:var(--r-input--popover--margin-right, -0.25rem);--r-popover--trigger--min-width:var(--r-input--popover-trigger--min-width, var(--r-spacing-150, 1.5));--r-popover--trigger--min-height:var(--r-input--popover--trigger--min-height, var(--r-spacing-150, 1.5))}.r-input--label{cursor:var(--r-input--label--cursor, inherit)}.r-input--input{font-family:var(--r-input--input--font-family, system-ui);font-size:var(--r-input--input--font-size, 1em);width:var(--r-input--input--width, 100%);max-width:var(--r-input--input--max-width, 100%);height:var(--r-input--input--height, var(--r-spacing-275, 2.75rem));border-radius:var(--r-input--input--border-radius, 0);border:var(--r-input--input--border, none);color:var(--r-input--input--color, var(--r-text-regular, #282828));background-color:var(--r-input--input--background-color, none);appearance:var(--r-input--input--appearance, none);box-sizing:var(--r-input--input--box-sizing, border-box);outline:var(--r-input--input--outline, none);cursor:var(--r-input--input--cursor, inherit);pointer-events:var(--r-input--input--pointer-events, auto)}.r-input--input:autofill,.r-input--input:-webkit-autofill{-webkit-background-clip:text !important}.r-input--input::-ms-reveal{display:var(--r-input--input--ms-reveal--display, none)}.r-input--input::placeholder{color:var(--r-input--input--placeholder--color, var(--r-text-soft, #686868))}.r-input--input[type=search]::-webkit-search-cancel-button{cursor:var(--r-input--input-clear--cursor, pointer);display:var(--r-input--input-clear--display, block);height:var(--r-input--input-clear--height, 0.875rem);width:var(--r-input--input-clear--width, 0.875rem);appearance:var(--r-input--input-clear--appearance, none);background-repeat:var(--r-input--input-clear--background-repeat, no-repeat);background-image:var(--r-input--input-clear--background-image, url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke-width%3D%221.5%22%20viewBox%3D%220.75%200.75%2022.5%2022.5%22%3E%3Cpath%20id%3D%22Vector%202269%22%20stroke%3D%22currentColor%22%20d%3D%22M1.5%201.5L22.5%2022.5%22%2F%3E%3Cpath%20id%3D%22Vector%202270%22%20stroke%3D%22currentColor%22%20d%3D%22M22.5%201.5L1.5%2022.5%22%2F%3E%3C%2Fsvg%3E\"));background-size:var(--r-input--input-clear--background-size, contain);margin-inline:var(--r-input--input-clear--margin-inline, 0);color:currentColor}.r-input--button{position:var(--r-input--icon-button--position, absolute);width:var(--r-input--icon-button--width, calc(1.125em + var(--r-input--icon--width)));height:var(--r-input--icon-button--height, 100%);top:var(--r-input--icon-button--top, 0);right:var(--r-input--icon-button--right, auto);bottom:var(--r-input--icon-button--bottom, auto);left:var(--r-input--icon-button--left, 0);cursor:var(--r-input--icon-button--cursor, inherit)}.r-input--container{position:var(--r-input--container--position, relative);display:var(--r-input--container--display, flex);align-items:var(--r-input--container--align-items, center);gap:var(--r-input--container--gap, 0.625rem);height:var(--r-input--container--height, var(--r-spacing-275, 2.75rem));background-color:var(--r-input--container--background-color, var(--r-background-softest, #fff));border-width:var(--r-input--container--border-width, 1px);border-style:var(--r-input--container--border-style, solid);border-color:var(--r-input--container--border-color, var(--r-border-soft, #686868));box-sizing:var(--r-input--container--box-sizing, border-box);box-shadow:var(--r-input--container--box-shadow, none);outline:var(--r-input--container--outline, none);outline-offset:var(--r-input--container--outline-offset, 0);padding-top:var(--r-input--container--padding-top, 0.6875rem);padding-right:var(--r-input--container--padding-right, var(--r-spacing-075, 0.75rem));padding-bottom:var(--r-input--container--padding-bottom, 0.6875rem);padding-left:var(--r-input--container--padding-left, var(--r-spacing-0275, 0.75rem));opacity:var(--r-input--container--opacity, 1);pointer-events:var(--r-input--container--pointer-events, auto);line-height:var(--r-input--container--line-height, 1);cursor:var(--r-input--container--cursor, inherit);margin-top:var(--r-input--container--margin-top, var(--r-spacing-025, 0.25rem))}.r-input--container slot[name=leading]{color:var(--r-input--container-leading--color, var(--r-icon-soft, #686868))}.r-input--message:has(r-hint),.r-input--message ::slotted([slot=message]){margin-top:var(--r-input--message--margin-top, var(--r-spacing-025, 0.25rem))}.r-input--trailing{display:var(--r-input--trailing--display, flex);margin-left:var(--r-input--trailing--margin-left, auto);align-items:var(--r-input--trailing--align-items, center);gap:var(--r-input--trailing--gap, 0.625rem)}.r-input--trailing:empty{--r-input--trailing--display:none}.r-input--validation-icon{display:var(--r-input--validation-icon--display, inline-block)}.r-input--readonly-icon{color:var(--r-input--readonly-icon--color, var(--r-icon-soft, #686868))}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
+
+const RInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.rValidate = createEvent(this, "rValidate");
+        this.rInput = createEvent(this, "rInput");
+        this.rBlur = createEvent(this, "rBlur");
+        this.rFocus = createEvent(this, "rFocus");
+        this.rChange = createEvent(this, "rChange");
+        this.rReset = createEvent(this, "rReset");
+        this.rBeforeInput = createEvent(this, "rBeforeInput");
+        this.rInvalid = createEvent(this, "rInvalid");
+        this.rKeyDown = createEvent(this, "rKeyDown");
+        this.rKeyUp = createEvent(this, "rKeyUp");
+        this.rSelect = createEvent(this, "rSelect");
+        /**
+         * 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 = '';
+        /** Internal state for options extracted from slotted datalist */
+        this.slottedOptions = [];
+        /**
+         * 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;
+        /**
+         * Helper to set the native input element ref and apply boolean properties
+         * that don't get properly set through JSX attribute spreading.
+         */
+        this.setNativeInputRef = (el) => {
+            this.nativeElement = el;
+            if (el) {
+                el.addEventListener('beforeinput', this.onBeforeInput);
+                // Manually apply boolean native attributes as properties
+                // This is necessary because Stencil's JSX doesn't always properly
+                // set boolean DOM properties when spreading attributes
+                const passthroughAttrs = this.collectNativeAttributes();
+                // List of boolean native input properties that need manual application
+                const booleanProps = ['multiple'];
+                for (const prop of booleanProps) {
+                    if (prop in passthroughAttrs && passthroughAttrs[prop] === true) {
+                        el[prop] = true;
+                    }
+                }
+            }
+        };
+        this.uniqueId = `r-input-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
+        /**
+         * Initial attributes state
+         * */
+        this.initial = {};
+        /**
+         * Cache for passthrough attributes to avoid recomputing on every render.
+         * Cleared when attributes might have changed.
+         */
+        this.passthroughAttrsCache = null;
+        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.onBeforeInput = (event) => {
+            this.rBeforeInput.emit(event);
+        };
+        this.onInvalid = (event) => {
+            this.rInvalid.emit(event);
+        };
+        this.onKeyDown = (event) => {
+            this.rKeyDown.emit(event);
+        };
+        this.onKeyUp = (event) => {
+            this.rKeyUp.emit(event);
+        };
+        this.onSelect = (event) => {
+            this.rSelect.emit(event);
+        };
+        this.contributeToFormData = (event) => {
+            appendControlToFormData(this.nativeElement || this.host, event.formData);
+        };
+        this.datalistObserver = null;
+        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 an element, displays provided message in case value is invalid. */
+    async setCustomValidity(message) {
+        this.customErrorMessage = message;
+        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;
+    }
+    get datalistId() {
+        return `${this.uniqueId}-list`;
+    }
+    /**
+     * Checks if an attribute should be excluded from passthrough.
+     */
+    shouldExcludeAttribute(attrName) {
+        return (frameworkAttributesSet.has(attrName) ||
+            excludedAttributesSet.has(attrName) ||
+            managedAriaAttributesSet.has(attrName));
+    }
+    /**
+     * Collects native HTML input attributes from the host element that aren't
+     * already handled by explicit props. This allows passing through attributes
+     * like 'list', 'multiple', 'size', etc. without creating explicit props.
+     * Optimized with Set lookups (O(1)) and caching.
+     */
+    collectNativeAttributes() {
+        // Return cached result if available
+        if (this.passthroughAttrsCache !== null) {
+            return this.passthroughAttrsCache;
+        }
+        const collected = {};
+        const hostAttrs = this.host.attributes;
+        // Early return if no attributes to process
+        if (!hostAttrs || hostAttrs.length === 0) {
+            this.passthroughAttrsCache = collected;
+            return collected;
+        }
+        for (const attr of Array.from(hostAttrs)) {
+            const attrName = attr.name.toLowerCase();
+            // Skip framework/component-specific attributes using helper method
+            if (this.shouldExcludeAttribute(attrName)) {
+                continue;
+            }
+            // Include data-* or native input attributes (exclude aria- - component manages ARIA via inputAttrs)
+            if (attrName.startsWith('data-') || nativeInputAttributesSet.has(attrName)) {
+                // Use special camelCase mapping for certain attributes that need it for JSX properties
+                // Otherwise keep the attribute name as-is for native HTML attributes  
+                const jsxAttrName = attributeCamelCaseMap[attrName] || attrName;
+                // Handle boolean attributes: if value is empty or matches attribute name, set to true
+                // This ensures proper JSX rendering for attributes like 'multiple'
+                const attrValue = attr.value;
+                collected[jsxAttrName] = (attrValue === '' || attrValue === attrName) ? true : attrValue;
+            }
+        }
+        // Cache the result
+        this.passthroughAttrsCache = collected;
+        return collected;
+    }
+    /** 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 && 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() {
+        if (!this.value)
+            return false;
+        const regex = new RegExp(this.pattern, 'u');
+        return regex.test(this.value);
+    }
+    componentWillLoad() {
+        this.initial['value'] = this.value;
+        this.initial['invalid'] = this.invalid;
+        // Clear passthrough attributes cache to ensure fresh collection on load
+        this.passthroughAttrsCache = null;
+        // Extract options from slotted datalist
+        this.extractSlottedDatalistOptions();
+    }
+    /**
+     * Extracts options from a slotted <datalist> element.
+     * Supports both default slot and slot="datalist" usage.
+     */
+    extractSlottedDatalistOptions() {
+        // First check for slot="datalist"
+        const slottedDatalist = this.host.querySelector('datalist[slot="datalist"]');
+        if (!slottedDatalist) {
+            // Check for datalist in default slot
+            const defaultSlotDatalist = Array.from(this.host.querySelectorAll('datalist'))
+                .find(el => !el.hasAttribute('slot'));
+            if (!defaultSlotDatalist) {
+                return;
+            }
+            this.slottedOptions = this.parseDatalistOptions(defaultSlotDatalist);
+        }
+        else {
+            this.slottedOptions = this.parseDatalistOptions(slottedDatalist);
+        }
+    }
+    /**
+     * Parses options from a HTMLDataListElement into InputOption array.
+     */
+    parseDatalistOptions(datalist) {
+        const options = [];
+        const optionElements = datalist.querySelectorAll('option');
+        optionElements.forEach(opt => {
+            options.push({
+                value: opt.value,
+                label: opt.label || opt.textContent || opt.value
+            });
+        });
+        return options;
+    }
+    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);
+    }
+    connectedCallback() {
+        this.connectFormEventListeners();
+        this.setupDatalistObserver();
+        if (this.autofocus && !RInput.autofocusHandled) {
+            RInput.autofocusHandled = true;
+            queueMicrotask(() => { var _a; return (_a = this.host.querySelector('input[autofocus]')) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true }); });
+        }
+    }
+    disconnectedCallback() {
+        var _a;
+        this.disconnectFormEventListeners();
+        this.disconnectDatalistObserver();
+        (_a = this.nativeElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('beforeinput', this.onBeforeInput);
+    }
+    setupDatalistObserver() {
+        this.extractSlottedDatalistOptions();
+        if (typeof MutationObserver === 'undefined') {
+            return;
+        }
+        this.datalistObserver = new MutationObserver((mutations) => {
+            for (const mutation of mutations) {
+                if (mutation.type === 'childList') {
+                    this.extractSlottedDatalistOptions();
+                    break;
+                }
+            }
+        });
+        this.datalistObserver.observe(this.host, {
+            childList: true,
+            subtree: false
+        });
+    }
+    disconnectDatalistObserver() {
+        if (this.datalistObserver) {
+            this.datalistObserver.disconnect();
+            this.datalistObserver = null;
+        }
+    }
+    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);
+    }
+    handleValueChange() {
+        if (!this.isResetting) {
+            this.validateFormElement(this.nativeElement);
+        }
+    }
+    handleTypeChange() {
+        if (this.nativeElement) {
+            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;
+        // Collect any native input attributes that were set on the host element
+        const passthroughAttrs = this.collectNativeAttributes();
+        // Combine options from prop and slotted datalist (prop takes precedence)
+        const options = [...(this.slottedOptions || [])];
+        const hasDatalist = options.length > 0;
+        const inputAttrs = Object.assign(Object.assign({ 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 }, passthroughAttrs), {
+            // Component-controlled values always win
+            'data-value': value, 'aria-invalid': `${invalid || false}`, 'aria-required': `${required || false}`, 'aria-describedby': this.ariaDescribedBy,
+            // list attribute: use internal datalist when options provided, otherwise use passthrough value (explicit takes precedence)
+            list: hasDatalist ? this.datalistId : (passthroughAttrs.list || null)
+        });
+        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 });
+        };
+        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, { ref: this.setNativeInputRef, value: this.value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onInvalid: this.onInvalid, onKeyDown: this.onKeyDown, onKeyUp: this.onKeyUp, onSelect: this.onSelect })), hasDatalist && (h("datalist", { ref: (el) => el && (el.id = this.datalistId) }, options.map((option) => (h("option", { value: option.value }, option.label || option.value))))), 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))))));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "value": ["handleValueChange"],
+        "type": ["handleTypeChange"]
+    }; }
+};
+RInput.autofocusHandled = false;
+RInput.style = inputCss;
+
+export { RInput as r_input };