le-kit 0.5.3 → 0.6.0

package/dist/collection/components/le-combobox/le-combobox.js

@@ -1,633 +0,0 @@
-import { h, } from "@stencil/core";
-/**
- * A combobox component with searchable dropdown.
- *
- * Combines a text input with a dropdown list, allowing users to
- * filter options by typing or select from the list.
- *
- * @cmsEditable true
- * @cmsCategory Form
- *
- * @example Basic combobox
- * ```html
- * <le-combobox
- *   placeholder="Search..."
- *   options='[{"label": "Apple"}, {"label": "Banana"}, {"label": "Cherry"}]'
- * ></le-combobox>
- * ```
- *
- * @example Allow custom values
- * ```html
- * <le-combobox
- *   placeholder="Type or select..."
- *   allow-custom
- *   options='[{"label": "Red"}, {"label": "Green"}, {"label": "Blue"}]'
- * ></le-combobox>
- * ```
- */
-export class LeCombobox {
-    constructor() {
-        /**
-         * The options to display in the dropdown.
-         */
-        this.options = [];
-        /**
-         * Placeholder text for the input.
-         */
-        this.placeholder = 'Type to search...';
-        /**
-         * Whether the combobox is disabled.
-         */
-        this.disabled = false;
-        /**
-         * Whether selection is required.
-         */
-        this.required = false;
-        /**
-         * Whether the multiselect should take full width of its container.
-         */
-        this.fullWidth = false;
-        /**
-         * Size variant of the combobox.
-         */
-        this.size = 'medium';
-        /**
-         * Whether to allow custom values not in the options list.
-         */
-        this.allowCustom = false;
-        /**
-         * Minimum characters before showing filtered results.
-         */
-        this.minSearchLength = 0;
-        /**
-         * Text to show when no options match the search.
-         */
-        this.emptyText = 'No results found';
-        /**
-         * Whether the dropdown is currently open.
-         */
-        this.open = false;
-        this.inputValue = '';
-        this.filterOption = (option, query) => {
-            if (!query || query.length < this.minSearchLength)
-                return true;
-            const searchLower = query.toLowerCase();
-            return (option.label.toLowerCase().includes(searchLower) ||
-                (option.description?.toLowerCase().includes(searchLower) ?? false));
-        };
-        this.handleOptionSelect = (e) => {
-            this.value = e.detail.value;
-            this.selectedOption = e.detail.option;
-            this.inputValue = e.detail.option.label;
-            this.leChange.emit(e.detail);
-        };
-        this.handleDropdownOpen = () => {
-            this.open = true;
-            this.leOpen.emit();
-        };
-        this.handleDropdownClose = () => {
-            this.open = false;
-            this.leClose.emit();
-            // If custom values not allowed, reset input to selected option
-            if (!this.allowCustom && this.selectedOption) {
-                this.inputValue = this.selectedOption.label;
-            }
-            else if (!this.allowCustom && !this.selectedOption) {
-                this.inputValue = '';
-            }
-        };
-        this.handleInputChange = (e) => {
-            const target = e.target;
-            this.inputValue = target.value;
-            // Emit input event for custom values
-            if (this.allowCustom) {
-                this.leInput.emit({ value: this.inputValue });
-            }
-            // Open dropdown when typing
-            if (!this.open && this.inputValue.length >= this.minSearchLength) {
-                this.dropdownEl?.show();
-            }
-        };
-        this.handleInputFocus = () => {
-            if (!this.disabled) {
-                this.dropdownEl?.show();
-            }
-        };
-        this.handleInputKeyDown = (e) => {
-            if (this.disabled)
-                return;
-            switch (e.key) {
-                case 'ArrowDown':
-                    e.preventDefault();
-                    if (!this.open) {
-                        this.dropdownEl?.show();
-                    }
-                    break;
-                case 'Enter':
-                    if (this.allowCustom && this.inputValue && !this.open) {
-                        // Accept custom value
-                        this.value = this.inputValue;
-                        this.leChange.emit({
-                            value: this.inputValue,
-                            option: { label: this.inputValue, value: this.inputValue },
-                        });
-                    }
-                    break;
-                case 'Escape':
-                    if (this.open) {
-                        this.dropdownEl?.hide();
-                    }
-                    break;
-            }
-        };
-        this.handleClear = (e) => {
-            e.stopPropagation();
-            this.value = undefined;
-            this.selectedOption = undefined;
-            this.inputValue = '';
-            this.inputEl?.focus();
-            this.leChange.emit({
-                value: '',
-                option: { label: '', value: '' },
-            });
-        };
-    }
-    handleWindowClick(event) {
-        if (!this.el.contains(event.target)) {
-            this.dropdownEl?.hide();
-        }
-    }
-    handleValueChange() {
-        this.updateSelectedOption();
-    }
-    handleOptionsChange() {
-        this.updateSelectedOption();
-    }
-    componentWillLoad() {
-        this.updateSelectedOption();
-    }
-    get parsedOptions() {
-        if (typeof this.options === 'string') {
-            try {
-                return JSON.parse(this.options);
-            }
-            catch {
-                return [];
-            }
-        }
-        return this.options;
-    }
-    updateSelectedOption() {
-        if (this.value !== undefined) {
-            this.selectedOption = this.parsedOptions.find(opt => (opt.value ?? opt.label) === this.value);
-            if (this.selectedOption) {
-                this.inputValue = this.selectedOption.label;
-            }
-            else if (this.allowCustom) {
-                this.inputValue = this.value.toString();
-            }
-        }
-        else {
-            this.selectedOption = undefined;
-            this.inputValue = '';
-        }
-    }
-    /**
-     * Opens the dropdown.
-     */
-    async showDropdown() {
-        await this.dropdownEl?.show();
-    }
-    /**
-     * Closes the dropdown.
-     */
-    async hideDropdown() {
-        await this.dropdownEl?.hide();
-    }
-    /**
-     * Focuses the input element.
-     */
-    async focusInput() {
-        this.inputEl?.focus();
-    }
-    render() {
-        const hasValue = this.inputValue.length > 0;
-        return (h("le-component", { key: '2b0d151b589302147ff6a958a1bcbdd9fe973d6e', component: "le-combobox" }, h("le-dropdown-base", { key: '2916e62fe29d92274ec735719675ed4847f19aa9', ref: el => (this.dropdownEl = el), options: this.parsedOptions, value: this.value, disabled: this.disabled, filterFn: this.filterOption, filterQuery: this.inputValue, emptyText: this.emptyText, fullWidth: this.fullWidth, closeOnClickOutside: false, onLeOptionSelect: this.handleOptionSelect, onLeDropdownOpen: this.handleDropdownOpen, onLeDropdownClose: this.handleDropdownClose }, h("div", { key: 'b5ff8b929ce9d204327a11fd191d5c0b4a8bea70', slot: "trigger", class: { 'combobox-trigger': true, 'is-open': this.open } }, h("le-string-input", { key: 'a3cb396b00e753634bd6c132fad9beea9586e0db', mode: "default", hideDescription: true, inputRef: el => (this.inputEl = el), type: "text", class: "combobox-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', "aria-autocomplete": "list", onInput: this.handleInputChange, onFocus: this.handleInputFocus, onKeyDown: this.handleInputKeyDown }), hasValue && !this.disabled && (h("button", { key: '6f8cf150544c1b33c07acf2bbb51cafb359a9446', type: "button", class: "combobox-clear", onClick: this.handleClear, "aria-label": "Clear", tabIndex: -1 }, h("svg", { key: 'e06af09838a2c451ca322ac5aa1c6360d1b6e527', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '1d03c90b883b4a0c35b4fe6a089c95ba210287cf', d: "M4 4l8 8M12 4l-8 8" })))), h("span", { key: '530f07b37ec61faac0eb5ee9bce312a4f056fc70', class: "combobox-arrow" }, h("svg", { key: 'fd6ee2352adb93ee4fed752caba5552c7a20d5bf', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '4aa7fe6c1aa02681a3fc634124227a1b7263df29', d: "M4 6l4 4 4-4" }))))), this.name && h("input", { key: '388a14c0b95a7a8b5897e684a41c1adbbcd10e46', type: "hidden", name: this.name, value: this.value?.toString() ?? '' })));
-    }
-    static get is() { return "le-combobox"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["le-combobox.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["le-combobox.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "options": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "LeOption[] | string",
-                    "resolved": "LeOption[] | string",
-                    "references": {
-                        "LeOption": {
-                            "location": "import",
-                            "path": "../../types/options",
-                            "id": "src/types/options.ts::LeOption"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The options to display in the dropdown."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "options",
-                "defaultValue": "[]"
-            },
-            "value": {
-                "type": "any",
-                "mutable": true,
-                "complexType": {
-                    "original": "LeOptionValue",
-                    "resolved": "number | string",
-                    "references": {
-                        "LeOptionValue": {
-                            "location": "import",
-                            "path": "../../types/options",
-                            "id": "src/types/options.ts::LeOptionValue"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The currently selected value."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "value"
-            },
-            "placeholder": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Placeholder text for the input."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "placeholder",
-                "defaultValue": "'Type to search...'"
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the combobox is disabled."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "disabled",
-                "defaultValue": "false"
-            },
-            "required": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether selection is required."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "required",
-                "defaultValue": "false"
-            },
-            "name": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Name attribute for form submission."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "name"
-            },
-            "fullWidth": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the multiselect should take full width of its container."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "full-width",
-                "defaultValue": "false"
-            },
-            "size": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'small' | 'medium' | 'large'",
-                    "resolved": "\"large\" | \"medium\" | \"small\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Size variant of the combobox."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "size",
-                "defaultValue": "'medium'"
-            },
-            "allowCustom": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether to allow custom values not in the options list."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "allow-custom",
-                "defaultValue": "false"
-            },
-            "minSearchLength": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Minimum characters before showing filtered results."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "min-search-length",
-                "defaultValue": "0"
-            },
-            "emptyText": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Text to show when no options match the search."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "empty-text",
-                "defaultValue": "'No results found'"
-            },
-            "open": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the dropdown is currently open."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "open",
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "inputValue": {},
-            "selectedOption": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "leChange",
-                "name": "leChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the selected value changes."
-                },
-                "complexType": {
-                    "original": "LeOptionSelectDetail",
-                    "resolved": "LeOptionSelectDetail",
-                    "references": {
-                        "LeOptionSelectDetail": {
-                            "location": "import",
-                            "path": "../../types/options",
-                            "id": "src/types/options.ts::LeOptionSelectDetail"
-                        }
-                    }
-                }
-            }, {
-                "method": "leInput",
-                "name": "leInput",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the input value changes (for custom values)."
-                },
-                "complexType": {
-                    "original": "{ value: string }",
-                    "resolved": "{ value: string; }",
-                    "references": {}
-                }
-            }, {
-                "method": "leOpen",
-                "name": "leOpen",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the dropdown opens."
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "leClose",
-                "name": "leClose",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the dropdown closes."
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "showDropdown": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Opens the dropdown.",
-                    "tags": []
-                }
-            },
-            "hideDropdown": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Closes the dropdown.",
-                    "tags": []
-                }
-            },
-            "focusInput": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Focuses the input element.",
-                    "tags": []
-                }
-            }
-        };
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "value",
-                "methodName": "handleValueChange"
-            }, {
-                "propName": "options",
-                "methodName": "handleOptionsChange"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "click",
-                "method": "handleWindowClick",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }];
-    }
-}
-//# sourceMappingURL=le-combobox.js.map

