@riverty/web-components 6.2.1 → 6.3.0

package/dist/collection/components/select/select.js

@@ -1,2011 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { appendControlToFormData } from "../../utils/formData";
-import StyleObserver from "style-observer";
-/**
- * A select allows the user to choose between a set of options.
- *
- * Overall behavior is based on native `<select>`
- *
- */
-export class Select {
-    constructor() {
-        /** Define if select should render as a text item or a block */
-        this.fullWidth = false;
-        /** Define wether listbox appears on top or at the bottom of the select  */
-        this.listboxPosition = 'bottom';
-        /**
-         * Defines aria label for combobox toggle button
-         * @default "Toggle combobox"
-         */
-        this.toggleButtonAriaLabel = 'Toggle combobox';
-        /**
-         * Defines the text that will be displayed if no results are found
-         * @default "No results found"
-         */
-        this.noResultsFound = 'No results found';
-        /** Custom validity state passed after validation */
-        this.validityState = '';
-        /** Custom validity message passed after validation */
-        this.validityMessage = '';
-        /** Is select expanded */
-        this.isExpanded = false;
-        /** Current state, reflecting if select is readonly */
-        this.isReadonly = false;
-        /** Save current value */
-        this.currentValue = '';
-        /** Value that must be displayed as selected option */
-        this.valueToDisplay = '';
-        this.isInitializing = false;
-        this.isResetting = false;
-        this.focusedOption = null;
-        this.isValueFocused = false;
-        this.isNoResultsFound = false;
-        /** Indicates if the user has interacted with the select (focused/clicked) */
-        this.touched = false;
-        /** Indicates if the value has been changed by user interaction */
-        this.dirty = false;
-        this.handleSlotChange = () => {
-            setTimeout(() => {
-                this.initialize();
-                this.defineHostWidth();
-            }, 0);
-        };
-        /**
-         * Initial attributes state
-         * */
-        this.initial = {};
-        /** Unique id */
-        this.uniqueId = `r-select-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
-        this.getValidityStateData = (element) => {
-            let validityState = '';
-            let validityMessage = '';
-            for (const state in element.validity) {
-                if (element.validity[state]) {
-                    validityState = state;
-                    if (this[state + 'Message']) {
-                        validityMessage = this[state + 'Message'];
-                        return { validityState, validityMessage };
-                    }
-                    validityMessage = element.validationMessage;
-                }
-            }
-            return { validityState, validityMessage };
-        };
-        this.validateFormElement = (element = null) => {
-            if (element === null)
-                return;
-            if (this.isNoValidate)
-                return;
-            if (this.error)
-                return;
-            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
-            });
-        };
-        // Typeahead buffer + last matched index
-        this.typeaheadBuffer = '';
-        this.typeaheadTimeout = null;
-        this.lastTypeaheadIndex = -1;
-        this.contributeToFormData = (event) => {
-            appendControlToFormData(this.nativeElement, event.formData);
-        };
-        this.onValueClick = (e) => {
-            var _a;
-            if (this.disabled)
-                return;
-            e.preventDefault();
-            e.stopPropagation();
-            // Mark as touched when user clicks on the select
-            this.touched = true;
-            this.toggle();
-            if (!this.isExpanded)
-                return;
-            if (this.combobox)
-                (_a = this.valueElement) === null || _a === void 0 ? void 0 : _a.focus();
-            this.defineListboxPositionState();
-        };
-        // Returns a handler for a key
-        this.keyboardEventHandlerFactory = (code, altKey = false) => {
-            switch (code) {
-                case 'Enter':
-                    return () => {
-                        var _a;
-                        if (this.isExpanded) {
-                            const newValue = ((_a = this.focusedOption) === null || _a === void 0 ? void 0 : _a.value) || '';
-                            if (newValue !== this.currentValue) {
-                                this.dirty = true;
-                            }
-                            this.setValueFromUserInteraction(newValue);
-                            return;
-                        }
-                        this.expand();
-                        this.setOptionFocus(this.selectedElement);
-                    };
-                case 'Escape':
-                    return () => {
-                        this.collapse();
-                        this.reportValidity();
-                    };
-                case 'ArrowUp':
-                    return () => {
-                        var _a;
-                        if (!this.isExpanded) {
-                            this.expand();
-                            const indexToFocus = this.combobox ? this.optionElements.length - 1 : 0;
-                            this.setOptionFocus(this.selectedElement || this.optionElements[indexToFocus]);
-                            return;
-                        }
-                        if (this.focusedOption && altKey) {
-                            const newValue = ((_a = this.focusedOption) === null || _a === void 0 ? void 0 : _a.value) || '';
-                            if (newValue !== this.currentValue) {
-                                this.dirty = true;
-                            }
-                            this.setValueFromUserInteraction(newValue);
-                            return;
-                        }
-                        if (!this.combobox && this.focusedOption === this.optionElements[0])
-                            return;
-                        if (this.focusedOption) {
-                            this.focusPrevOption();
-                            return;
-                        }
-                        this.setOptionFocus(this.selectedElement || this.optionElements[0]);
-                    };
-                case 'ArrowDown':
-                    return () => {
-                        if (!this.isExpanded) {
-                            this.expand();
-                            if (altKey)
-                                return;
-                            this.setOptionFocus(this.selectedElement || this.optionElements[0]);
-                            return;
-                        }
-                        if (!this.combobox && this.focusedOption === this.optionElements[this.optionElements.length - 1])
-                            return;
-                        if (this.focusedOption) {
-                            this.focusNextOption();
-                            return;
-                        }
-                        this.setOptionFocus(this.selectedElement || this.optionElements[0]);
-                    };
-                case 'Home':
-                    return () => {
-                        if (!this.isExpanded) {
-                            this.expand();
-                            this.setOptionFocus(this.selectedElement || this.optionElements[0]);
-                            return;
-                        }
-                        this.setOptionFocus(this.optionElements[0]);
-                    };
-                case 'End':
-                    return () => {
-                        if (!this.isExpanded) {
-                            this.expand();
-                            this.setOptionFocus(this.selectedElement || this.optionElements[this.optionElements.length - 1]);
-                            return;
-                        }
-                        this.setOptionFocus(this.optionElements[this.optionElements.length - 1]);
-                    };
-                case 'PageUp': {
-                    return () => {
-                        if (!this.isExpanded)
-                            return;
-                        if (this.focusedOption === null)
-                            return;
-                        const currentIndex = this.optionElementsArray.indexOf(this.focusedOption);
-                        if (currentIndex === -1)
-                            return;
-                        const targetIndex = currentIndex - 10 >= 0 ? currentIndex - 10 : 0;
-                        this.setOptionFocus(this.optionElements[targetIndex]);
-                    };
-                }
-                case 'PageDown': {
-                    return () => {
-                        if (!this.isExpanded)
-                            return;
-                        if (this.focusedOption === null)
-                            return;
-                        const currentIndex = this.optionElementsArray.indexOf(this.focusedOption);
-                        if (currentIndex === -1)
-                            return;
-                        const lastIndex = this.optionElements.length - 1;
-                        const targetIndex = currentIndex + 10 <= lastIndex ? currentIndex + 10 : lastIndex;
-                        this.setOptionFocus(this.optionElements[targetIndex]);
-                    };
-                }
-                case 'Tab':
-                    return () => {
-                        var _a;
-                        const newValue = ((_a = this.focusedOption) === null || _a === void 0 ? void 0 : _a.value) || '';
-                        if (newValue !== this.currentValue) {
-                            this.dirty = true;
-                        }
-                        this.setValueFromUserInteraction(newValue);
-                    };
-                default:
-                    // No matching key handler: intentional no-op
-                    return () => { void 0; };
-            }
-        };
-        this.onValueKeydown = (e) => {
-            e.stopPropagation();
-            const preventCodes = [
-                'ArrowUp',
-                'ArrowDown',
-                'Home',
-                'End',
-                'PageUp',
-                'PageDown',
-                'Space',
-                'Enter',
-                'Escape'
-            ];
-            if (preventCodes.includes(e.code)) {
-                e.preventDefault();
-            }
-            else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
-                // Tab will also be skipped here
-                if (!this.isExpanded)
-                    this.expand();
-                this.handleTypeahead(e.key);
-                return;
-            }
-            switch (e.code) {
-                case 'Space':
-                    this.keyboardEventHandlerFactory('Enter')();
-                    break;
-                case 'Tab':
-                    if (this.focusedOption === null)
-                        break;
-                    this.keyboardEventHandlerFactory('Tab')();
-                    break;
-                default:
-                    this.keyboardEventHandlerFactory(e.code, e.altKey)();
-                    break;
-            }
-        };
-        this.onComboboxKeydown = (e) => {
-            e.stopPropagation();
-            const preventCodes = [
-                'ArrowUp',
-                'ArrowDown',
-                'Home',
-                'End',
-                'PageUp',
-                'PageDown',
-                'Enter',
-                'Escape'
-            ];
-            if (preventCodes.includes(e.code)) {
-                e.preventDefault();
-            }
-            switch (e.code) {
-                case 'Tab':
-                    if (this.focusedOption === null) {
-                        this.collapse();
-                        break;
-                    }
-                    this.keyboardEventHandlerFactory('Tab')();
-                    break;
-                case 'Escape':
-                    if (this.isExpanded) {
-                        this.keyboardEventHandlerFactory('Escape')();
-                        return;
-                    }
-                    this.valueElement.value = '';
-                    const newValue = '';
-                    if (newValue !== this.currentValue) {
-                        this.dirty = true;
-                    }
-                    this.setValueFromUserInteraction(newValue);
-                    this.reportValidity();
-                    break;
-                default:
-                    this.keyboardEventHandlerFactory(e.code, e.altKey)();
-                    break;
-            }
-        };
-        this.onValueBlur = () => {
-            this.isValueFocused = false;
-            const { isBusy, isExpanded } = this;
-            if (isBusy || isExpanded)
-                return;
-            this.reportValidity();
-        };
-        this.onValueFocus = () => {
-            this.isValueFocused = true;
-            // Mark as touched when user focuses on the select
-            this.touched = true;
-        };
-        this.filterOptionsListByComboboxValue = (value = '') => {
-            const options = Array.from(this.host.querySelectorAll('r-select-option:not([data-no-results="true"])'));
-            options.forEach((option) => {
-                var _a, _b;
-                const optionText = (_b = (_a = option === null || option === void 0 ? void 0 : option.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === null || _b === void 0 ? void 0 : _b.toLowerCase();
-                const hasMatch = optionText.search(value.toLowerCase()) !== -1;
-                option.setAttribute('aria-hidden', `${!hasMatch}`);
-            });
-            this.isNoResultsFound = options.every((option) => (option === null || option === void 0 ? void 0 : option.getAttribute('aria-hidden')) === 'true');
-            if (this.isNoResultsFound) {
-                this.statusElement.innerHTML = this.noResultsFound;
-                setTimeout(() => {
-                    this.statusElement.innerText = '';
-                }, 1000);
-            }
-        };
-        this.clearComboboxOptions = () => {
-            if (!this.combobox)
-                return;
-            this.filterOptionsListByComboboxValue();
-        };
-        this.onComboboxChange = (event) => {
-            this.filterOptionsListByComboboxValue(event.target.value);
-        };
-        this.onComboboxInput = (event) => {
-            this.filterOptionsListByComboboxValue(event.target.value);
-            if (!this.isExpanded) {
-                this.expand();
-                this.defineListboxPositionState();
-            }
-        };
-        this.onSubmitForm = (event) => {
-            if (this.isNoValidate)
-                return;
-            this.reportValidity();
-            if (this.invalid) {
-                event.preventDefault();
-                event.stopPropagation();
-            }
-        };
-        // Clear validation results and emit rReset event
-        this.onResetForm = () => {
-            // Clear validation results
-            this.resetValidation();
-            // Reset touched and dirty states
-            this.markAsPristine();
-            // Restore initial value
-            this.setValue(this.initial['value']);
-            // Emit rReset
-            this.rReset.emit({
-                element: this.host,
-                value: this.currentValue
-            });
-        };
-        this.renderSelect = (comboboxAttrs) => {
-            var _a, _b;
-            return (h("span", Object.assign({ class: "r-select--value", role: "combobox" }, comboboxAttrs, { ref: el => this.valueElement = el, onClick: this.isInteractive ? this.onValueClick : null, onKeyDown: this.isInteractive ? this.onValueKeydown : null, onBlur: this.isInteractive ? this.onValueBlur : null, onFocus: this.isInteractive ? this.onValueFocus : null }), h("span", { class: "r-select--value-display" }, this.isLeadingSlotRendered ? h("slot", { name: "leading" }) : null, h("span", { class: "r-select--value-selected", innerHTML: ((_b = (_a = this.valueToDisplay) === null || _a === void 0 ? void 0 : _a.trim) === null || _b === void 0 ? void 0 : _b.call(_a)) || this.placeholder || '' })), h("span", { class: "r-select--value-arrow" }, h("r-icon", { class: "r-select--trailing-icon", name: "angle-down", size: "s" }))));
-        };
-        this.renderCombobox = (comboboxAttrs) => {
-            var _a, _b, _c;
-            return (h("div", { class: "r-select--value", onClick: this.isInteractive ? this.onValueClick : null, ref: el => this.comboboxContainerElement = el }, h("div", { class: "r-select--value-display" }, this.isLeadingSlotRendered ? h("slot", { name: "leading" }) : null, h("input", Object.assign({ role: "combobox", autocomplete: "off", "aria-autocomplete": "list", disabled: this.disabled, readonly: this.readonly, type: "text" }, comboboxAttrs, { class: "r-select--input", ref: el => this.valueElement = el, onKeyDown: this.isInteractive ? this.onComboboxKeydown : null, onBlur: this.isInteractive ? this.onValueBlur : null, onFocus: this.isInteractive ? this.onValueFocus : null, onChange: this.isInteractive ? this.onComboboxChange : null, onInput: this.isInteractive ? this.onComboboxInput : null, placeholder: this.placeholder || '', value: ((_c = (_b = (_a = this.selectedElement) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim) === null || _c === void 0 ? void 0 : _c.call(_b)) || '' }))), h("button", { "aria-label": this.toggleButtonAriaLabel, "aria-expanded": `${this.expanded || false}`, "aria-controls": `${this.uniqueId}-list`, disabled: this.disabled, tabindex: "-1", class: "r-select--value-arrow-button r-select--value-arrow" }, h("r-icon", { class: "r-select--trailing-icon", name: "angle-down", size: "s" })), h("div", { class: "visually-hidden", role: "status", ref: (el) => this.statusElement = el })));
-        };
-    }
-    /** Sets the component into `readonly` state  */
-    async setReadonly() {
-        this.collapse();
-        this.resetValidation();
-        this.isReadonly = true;
-    }
-    /** Clears readonly state from the component */
-    async clearReadonly() {
-        this.isReadonly = false;
-    }
-    handleListboxPositionChange() {
-        this.defineListboxPositionState();
-    }
-    handleExpandedChange() {
-        this.expanded ? this.expand() : this.collapse();
-    }
-    handleReadonlyChange() {
-        this.readonly ? this.setReadonly() : this.clearReadonly();
-    }
-    handleValueChange(value, oldValue) {
-        if (this.isInitializing)
-            return;
-        // Only process if this is not the initial load (oldValue is defined)
-        if (oldValue !== undefined && oldValue !== value) {
-            // This is a programmatic change from parent attribute
-            // Do NOT mark as dirty, do NOT emit rChange
-            this._renderSelected(value, false);
-            this.clearComboboxOptions();
-        }
-    }
-    /** Listen for custom event triggered by "onClick" event on `<r-select-option>` */
-    optionSelectAction(e) {
-        e.stopPropagation();
-        if (this.disabled)
-            return;
-        // Mark as dirty only if value actually changes
-        if (e.target.value !== this.currentValue) {
-            this.dirty = true;
-        }
-        this.setValueFromUserInteraction(e.target.value);
-    }
-    tooltipFocusAction() {
-        this.collapse();
-        this.reportValidity();
-    }
-    onMouseup(e) {
-        if (!this.isExpanded)
-            return;
-        e.stopPropagation();
-        if (!this.host.contains(e.target)) {
-            this.collapse();
-            this.reportValidity();
-        }
-    }
-    onKeyup(e) {
-        if (!this.isExpanded)
-            return;
-        e.stopPropagation();
-        const path = e.composedPath ? e.composedPath() : [];
-        const isInsideSelect = path.includes(this.host);
-        if (!isInsideSelect) {
-            this.collapse();
-            this.reportValidity();
-        }
-    }
-    /**
-     * Listen on window scroll
-     * and update tooltip position if needed
-     */
-    handleScrolling() {
-        if (this.isExpanded)
-            this.defineListboxPositionState();
-    }
-    /**
-     * Listen on window resizing
-     * and update tooltip position if needed
-     */
-    handleResizing() {
-        if (this.isExpanded)
-            this.defineListboxPositionState();
-    }
-    /**
-     * Set value of the select programmatically.
-     * Does NOT mark as dirty or emit change events.
-     * Use this for programmatic value updates.
-     */
-    async setValue(value = '') {
-        // Clear validation results
-        this.resetValidation();
-        // Don't emit change event for programmatic updates
-        this._renderSelected(value, false);
-        this.clearComboboxOptions();
-    }
-    /**
-     * Internal method to set value from user interaction.
-     * Assumes dirty flag is already set by the caller.
-     * Will emit rChange if dirty flag is true.
-     */
-    setValueFromUserInteraction(value = '') {
-        // Clear validation results
-        this.resetValidation();
-        // Emit change event for user interactions (if dirty is set)
-        this._renderSelected(value, true);
-        this.clearComboboxOptions();
-    }
-    /** Set value of the select */
-    async getValue() {
-        return this.currentValue || '';
-    }
-    /** Reset select to its initial state */
-    async reset() {
-        // Clear validation results
-        this.resetValidation();
-        // Reset touched and dirty states
-        this.markAsPristine();
-        // Collapse options listbox
-        this.collapse();
-        // Restore unfiltered list
-        this.clearComboboxOptions();
-        // If value has not changed --> nothing to reset
-        if (this.currentValue === this.initial['value'])
-            return;
-        // If initial value is not an empty string
-        if (this.initial['value'] !== '' && this.initiallySelectedElement) {
-            this.isResetting = true;
-            this.setValue(this.initial['value']);
-            this.isResetting = false;
-            return;
-        }
-        // Clear any selected option
-        this.deselectOptions();
-        // Set value of the select to null
-        this.currentValue = '';
-        this.valueToDisplay = '';
-    }
-    /**
-     * Clears validation results.
-     */
-    async resetValidation() {
-        // Clear validity message
-        this.validityMessage = null;
-        // Clear validity state
-        this.validityState = null;
-        // Reset props to initial
-        this.invalid = this.initial['invalid'];
-        this.valid = !this.invalid;
-    }
-    /**
-     * Returns whether the select has been touched (focused/clicked by user).
-     * @returns A boolean indicating whether the select has been touched.
-     */
-    async isTouched() {
-        return this.touched;
-    }
-    /**
-     * Returns whether the select value has been changed by user interaction.
-     * @returns A boolean indicating whether the select is dirty.
-     */
-    async isDirty() {
-        return this.dirty;
-    }
-    /**
-     * Marks the select as untouched and pristine (not dirty).
-     */
-    async markAsPristine() {
-        this.touched = false;
-        this.dirty = false;
-    }
-    /**
-     * Validates the textarea without triggering UI and returns a boolean indicating its validity.
-     * @returns A boolean indicating whether the textarea is valid.
-     */
-    async checkValidity() {
-        const { validityState } = this.getValidityStateData(this.nativeElement);
-        return validityState === 'valid';
-    }
-    /** Check validity and reveal validation state and message */
-    async reportValidity() {
-        this.validateFormElement(this.nativeElement);
-        return this.validityState === 'valid';
-    }
-    /** Set focus on the element */
-    async setFocus() {
-        var _a;
-        (_a = this.valueElement) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    /** Remove focus from the element */
-    async setBlur() {
-        var _a;
-        (_a = this.valueElement) === null || _a === void 0 ? void 0 : _a.blur();
-    }
-    /** Expand options listbox */
-    async expand() {
-        this.isExpanded = true;
-    }
-    /** Collapse options listbox */
-    async collapse() {
-        this.isExpanded = false;
-        if (this.isBusy)
-            return;
-        this.clearOptionsFocus();
-        this.setComboboxValueOnCollapse();
-    }
-    /**
-     * Retrieves the currently focused option within this select component.
-     *
-     * The focused option is identified by the presence of the `data-focused="true"`
-     * attribute on an `r-select-option` element inside the component's host.
-     *
-     * @returns Promise resolving to the focused `HTMLRSelectOptionElement`, or `null`
-     * if no option is currently marked as focused.
-     */
-    async getFocusedOption() {
-        return this.host.querySelector('r-select-option[data-focused="true"]') || null;
-    }
-    /**
-     * Sets focus to the option at the specified index.
-     *
-     * Retrieves the option element from the internal optionElements collection
-     * and delegates focusing logic to `setOptionFocus`.
-     *
-     * @param index - Zero-based index of the option to focus. If the index is out of bounds
-     * or the corresponding option element is unavailable, the method will no-op.
-     *
-     * @returns A promise that resolves with the result of `setOptionFocus`, typically indicating
-     * success or failure of applying focus (implementation dependent).
-     */
-    async setFocusedOption(index) {
-        return this.setOptionFocus(this.optionElements[index]);
-    }
-    clearOptionsFocus() {
-        var _a;
-        this.focusedOption = null;
-        try {
-            this.valueElement.ariaActiveDescendantElement = null;
-        }
-        catch (_b) {
-            (_a = this.valueElement) === null || _a === void 0 ? void 0 : _a.removeAttribute('aria-activedescendant');
-        }
-        this.focusedOptions.forEach(option => option.setBlur());
-    }
-    setComboboxValueOnCollapse() {
-        var _a, _b, _c;
-        if (!this.combobox)
-            return;
-        this.valueElement.value = ((_c = (_b = (_a = this.selectedElement) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim) === null || _c === void 0 ? void 0 : _c.call(_b)) || '';
-        this.clearComboboxOptions();
-    }
-    get focusedOptions() {
-        return Array.from(this.host.querySelectorAll('r-select-option[data-focused="true"]'));
-    }
-    toggle() {
-        this.isExpanded = !this.isExpanded;
-    }
-    get selectedElement() {
-        return this.host.querySelector(`r-select-option[value="${this.currentValue}"]`);
-    }
-    get initiallySelectedElement() {
-        return this.host.querySelector(`r-select-option[value="${this.initial['value']}"]`) || null;
-    }
-    /** Identify wrapping form element */
-    get parentFormEl() {
-        return this.host.closest('form') || document.querySelector(`#${this.form}`) || null;
-    }
-    /**
-     * 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 optionElements() {
-        return this.host.querySelectorAll('r-select-option:not([disabled]:not([disabled="false"])):not([aria-hidden="true"])') || null;
-    }
-    get optionElementsArray() {
-        return Array.from(this.optionElements);
-    }
-    deselectOptions() {
-        if (!this.optionElements)
-            return;
-        this.optionElements.forEach(option => option.clearSelected());
-    }
-    get isBusy() {
-        return this.isInitializing || this.isResetting;
-    }
-    _renderSelected(value = '', emitValue = true) {
-        var _a, _b;
-        // Update value of `<r-select>`
-        this.currentValue = value;
-        if (this.currentValue === null)
-            this.host.removeAttribute('value');
-        else
-            this.host.setAttribute('value', this.currentValue);
-        const elementToSelect = this.host.querySelector(`r-select-option[value="${(_a = this.currentValue) === null || _a === void 0 ? void 0 : _a.trim()}"]`);
-        this.valueToDisplay = (elementToSelect === null || elementToSelect === void 0 ? void 0 : elementToSelect.innerHTML) || (elementToSelect === null || elementToSelect === void 0 ? void 0 : elementToSelect.textContent) || this.currentValue || '';
-        // Switch `selected` value for each option
-        (_b = this.optionElements) === null || _b === void 0 ? void 0 : _b.forEach(option => {
-            option.value === value ? option.setSelected() : option.clearSelected();
-        });
-        this._renderNativeOption();
-        if (this.isExpanded)
-            this.collapse();
-        if (!this.isBusy) {
-            this.reportValidity();
-        }
-        // Only emit rChange if:
-        // 1. emitValue is true
-        // 2. Not during initialization or reset
-        // 3. The component is dirty (user has interacted)
-        if (emitValue && !this.isBusy && this.dirty) {
-            this.rChange.emit({
-                element: this.host,
-                value: value
-            });
-        }
-    }
-    setOptionFocus(element = this.selectedElement) {
-        if (!element)
-            return;
-        if (this.optionElements === null)
-            return;
-        // Helper: fallback to scrollIntoView
-        const _scrollIntoViewFallback = (element, container) => {
-            const top = element.offsetTop;
-            const bottom = top + element.offsetHeight;
-            const viewTop = container.scrollTop;
-            const viewBottom = viewTop + container.clientHeight;
-            if (top < viewTop) {
-                container.scrollTop = top;
-            }
-            else if (bottom > viewBottom) {
-                container.scrollTop = bottom - container.clientHeight;
-            }
-        };
-        // Helper: defines if scrollIntoView can be used or calls optional fallback
-        const _scrollIntoView = (element, container) => {
-            var _a, _b;
-            if (!container)
-                return;
-            // Try native scrollIntoView first (some browsers optimize this)
-            try {
-                (_a = element.scrollIntoView) === null || _a === void 0 ? void 0 : _a.call(element, {
-                    block: 'nearest',
-                    inline: 'nearest'
-                });
-            }
-            catch (_c) {
-                // Older Safari without options signature
-                (_b = element.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(element, false);
-            }
-            // Manual correction if still out of view
-            const optRect = element.getBoundingClientRect();
-            const contRect = container.getBoundingClientRect();
-            const outside = optRect.top < contRect.top || optRect.bottom > contRect.bottom;
-            if (outside) {
-                _scrollIntoViewFallback(element, container);
-            }
-        };
-        requestAnimationFrame(() => {
-            var _a;
-            this.clearOptionsFocus();
-            element.setFocus();
-            this.focusedOption = element;
-            try {
-                this.valueElement.ariaActiveDescendantElement = element;
-            }
-            catch (_b) {
-                (_a = this.valueElement) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', element.id);
-            }
-            _scrollIntoView(element, this.listboxElement);
-        });
-    }
-    focusPrevOption(currentElement = this.focusedOption || this.selectedElement) {
-        if (this.optionElements === null)
-            return;
-        const currentIndex = this.optionElementsArray.indexOf(currentElement);
-        const prevIndex = currentIndex - 1;
-        const isPrevIndex = prevIndex >= 0;
-        const prevElement = isPrevIndex ? this.optionElements[prevIndex] : this.optionElements[this.optionElements.length - 1];
-        this.setOptionFocus(prevElement);
-    }
-    focusNextOption(currentElement = this.focusedOption || this.selectedElement) {
-        if (this.optionElements === null)
-            return;
-        const currentIndex = this.optionElementsArray.indexOf(currentElement);
-        const nextIndex = currentIndex + 1;
-        const lastIndex = this.optionElements.length - 1;
-        const isNextIndex = nextIndex <= lastIndex;
-        const nextElement = isNextIndex ? this.optionElements[nextIndex] : this.optionElements[0];
-        this.setOptionFocus(nextElement);
-    }
-    /**
-     * Return option elements whose label starts with the filter text (case-insensitive).
-     */
-    filterOptions(options, filter) {
-        if (!filter)
-            return [];
-        const f = filter.toLowerCase();
-        return options.filter(o => !o.disabled &&
-            (o.textContent || '').trim().toLowerCase().startsWith(f));
-    }
-    /**
-     * Return the index (within the provided array) of an option matching the filter.
-     * If the filter is multiple iterations of the same letter (e.g. 'aaa'), cycle through
-     * first-letter matches starting from startIndex.
-     * Returns -1 if no match.
-     */
-    getIndexByLetter(options, filter, startIndex = 0) {
-        if (!options.length || !filter)
-            return -1;
-        const ordered = [...options.slice(startIndex), ...options.slice(0, startIndex)];
-        const matchesFull = this
-            .filterOptions(ordered, filter)
-            .sort((a, b) => ((a.textContent || '').trim().toLowerCase())
-            .localeCompare((b.textContent || '').trim().toLowerCase()));
-        const allSame = filter.split('').every(c => c === filter[0]);
-        if (matchesFull[0]) {
-            return options.indexOf(matchesFull[0]);
-        }
-        else if (allSame) {
-            const firstLetterMatches = this.filterOptions(ordered, filter[0]);
-            if (firstLetterMatches[0]) {
-                return options.indexOf(firstLetterMatches[0]);
-            }
-            return -1;
-        }
-        return -1;
-    }
-    handleTypeahead(char) {
-        const RESET_MS = 500;
-        clearTimeout(this.typeaheadTimeout);
-        const options = this.optionElementsArray;
-        // Append character
-        this.typeaheadBuffer += char.toLowerCase();
-        const allSame = this.typeaheadBuffer.split('').every(c => c === this.typeaheadBuffer[0]);
-        // Starting point for search:
-        let startIndex;
-        if (allSame && this.lastTypeaheadIndex !== -1) {
-            // Cycle through same-letter matches
-            startIndex = (this.lastTypeaheadIndex + 1) % options.length;
-        }
-        else {
-            const focusBase = (this.focusedOption || this.selectedElement);
-            const baseIndex = options.indexOf(focusBase);
-            startIndex = baseIndex === -1 ? 0 : (baseIndex + 1) % options.length;
-        }
-        const idx = this.getIndexByLetter(options, this.typeaheadBuffer, startIndex);
-        if (idx !== -1) {
-            this.lastTypeaheadIndex = idx;
-            const el = options[idx];
-            if (!this.isExpanded)
-                this.expand();
-            this.setOptionFocus(el);
-        }
-        // Reset buffer after inactivity
-        this.typeaheadTimeout = setTimeout(() => {
-            this.typeaheadBuffer = '';
-        }, RESET_MS);
-    }
-    connectFormEventListeners() {
-        if (!this.parentFormEl)
-            return;
-        this.parentFormEl.addEventListener('formdata', this.contributeToFormData);
-        this.parentFormEl.addEventListener('submit', this.onSubmitForm, { capture: true });
-        this.parentFormEl.addEventListener('reset', this.onResetForm);
-    }
-    disconnectFormEventListeners() {
-        if (!this.parentFormEl)
-            return;
-        this.parentFormEl.removeEventListener('formdata', this.contributeToFormData);
-        this.parentFormEl.removeEventListener('submit', this.onSubmitForm);
-        this.parentFormEl.removeEventListener('reset', this.onResetForm);
-    }
-    defineHostWidth() {
-        if (this.fullWidth)
-            return;
-        const nativeWidth = this.host.shadowRoot.querySelector('.r-select--native').getBoundingClientRect().width;
-        const valueWidth = (this.combobox ? this.comboboxContainerElement : this.valueElement).getBoundingClientRect().width;
-        const listWidth = this.listboxElement.getBoundingClientRect().width;
-        const structuralWidth = Math.max(nativeWidth, valueWidth, listWidth);
-        this.host.style.setProperty('--width', `${structuralWidth}px`);
-    }
-    _renderNativeOption() {
-        var _a, _b, _c, _d, _e;
-        const optionElement = document.createElement("option");
-        const optionText = document.createTextNode((_c = (_b = (_a = this.selectedElement) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim) === null || _c === void 0 ? void 0 : _c.call(_b));
-        optionElement.value = this.currentValue;
-        optionElement.selected = true;
-        optionElement.appendChild(optionText);
-        if (!this.nativeElement)
-            return;
-        this.nativeElement.innerHTML = '';
-        (_d = this.nativeElement) === null || _d === void 0 ? void 0 : _d.appendChild(optionElement);
-        this.nativeElement.value = this.currentValue;
-        (_e = this.nativeElement) === null || _e === void 0 ? void 0 : _e.setAttribute('value', this.currentValue);
-    }
-    notVisible(element) {
-        return getComputedStyle(element).overflow !== "visible";
-    }
-    /**
-     * Finds first element's parent with not visible overflow.
-     * @param element -- parent element
-     * @param initEl -- initial(child) element
-     */
-    findOverflowParent(element) {
-        var _a, _b;
-        if (((_a = element.parentNode) === null || _a === void 0 ? void 0 : _a.nodeType) === Node.DOCUMENT_FRAGMENT_NODE) {
-            return this.findOverflowParent((_b = element.parentNode) === null || _b === void 0 ? void 0 : _b.host);
-        }
-        if (this.notVisible(element)) {
-            return element;
-        }
-        if (element.parentElement) {
-            return this.findOverflowParent(element.parentElement);
-        }
-        return null;
-    }
-    get ariaDescribedBy() {
-        const describedBy = `${this.uniqueId}-message`;
-        return this.hint ? `${this.uniqueId}-hint ${describedBy}` : describedBy;
-    }
-    /**
-      * Parent with non visible overflow
-      */
-    get overflowedParent() {
-        return this.findOverflowParent(this.host.parentElement);
-    }
-    /**
-     * Available space at the top
-     */
-    get top() {
-        var _a, _b;
-        return (!this.overflowedParent ?
-            (_a = this.valueElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().top :
-            Math.abs(this.overflowedParent.getBoundingClientRect().top - ((_b = this.valueElement) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().top)));
-    }
-    /**
-     * Available space at the bottom
-     */
-    get bottom() {
-        var _a;
-        function calculateBottomSpace(element) {
-            return window.innerHeight - element.getBoundingClientRect().top - element.getBoundingClientRect().height;
-        }
-        const styles = window.getComputedStyle(this.messageContainer);
-        const messageContainerHeight = ((_a = this.messageContainer) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) + parseFloat(styles['marginTop']);
-        const calculatedHostBottomSpace = calculateBottomSpace(this.host) + messageContainerHeight;
-        return !this.overflowedParent ? calculatedHostBottomSpace + messageContainerHeight : Math.abs(calculateBottomSpace(this.overflowedParent) - calculatedHostBottomSpace);
-    }
-    /**
-     * Set correct tooltip position.
-     * First it checks the available space for a defined position and then sets the new one based on the available space.
-     */
-    defineListboxPositionState() {
-        var _a, _b;
-        const isBottomSpace = ((_a = this.listboxElement) === null || _a === void 0 ? void 0 : _a.offsetHeight) < this.bottom;
-        const isTopSpace = ((_b = this.listboxElement) === null || _b === void 0 ? void 0 : _b.offsetHeight) < this.top;
-        const isTop = this.listboxPosition === 'top';
-        const isBottom = this.listboxPosition === 'bottom';
-        /** Don't change the position if there is sufficient space for the listbox
-         * or insufficient space for another position.
-         * */
-        if ((isTop && (isTopSpace || !isBottomSpace)) || (isBottom && (isBottomSpace || !isTopSpace))) {
-            this.listboxPositionState = this.listboxPosition;
-            return;
-        }
-        switch (this.listboxPosition) {
-            case 'top':
-                this.listboxPositionState = !isTopSpace ? 'bottom' : 'top';
-                break;
-            case 'bottom':
-                this.listboxPositionState = !isBottomSpace ? 'top' : 'bottom';
-                break;
-        }
-    }
-    initialize() {
-        var _a;
-        const currentValue = this.value || '';
-        this.initial['value'] = this.value || '';
-        this.initial['invalid'] = this.invalid || false;
-        this.listboxPositionState = this.listboxPosition;
-        // Search for the option to select
-        const elementToSelect = this.optionElementsArray.find((el) => el.value.trim() === currentValue);
-        // Select the matching element if found
-        if (elementToSelect) {
-            this.isInitializing = true;
-            this.setValue(currentValue);
-            this.isInitializing = false;
-            return;
-        }
-        if (this.placeholder)
-            return;
-        if (this.combobox)
-            return;
-        const firstOption = (_a = this.optionElements) === null || _a === void 0 ? void 0 : _a[0];
-        if (firstOption) {
-            this.isInitializing = true;
-            this.setValue(firstOption === null || firstOption === void 0 ? void 0 : firstOption.value);
-            this.isInitializing = false;
-        }
-    }
-    initializeStyleObserver() {
-        if (this.listboxWidthObserver || !this.listboxElement)
-            return;
-        const observerCallback = () => {
-            if (!this.listboxElement)
-                return;
-            // Only recompute if listbox grew beyond current host width
-            const listboxWidth = this.listboxElement.getBoundingClientRect().width;
-            const hostWidth = this.host.getBoundingClientRect().width;
-            if (listboxWidth <= hostWidth)
-                return;
-            this.defineHostWidth();
-        };
-        this.listboxWidthObserver = new StyleObserver(observerCallback);
-        this.listboxWidthObserver
-            .observe([this.listboxElement], ['width']);
-    }
-    get hasError() {
-        var _a;
-        return this.invalid && ((_a = this.error) === null || _a === void 0 ? void 0 : _a.length) > 0;
-    }
-    get hasValidationError() {
-        var _a;
-        return this.validityState !== 'valid' && ((_a = this.validityMessage) === null || _a === void 0 ? void 0 : _a.length) > 0;
-    }
-    get hasMessage() {
-        return this.hasError || this.hasValidationError;
-    }
-    get isInteractive() {
-        return !this.disabled && !this.isReadonly;
-    }
-    get hasLeadingSlot() {
-        return !!this.host.querySelector('[slot="leading"]');
-    }
-    get hasOptionIcon() {
-        return !!this.optionElementsArray.find(el => !!el.querySelector('[slot="icon"]'));
-    }
-    get isLeadingSlotRendered() {
-        return this.hasLeadingSlot && this.hasOptionIcon && !this.currentValue;
-    }
-    get isPlaceholder() {
-        var _a, _b;
-        const { placeholder } = this;
-        return (((_b = (_a = this.valueToDisplay) === null || _a === void 0 ? void 0 : _a.trim) === null || _b === void 0 ? void 0 : _b.call(_a)) || placeholder || '') === placeholder;
-    }
-    connectedCallback() {
-        this.connectFormEventListeners();
-    }
-    disconnectedCallback() {
-        this.disconnectFormEventListeners();
-    }
-    componentWillLoad() {
-        this.isExpanded = this.expanded;
-        this.isReadonly = this.readonly;
-    }
-    componentDidLoad() {
-        this.defineListboxPositionState();
-        this.initializeStyleObserver();
-    }
-    render() {
-        var _a;
-        const { uniqueId, disabled, isExpanded, fieldIndicator, invalid, placeholder, required, hint, label, internal } = this;
-        const labelAttr = label ? {
-            fieldIndicator
-        } : {};
-        const isRequired = this.isInteractive ? !!required : false;
-        const comboboxAttrs = {
-            id: `${uniqueId}-value`,
-            tabindex: `${disabled ? -1 : 0}`,
-            'aria-controls': `${uniqueId}-list`,
-            'aria-describedby': this.ariaDescribedBy,
-            'aria-disabled': `${disabled || false}`,
-            'aria-expanded': `${isExpanded || false}`,
-            'aria-invalid': `${invalid || false}`,
-            'aria-readonly': `${!this.isInteractive || false}`,
-            'aria-required': `${isRequired}`,
-            'aria-labelledby': `${uniqueId}-label`
-        };
-        const listboxAttrs = {
-            'aria-label': label
-        };
-        const nativeAttrs = {
-            placeholder,
-            name: this.name,
-            value: this.currentValue,
-            'aria-hidden': 'true',
-            tabindex: '-1',
-            invalid,
-            disabled,
-            required: isRequired
-        };
-        return (h(Host, { key: 'f52fa96bdacace6070cd2baa15f8fab939d05916', "data-value": this.currentValue, expanded: !this.disabled && this.isExpanded, "data-listbox-position": this.listboxPositionState, "data-initial-value": this.initial['value'], "data-is-placeholder": `${!!this.isPlaceholder}`, "data-value-focused": `${!!this.isValueFocused}`, "data-option-focused": `${!!this.focusedOption}`, "data-validity-state": `${this.validityState || ''}`, "data-validity-message": `${this.validityMessage || ''}`, "data-readonly": `${!!this.isReadonly}`, "data-touched": `${this.touched}`, "data-dirty": `${this.dirty}` }, h("div", { key: '80326d43674f8caac11678ca4d5a6ca8178f9454', class: `r-select--label ${!internal ? 'r-select--label__margin-bottom' : ''}` }, h("div", { key: '25fa25960350a338c7c9156d38c974c0ad8a0861', class: internal ? 'visually-hidden' : 'r-select--label-container' }, h("label", { key: 'b52ac4d91e32df39459492bbeaf166d2a71d165c', id: `${uniqueId}-label`, onClick: this.isInteractive ? this.onValueClick : null }, h("r-label", Object.assign({ key: 'ac75955086f424e781baf66e6853cbc89ec20d56' }, labelAttr), label)), h("slot", { key: '4cd953da5c64a473070ce4b8a3e5721a36561685', name: "popover" })), hint &&
-            h("r-hint", { key: '2d6a2e9eae51d56f31886725274c637e76ab4d75', id: `${uniqueId}-hint`, class: "r-select--hint" }, hint)), h("div", { key: '8107a1d2475d11d6e827d7394ade84f9c4c85ea5', class: "r-select" }, h("select", Object.assign({ key: 'd7a60a4ff2f8f568da1ea90d859d5de78a1e73ef', class: "r-select--native", ref: el => this.nativeElement = el }, nativeAttrs)), h("div", { key: '9d49470c7e4cc179dfd93cb1233e2bbf86ac7641', class: "r-select--container" }, this.combobox ? this.renderCombobox(comboboxAttrs) : this.renderSelect(comboboxAttrs), h("div", Object.assign({ key: '9594f3439c7591a4e4ef359a205a55d1c56dbb80', role: "listbox", tabindex: "-1", id: `${uniqueId}-list`, class: "r-select--options", ref: el => this.listboxElement = el }, listboxAttrs), (this.isNoResultsFound || !((_a = this.optionElements) === null || _a === void 0 ? void 0 : _a.length)) && h("r-select-option", { key: 'ae0ef701ff3e7db4c17aba7d57265122c3bf6587', "data-no-results": "true", value: "no_results" }, this.noResultsFound), h("slot", { key: '012fcee55283c7bc5a3230ff23b692eca33d853b', onSlotchange: this.handleSlotChange })))), h("div", { key: '94fc769d8eeb0bd92f1d12d553b033a3de9ad8dc', id: `${uniqueId}-message`, "aria-live": "polite", "aria-atomic": "true", ref: (el) => this.messageContainer = el, class: this.hasMessage && !internal ? 'r-select--message' : 'visually-hidden' }, this.hasMessage && h("r-hint", { key: '881e60130bd3cbc9004aacbb027911357286a516', variant: this.invalid ? 'error' : 'success' }, this.hasError && this.error, this.hasValidationError && this.validityMessage))));
-    }
-    static get is() { return "r-select"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["select.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["select.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": "Specifies the `id` of the `<form>` to which the element belongs"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "novalidate": {
-                "type": "boolean",
-                "attribute": "novalidate",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Specifies if element must be ignored during validation of the form elements"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "name": {
-                "type": "string",
-                "attribute": "name",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Name of element (data) within a form"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "value": {
-                "type": "string",
-                "attribute": "value",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Selected value"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "label": {
-                "type": "string",
-                "attribute": "label",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The text on the label"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "internal": {
-                "type": "boolean",
-                "attribute": "internal",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Specifies if the component is internal"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "placeholder": {
-                "type": "string",
-                "attribute": "placeholder",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Text that is presented until an option has been selected"
-                },
-                "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 hint, visually presented under the select,\ngiving additional context to the user"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "disabled": {
-                "type": "boolean",
-                "attribute": "disabled",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Prevent user interaction and apply disabled style"
-                },
-                "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": "Specifies that select value is required"
-                },
-                "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": "Text of an additional marker in the label"
-                },
-                "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": "Visual indication of valid state"
-                },
-                "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": "Validity indicator, serving to change UI of the component"
-                },
-                "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": "Custom validation error message"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "fullWidth": {
-                "type": "boolean",
-                "attribute": "full-width",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Define if select should render as a text item or a block"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "defaultValue": "false"
-            },
-            "listboxPosition": {
-                "type": "string",
-                "attribute": "listbox-position",
-                "mutable": false,
-                "complexType": {
-                    "original": "ListboxPosition",
-                    "resolved": "\"bottom\" | \"top\"",
-                    "references": {
-                        "ListboxPosition": {
-                            "location": "import",
-                            "path": "./exports",
-                            "id": "src/components/select/exports.ts::ListboxPosition"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Define wether listbox appears on top or at the bottom of the select"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "'bottom'"
-            },
-            "valueMissingMessage": {
-                "type": "string",
-                "attribute": "value-missing-message",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Set custom message for `valueMissing` property of a ValidityState object (set by `required`) within Constrain Validation API"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "customErrorMessage": {
-                "type": "string",
-                "attribute": "custom-error-message",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Set custom message for `customError` property of a ValidityState object indicating whether the element's custom validity message has been set to a non-empty string by calling the element's setCustomValidity() method."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "expanded": {
-                "type": "boolean",
-                "attribute": "expanded",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Defines if select is expanded"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "readonly": {
-                "type": "boolean",
-                "attribute": "readonly",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Defines if select is in readonly state"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "combobox": {
-                "type": "boolean",
-                "attribute": "combobox",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Enable combobox functionality to allow users to reduce the list of options by filtering."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
-            "toggleButtonAriaLabel": {
-                "type": "string",
-                "attribute": "toggle-button-aria-label",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "\"Toggle combobox\""
-                        }],
-                    "text": "Defines aria label for combobox toggle button"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "'Toggle combobox'"
-            },
-            "noResultsFound": {
-                "type": "string",
-                "attribute": "no-results-found",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "\"No results found\""
-                        }],
-                    "text": "Defines the text that will be displayed if no results are found"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "'No results found'"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "listboxPositionState": {},
-            "validityState": {},
-            "validityMessage": {},
-            "isExpanded": {},
-            "isReadonly": {},
-            "currentValue": {},
-            "valueToDisplay": {},
-            "isInitializing": {},
-            "isResetting": {},
-            "focusedOption": {},
-            "isValueFocused": {},
-            "isNoResultsFound": {},
-            "touched": {},
-            "dirty": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "rValidate",
-                "name": "rValidate",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emits event after each validation"
-                },
-                "complexType": {
-                    "original": "{\n    state: string,\n    message: string\n  }",
-                    "resolved": "{ state: string; message: string; }",
-                    "references": {}
-                }
-            }, {
-                "method": "rChange",
-                "name": "rChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emits `rChange` event when `<r-select>` value property changes"
-                },
-                "complexType": {
-                    "original": "{\n    element: HTMLRSelectElement,\n    value: any\n  }",
-                    "resolved": "{ element: HTMLRSelectElement; value: any; }",
-                    "references": {
-                        "HTMLRSelectElement": {
-                            "location": "global",
-                            "id": "global::HTMLRSelectElement"
-                        }
-                    }
-                }
-            }, {
-                "method": "rReset",
-                "name": "rReset",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emits `rReset` event when `<r-select>` onReset event happens"
-                },
-                "complexType": {
-                    "original": "{\n    element: HTMLRSelectElement,\n    value: any\n  }",
-                    "resolved": "{ element: HTMLRSelectElement; value: any; }",
-                    "references": {
-                        "HTMLRSelectElement": {
-                            "location": "global",
-                            "id": "global::HTMLRSelectElement"
-                        }
-                    }
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "setReadonly": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Sets the component into `readonly` state",
-                    "tags": []
-                }
-            },
-            "clearReadonly": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Clears readonly state from the component",
-                    "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 value of the select programmatically.\nDoes NOT mark as dirty or emit change events.\nUse this for programmatic value updates.",
-                    "tags": []
-                }
-            },
-            "getValue": {
-                "complexType": {
-                    "signature": "() => Promise<string>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<string>"
-                },
-                "docs": {
-                    "text": "Set value of the select",
-                    "tags": []
-                }
-            },
-            "reset": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Reset select to its initial state",
-                    "tags": []
-                }
-            },
-            "resetValidation": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Clears validation results.",
-                    "tags": []
-                }
-            },
-            "isTouched": {
-                "complexType": {
-                    "signature": "() => Promise<boolean>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<boolean>"
-                },
-                "docs": {
-                    "text": "Returns whether the select has been touched (focused/clicked by user).",
-                    "tags": [{
-                            "name": "returns",
-                            "text": "A boolean indicating whether the select has been touched."
-                        }]
-                }
-            },
-            "isDirty": {
-                "complexType": {
-                    "signature": "() => Promise<boolean>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<boolean>"
-                },
-                "docs": {
-                    "text": "Returns whether the select value has been changed by user interaction.",
-                    "tags": [{
-                            "name": "returns",
-                            "text": "A boolean indicating whether the select is dirty."
-                        }]
-                }
-            },
-            "markAsPristine": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Marks the select as untouched and pristine (not dirty).",
-                    "tags": []
-                }
-            },
-            "checkValidity": {
-                "complexType": {
-                    "signature": "() => Promise<boolean>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<boolean>"
-                },
-                "docs": {
-                    "text": "Validates the textarea without triggering UI and returns a boolean indicating its validity.",
-                    "tags": [{
-                            "name": "returns",
-                            "text": "A boolean indicating whether the textarea is valid."
-                        }]
-                }
-            },
-            "reportValidity": {
-                "complexType": {
-                    "signature": "() => Promise<boolean>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<boolean>"
-                },
-                "docs": {
-                    "text": "Check validity and reveal validation state and message",
-                    "tags": []
-                }
-            },
-            "setFocus": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Set focus on the element",
-                    "tags": []
-                }
-            },
-            "setBlur": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Remove focus from the element",
-                    "tags": []
-                }
-            },
-            "expand": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Expand options listbox",
-                    "tags": []
-                }
-            },
-            "collapse": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Collapse options listbox",
-                    "tags": []
-                }
-            },
-            "getFocusedOption": {
-                "complexType": {
-                    "signature": "() => Promise<HTMLRSelectOptionElement>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "HTMLRSelectOptionElement": {
-                            "location": "global",
-                            "id": "global::HTMLRSelectOptionElement"
-                        }
-                    },
-                    "return": "Promise<HTMLRSelectOptionElement>"
-                },
-                "docs": {
-                    "text": "Retrieves the currently focused option within this select component.\n\nThe focused option is identified by the presence of the `data-focused=\"true\"`\nattribute on an `r-select-option` element inside the component's host.",
-                    "tags": [{
-                            "name": "returns",
-                            "text": "Promise resolving to the focused `HTMLRSelectOptionElement`, or `null`\nif no option is currently marked as focused."
-                        }]
-                }
-            },
-            "setFocusedOption": {
-                "complexType": {
-                    "signature": "(index: any) => Promise<void>",
-                    "parameters": [{
-                            "name": "index",
-                            "type": "any",
-                            "docs": "- Zero-based index of the option to focus. If the index is out of bounds\nor the corresponding option element is unavailable, the method will no-op."
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Sets focus to the option at the specified index.\n\nRetrieves the option element from the internal optionElements collection\nand delegates focusing logic to `setOptionFocus`.",
-                    "tags": [{
-                            "name": "param",
-                            "text": "index - Zero-based index of the option to focus. If the index is out of bounds\nor the corresponding option element is unavailable, the method will no-op."
-                        }, {
-                            "name": "returns",
-                            "text": "A promise that resolves with the result of `setOptionFocus`, typically indicating\nsuccess or failure of applying focus (implementation dependent)."
-                        }]
-                }
-            }
-        };
-    }
-    static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "listboxPosition",
-                "methodName": "handleListboxPositionChange"
-            }, {
-                "propName": "expanded",
-                "methodName": "handleExpandedChange"
-            }, {
-                "propName": "readonly",
-                "methodName": "handleReadonlyChange"
-            }, {
-                "propName": "value",
-                "methodName": "handleValueChange"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "optionClick",
-                "method": "optionSelectAction",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "rTooltipFocus",
-                "method": "tooltipFocusAction",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "mouseup",
-                "method": "onMouseup",
-                "target": "window",
-                "capture": false,
-                "passive": true
-            }, {
-                "name": "keyup",
-                "method": "onKeyup",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "scroll",
-                "method": "handleScrolling",
-                "target": "window",
-                "capture": false,
-                "passive": true
-            }, {
-                "name": "resize",
-                "method": "handleResizing",
-                "target": "window",
-                "capture": false,
-                "passive": true
-            }];
-    }
-}