@riverty/web-components 6.3.0 → 6.3.1

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

@@ -0,0 +1,2038 @@
+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 an element, displays provided message in case value is invalid. */
+    async setCustomValidity(message) {
+        this.customErrorMessage = message;
+        this.validateFormElement(this.nativeElement);
+    }
+    /**
+     * 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() {
+        if (!this.validityState)
+            return false;
+        return this.validityState !== 'valid' && !!(this.validityMessage || this.customErrorMessage);
+    }
+    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: '760b35180f5c0e716387bf92b886aef11d33a433', "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: 'ba9308fb7a9d91d0464a723ac00916832ceaef9d', class: `r-select--label ${!internal ? 'r-select--label__margin-bottom' : ''}` }, h("div", { key: '6de28553dd9a44fd3f0d8b73fffdbaabc2d724d1', class: internal ? 'visually-hidden' : 'r-select--label-container' }, h("label", { key: 'f4eb1fbe89376b3f3d886d0acfb33616a0df9e61', id: `${uniqueId}-label`, onClick: this.isInteractive ? this.onValueClick : null }, h("r-label", Object.assign({ key: 'fa2829ffca13fe5640e75650646aa0dafe44d31c' }, labelAttr), label)), h("slot", { key: '27dca50b5e65eedd73c40992734134f1e52b15d3', name: "popover" })), hint &&
+            h("r-hint", { key: '32ebd3a250e9917f51788347f8683095b701e694', id: `${uniqueId}-hint`, class: "r-select--hint" }, hint)), h("div", { key: '2e195fab570c59cd8e5c038ad2c395c08bc10592', class: "r-select" }, h("select", Object.assign({ key: '3ef7ca05510c50c2453f6c30e1faf3558c602a9c', class: "r-select--native", ref: el => this.nativeElement = el }, nativeAttrs)), h("div", { key: 'bf431b52523f3a810c60db6c20bae82f0bd12dc4', class: "r-select--container" }, this.combobox ? this.renderCombobox(comboboxAttrs) : this.renderSelect(comboboxAttrs), h("div", Object.assign({ key: 'e716d8ea4f124373a1f56f80e4c7f6b2399c6b09', 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: '61e5bbcdff156c61f4f46c8fc2f8dddc30fe345a', "data-no-results": "true", value: "no_results" }, this.noResultsFound), h("slot", { key: '8b0949058681d8274aaac39d184a0e59ae91fec8', onSlotchange: this.handleSlotChange })))), h("div", { key: 'd007a8402ecea45df2d24b0169a30856a12c45a0', 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: '83ebfc3c344452d15213087284035853b54b1b3d', variant: this.invalid ? 'error' : 'success' }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || 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": []
+                }
+            },
+            "setCustomValidity": {
+                "complexType": {
+                    "signature": "(message: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "message",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Validates an element, displays provided message in case value is invalid.",
+                    "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
+            }];
+    }
+}