@riverty/web-components 6.3.0 → 6.3.1

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

@@ -0,0 +1,1105 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CTxpqopm.js';
+import { a as appendControlToFormData } from './formData-DvLT8-y3.js';
+import { S as StyleObserver } from './style-observer-4Uv3PpKT.js';
+
+const selectCss = ":host{display:inline-flex;flex-direction:column;width:var(--width, auto);transition:width 0.2s ease-out;max-width:none;opacity:1;outline:none}:host slot{display:contents}:host(:hover:not([disabled]:not([disabled=false]))){--r-select--container--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host([expanded]:not([expanded=false])){--r-select--options--visibility:visible;--r-select--options--z-index:1;--r-select--background-color:var(--r-background-interactive-softest, #fff);--r-select--value--border-color:var(--r-border-soft, #686868);--r-select--value--background-color:var(--r-background-interactive-softest, #fff);--r-select--trailing-icon--transform:rotate(180deg)}:host([invalid]:not([invalid=false])){--r-select--container--background-color:var(--r-status-error-soft, #fef6f6);--r-select--value--border-color:var(--r-status-error-regular, #b00c15);--r-select--options--border-color:var(--r-status-error-regular, #b00c15)}:host([disabled]:not([disabled=false])){--r-select--opacity:0.4;--r-select--pointer-events:none;--r-select--cursor:not-allowed}:host([data-is-placeholder=true]){--r-select--value-diplay--color:var(--r-text-soft, #686868)}:host([data-max-width=set]){width:100%;--r-select--options--right:0}:host([full-width]){width:100%}:host([data-listbox-position=top]){--r-select--options--top:auto;--r-select--options--bottom:2.875em;--r-select--options--border-width:1px 1px 0 1px}:host([data-listbox-position=bottom]){--r-select--options--top:100%;--r-select--options--bottom:auto;--r-select--options--border-width:0 1px 1px 1px}:host([data-readonly=true]){--r-select--color:var(--r-text-soft, #686868);--r-select--value--background-color:var(--r-background-soft, #f3f1f0);--r-select--value--border-color:transparent transparent var(--r-border-soft, #686868) transparent;--r-select--value--cursor:text;--r-select--value-arrow--visiblility:hidden}.r-select{display:var(--r-select--display, flex);flex-grow:var(--r-select--flex-grow, 1);flex-direction:var(--r-select--flex-direction, column);position:var(--r-select--position, relative);box-sizing:var(--r-select--box-sizing, border-box);max-width:var(--r-select--max-width, 100%);min-width:var(--r-select--min-width, fit-content);font-family:var(--r-select--font-family, var(--r-font-family-text, system-ui));font-weight:var(--r-select--font-weight, var(--r-font-weight-regular, 400));font-size:var(--r-select--font-size, var(--r-font-size-400, 1rem));text-align:var(--r-select--text-align, left);color:var(--r-select--color, var(--r-text-regular, #282828));opacity:var(--r-select--opacity, 1);pointer-events:var(--r-select--pointer-events, auto);cursor:var(--r-select--cursor, pointer)}.r-select--label__margin-bottom{margin-bottom:var(--r-select--label--margin-bottom, var(--r-spacing-025, 0.25rem))}.r-select--label-container{display:var(--r-select--label-container--display, flex);gap:var(--r-select--label-container--gap, var(--r-spacing-100, 1rem));align-items:var(--r-select--label-container--align-items, center);justify-content:var(--r-select--label-container--align-items, space-between)}.r-select--label-container ::slotted([slot=popover]){display:var(--r-select--popover--display, inline-flex);height:var(--r-select--popover--height, var(--r-spacing-150, 1.5));align-items:var(--r-select--popover--align-items, center);justify-content:var(--r-select--popover--justify-content, center);margin-right:var(--r-select--popover--margin-right, -0.25rem);--r-popover--trigger--min-width:var(--r-select--popover-trigger--min-width, var(--r-spacing-150, 1.5));--r-popover--trigger--min-height:var(--r-select--popover--trigger--min-height, var(--r-spacing-150, 1.5))}.r-select--trailing-icon{transform:var(--r-select--trailing-icon--transform, rotate(0deg));transition:var(--r-select--trailing-icon--transition, transform 0.15s)}.r-select ::slotted([name=leading]){display:var(--r-select--value--leading-icon--display, flex);align-items:var(--r-select--value--leading-icon--align-items, center);color:var(--r-select--value--leading-icon--color, var(--r-icon-soft, #686868))}.r-select--container{background-color:var(--r-select--container--background-color, var(--r-background-softest, #fff));opacity:var(--r-select--container--opacity, 1);pointer-events:var(--r-select--container--pointer-events, auto)}.r-select--input{height:var(--r-select--input--height, 100%);width:var(--r-select--input--width, 100%);border:var(--r-select--input--border, none);outline:var(--r-select--input--outline, none);background-color:var(--r-select--input--background-color, inherit);color:var(--r-select--input--color, inherit);font-family:var(--r-select--input--font-family, inherit);font-size:var(--r-select--input--font-size, inherit);font-weight:var(--r-select--input--font-weight, inherit);padding:var(--r-select--input--padding, 0)}.r-select--native{position:var(--r-select--native--position, fixed);top:var(--r-select--native--top, -100vh);z-index:var(--r-select--native--z-index, -1);opacity:var(--r-select--native--opacity, 0);font-size:var(--r-select--native--font-size, 1rem);padding:var(--r-select--native--padding, 0 calc(48px + 0.75em) 0 0.75em)}.r-select--value:not([aria-readonly=true]):not(:has(input:read-only)):not(:has(input:disabled)):active{--r-select--value--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}.r-select--value[aria-disabled=false]:focus,.r-select--value:has(input:focus){outline:var(--r-select--value--outline, none);--r-select--value--z-index:2;--r-select--value--box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);--r-select--value--outline:2px solid var(--r-border-focused, #0071e3);--r-select--value--outline-offset:2px}.r-select--value{position:var(--r-select--value--position, relative);display:var(--r-select--value--display, inline-grid);grid-template-columns:var(--r-select--value--grid-template-columns, 1fr 1.75rem);box-sizing:var(--r-select--value--box-sizing, border-box);align-items:var(--r-select--value--align-items, center);justify-content:var(--r-select--value--justify-content, space-between);text-align:var(--r-select--value--text-align, left);min-width:var(--r-select--value--min-width, 100%);min-height:var(--r-select--value--min-height, var(--r-spacing-275, 2.75rem));padding:var(--r-select--value--padding, 0);white-space:var(--r-select--value--white-space, nowrap);background-color:var(--r-select--value--background-color, transparent);border-width:var(--r-select--value--border-width, 1px);border-style:var(--r-select--value--border-style, solid);border-color:var(--r-select--value--border-color, var(--r-border-soft, #686868));box-shadow:var(--r-select--value--box-shadow, none);outline:var(--r-select--value--outline, none);outline-offset:var(--r-select--value--outline-offset, 0);z-index:var(--r-select--value--z-index, 0);cursor:var(--r-select--value--cursor, inherit)}.r-select--value-display{display:var(--r-select--value-diplay--display, flex);gap:var(--r-select--value-diplay--gap, 0.5em);align-items:var(--r-select--value-diplay--align-tems, center);flex:var(--r-select--value-diplay--flex, 1);padding:var(--r-select--value-diplay--padding, 0 0.75em);overflow:var(--r-select--value-diplay--overflow, hidden);text-overflow:var(--r-select--value-diplay--text-overflow, ellipsis);color:var(--r-select--value-diplay--color, inherit);min-width:var(--r-select--value-diplay--min-width, fit-content);height:var(--r-select--value-diplay--height, 100%)}.r-select--value-selected{display:var(--r-select--value-diplay--display, flex);gap:var(--r-select--value-diplay--gap, 0.75em);align-items:var(--r-select--value-diplay--align-items, center)}.r-select--value-arrow{display:var(--r-select--value-arrow--display, flex);align-items:var(--r-select--value-arrow--align-items, center);justify-content:var(--r-select--value-arrow--justify-content, center);padding:var(--r-select--value-arrow--padding, 0 0.75em 0 0);visibility:var(--r-select--value-arrow--visiblility, visible)}.r-select--value-arrow-button{height:var(--r-select--value-arrow-button--height, 100%);background-color:var(--r-select--value-arrow-button--background-color, transparent);color:var(--r-select--value-arrow-button--color, inherit);border:var(--r-select--value-arrow-button--border, none);outline:var(--r-select--value-arrow-button--outline, none);cursor:var(--r-select--value-arrow-button--cursor, inherit)}.r-select--options{visibility:var(--r-select--options--visibility, hidden);position:var(--r-select--options--position, absolute);top:var(--r-select--options--top, 100%);right:var(--r-select--options--right, 0);bottom:var(--r-select--options--bottom, auto);left:var(--r-select--options--left, 0);margin:var(--r-select--options--margin, 0);padding:var(--r-select--options--padding, 0);list-style:var(--r-select--options--list-style, none);max-height:var(--r-select--options--max-height, 14.375em);min-width:var(--r-select--options--min-width, fit-content);overflow-y:var(--r-select--options--overflow-y, auto);background-color:var(--r-select--options--background-color, var(--r-background-interactive-softest, #fff));border-style:var(--r-select--options--border-style, solid);border-color:var(--r-select--options--border-color, var(--r-border-soft, #686868));border-width:var(--r-select--options--border-width, 0 1px 1px 1px);z-index:var(--r-select--options--z-index, -1)}.r-select--message{margin-top:var(--r-select--message--margin-top, var(--r-spacing-025, 0.25rem))}.hidden{display:none}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}@media (prefers-reduced-motion){:host{transition:none}}";
+
+const Select = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.rValidate = createEvent(this, "rValidate");
+        this.rChange = createEvent(this, "rChange");
+        this.rReset = createEvent(this, "rReset");
+        /** 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 () => { };
+            }
+        };
+        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)))));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "listboxPosition": ["handleListboxPositionChange"],
+        "expanded": ["handleExpandedChange"],
+        "readonly": ["handleReadonlyChange"],
+        "value": ["handleValueChange"]
+    }; }
+};
+Select.style = selectCss;
+
+export { Select as r_select };