@xlabs-store/core 0.0.1

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

@@ -0,0 +1,2247 @@
+import { Host, h, } from "@stencil/core";
+import { translate } from "../../locales/locale.service";
+import { PortalController } from "../x-portal";
+import { getIcon } from "../../utils/config";
+import { isOptionGroup } from "./types";
+/**
+ * Select Component - Following Ant Design Specification
+ *
+ * A select component that allows users to choose from a list of options.
+ * Supports single and multiple selection modes.
+ *
+ * @part selector - The selector container
+ * @part dropdown - The dropdown container
+ * @part arrow - The arrow icon
+ * @part clear - The clear icon
+ */
+export class XSelect {
+    /**
+     * Host element reference.
+     */
+    el;
+    // ==================== Props ====================
+    /**
+     * Whether the select is disabled.
+     * @example
+     * <x-select disabled></x-select>
+     */
+    disabled = false;
+    /**
+     * The mode of select: 'multiple' | 'tags' | undefined (single).
+     * @example
+     * <x-select mode="multiple"></x-select>
+     */
+    mode;
+    /**
+     * Whether to show the clear button.
+     * @example
+     * <x-select allowClear></x-select>
+     */
+    allowClear = false;
+    /**
+     * Whether to show search input.
+     * @example
+     * <x-select showSearch></x-select>
+     */
+    showSearch = false;
+    /**
+     * Placeholder text.
+     * @example
+     * <x-select placeholder="Choose one"></x-select>
+     */
+    placeholder = translate('Select.placeholder', {}, 'Please select');
+    /**
+     * Size of select: 'large' | 'middle' | 'small'.
+     * @example
+     * <x-select size="small"></x-select>
+     */
+    size = 'middle';
+    /**
+     * Current selected value.
+     * @example
+     * <x-select value="a"></x-select>
+     */
+    value;
+    /**
+     * Default selected value.
+     * @example
+     * <x-select defaultValue="a"></x-select>
+     */
+    defaultValue;
+    /**
+     * Whether dropdown is open (controlled).
+     * @example
+     * <x-select open></x-select>
+     */
+    open = false;
+    /**
+     * Whether to show loading spinner.
+     * @example
+     * <x-select loading></x-select>
+     */
+    loading = false;
+    /**
+     * Maximum number of tags to display in multiple mode.
+     * @example
+     * <x-select mode="multiple" maxTagCount={2}></x-select>
+     */
+    maxTagCount;
+    /**
+     * Placeholder for hidden tags.
+     * @example
+     * <x-select mode="multiple" maxTagPlaceholder="+ more"></x-select>
+     */
+    maxTagPlaceholder;
+    /**
+     * Maximum length of tag text to display.
+     * @example
+     * <x-select mode="multiple" maxTagTextLength={8}></x-select>
+     */
+    maxTagTextLength;
+    /**
+     * Whether to show border.
+     * @example
+     * <x-select bordered={false}></x-select>
+     */
+    bordered = true;
+    /**
+     * Validation status: 'error' | 'warning'.
+     * @example
+     * <x-select status="error"></x-select>
+     */
+    status;
+    /**
+     * Dropdown placement.
+     * @example
+     * <x-select placement="bottomRight"></x-select>
+     */
+    placement = 'bottomLeft';
+    /**
+     * Whether to include label in value object.
+     * @example
+     * <x-select labelInValue></x-select>
+     */
+    labelInValue = false;
+    /**
+     * Custom filter function for search.
+     * @example
+     * <x-select filterOption={(input, opt) => opt.label.startsWith(input)}></x-select>
+     */
+    filterOption = true;
+    /**
+     * Sort function for filtered options.
+     * @example
+     * <x-select filterSort={(a, b) => a.label.localeCompare(b.label)}></x-select>
+     */
+    filterSort;
+    /**
+     * Text to show when no options match search.
+     * @example
+     * <x-select notFoundContent="Empty"></x-select>
+     */
+    notFoundContent = translate('Select.notFoundContent', {}, 'No data');
+    /**
+     * Whether auto focus on mount.
+     * @example
+     * <x-select autofocus></x-select>
+     */
+    autofocus = false;
+    /**
+     * ID for the input element.
+     * @example
+     * <x-select inputId="country"></x-select>
+     */
+    inputId;
+    /**
+     * Name attribute for form.
+     * @example
+     * <x-select name="country"></x-select>
+     */
+    name;
+    /**
+     * Trigger actions to open dropdown.
+     * @example
+     * <x-select showAction={['click','focus']}></x-select>
+     */
+    showAction = ['click'];
+    /**
+     * Custom dropdown class.
+     * @example
+     * <x-select dropdownClassName="my-select-dropdown"></x-select>
+     */
+    dropdownClassName;
+    /**
+     * Custom dropdown style.
+     * @example
+     * <x-select dropdownStyle={{ minWidth: '240px' }}></x-select>
+     */
+    dropdownStyle;
+    /**
+     * Whether dropdown matches selector width.
+     * @example
+     * <x-select dropdownMatchSelectWidth={false}></x-select>
+     */
+    dropdownMatchSelectWidth = true;
+    /**
+     * Height of dropdown list.
+     * @example
+     * <x-select listHeight={300}></x-select>
+     */
+    listHeight = 256;
+    /**
+     * Number of items to render initially and per scroll.
+     * @example
+     * <x-select pageSize={50}></x-select>
+     */
+    pageSize = 100;
+    /**
+     * Options data, use this instead of x-select-option children. Supports SelectOption and OptionGroup.
+     * @example
+     * <x-select options={[{ value: 'a', label: 'A' }]}></x-select>
+     */
+    options;
+    // ==================== Events ====================
+    /**
+     * Emitted when value changes.
+     * @example
+     * <x-select onXChange={(ev) => console.log(ev.detail)}></x-select>
+     */
+    xChange;
+    /**
+     * Emitted when search value changes.
+     * @example
+     * <x-select onXSearch={(ev) => console.log(ev.detail)}></x-select>
+     */
+    xSearch;
+    /**
+     * Emitted when dropdown opens/closes.
+     * @example
+     * <x-select onXDropdownVisibleChange={(ev) => console.log(ev.detail)}></x-select>
+     */
+    xDropdownVisibleChange;
+    /**
+     * Emitted on blur.
+     * @example
+     * <x-select onXBlur={(ev) => console.log(ev)}></x-select>
+     */
+    xBlur;
+    /**
+     * Emitted on focus.
+     * @example
+     * <x-select onXFocus={(ev) => console.log(ev)}></x-select>
+     */
+    xFocus;
+    /**
+     * Emitted when clear button is clicked.
+     * @example
+     * <x-select onXClear={() => {}}></x-select>
+     */
+    xClear;
+    /**
+     * Emitted when a tag is removed.
+     * @example
+     * <x-select onXDeselect={(ev) => console.log(ev.detail)}></x-select>
+     */
+    xDeselect;
+    /**
+     * Emitted when an option is selected.
+     * @example
+     * <x-select onXSelect={(ev) => console.log(ev.detail)}></x-select>
+     */
+    xSelect;
+    // ==================== State ====================
+    /**
+     * Current search input value.
+     */
+    searchValue = '';
+    /**
+     * Selected options state.
+     */
+    selectedOptions = [];
+    /**
+     * Focus state.
+     */
+    focused = false;
+    /**
+     * Active option index for keyboard navigation.
+     */
+    activeIndex = -1;
+    /**
+     * Flattened internal options.
+     */
+    internalOptions = [];
+    /**
+     * Visible option count for incremental rendering.
+     */
+    visibleCount = 100;
+    // ==================== Refs ====================
+    /**
+     * Input element reference.
+     */
+    inputRef;
+    /**
+     * Dropdown content wrapper reference.
+     */
+    dropdownRef;
+    /**
+     * Mutation observer for slotted options.
+     */
+    mutationObserver;
+    /**
+     * Portal instance for dropdown.
+     */
+    portalInstance = null;
+    /**
+     * Dropdown element reference.
+     */
+    dropdownEl = null;
+    // ==================== Computed ====================
+    /**
+     * Whether current mode is multiple or tags.
+     * @returns boolean
+     */
+    get isMultiple() {
+        return this.mode === 'multiple' || this.mode === 'tags';
+    }
+    /**
+     * Whether any value is selected.
+     * @returns boolean
+     */
+    get hasValue() {
+        return this.selectedOptions.length > 0;
+    }
+    /**
+     * Options filtered by search input and filterOption.
+     * @returns SelectOption[]
+     */
+    get filteredOptions() {
+        if (!this.showSearch || !this.searchValue) {
+            return this.internalOptions;
+        }
+        return this.internalOptions.filter((opt) => {
+            if (this.filterOption === false)
+                return true;
+            const search = this.searchValue.toLowerCase();
+            if (typeof this.filterOption === 'function') {
+                return this.filterOption(this.searchValue, opt);
+            }
+            return opt.label.toLowerCase().includes(search);
+        });
+    }
+    // ==================== Lifecycle ====================
+    /**
+     * Start observing slot changes for options.
+     * @returns void
+     */
+    connectedCallback() {
+        this.mutationObserver = new MutationObserver(() => {
+            this.syncOptionsFromSlot();
+        });
+        this.mutationObserver.observe(this.el, { childList: true, subtree: true });
+    }
+    /**
+     * Initialize value and options before render.
+     * @returns void
+     */
+    componentWillLoad() {
+        if (this.value === undefined && this.defaultValue !== undefined) {
+            this.value = this.defaultValue;
+        }
+        this.syncOptionsFromSlot();
+        this.syncSelectedFromValue();
+        this.visibleCount = this.pageSize;
+    }
+    /**
+     * Auto focus on mount when enabled.
+     * @returns void
+     */
+    componentDidLoad() {
+        if (this.autofocus && !this.disabled) {
+            this.setFocus();
+        }
+    }
+    /**
+     * Update portal after render.
+     * @returns void
+     */
+    componentDidRender() {
+        this.updatePortal();
+    }
+    /**
+     * Cleanup observer and portal on disconnect.
+     * @returns void
+     */
+    disconnectedCallback() {
+        this.mutationObserver?.disconnect();
+        this.destroyPortal();
+    }
+    // ==================== Watchers ====================
+    /**
+     * Sync selected options when value changes.
+     * @returns void
+     */
+    onValueChange() {
+        this.syncSelectedFromValue();
+    }
+    /**
+     * Handle open state changes.
+     * @param isOpen - Open state.
+     * @returns void
+     */
+    onOpenChange(isOpen) {
+        this.xDropdownVisibleChange.emit(isOpen);
+        if (isOpen) {
+            this.activeIndex = this.getInitialActiveIndex();
+            this.syncOptionsFromSlot();
+            this.visibleCount = this.pageSize;
+        }
+        else {
+            this.searchValue = '';
+            this.activeIndex = -1;
+        }
+    }
+    /**
+     * Sync options when options prop changes.
+     * @returns void
+     */
+    onOptionsChange() {
+        this.syncOptionsFromSlot();
+        this.syncSelectedFromValue();
+    }
+    // ==================== Listeners ====================
+    /**
+     * Close dropdown when clicking outside.
+     * @param ev - Mouse event.
+     * @returns void
+     */
+    handleWindowClick(ev) {
+        if (!this.open)
+            return;
+        const path = ev.composedPath();
+        const isInsideComponent = path.includes(this.el);
+        const portalEl = this.portalInstance?.getElement();
+        const isInsidePortal = portalEl ? path.includes(portalEl) : false;
+        // Also check if click is on the portal container itself (optional but good for safety)
+        const isPortalContainer = ev.target?.closest('.x-portal-container');
+        if (!isInsideComponent && !isInsidePortal && !isPortalContainer) {
+            this.closeDropdown();
+        }
+    }
+    /**
+     * Handle keyboard navigation and selection.
+     * @param ev - Keyboard event.
+     * @returns void
+     */
+    handleKeydown(ev) {
+        if (this.disabled)
+            return;
+        const options = this.filteredOptions;
+        switch (ev.key) {
+            case 'ArrowDown':
+                ev.preventDefault();
+                this.handleArrowDown(options);
+                break;
+            case 'ArrowUp':
+                ev.preventDefault();
+                this.handleArrowUp(options);
+                break;
+            case 'Enter':
+                ev.preventDefault();
+                this.handleEnter(options);
+                break;
+            case 'Escape':
+                ev.preventDefault();
+                this.closeDropdown();
+                break;
+            case 'Backspace':
+                this.handleBackspace();
+                break;
+            case 'Tab':
+                if (this.open) {
+                    this.closeDropdown();
+                }
+                break;
+            case 'Home':
+                if (this.open) {
+                    ev.preventDefault();
+                    this.activeIndex = 0;
+                }
+                break;
+            case 'End':
+                if (this.open) {
+                    ev.preventDefault();
+                    this.activeIndex = options.length - 1;
+                }
+                break;
+        }
+    }
+    // ==================== Public Methods ====================
+    /**
+     * Focus the select input.
+     * @returns Promise<void>
+     * @example
+     * await el.setFocus()
+     */
+    async setFocus() {
+        this.inputRef?.focus();
+    }
+    /**
+     * Blur the select input.
+     * @returns Promise<void>
+     * @example
+     * await el.setBlur()
+     */
+    async setBlur() {
+        this.inputRef?.blur();
+    }
+    // ==================== Private Methods ====================
+    /**
+     * Flattens the options array, extracting options from OptionGroups.
+     * This creates a single list of options for easier navigation and filtering.
+     *
+     * @param options - The mixed list of options and option groups.
+     * @returns SelectOption[] - A flat list of all selectable options.
+     */
+    flattenOptions(options) {
+        const result = [];
+        for (const opt of options) {
+            if (isOptionGroup(opt)) {
+                // Add all options from the group
+                result.push(...opt.options);
+            }
+            else {
+                result.push(opt);
+            }
+        }
+        return result;
+    }
+    /**
+     * Synchronizes internal options state from either the `options` prop or slotted `x-select-option` elements.
+     * Priority is given to the `options` prop.
+     *
+     * Flow:
+     * 1. If `options` prop exists, flatten and use it.
+     * 2. If not, query for `x-select-option` elements in the slot.
+     * 3. Map elements to `SelectOption` objects, extracting value, label, and disabled state.
+     */
+    syncOptionsFromSlot() {
+        // If options prop is provided, flatten and use it
+        if (this.options && this.options.length > 0) {
+            this.internalOptions = this.flattenOptions(this.options);
+            return;
+        }
+        // Otherwise, sync from slot children
+        const optionElements = Array.from(this.el.querySelectorAll('x-select-option'));
+        this.internalOptions = optionElements.map((opt) => ({
+            value: opt.value,
+            label: opt.label || opt.textContent?.trim() || String(opt.value),
+            disabled: opt.disabled,
+        }));
+    }
+    /**
+     * Synchronizes `selectedOptions` state based on the current `value` prop.
+     * Handles both single and multiple selection modes, as well as `labelInValue` format.
+     *
+     * Flow:
+     * 1. If `value` is undefined/null, clear selection.
+     * 2. If `labelInValue` is true, map the object(s) directly to selected options.
+     * 3. If `labelInValue` is false, find the corresponding options from `internalOptions` using the value.
+     *    - If option found, use its label.
+     *    - If not found, fallback to string representation of value.
+     */
+    syncSelectedFromValue() {
+        if (this.value === undefined || this.value === null) {
+            this.selectedOptions = [];
+            return;
+        }
+        if (this.labelInValue) {
+            if (this.isMultiple) {
+                const vals = (Array.isArray(this.value) ? this.value : [this.value]);
+                this.selectedOptions = vals.map((v) => ({
+                    value: v.value,
+                    label: v.label,
+                }));
+            }
+            else {
+                const val = this.value;
+                this.selectedOptions = [{ value: val.value, label: val.label }];
+            }
+        }
+        else {
+            if (this.isMultiple) {
+                const vals = (Array.isArray(this.value) ? this.value : []);
+                this.selectedOptions = vals.map((v) => {
+                    const opt = this.internalOptions.find((o) => o.value === v);
+                    return { value: v, label: opt?.label || String(v) };
+                });
+            }
+            else {
+                const v = this.value;
+                const opt = this.internalOptions.find((o) => o.value === v);
+                this.selectedOptions = opt
+                    ? [{ value: opt.value, label: opt.label }]
+                    : [{ value: v, label: String(v) }];
+            }
+        }
+    }
+    /**
+     * Determines the initial active index for the dropdown.
+     *
+     * Flow:
+     * 1. If there is a selected option, find its index in the filtered options.
+     * 2. If no selection, find the first non-disabled option.
+     *
+     * @returns number - The index of the option to highlight.
+     */
+    getInitialActiveIndex() {
+        const options = this.filteredOptions;
+        if (this.selectedOptions.length > 0) {
+            const selectedValue = this.selectedOptions[0].value;
+            const index = options.findIndex((o) => o.value === selectedValue);
+            if (index >= 0)
+                return index;
+        }
+        return options.findIndex((o) => !o.disabled);
+    }
+    /**
+     * Opens the dropdown menu.
+     *
+     * Flow:
+     * 1. Checks if disabled or already open.
+     * 2. Sets `open` state to true.
+     * 3. Calculates initial active index.
+     * 4. Focuses the input element.
+     */
+    openDropdown() {
+        if (this.disabled || this.open)
+            return;
+        this.open = true;
+        this.activeIndex = this.getInitialActiveIndex();
+        requestAnimationFrame(() => {
+            this.inputRef?.focus();
+        });
+    }
+    /**
+     * Closes the dropdown menu.
+     * Resets search value and active index.
+     */
+    closeDropdown() {
+        if (!this.open)
+            return;
+        this.open = false;
+        this.searchValue = '';
+        this.activeIndex = -1;
+    }
+    /**
+     * Toggles the dropdown open/closed state.
+     */
+    toggleDropdown() {
+        if (this.disabled)
+            return;
+        if (this.open) {
+            this.closeDropdown();
+        }
+        else {
+            this.openDropdown();
+        }
+    }
+    /**
+     * Handles the selection of an option.
+     *
+     * Flow:
+     * 1. Checks if option is disabled.
+     * 2. If multiple mode:
+     *    - Checks if already selected.
+     *    - If yes, deselects it.
+     *    - If no, adds to selection and emits change.
+     *    - Clears search but keeps dropdown open and input focused.
+     * 3. If single mode:
+     *    - Sets selection to just this option.
+     *    - Emits change.
+     *    - Closes dropdown.
+     *
+     * @param option - The option being selected.
+     */
+    selectOption(option) {
+        if (option.disabled)
+            return;
+        if (this.isMultiple) {
+            const exists = this.selectedOptions.some((o) => o.value === option.value);
+            if (exists) {
+                this.deselectOption(option);
+            }
+            else {
+                this.selectedOptions = [...this.selectedOptions, option];
+                this.emitChange();
+                this.xSelect.emit(option);
+            }
+            this.searchValue = '';
+            this.inputRef?.focus();
+        }
+        else {
+            this.selectedOptions = [option];
+            this.emitChange();
+            this.xSelect.emit(option);
+            this.closeDropdown();
+        }
+    }
+    /**
+     * Removes an option from the selection.
+     *
+     * Flow:
+     * 1. Filters out the option from `selectedOptions`.
+     * 2. Emits change event.
+     * 3. Emits `xDeselect` event.
+     *
+     * @param option - The option to remove.
+     */
+    deselectOption(option) {
+        this.selectedOptions = this.selectedOptions.filter((o) => o.value !== option.value);
+        this.emitChange();
+        this.xDeselect.emit(option);
+    }
+    /**
+     * Emits the `xChange` event with the current value.
+     * Normalizes the value format based on `labelInValue` and mode (single/multiple).
+     */
+    emitChange() {
+        let emitValue;
+        let emitOption;
+        if (this.isMultiple) {
+            emitOption = this.selectedOptions;
+            emitValue = this.labelInValue
+                ? this.selectedOptions.map((o) => ({ value: o.value, label: o.label }))
+                : this.selectedOptions.map((o) => o.value);
+        }
+        else {
+            const opt = this.selectedOptions[0];
+            emitOption = opt;
+            emitValue = this.labelInValue
+                ? opt ? { value: opt.value, label: opt.label } : undefined
+                : opt?.value;
+        }
+        this.value = emitValue;
+        this.xChange.emit({ value: emitValue, option: emitOption });
+    }
+    // ==================== Keyboard Handlers ====================
+    /**
+     * Handles ArrowDown key press.
+     * Moves active focus to the next non-disabled option.
+     * Opens dropdown if closed.
+     *
+     * @param options - The list of currently visible options.
+     */
+    handleArrowDown(options) {
+        if (!this.open) {
+            this.openDropdown();
+            return;
+        }
+        let nextIndex = this.activeIndex + 1;
+        while (nextIndex < options.length && options[nextIndex]?.disabled) {
+            nextIndex++;
+        }
+        if (nextIndex < options.length) {
+            this.activeIndex = nextIndex;
+            this.scrollToActiveOption();
+        }
+    }
+    /**
+     * Handles ArrowUp key press.
+     * Moves active focus to the previous non-disabled option.
+     * Opens dropdown if closed.
+     *
+     * @param options - The list of currently visible options.
+     */
+    handleArrowUp(options) {
+        if (!this.open) {
+            this.openDropdown();
+            return;
+        }
+        let prevIndex = this.activeIndex - 1;
+        while (prevIndex >= 0 && options[prevIndex]?.disabled) {
+            prevIndex--;
+        }
+        if (prevIndex >= 0) {
+            this.activeIndex = prevIndex;
+            this.scrollToActiveOption();
+        }
+    }
+    /**
+     * Handles Enter key press.
+     * Selects the currently active option if open.
+     * Opens dropdown if closed.
+     *
+     * @param options - The list of currently visible options.
+     */
+    handleEnter(options) {
+        if (this.open && this.activeIndex >= 0 && options[this.activeIndex]) {
+            this.selectOption(options[this.activeIndex]);
+        }
+        else if (!this.open) {
+            this.openDropdown();
+        }
+    }
+    /**
+     * Handles Backspace key press.
+     * Removes the last selected tag if in multiple mode and search input is empty.
+     */
+    handleBackspace() {
+        if (this.isMultiple && !this.searchValue && this.selectedOptions.length > 0) {
+            const lastOption = this.selectedOptions[this.selectedOptions.length - 1];
+            this.deselectOption(lastOption);
+        }
+    }
+    /**
+     * Scrolls the dropdown to ensure the active option is visible.
+     */
+    scrollToActiveOption() {
+        if (!this.dropdownRef || this.activeIndex < 0)
+            return;
+        const items = this.dropdownRef.querySelectorAll('.x-select-option');
+        const activeItem = items[this.activeIndex];
+        if (activeItem) {
+            activeItem.scrollIntoView({ block: 'nearest' });
+        }
+    }
+    // ==================== Event Handlers ====================
+    /**
+     * Handles click on the main selector element.
+     * Toggles dropdown if trigger includes 'click'.
+     */
+    handleSelectorClick = (e) => {
+        e.preventDefault();
+        if (this.showAction.includes('click')) {
+            this.toggleDropdown();
+        }
+        this.inputRef?.focus();
+    };
+    /**
+     * Handles focus event on the input.
+     * Opens dropdown if trigger includes 'focus'.
+     */
+    handleInputFocus = (e) => {
+        this.focused = true;
+        this.xFocus.emit(e);
+        if (this.showAction.includes('focus')) {
+            this.openDropdown();
+        }
+    };
+    /**
+     * Handles blur event on the input.
+     * Delays blur processing to allow for clicks on dropdown items.
+     */
+    handleInputBlur = (e) => {
+        setTimeout(() => {
+            if (!this.el.contains(document.activeElement)) {
+                this.focused = false;
+                this.xBlur.emit(e);
+            }
+        }, 150);
+    };
+    /**
+     * Handles input changes for search functionality.
+     * Updates search value, resets active index to 0, and opens dropdown.
+     */
+    handleSearchInput = (e) => {
+        const target = e.target;
+        this.searchValue = target.value;
+        this.xSearch.emit(this.searchValue);
+        if (!this.open) {
+            this.openDropdown();
+        }
+        this.activeIndex = 0;
+    };
+    /**
+     * Handles click on the clear icon.
+     * Clears selection and search value.
+     */
+    handleClear = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        this.selectedOptions = [];
+        this.value = this.isMultiple ? [] : undefined;
+        this.emitChange();
+        this.xClear.emit();
+    };
+    /**
+     * Handles click on a tag's remove icon (multiple mode).
+     * Deselects the specific option associated with the tag.
+     */
+    handleTagRemove = (e, option) => {
+        e.stopPropagation();
+        e.preventDefault();
+        this.deselectOption(option);
+    };
+    /**
+     * Handles click on an option in the dropdown.
+     * Selects the clicked option.
+     */
+    handleOptionClick = (option) => {
+        if (!option.disabled) {
+            this.selectOption(option);
+        }
+    };
+    /**
+     * Handles scroll event on the dropdown content.
+     * Implements infinite/lazy loading by checking if scroll is near bottom.
+     * Increases `visibleCount` to render more options.
+     */
+    handleDropdownScroll = (e) => {
+        const target = e.target;
+        const threshold = 20; // px from bottom
+        if (target.scrollTop + target.clientHeight >= target.scrollHeight - threshold) {
+            if (this.visibleCount < this.filteredOptions.length) {
+                this.visibleCount += this.pageSize;
+            }
+        }
+    };
+    // ==================== Portal Methods ====================
+    /**
+     * Builds the dropdown DOM structure for the portal.
+     *
+     * Flow:
+     * 1. Creates or reuses `x-select-dropdown-content` element.
+     * 2. Calculates width (match select or fixed).
+     * 3. Sets classes and styles.
+     * 4. Renders options (handling groups if present) or "Not Found" state.
+     * 5. Attaches scroll listener for lazy loading.
+     *
+     * @returns HTMLElement - The constructed dropdown element.
+     */
+    buildDropdownElement() {
+        if (!this.dropdownEl) {
+            this.dropdownEl = document.createElement('x-select-dropdown-content');
+            this.dropdownEl.setDropdownRef = (el) => {
+                this.dropdownRef = el || undefined;
+            };
+        }
+        const dropdownEl = this.dropdownEl;
+        const options = this.filteredOptions;
+        const hasOptions = options.length > 0;
+        // Calculate width - use wrapper element for full width
+        let width;
+        if (typeof this.dropdownMatchSelectWidth === 'number') {
+            width = `${this.dropdownMatchSelectWidth}px`;
+        }
+        else if (this.dropdownMatchSelectWidth) {
+            const wrapperEl = this.getWrapperEl();
+            if (wrapperEl) {
+                width = `${wrapperEl.offsetWidth}px`;
+            }
+        }
+        // Set classes
+        const classes = {
+            'x-select-dropdown': true,
+            'x-select-dropdown-hidden': !this.open,
+            [`x-select-dropdown-placement-${this.placement}`]: true,
+            [this.dropdownClassName || '']: !!this.dropdownClassName,
+        };
+        // Set styles
+        const styles = {
+            ...this.dropdownStyle,
+            ...(width ? { width } : {}),
+        };
+        dropdownEl.dropdownClasses = classes;
+        dropdownEl.dropdownStyle = styles;
+        // Build content
+        let contentWrapper = dropdownEl.querySelector('.x-select-dropdown-content');
+        if (!contentWrapper) {
+            contentWrapper = document.createElement('div');
+            contentWrapper.className = 'x-select-dropdown-content';
+            contentWrapper.style.maxHeight = `${this.listHeight}px`;
+            contentWrapper.style.overflowY = 'auto';
+            dropdownEl.appendChild(contentWrapper);
+        }
+        // Preserve scroll position
+        const scrollTop = contentWrapper.scrollTop;
+        // Clear content
+        contentWrapper.innerHTML = '';
+        // Listen for scroll for lazy loading
+        contentWrapper.removeEventListener('scroll', this.handleDropdownScroll);
+        contentWrapper.addEventListener('scroll', this.handleDropdownScroll);
+        if (!hasOptions) {
+            const emptyDiv = document.createElement('div');
+            emptyDiv.className = 'x-select-item-empty';
+            emptyDiv.textContent = this.notFoundContent;
+            contentWrapper.appendChild(emptyDiv);
+        }
+        else {
+            // Check if we have option groups
+            if (this.options && this.options.some(isOptionGroup)) {
+                this.renderOptionsWithGroups(contentWrapper, options.slice(0, this.visibleCount));
+            }
+            else {
+                options.slice(0, this.visibleCount).forEach((option, index) => {
+                    const optionEl = this.createOptionElement(option, index);
+                    contentWrapper.appendChild(optionEl);
+                });
+            }
+        }
+        // Restore scroll position
+        if (scrollTop > 0) {
+            contentWrapper.scrollTop = scrollTop;
+        }
+        return dropdownEl;
+    }
+    /**
+     * Creates a single option DOM element.
+     *
+     * Flow:
+     * 1. Determines state (selected, active, disabled).
+     * 2. Sets ARIA attributes.
+     * 3. Renders label content.
+     * 4. If selected, renders a checkmark icon.
+     * 5. Attaches click listener.
+     *
+     * @param option - The option data.
+     * @param index - The index of the option.
+     * @returns HTMLElement - The option element.
+     */
+    createOptionElement(option, index) {
+        const isSelected = this.selectedOptions.some((o) => o.value === option.value);
+        const isActive = index === this.activeIndex;
+        const optionEl = document.createElement('div');
+        optionEl.className = [
+            'x-select-option',
+            isSelected ? 'x-select-option-selected' : '',
+            isActive ? 'x-select-option-active' : '',
+            option.disabled ? 'x-select-option-disabled' : '',
+        ].filter(Boolean).join(' ');
+        optionEl.setAttribute('role', 'option');
+        optionEl.setAttribute('aria-selected', String(isSelected));
+        optionEl.setAttribute('aria-disabled', String(!!option.disabled));
+        // Content
+        const contentSpan = document.createElement('span');
+        contentSpan.className = 'x-select-option-content';
+        contentSpan.textContent = option.label;
+        optionEl.appendChild(contentSpan);
+        // Selected icon
+        if (isSelected) {
+            const iconSpan = document.createElement('span');
+            iconSpan.className = 'x-select-option-state';
+            iconSpan.innerHTML = `
+        <svg viewBox="64 64 896 896" width="1em" height="1em" fill="currentColor">
+          <path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"/>
+        </svg>
+      `;
+            optionEl.appendChild(iconSpan);
+        }
+        // Click handler
+        optionEl.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.handleOptionClick(option);
+        });
+        return optionEl;
+    }
+    /**
+     * Renders options respecting OptionGroup structure.
+     * Iterates through groups and options, creating headers and items.
+     *
+     * @param container - The container to append elements to.
+     * @param filteredOptions - The flat list of filtered options to verify visibility.
+     */
+    renderOptionsWithGroups(container, filteredOptions) {
+        if (!this.options)
+            return;
+        let globalIndex = 0;
+        for (const opt of this.options) {
+            if (isOptionGroup(opt)) {
+                // Render group header
+                const groupEl = document.createElement('div');
+                groupEl.className = 'x-select-option-group';
+                const groupLabel = document.createElement('div');
+                groupLabel.className = 'x-select-option-group-label';
+                groupLabel.textContent = opt.label;
+                groupEl.appendChild(groupLabel);
+                // Render group options
+                for (const groupOption of opt.options) {
+                    // Check if this option is in filtered list
+                    const isFiltered = filteredOptions.some(fo => fo.value === groupOption.value);
+                    if (!isFiltered)
+                        continue;
+                    const optionEl = this.createOptionElement(groupOption, globalIndex);
+                    optionEl.classList.add('x-select-option-in-group');
+                    groupEl.appendChild(optionEl);
+                    globalIndex++;
+                }
+                // Only append group if it has visible options
+                if (groupEl.querySelectorAll('.x-select-option').length > 0) {
+                    container.appendChild(groupEl);
+                }
+            }
+            else {
+                // Check if this option is in filtered list
+                const isFiltered = filteredOptions.some(fo => fo.value === opt.value);
+                if (!isFiltered)
+                    continue;
+                const optionEl = this.createOptionElement(opt, globalIndex);
+                container.appendChild(optionEl);
+                globalIndex++;
+            }
+        }
+    }
+    /**
+     * Retrieves the wrapper element from the shadow DOM.
+     * @returns HTMLElement | undefined
+     */
+    getWrapperEl() {
+        return this.el.shadowRoot?.querySelector('.x-select-wrapper');
+    }
+    /**
+     * Creates or updates the portal instance for the dropdown.
+     * Manages position, content, and open state.
+     */
+    updatePortal() {
+        if (!this.open) {
+            this.destroyPortal();
+            return;
+        }
+        const dropdownElement = this.buildDropdownElement();
+        if (!this.portalInstance) {
+            this.portalInstance = PortalController.create({
+                open: true,
+                target: this.getWrapperEl(),
+                placement: this.placement,
+                zIndex: 1050,
+                content: dropdownElement,
+            });
+        }
+        else {
+            this.portalInstance.update({
+                open: true,
+                target: this.getWrapperEl(),
+                placement: this.placement,
+                content: dropdownElement,
+            });
+        }
+    }
+    /**
+     * Destroys the portal instance and clears the dropdown element reference.
+     */
+    destroyPortal() {
+        if (this.portalInstance) {
+            this.portalInstance.destroy();
+            this.portalInstance = null;
+        }
+        this.dropdownEl = null;
+    }
+    // ==================== Render Methods ====================
+    /**
+     * Renders the arrow icon or loading spinner.
+     * @returns JSX.Element
+     */
+    renderArrowIcon() {
+        if (this.loading) {
+            return (h("span", { class: "x-select-arrow x-select-arrow-loading", part: "arrow" }, h("x-icon", { spin: true, name: getIcon('loading') })));
+        }
+        return (h("span", { class: { 'x-select-arrow': true, 'x-select-arrow-open': this.open }, part: "arrow" }, h("x-icon", { name: getIcon('arrowDown') })));
+    }
+    /**
+     * Renders the clear icon if allowed and value exists.
+     * @returns JSX.Element | null
+     */
+    renderClearIcon() {
+        if (!this.allowClear || !this.hasValue || this.disabled)
+            return null;
+        return (h("span", { class: "x-select-clear", part: "clear", onClick: this.handleClear }, h("x-icon", { name: getIcon('clear') })));
+    }
+    /**
+     * Renders a selected tag item (for multiple/tags mode).
+     *
+     * @param option - The option to render as a tag.
+     * @returns JSX.Element
+     */
+    renderTag(option) {
+        const label = this.maxTagTextLength && option.label.length > this.maxTagTextLength
+            ? option.label.slice(0, this.maxTagTextLength) + '...'
+            : option.label;
+        return (h("span", { class: "x-select-selection-item", key: String(option.value) }, h("span", { class: "x-select-selection-item-content" }, label), !this.disabled && (h("span", { class: "x-select-selection-item-remove", onClick: (e) => this.handleTagRemove(e, option) }, h("x-icon", { name: getIcon('checkSmall') })))));
+    }
+    /**
+     * Renders the selector content for multiple/tags mode.
+     * Includes tags, hidden tag counter, search input, and placeholder.
+     *
+     * @returns JSX.Element
+     */
+    renderMultipleSelector() {
+        const maxCount = typeof this.maxTagCount === 'number' ? this.maxTagCount : this.selectedOptions.length;
+        const visibleTags = this.selectedOptions.slice(0, maxCount);
+        const hiddenCount = this.selectedOptions.length - maxCount;
+        const showPlaceholder = !this.hasValue && !this.searchValue;
+        return (h("div", { class: "x-select-selection-overflow" }, visibleTags.map((opt) => this.renderTag(opt)), hiddenCount > 0 && (h("span", { class: "x-select-selection-item x-select-selection-item-rest" }, h("span", { class: "x-select-selection-item-content" }, this.maxTagPlaceholder || `+ ${hiddenCount} ...`))), h("span", { class: "x-select-selection-search" }, h("input", { ref: (el) => (this.inputRef = el), id: this.inputId, name: this.name, class: "x-select-selection-search-input", type: "text", value: this.searchValue, disabled: this.disabled, readOnly: !this.showSearch && this.mode !== 'tags', autoComplete: "off", onInput: this.handleSearchInput, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur }), h("span", { class: "x-select-selection-search-mirror" }, this.searchValue, "\u00A0")), showPlaceholder && (h("span", { class: "x-select-selection-placeholder" }, this.placeholder))));
+    }
+    /**
+     * Renders the selector content for single selection mode.
+     * Includes selected label (or placeholder) and search input.
+     *
+     * @returns JSX.Element[]
+     */
+    renderSingleSelector() {
+        const showPlaceholder = !this.hasValue && !this.searchValue;
+        const displayLabel = this.hasValue ? this.selectedOptions[0].label : '';
+        return [
+            h("span", { class: "x-select-selection-search" }, h("input", { ref: (el) => (this.inputRef = el), id: this.inputId, name: this.name, class: "x-select-selection-search-input", type: "text", value: this.searchValue, disabled: this.disabled, readOnly: !this.showSearch, autoComplete: "off", onInput: this.handleSearchInput, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, style: { opacity: this.open ? '1' : '0' } })),
+            h("span", { class: "x-select-selection-item", style: {
+                    visibility: this.open && this.searchValue ? 'hidden' : 'visible',
+                    opacity: this.open && this.showSearch ? '0.4' : '1'
+                } }, displayLabel),
+            showPlaceholder && (h("span", { class: "x-select-selection-placeholder" }, this.placeholder)),
+        ];
+    }
+    /**
+     * Main render method for the Select component.
+     *
+     * Flow:
+     * 1. Calculates host classes based on props (size, mode, status, etc.).
+     * 2. Renders the main wrapper.
+     * 3. Renders the selector (single or multiple) inside the wrapper.
+     * 4. Renders suffix icons (clear, arrow/loading).
+     *
+     * @returns JSX.Element
+     */
+    render() {
+        const hostClasses = {
+            'x-select': true,
+            'x-select-single': !this.isMultiple,
+            'x-select-multiple': this.isMultiple,
+            'x-select-open': this.open,
+            'x-select-focused': this.focused,
+            'x-select-disabled': this.disabled,
+            'x-select-loading': this.loading,
+            'x-select-show-search': this.showSearch || this.mode === 'tags',
+            'x-select-allow-clear': this.allowClear,
+            'x-select-borderless': !this.bordered,
+            [`x-select-${this.size}`]: true,
+            [`x-select-status-${this.status}`]: !!this.status,
+        };
+        return (h(Host, { key: '592a104db5de8006a1ad6fc50a85e3017748b0bc', class: hostClasses, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": String(this.open), "aria-disabled": String(this.disabled) }, h("div", { key: 'f766f29c9b6c2c35f353e64aef873e78980bdb15', class: {
+                'x-select-wrapper': true,
+                'disabled': this.disabled,
+            }, part: "wrapper" }, h("div", { key: 'fc7a4a196080d652c8544222da6f5bf03ef15033', class: {
+                'x-select-selector': true,
+                'disabled': this.disabled,
+            }, part: "selector", onClick: this.handleSelectorClick }, this.isMultiple ? this.renderMultipleSelector() : this.renderSingleSelector()), h("span", { key: '7a1f7574a4a91187935751f9cae38558cb26674d', class: "x-select-suffix" }, this.renderClearIcon(), this.renderArrowIcon()))));
+    }
+    static get is() { return "x-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["x-select.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["x-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-select disabled></x-select>"
+                        }],
+                    "text": "Whether the select is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SelectMode",
+                    "resolved": "\"multiple\" | \"tags\"",
+                    "references": {
+                        "SelectMode": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-select/types.ts::SelectMode",
+                            "referenceLocation": "SelectMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-select mode=\"multiple\"></x-select>"
+                        }],
+                    "text": "The mode of select: 'multiple' | 'tags' | undefined (single)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mode"
+            },
+            "allowClear": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-select allowClear></x-select>"
+                        }],
+                    "text": "Whether to show the clear button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "allow-clear",
+                "defaultValue": "false"
+            },
+            "showSearch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-select showSearch></x-select>"
+                        }],
+                    "text": "Whether to show search input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-search",
+                "defaultValue": "false"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-select placeholder=\"Choose one\"></x-select>"
+                        }],
+                    "text": "Placeholder text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "translate('Select.placeholder', {}, 'Please select')"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SelectSize",
+                    "resolved": "\"large\" | \"middle\" | \"small\"",
+                    "references": {
+                        "SelectSize": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-select/types.ts::SelectSize",
+                            "referenceLocation": "SelectSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-select size=\"small\"></x-select>"
+                        }],
+                    "text": "Size of select: 'large' | 'middle' | 'small'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'middle'"
+            },
+            "value": {
+                "type": "any",
+                "mutable": true,
+                "complexType": {
+                    "original": "SelectValue",
+                    "resolved": "(string | number)[] | LabeledValue | LabeledValue[] | number | string",
+                    "references": {
+                        "SelectValue": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-select/types.ts::SelectValue",
+                            "referenceLocation": "SelectValue"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-select value=\"a\"></x-select>"
+                        }],
+                    "text": "Current selected value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "defaultValue": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "SelectValue",
+                    "resolved": "(string | number)[] | LabeledValue | LabeledValue[] | number | string",
+                    "references": {
+                        "SelectValue": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-select/types.ts::SelectValue",
+                            "referenceLocation": "SelectValue"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-select defaultValue=\"a\"></x-select>"
+                        }],
+                    "text": "Default selected value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-value"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-select open></x-select>"
+                        }],
+                    "text": "Whether dropdown is open (controlled)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-select loading></x-select>"
+                        }],
+                    "text": "Whether to show loading spinner."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "maxTagCount": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | 'responsive'",
+                    "resolved": "\"responsive\" | number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-select mode=\"multiple\" maxTagCount={2}></x-select>"
+                        }],
+                    "text": "Maximum number of tags to display in multiple mode."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-tag-count"
+            },
+            "maxTagPlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-select mode=\"multiple\" maxTagPlaceholder=\"+ more\"></x-select>"
+                        }],
+                    "text": "Placeholder for hidden tags."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-tag-placeholder"
+            },
+            "maxTagTextLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-select mode=\"multiple\" maxTagTextLength={8}></x-select>"
+                        }],
+                    "text": "Maximum length of tag text to display."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-tag-text-length"
+            },
+            "bordered": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-select bordered={false}></x-select>"
+                        }],
+                    "text": "Whether to show border."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "bordered",
+                "defaultValue": "true"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SelectStatus",
+                    "resolved": "\"error\" | \"warning\"",
+                    "references": {
+                        "SelectStatus": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-select/types.ts::SelectStatus",
+                            "referenceLocation": "SelectStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-select status=\"error\"></x-select>"
+                        }],
+                    "text": "Validation status: 'error' | 'warning'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SelectPlacement",
+                    "resolved": "\"bottomLeft\" | \"bottomRight\" | \"topLeft\" | \"topRight\"",
+                    "references": {
+                        "SelectPlacement": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-select/types.ts::SelectPlacement",
+                            "referenceLocation": "SelectPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-select placement=\"bottomRight\"></x-select>"
+                        }],
+                    "text": "Dropdown placement."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement",
+                "defaultValue": "'bottomLeft'"
+            },
+            "labelInValue": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-select labelInValue></x-select>"
+                        }],
+                    "text": "Whether to include label in value object."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-in-value",
+                "defaultValue": "false"
+            },
+            "filterOption": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | ((inputValue: string, option: SelectOption) => boolean)",
+                    "resolved": "((inputValue: string, option: SelectOption) => boolean) | boolean",
+                    "references": {
+                        "SelectOption": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-select/types.ts::SelectOption",
+                            "referenceLocation": "SelectOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-select filterOption={(input, opt) => opt.label.startsWith(input)}></x-select>"
+                        }],
+                    "text": "Custom filter function for search."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "filter-option",
+                "defaultValue": "true"
+            },
+            "filterSort": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(optionA: SelectOption, optionB: SelectOption) => number",
+                    "resolved": "(optionA: SelectOption, optionB: SelectOption) => number",
+                    "references": {
+                        "SelectOption": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-select/types.ts::SelectOption",
+                            "referenceLocation": "SelectOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-select filterSort={(a, b) => a.label.localeCompare(b.label)}></x-select>"
+                        }],
+                    "text": "Sort function for filtered options."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "notFoundContent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-select notFoundContent=\"Empty\"></x-select>"
+                        }],
+                    "text": "Text to show when no options match search."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "not-found-content",
+                "defaultValue": "translate('Select.notFoundContent', {}, 'No data')"
+            },
+            "autofocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-select autofocus></x-select>"
+                        }],
+                    "text": "Whether auto focus on mount."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autofocus",
+                "defaultValue": "false"
+            },
+            "inputId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-select inputId=\"country\"></x-select>"
+                        }],
+                    "text": "ID for the input element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "input-id"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-select name=\"country\"></x-select>"
+                        }],
+                    "text": "Name attribute for form."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "showAction": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SelectShowAction[]",
+                    "resolved": "SelectShowAction[]",
+                    "references": {
+                        "SelectShowAction": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-select/types.ts::SelectShowAction",
+                            "referenceLocation": "SelectShowAction"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-select showAction={['click','focus']}></x-select>"
+                        }],
+                    "text": "Trigger actions to open dropdown."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "['click']"
+            },
+            "dropdownClassName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-select dropdownClassName=\"my-select-dropdown\"></x-select>"
+                        }],
+                    "text": "Custom dropdown class."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dropdown-class-name"
+            },
+            "dropdownStyle": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ [key: string]: string }",
+                    "resolved": "{ [key: string]: string; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-select dropdownStyle={{ minWidth: '240px' }}></x-select>"
+                        }],
+                    "text": "Custom dropdown style."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "dropdownMatchSelectWidth": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | number",
+                    "resolved": "boolean | number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-select dropdownMatchSelectWidth={false}></x-select>"
+                        }],
+                    "text": "Whether dropdown matches selector width."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dropdown-match-select-width",
+                "defaultValue": "true"
+            },
+            "listHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-select listHeight={300}></x-select>"
+                        }],
+                    "text": "Height of dropdown list."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "list-height",
+                "defaultValue": "256"
+            },
+            "pageSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-select pageSize={50}></x-select>"
+                        }],
+                    "text": "Number of items to render initially and per scroll."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "page-size",
+                "defaultValue": "100"
+            },
+            "options": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SelectOptionType[]",
+                    "resolved": "SelectOptionType[]",
+                    "references": {
+                        "SelectOptionType": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-select/types.ts::SelectOptionType",
+                            "referenceLocation": "SelectOptionType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-select options={[{ value: 'a', label: 'A' }]}></x-select>"
+                        }],
+                    "text": "Options data, use this instead of x-select-option children. Supports SelectOption and OptionGroup."
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "searchValue": {},
+            "selectedOptions": {},
+            "focused": {},
+            "activeIndex": {},
+            "internalOptions": {},
+            "visibleCount": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xChange",
+                "name": "xChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-select onXChange={(ev) => console.log(ev.detail)}></x-select>"
+                        }],
+                    "text": "Emitted when value changes."
+                },
+                "complexType": {
+                    "original": "SelectChangeEventDetail",
+                    "resolved": "SelectChangeEventDetail",
+                    "references": {
+                        "SelectChangeEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-select/types.ts::SelectChangeEventDetail",
+                            "referenceLocation": "SelectChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xSearch",
+                "name": "xSearch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-select onXSearch={(ev) => console.log(ev.detail)}></x-select>"
+                        }],
+                    "text": "Emitted when search value changes."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "xDropdownVisibleChange",
+                "name": "xDropdownVisibleChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-select onXDropdownVisibleChange={(ev) => console.log(ev.detail)}></x-select>"
+                        }],
+                    "text": "Emitted when dropdown opens/closes."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "xBlur",
+                "name": "xBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-select onXBlur={(ev) => console.log(ev)}></x-select>"
+                        }],
+                    "text": "Emitted on blur."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "xFocus",
+                "name": "xFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-select onXFocus={(ev) => console.log(ev)}></x-select>"
+                        }],
+                    "text": "Emitted on focus."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "xClear",
+                "name": "xClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-select onXClear={() => {}}></x-select>"
+                        }],
+                    "text": "Emitted when clear button is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "xDeselect",
+                "name": "xDeselect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-select onXDeselect={(ev) => console.log(ev.detail)}></x-select>"
+                        }],
+                    "text": "Emitted when a tag is removed."
+                },
+                "complexType": {
+                    "original": "SelectOption",
+                    "resolved": "SelectOption",
+                    "references": {
+                        "SelectOption": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-select/types.ts::SelectOption",
+                            "referenceLocation": "SelectOption"
+                        }
+                    }
+                }
+            }, {
+                "method": "xSelect",
+                "name": "xSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-select onXSelect={(ev) => console.log(ev.detail)}></x-select>"
+                        }],
+                    "text": "Emitted when an option is selected."
+                },
+                "complexType": {
+                    "original": "SelectOption",
+                    "resolved": "SelectOption",
+                    "references": {
+                        "SelectOption": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-select/types.ts::SelectOption",
+                            "referenceLocation": "SelectOption"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Focus the select input.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise<void>"
+                        }, {
+                            "name": "example",
+                            "text": "await el.setFocus()"
+                        }]
+                }
+            },
+            "setBlur": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Blur the select input.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise<void>"
+                        }, {
+                            "name": "example",
+                            "text": "await el.setBlur()"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValueChange"
+            }, {
+                "propName": "open",
+                "methodName": "onOpenChange"
+            }, {
+                "propName": "options",
+                "methodName": "onOptionsChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleWindowClick",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}