@infineon/design-system 0.0.0-stage → 41.11.0

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

@@ -0,0 +1,1030 @@
+import { h, } from "@stencil/core";
+import { isNestedInIfxComponent } from "../../../shared/utils/dom-utils";
+import { detectFramework } from "../../../shared/utils/framework-detection";
+import { trackComponent } from "../../../shared/utils/tracking";
+function debounce(func, wait) {
+    let timeout;
+    return (arg) => {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => func(arg), wait);
+    };
+}
+/**
+ * A single-select dropdown. Options are provided as slotted `ifx-select-option`
+ * children, optionally grouped with `ifx-select-group` (flat optgroup). Native,
+ * slot-based architecture mirroring `ifx-multiselect`.
+ */
+export class Select {
+    el;
+    /** Label shown above the select. */
+    label = "";
+    /** Helper text shown below the select. */
+    caption = "";
+    /** Size of the select field: `'s'` (36px) or `'m'` (40px). */
+    size = "m";
+    /** If true, the select is disabled and not interactive. */
+    disabled = false;
+    /** If true, shows the select in an error state. */
+    error = false;
+    /** If true, the select is read-only. */
+    readOnly = false;
+    /** Whether a selection is required (marks the label with `*`). */
+    required = false;
+    /** If false, hides the placeholder text when nothing is selected. */
+    placeholder = true;
+    /** Placeholder text shown when nothing is selected. */
+    placeholderValue = "Placeholder";
+    /** If true, shows a search box inside the dropdown. */
+    showSearch = false;
+    /** Placeholder text for the search input. */
+    searchPlaceholderValue = "Search...";
+    /** If true, shows a button to clear the current selection. */
+    showClearButton = true;
+    /** Name of the select field (used in forms). */
+    name;
+    /** The selected option value (source of truth). */
+    value;
+    /** Message shown when a search yields no results. */
+    noResultsMessage = "No results found.";
+    /** ARIA label for the combobox. */
+    ariaSelectLabel = "Select";
+    /** ARIA label for the search input. */
+    ariaSearchLabel = "Search options";
+    /** ARIA label for the clear button. */
+    ariaClearLabel = "Clear selection";
+    /**
+     * ID of an external element that labels the select (`aria-labelledby`). Takes
+     * precedence over the visible label and `ariaSelectLabel`.
+     */
+    ariaSelectLabelledBy = "";
+    /**
+     * ID of an external element that describes the select (`aria-describedby`). Takes
+     * precedence over the caption.
+     */
+    ariaSelectDescribedBy = "";
+    /**
+     * @deprecated Removed. Provide options as slotted `<ifx-select-option>` children
+     * (optionally grouped with `<ifx-select-group>`) instead of an options array.
+     */
+    options;
+    selectedLabel = "";
+    dropdownOpen = false;
+    dropdownFlipped = false;
+    searchTerm = "";
+    internalError = false;
+    /** Fired when the selection changes. Emits `{ value, label }`, or `null` on clear. */
+    ifxSelect;
+    /**
+     * Fired before the clear control removes the current selection.
+     * Call `event.preventDefault()` to cancel clearing.
+     */
+    ifxClear;
+    /** Fired when the search input value changes. */
+    ifxInput;
+    /** Fired when the dropdown opens (`true`) or closes (`false`). */
+    ifxOpen;
+    internals;
+    dropdownElement;
+    focusedIndex = -1;
+    labelId;
+    captionId;
+    listboxId;
+    componentWillLoad() {
+        this.internalError = this.error;
+        const base = `ifx-select-${Math.random().toString(36).substring(2, 9)}`;
+        this.labelId = `${base}-label`;
+        this.captionId = `${base}-caption`;
+        this.listboxId = `${base}-listbox`;
+        if (this.options !== undefined) {
+            this.warnOptionsDeprecated();
+        }
+    }
+    async componentDidLoad() {
+        if (!isNestedInIfxComponent(this.el)) {
+            const framework = detectFramework();
+            trackComponent("ifx-select", await framework);
+        }
+        this.el.addEventListener("ifx-option-changed", this.handleOptionChanged);
+        // Child options upgrade before the parent's componentDidLoad, so reading their
+        // initial `selected` state here is reliable (and catches static markup).
+        this.syncInitialSelection();
+        setTimeout(() => this.positionDropdown(), 500);
+    }
+    disconnectedCallback() {
+        this.el.removeEventListener("ifx-option-changed", this.handleOptionChanged);
+        document.removeEventListener("click", this.handleDocumentClick);
+    }
+    updateInternalError() {
+        this.internalError = this.error;
+    }
+    valueChanged() {
+        this.applyValueToOptions();
+    }
+    optionsChanged() {
+        if (this.options !== undefined) {
+            this.warnOptionsDeprecated();
+        }
+    }
+    warnOptionsDeprecated() {
+        console.warn("[ifx-select] The `options` prop was removed. Provide options as slotted <ifx-select-option> children (optionally grouped with <ifx-select-group>). See the migration guide.");
+    }
+    /** Public API — clears the selection. */
+    async clearSelection() {
+        this.value = undefined;
+        this.applyValueToOptions();
+        this.ifxSelect.emit(null);
+    }
+    handleClearButtonClick = (event) => {
+        event.stopPropagation();
+        const clearEvent = this.ifxClear.emit();
+        if (!clearEvent.defaultPrevented) {
+            this.clearSelection();
+        }
+    };
+    /** Public API — returns the currently selected value. */
+    async getValue() {
+        return this.value;
+    }
+    /** Public API — programmatically sets the selected value. */
+    async setValue(value) {
+        this.value = value;
+        this.applyValueToOptions();
+    }
+    /** Public API — opens the dropdown. */
+    async showDropdown() {
+        this.openDropdown();
+    }
+    /** Public API — closes the dropdown. */
+    async hideDropdown() {
+        this.closeDropdown();
+    }
+    getOptionElements() {
+        return Array.from(this.el.querySelectorAll("ifx-select-option"));
+    }
+    handleOptionChanged = (event) => {
+        const { value, reason } = event.detail;
+        if (reason === "selected") {
+            this.commitSelection(value);
+        }
+        else if (reason === "registered") {
+            const optionEl = event.target;
+            if (!this.hasValue() && optionEl.selected) {
+                this.value = value;
+            }
+            this.applyValueToOptions();
+        }
+        else if (reason === "removed" && value === this.value) {
+            this.value = undefined;
+            this.applyValueToOptions();
+        }
+    };
+    syncInitialSelection() {
+        if (!this.hasValue()) {
+            const preselected = this.getOptionElements().find((o) => o.selected);
+            if (preselected) {
+                this.value = preselected.value;
+            }
+        }
+        this.applyValueToOptions();
+    }
+    commitSelection(value) {
+        this.value = value;
+        this.applyValueToOptions();
+        this.closeDropdown();
+        this.ifxSelect.emit({ value: this.value, label: this.selectedLabel });
+        this.focusWrapper();
+    }
+    /** Reflects `value` onto the option elements and derives the display label. */
+    applyValueToOptions() {
+        const hasValue = this.hasValue();
+        let label = "";
+        this.getOptionElements().forEach((opt) => {
+            const isMatch = hasValue && opt.value === this.value;
+            if (opt.selected !== isMatch) {
+                opt.selected = isMatch;
+            }
+            if (isMatch) {
+                label = (opt.textContent || "").trim() || opt.value;
+            }
+        });
+        this.selectedLabel = label;
+        this.internals?.setFormValue?.(hasValue ? this.value : null);
+    }
+    hasValue() {
+        return this.value !== undefined && this.value !== null && this.value !== "";
+    }
+    // --- dropdown open/close ---------------------------------------------------
+    openDropdown() {
+        if ((this.disabled && !this.internalError) || this.readOnly)
+            return;
+        if (this.dropdownOpen)
+            return;
+        this.positionDropdown();
+        this.dropdownOpen = true;
+        this.focusedIndex = -1;
+        setTimeout(() => {
+            document.addEventListener("click", this.handleDocumentClick);
+            this.ifxOpen.emit(true);
+        }, 0);
+    }
+    closeDropdown() {
+        if (!this.dropdownOpen)
+            return;
+        this.dropdownOpen = false;
+        this.focusedIndex = -1;
+        document.removeEventListener("click", this.handleDocumentClick);
+        this.resetSearch();
+        this.ifxOpen.emit(false);
+    }
+    toggleDropdown() {
+        this.dropdownOpen ? this.closeDropdown() : this.openDropdown();
+    }
+    handleDocumentClick = (event) => {
+        if (!event.composedPath().includes(this.dropdownElement)) {
+            this.closeDropdown();
+        }
+    };
+    positionDropdown() {
+        const wrapperRect = this.el.shadowRoot
+            ?.querySelector(".ifx-select-wrapper")
+            ?.getBoundingClientRect();
+        if (!wrapperRect)
+            return;
+        const spaceBelow = window.innerHeight - wrapperRect.bottom;
+        const spaceAbove = wrapperRect.top;
+        this.dropdownFlipped =
+            (spaceAbove > spaceBelow && wrapperRect.height > spaceBelow) ||
+                wrapperRect.bottom > window.innerHeight;
+    }
+    focusWrapper() {
+        this.el.shadowRoot?.querySelector(".ifx-select-wrapper")?.focus();
+    }
+    // --- search ----------------------------------------------------------------
+    handleSearch = debounce((target) => {
+        const term = (target.value || "").toLowerCase();
+        const active = term !== "";
+        this.searchTerm = term;
+        this.ifxInput.emit(target.value);
+        requestAnimationFrame(() => {
+            this.getOptionElements().forEach((option) => {
+                option.dispatchEvent(new CustomEvent("ifx-search-filter", {
+                    detail: { searchTerm: term, isActive: active },
+                }));
+            });
+            setTimeout(() => this.updateSearchVisibility(active), 200);
+        });
+    }, 150);
+    updateSearchVisibility(active) {
+        // Hide group headers whose options are all filtered out.
+        this.el.querySelectorAll("ifx-select-group").forEach((group) => {
+            const anyVisible = Array.from(group.querySelectorAll("ifx-select-option")).some((o) => this.isOptionVisible(o));
+            group.classList.toggle("group--empty", active && !anyVisible);
+        });
+        const anyVisible = this.getOptionElements().some((o) => this.isOptionVisible(o));
+        const container = this.el.shadowRoot?.querySelector(".ifx-select-options");
+        container?.classList.toggle("show-no-results", active && !anyVisible);
+    }
+    isOptionVisible(option) {
+        const style = window.getComputedStyle(option);
+        return style.display !== "none" && option.getBoundingClientRect().height > 0;
+    }
+    resetSearch() {
+        this.searchTerm = "";
+        const searchField = this.el.shadowRoot?.querySelector("ifx-search-field");
+        if (searchField) {
+            searchField.value = "";
+        }
+        this.el.shadowRoot
+            ?.querySelector(".ifx-select-options")
+            ?.classList.remove("show-no-results");
+        this.el.querySelectorAll("ifx-select-group").forEach((g) => {
+            g.classList.remove("group--empty");
+        });
+        this.getOptionElements().forEach((option) => {
+            option.dispatchEvent(new CustomEvent("ifx-search-filter", {
+                detail: { searchTerm: "", isActive: false },
+            }));
+        });
+    }
+    // --- keyboard navigation (roving focus over options) -----------------------
+    isOptionHidden(option) {
+        return (option.shadowRoot
+            ?.querySelector(".option")
+            ?.classList.contains("search-hidden") ?? false);
+    }
+    getNavigableOptions() {
+        return this.getOptionElements().filter((o) => !o.disabled && !this.isOptionHidden(o));
+    }
+    focusOptionAt(index) {
+        const options = this.getNavigableOptions();
+        if (!options.length)
+            return;
+        this.focusedIndex = Math.max(0, Math.min(index, options.length - 1));
+        options[this.focusedIndex].focus();
+    }
+    handleKeyDown(event) {
+        if (this.readOnly || (this.disabled && !this.internalError))
+            return;
+        if (!this.dropdownOpen) {
+            if (["Enter", " ", "ArrowDown"].includes(event.key)) {
+                event.preventDefault();
+                this.openDropdown();
+                requestAnimationFrame(() => this.focusOptionAt(0));
+            }
+            return;
+        }
+        switch (event.key) {
+            case "Escape":
+                event.preventDefault();
+                this.closeDropdown();
+                this.focusWrapper();
+                break;
+            case "ArrowDown":
+                event.preventDefault();
+                this.focusOptionAt(this.focusedIndex + 1);
+                break;
+            case "ArrowUp":
+                event.preventDefault();
+                this.focusOptionAt(this.focusedIndex - 1);
+                break;
+            case "Home":
+                event.preventDefault();
+                this.focusOptionAt(0);
+                break;
+            case "End":
+                event.preventDefault();
+                this.focusOptionAt(this.getNavigableOptions().length - 1);
+                break;
+            case "Tab":
+                this.closeDropdown();
+                break;
+        }
+    }
+    handleWrapperClick(event) {
+        this.positionDropdown();
+        if (event.target === event.currentTarget) {
+            this.toggleDropdown();
+        }
+    }
+    interactionsDisabled() {
+        return (this.disabled && !this.internalError) || this.readOnly;
+    }
+    render() {
+        const disabledClick = this.interactionsDisabled();
+        const stateClass = this.readOnly
+            ? "readOnly"
+            : this.internalError
+                ? "error"
+                : this.disabled
+                    ? "disabled"
+                    : "";
+        const labelledBy = this.ariaSelectLabelledBy || (this.label ? this.labelId : undefined);
+        const describedBy = this.ariaSelectDescribedBy || (this.caption ? this.captionId : undefined);
+        return (h("div", { key: 'db51b683eea1118e8968613fe061572be104e6d2', class: `ifx-select-container ${this.size === "s" ? "small-select" : "medium-select"} ${stateClass}`, ref: (el) => (this.dropdownElement = el) }, h("div", { key: 'e8b75c67183ad5ff2aee3b1465be2027784ddfb2', class: "ifx-label-wrapper" }, this.label && (h("span", { key: '24bb875c44cbddebba1653ec7f249510ac1d50ad', class: "wrapper-label" }, h("span", { key: '0b16934ace14211562903d4a39973dabbdc01c8b', id: this.labelId }, this.label), this.required && (h("span", { key: '2086c43750cc7e0cd42db20bad5b40adc9da6357', class: `required ${!this.readOnly && this.internalError ? "error" : ""}` }, "*"))))), h("div", { key: 'df0bcb801837ca2698eed9efd25e495a1bdc72ad', class: `ifx-select-wrapper ${this.dropdownOpen ? "active" : ""} ${this.dropdownFlipped ? "is-flipped" : ""} ${stateClass}`, role: "combobox", "aria-labelledby": labelledBy, "aria-label": labelledBy ? undefined : this.ariaSelectLabel, "aria-describedby": describedBy, "aria-controls": this.dropdownOpen ? this.listboxId : undefined, "aria-expanded": this.dropdownOpen ? "true" : "false", "aria-haspopup": "listbox", "aria-disabled": !this.readOnly && !this.internalError && this.disabled
+                ? "true"
+                : undefined, tabIndex: disabledClick ? undefined : 0, onClick: disabledClick ? undefined : (e) => this.handleWrapperClick(e) }, h("div", { key: '8782c96d5470e11c9851e0a7998818bc77330b44', class: `ifx-select-input ${this.hasValue() ? "" : "placeholder"}`, onClick: disabledClick ? undefined : () => this.toggleDropdown() }, this.hasValue()
+            ? this.selectedLabel || this.value
+            : this.placeholder
+                ? this.placeholderValue
+                : ""), this.dropdownOpen && (h("div", { key: 'db6ce50bcc5c81f055f676eba10c69423b0687f1', class: "ifx-select-dropdown-menu" }, this.showSearch && (h("div", { key: 'd7da46b919a9a8c342b2749daa3d5682ced62f31', class: "ifx-select-dropdown-search", onClick: (e) => e.stopPropagation() }, h("ifx-search-field", { key: 'ddc58ce4048494a3d2906fbe8cf62e1d6be1ccd3', class: "search-input", placeholder: this.searchPlaceholderValue, size: "s", "show-delete-icon": "true", "aria-label": this.ariaSearchLabel, onKeyDown: (e) => {
+                if (e.key === "ArrowDown") {
+                    e.preventDefault();
+                    this.focusOptionAt(0);
+                }
+                else if (e.key !== "Escape" && e.key !== "Tab") {
+                    e.stopPropagation();
+                }
+            }, onIfxInput: (event) => this.handleSearch(event.target) }))), h("div", { key: 'ec662302449d4cb58f56f41db6c200698a2d7f95', class: "ifx-select-options", role: "listbox", id: this.listboxId, "aria-label": labelledBy ? undefined : this.ariaSelectLabel }, h("slot", { key: 'a67e01e8d0ecca8e5752d2dcb129e218f2e92c17' }), this.searchTerm && (h("div", { key: '339a39d0f1f61011bbf53e30cb19d40654b494e3', class: "ifx-select-no-results" }, h("span", { key: '85944d97aa68a5e9f1be3d9458467634618d0ca5', class: "no-results-text" }, this.noResultsMessage)))))), h("div", { key: 'ca7761bd7fb58e07252724d90d5bc3c0fa034a91', class: "ifx-select-icon-container" }, this.hasValue() && this.showClearButton && (h("div", { key: '60482276f31cd007ab7486ac908cf8980c749d7f', class: "ifx-clear-button", role: "button", "aria-label": this.ariaClearLabel, onClick: disabledClick
+                ? undefined
+                : this.handleClearButtonClick }, h("ifx-icon", { key: '5a8f35ff6c8802bdc2e1c3f916de10131b131a44', icon: "cRemove16" }))), h("div", { key: 'fd5ee4b166b4275b9a0f94b690bd60a457a6aeed', class: "icon-wrapper-up", "aria-hidden": "true", onClick: disabledClick ? undefined : () => this.toggleDropdown() }, h("ifx-icon", { key: "icon-up", icon: "chevron-up-16" })), h("div", { key: 'd5cf5f20c02d0e365cad3822a09e31ae6ba3a447', class: "icon-wrapper-down", "aria-hidden": "true", onClick: disabledClick ? undefined : () => this.toggleDropdown() }, h("ifx-icon", { key: "icon-down", icon: "chevron-down-16" })))), this.caption && (h("div", { key: 'efccc6e9c70d4d9900ba389fd9ac524bed95063a', id: this.captionId, class: `single__select-caption ${stateClass}` }, this.caption))));
+    }
+    static get is() { return "ifx-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["select.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label shown above the select."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "\"\""
+            },
+            "caption": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper text shown below the select."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "caption",
+                "defaultValue": "\"\""
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"s\" | \"m\"",
+                    "resolved": "\"m\" | \"s\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the select field: `'s'` (36px) or `'m'` (40px)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "\"m\""
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the select is disabled and not interactive."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, shows the select in an error state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error",
+                "defaultValue": "false"
+            },
+            "readOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the select is read-only."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "read-only",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether a selection is required (marks the label with `*`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "placeholder": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If false, hides the placeholder text when nothing is selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "true"
+            },
+            "placeholderValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text shown when nothing is selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder-value",
+                "defaultValue": "\"Placeholder\""
+            },
+            "showSearch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, shows a search box inside the dropdown."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-search",
+                "defaultValue": "false"
+            },
+            "searchPlaceholderValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text for the search input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search-placeholder-value",
+                "defaultValue": "\"Search...\""
+            },
+            "showClearButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, shows a button to clear the current selection."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-clear-button",
+                "defaultValue": "true"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of the select field (used in forms)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected option value (source of truth)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            },
+            "noResultsMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Message shown when a search yields no results."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "no-results-message",
+                "defaultValue": "\"No results found.\""
+            },
+            "ariaSelectLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ARIA label for the combobox."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-select-label",
+                "defaultValue": "\"Select\""
+            },
+            "ariaSearchLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ARIA label for the search input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-search-label",
+                "defaultValue": "\"Search options\""
+            },
+            "ariaClearLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ARIA label for the clear button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-clear-label",
+                "defaultValue": "\"Clear selection\""
+            },
+            "ariaSelectLabelledBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ID of an external element that labels the select (`aria-labelledby`). Takes\nprecedence over the visible label and `ariaSelectLabel`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-select-labelled-by",
+                "defaultValue": "\"\""
+            },
+            "ariaSelectDescribedBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ID of an external element that describes the select (`aria-describedby`). Takes\nprecedence over the caption."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-select-described-by",
+                "defaultValue": "\"\""
+            },
+            "options": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "unknown",
+                    "resolved": "unknown",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Removed. Provide options as slotted `<ifx-select-option>` children\n(optionally grouped with `<ifx-select-group>`) instead of an options array."
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedLabel": {},
+            "dropdownOpen": {},
+            "dropdownFlipped": {},
+            "searchTerm": {},
+            "internalError": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ifxSelect",
+                "name": "ifxSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when the selection changes. Emits `{ value, label }`, or `null` on clear."
+                },
+                "complexType": {
+                    "original": "SelectChangeDetail | null",
+                    "resolved": "SelectChangeDetail",
+                    "references": {
+                        "SelectChangeDetail": {
+                            "location": "local",
+                            "path": "/home/fp/Dev/IFX/infineon-design-system-stencil/packages/components/src/components/select/single-select/select.tsx",
+                            "id": "src/components/select/single-select/select.tsx::SelectChangeDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "ifxClear",
+                "name": "ifxClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired before the clear control removes the current selection.\nCall `event.preventDefault()` to cancel clearing."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "ifxInput",
+                "name": "ifxInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when the search input value changes."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "ifxOpen",
+                "name": "ifxOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when the dropdown opens (`true`) or closes (`false`)."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "clearSelection": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Public API \u2014 clears the selection.",
+                    "tags": []
+                }
+            },
+            "getValue": {
+                "complexType": {
+                    "signature": "() => Promise<string | undefined>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Public API \u2014 returns the currently selected value.",
+                    "tags": []
+                }
+            },
+            "setValue": {
+                "complexType": {
+                    "signature": "(value: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Public API \u2014 programmatically sets the selected value.",
+                    "tags": []
+                }
+            },
+            "showDropdown": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Public API \u2014 opens the dropdown.",
+                    "tags": []
+                }
+            },
+            "hideDropdown": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Public API \u2014 closes the dropdown.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "error",
+                "methodName": "updateInternalError"
+            }, {
+                "propName": "value",
+                "methodName": "valueChanged"
+            }, {
+                "propName": "options",
+                "methodName": "optionsChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}