package/dist/collection/components/le-combobox/le-combobox.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"le-combobox.js","sourceRoot":"","sources":["../../../src/components/le-combobox/le-combobox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Method,\n  Element,\n  Watch,\n  h,\n  Listen,\n} from '@stencil/core';\nimport { LeOption, LeOptionValue, LeOptionSelectDetail } from '../../types/options';\n\n/**\n * A combobox component with searchable dropdown.\n *\n * Combines a text input with a dropdown list, allowing users to\n * filter options by typing or select from the list.\n *\n * @cmsEditable true\n * @cmsCategory Form\n *\n * @example Basic combobox\n * ```html\n * <le-combobox\n *   placeholder=\"Search...\"\n *   options='[{\"label\": \"Apple\"}, {\"label\": \"Banana\"}, {\"label\": \"Cherry\"}]'\n * ></le-combobox>\n * ```\n *\n * @example Allow custom values\n * ```html\n * <le-combobox\n *   placeholder=\"Type or select...\"\n *   allow-custom\n *   options='[{\"label\": \"Red\"}, {\"label\": \"Green\"}, {\"label\": \"Blue\"}]'\n * ></le-combobox>\n * ```\n */\n@Component({\n  tag: 'le-combobox',\n  styleUrl: 'le-combobox.css',\n  shadow: true,\n})\nexport class LeCombobox {\n  @Element() el: HTMLElement;\n\n  /**\n   * The options to display in the dropdown.\n   */\n  @Prop() options: LeOption[] | string = [];\n\n  /**\n   * The currently selected value.\n   */\n  @Prop({ mutable: true }) value?: LeOptionValue;\n\n  /**\n   * Placeholder text for the input.\n   */\n  @Prop() placeholder: string = 'Type to search...';\n\n  /**\n   * Whether the combobox is disabled.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Whether selection is required.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Name attribute for form submission.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Whether the multiselect should take full width of its container.\n   */\n  @Prop({ reflect: true }) fullWidth: boolean = false;\n\n  /**\n   * Size variant of the combobox.\n   */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Whether to allow custom values not in the options list.\n   */\n  @Prop() allowCustom: boolean = false;\n\n  /**\n   * Minimum characters before showing filtered results.\n   */\n  @Prop() minSearchLength: number = 0;\n\n  /**\n   * Text to show when no options match the search.\n   */\n  @Prop() emptyText: string = 'No results found';\n\n  /**\n   * Whether the dropdown is currently open.\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * Emitted when the selected value changes.\n   */\n  @Event() leChange: EventEmitter<LeOptionSelectDetail>;\n\n  /**\n   * Emitted when the input value changes (for custom values).\n   */\n  @Event() leInput: EventEmitter<{ value: string }>;\n\n  /**\n   * Emitted when the dropdown opens.\n   */\n  @Event() leOpen: EventEmitter<void>;\n\n  /**\n   * Emitted when the dropdown closes.\n   */\n  @Event() leClose: EventEmitter<void>;\n\n  @Listen('click', { target: 'window' })\n  handleWindowClick(event: MouseEvent) {\n    if (!this.el.contains(event.target as Node)) {\n      this.dropdownEl?.hide();\n    }\n  }\n\n  @State() private inputValue: string = '';\n  @State() private selectedOption?: LeOption;\n\n  private dropdownEl?: HTMLLeDropdownBaseElement;\n  private inputEl?: HTMLInputElement;\n\n  @Watch('value')\n  handleValueChange() {\n    this.updateSelectedOption();\n  }\n\n  @Watch('options')\n  handleOptionsChange() {\n    this.updateSelectedOption();\n  }\n\n  componentWillLoad() {\n    this.updateSelectedOption();\n  }\n\n  private get parsedOptions(): LeOption[] {\n    if (typeof this.options === 'string') {\n      try {\n        return JSON.parse(this.options);\n      } catch {\n        return [];\n      }\n    }\n    return this.options;\n  }\n\n  private updateSelectedOption() {\n    if (this.value !== undefined) {\n      this.selectedOption = this.parsedOptions.find(opt => (opt.value ?? opt.label) === this.value);\n      if (this.selectedOption) {\n        this.inputValue = this.selectedOption.label;\n      } else if (this.allowCustom) {\n        this.inputValue = this.value.toString();\n      }\n    } else {\n      this.selectedOption = undefined;\n      this.inputValue = '';\n    }\n  }\n\n  private filterOption = (option: LeOption, query: string): boolean => {\n    if (!query || query.length < this.minSearchLength) return true;\n    const searchLower = query.toLowerCase();\n    return (\n      option.label.toLowerCase().includes(searchLower) ||\n      (option.description?.toLowerCase().includes(searchLower) ?? false)\n    );\n  };\n\n  private handleOptionSelect = (e: CustomEvent<LeOptionSelectDetail>) => {\n    this.value = e.detail.value;\n    this.selectedOption = e.detail.option;\n    this.inputValue = e.detail.option.label;\n    this.leChange.emit(e.detail);\n  };\n\n  private handleDropdownOpen = () => {\n    this.open = true;\n    this.leOpen.emit();\n  };\n\n  private handleDropdownClose = () => {\n    this.open = false;\n    this.leClose.emit();\n\n    // If custom values not allowed, reset input to selected option\n    if (!this.allowCustom && this.selectedOption) {\n      this.inputValue = this.selectedOption.label;\n    } else if (!this.allowCustom && !this.selectedOption) {\n      this.inputValue = '';\n    }\n  };\n\n  private handleInputChange = (e: Event) => {\n    const target = e.target as HTMLInputElement;\n    this.inputValue = target.value;\n\n    // Emit input event for custom values\n    if (this.allowCustom) {\n      this.leInput.emit({ value: this.inputValue });\n    }\n\n    // Open dropdown when typing\n    if (!this.open && this.inputValue.length >= this.minSearchLength) {\n      this.dropdownEl?.show();\n    }\n  };\n\n  private handleInputFocus = () => {\n    if (!this.disabled) {\n      this.dropdownEl?.show();\n    }\n  };\n\n  private handleInputKeyDown = (e: KeyboardEvent) => {\n    if (this.disabled) return;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault();\n        if (!this.open) {\n          this.dropdownEl?.show();\n        }\n        break;\n\n      case 'Enter':\n        if (this.allowCustom && this.inputValue && !this.open) {\n          // Accept custom value\n          this.value = this.inputValue;\n          this.leChange.emit({\n            value: this.inputValue,\n            option: { label: this.inputValue, value: this.inputValue },\n          });\n        }\n        break;\n\n      case 'Escape':\n        if (this.open) {\n          this.dropdownEl?.hide();\n        }\n        break;\n    }\n  };\n\n  private handleClear = (e: MouseEvent) => {\n    e.stopPropagation();\n    this.value = undefined;\n    this.selectedOption = undefined;\n    this.inputValue = '';\n    this.inputEl?.focus();\n    this.leChange.emit({\n      value: '',\n      option: { label: '', value: '' },\n    });\n  };\n\n  /**\n   * Opens the dropdown.\n   */\n  @Method()\n  async showDropdown() {\n    await this.dropdownEl?.show();\n  }\n\n  /**\n   * Closes the dropdown.\n   */\n  @Method()\n  async hideDropdown() {\n    await this.dropdownEl?.hide();\n  }\n\n  /**\n   * Focuses the input element.\n   */\n  @Method()\n  async focusInput() {\n    this.inputEl?.focus();\n  }\n\n  render() {\n    const hasValue = this.inputValue.length > 0;\n\n    return (\n      <le-component component=\"le-combobox\">\n        <le-dropdown-base\n          ref={el => (this.dropdownEl = el)}\n          options={this.parsedOptions}\n          value={this.value}\n          disabled={this.disabled}\n          filterFn={this.filterOption}\n          filterQuery={this.inputValue}\n          emptyText={this.emptyText}\n          fullWidth={this.fullWidth}\n          closeOnClickOutside={false}\n          onLeOptionSelect={this.handleOptionSelect}\n          onLeDropdownOpen={this.handleDropdownOpen}\n          onLeDropdownClose={this.handleDropdownClose}\n        >\n          <div slot=\"trigger\" class={{ 'combobox-trigger': true, 'is-open': this.open }}>\n            <le-string-input\n              mode=\"default\"\n              hideDescription={true}\n              inputRef={el => (this.inputEl = el)}\n              type=\"text\"\n              class=\"combobox-input\"\n              value={this.inputValue}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              aria-haspopup=\"listbox\"\n              aria-expanded={this.open ? 'true' : 'false'}\n              aria-autocomplete=\"list\"\n              onInput={this.handleInputChange}\n              onFocus={this.handleInputFocus}\n              onKeyDown={this.handleInputKeyDown}\n            />\n            {hasValue && !this.disabled && (\n              <button\n                type=\"button\"\n                class=\"combobox-clear\"\n                onClick={this.handleClear}\n                aria-label=\"Clear\"\n                tabIndex={-1}\n              >\n                <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                  <path d=\"M4 4l8 8M12 4l-8 8\" />\n                </svg>\n              </button>\n            )}\n            <span class=\"combobox-arrow\">\n              <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M4 6l4 4 4-4\" />\n              </svg>\n            </span>\n          </div>\n        </le-dropdown-base>\n\n        {/* Hidden input for form submission */}\n        {this.name && <input type=\"hidden\" name={this.name} value={this.value?.toString() ?? ''} />}\n      </le-component>\n    );\n  }\n}\n"]}