le-kit 0.1.13 → 0.1.15

package/dist/cjs/le-combobox.cjs.entry.js

@@ -0,0 +1,237 @@
+'use strict';
+
+var index = require('./index-C3iQZ-Ja.js');
+
+const leComboboxCss = ":host{display:inline-block;min-width:200px;--le-combobox-border-color:var(--le-color-primary, #3b82f6)}:host([disabled]){opacity:0.5;pointer-events:none}:host([full-width]){width:100%}.combobox-trigger{display:flex;align-items:center;width:100%;background:var(--le-combobox-bg, var(--le-color-surface, #fff));border:1px solid color-mix(in srgb, var(--le-combobox-border-color) 33%, transparent);border-radius:var(--le-combobox-border-radius, 0.375rem);transition:border-color 0.15s ease, box-shadow 0.15s ease}.combobox-trigger:hover:not(.is-disabled),:host(:focus-within) .combobox-trigger:not(.is-disabled){border-color:var(--le-combobox-border-color)}.combobox-trigger:focus-within{outline:2px solid var(--le-color-focus);outline-offset:2px}.combobox-trigger.is-open{border-color:var(--le-color-primary, #3b82f6)}.combobox-input{flex:1;border:none;outline:none}.combobox-input::part(container){border:none}.combobox-input::part(container):focus-within{outline:none !important}.combobox-input::placeholder{color:color-mix(in srgb, var(--le-color-text-secondary) 66%, transparent)}.combobox-trigger.is-disabled{cursor:not-allowed;background:var(--le-color-surface-disabled, #f9fafb)}.combobox-input:disabled{cursor:not-allowed}.combobox-clear{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;margin-right:0.25rem;color:var(--le-color-primary, #3b82f6);background:transparent;border:none;border-radius:0.25rem;cursor:pointer;opacity:0.6;transition:opacity 0.15s ease, background-color 0.15s ease}.combobox-clear:hover{opacity:1;background:var(--le-color-surface-hover, #f3f4f6)}.combobox-clear svg{width:0.875rem;height:0.875rem}.combobox-arrow{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:2rem;height:100%;color:var(--le-color-primary, #3b82f6);transition:transform 0.2s ease}.combobox-arrow svg{width:1rem;height:1rem}.combobox-trigger.is-open .combobox-arrow{transform:rotate(180deg)}:host([size='small']) .combobox-trigger{--le-combobox-height:2rem}:host([size='small']) .combobox-input{--le-combobox-padding-x:0.5rem;--le-combobox-font-size:0.75rem}:host([size='large']) .combobox-trigger{--le-combobox-height:3rem}:host([size='large']) .combobox-input{--le-combobox-padding-x:1rem;--le-combobox-font-size:1rem}";
+
+const LeCombobox = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.leChange = index.createEvent(this, "leChange");
+        this.leInput = index.createEvent(this, "leInput");
+        this.leOpen = index.createEvent(this, "leOpen");
+        this.leClose = index.createEvent(this, "leClose");
+    }
+    get el() { return index.getElement(this); }
+    /**
+     * The options to display in the dropdown.
+     */
+    options = [];
+    /**
+     * The currently selected value.
+     */
+    value;
+    /**
+     * Placeholder text for the input.
+     */
+    placeholder = 'Type to search...';
+    /**
+     * Whether the combobox is disabled.
+     */
+    disabled = false;
+    /**
+     * Whether selection is required.
+     */
+    required = false;
+    /**
+     * Name attribute for form submission.
+     */
+    name;
+    /**
+     * Whether the multiselect should take full width of its container.
+     */
+    fullWidth = false;
+    /**
+     * Size variant of the combobox.
+     */
+    size = 'medium';
+    /**
+     * Whether to allow custom values not in the options list.
+     */
+    allowCustom = false;
+    /**
+     * Minimum characters before showing filtered results.
+     */
+    minSearchLength = 0;
+    /**
+     * Text to show when no options match the search.
+     */
+    emptyText = 'No results found';
+    /**
+     * Whether the dropdown is currently open.
+     */
+    open = false;
+    /**
+     * Emitted when the selected value changes.
+     */
+    leChange;
+    /**
+     * Emitted when the input value changes (for custom values).
+     */
+    leInput;
+    /**
+     * Emitted when the dropdown opens.
+     */
+    leOpen;
+    /**
+     * Emitted when the dropdown closes.
+     */
+    leClose;
+    handleWindowClick(event) {
+        if (!this.el.contains(event.target)) {
+            this.dropdownEl?.hide();
+        }
+    }
+    inputValue = '';
+    selectedOption;
+    dropdownEl;
+    inputEl;
+    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 = '';
+        }
+    }
+    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));
+    };
+    handleOptionSelect = (e) => {
+        this.value = e.detail.value;
+        this.selectedOption = e.detail.option;
+        this.inputValue = e.detail.option.label;
+        this.leChange.emit(e.detail);
+    };
+    handleDropdownOpen = () => {
+        this.open = true;
+        this.leOpen.emit();
+    };
+    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 = '';
+        }
+    };
+    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();
+        }
+    };
+    handleInputFocus = () => {
+        if (!this.disabled) {
+            this.dropdownEl?.show();
+        }
+    };
+    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;
+        }
+    };
+    handleClear = (e) => {
+        e.stopPropagation();
+        this.value = undefined;
+        this.selectedOption = undefined;
+        this.inputValue = '';
+        this.inputEl?.focus();
+        this.leChange.emit({
+            value: '',
+            option: { label: '', value: '' },
+        });
+    };
+    /**
+     * 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 (index.h("le-component", { key: '387d52e3054515ecb8b46116deae909fcdb75969', component: "le-combobox" }, index.h("le-dropdown-base", { key: '822f479f2a831a7e817a38318c021bf2f52b3ed7', 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 }, index.h("div", { key: '7c57078e2ee0dd371d44f4fafdb8cf5e5914dfee', slot: "trigger", class: { 'combobox-trigger': true, 'is-open': this.open } }, index.h("le-string-input", { key: 'fbdc0d1c4d82a4fb6021a51a3b48752be37ade2c', 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 && (index.h("button", { key: 'a17932b0f41065d5550c343851664bc3967a8341', type: "button", class: "combobox-clear", onClick: this.handleClear, "aria-label": "Clear", tabIndex: -1 }, index.h("svg", { key: '8ed3c6c92c76152f0898f4f87e69efffacee7aad', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("path", { key: '985476db5f5f36562069513ffd4d873fb83c1f71', d: "M4 4l8 8M12 4l-8 8" })))), index.h("span", { key: '72663ad4b72f476e35a1024e66f495a343c22006', class: "combobox-arrow" }, index.h("svg", { key: '7a5ae4711763398b9196bd5ab86043de8579debf', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("path", { key: '9722bd7f24ede8f9c3ee16e0e3ce19234ef38a26', d: "M4 6l4 4 4-4" }))))), this.name && index.h("input", { key: '5df357f53be8683145e4fbc3e5434807505fd98f', type: "hidden", name: this.name, value: this.value?.toString() ?? '' })));
+    }
+    static get watchers() { return {
+        "value": ["handleValueChange"],
+        "options": ["handleOptionsChange"]
+    }; }
+};
+LeCombobox.style = leComboboxCss;
+
+exports.le_combobox = LeCombobox;
+//# sourceMappingURL=le-combobox.entry.cjs.js.map

package/dist/cjs/le-combobox.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"le-combobox.entry.cjs.js","sources":["src/components/le-combobox/le-combobox.css?tag=le-combobox&encapsulation=shadow","src/components/le-combobox/le-combobox.tsx"],"sourcesContent":["/**\n * le-combobox component styles\n *\n * CSS Custom Properties:\n * --le-combobox-padding-x\n * --le-combobox-font-size\n * --le-combobox-border-radius\n * --le-combobox-border-color\n * --le-combobox-bg\n * --le-combobox-color\n */\n\n:host {\n  display: inline-block;\n  min-width: 200px;\n  --le-combobox-border-color: var(--le-color-primary, #3b82f6);\n}\n\n:host([disabled]) {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n:host([full-width]) {\n  width: 100%;\n}\n\n/* Trigger wrapper */\n.combobox-trigger {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  background: var(--le-combobox-bg, var(--le-color-surface, #fff));\n  border: 1px solid color-mix(in srgb, var(--le-combobox-border-color) 33%, transparent);\n  border-radius: var(--le-combobox-border-radius, 0.375rem);\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n\n.combobox-trigger:hover:not(.is-disabled),\n:host(:focus-within) .combobox-trigger:not(.is-disabled) {\n  border-color: var(--le-combobox-border-color);\n}\n\n.combobox-trigger:focus-within {\n  outline: 2px solid var(--le-color-focus);\n  outline-offset: 2px;\n}\n\n.combobox-trigger.is-open {\n  border-color: var(--le-color-primary, #3b82f6);\n}\n\n/* Input */\n.combobox-input {\n  flex: 1;\n  border: none;\n  outline: none;\n}\n.combobox-input::part(container) {\n  border: none;\n}\n.combobox-input::part(container):focus-within {\n  outline: none !important;\n}\n\n.combobox-input::placeholder {\n  color: color-mix(in srgb, var(--le-color-text-secondary) 66%, transparent);\n}\n\n.combobox-trigger.is-disabled {\n  cursor: not-allowed;\n  background: var(--le-color-surface-disabled, #f9fafb);\n}\n.combobox-input:disabled {\n  cursor: not-allowed;\n}\n\n/* Clear button */\n.combobox-clear {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1.5rem;\n  padding: 0;\n  margin-right: 0.25rem;\n  color: var(--le-color-primary, #3b82f6);\n  background: transparent;\n  border: none;\n  border-radius: 0.25rem;\n  cursor: pointer;\n  opacity: 0.6;\n  transition: opacity 0.15s ease, background-color 0.15s ease;\n}\n\n.combobox-clear:hover {\n  opacity: 1;\n  background: var(--le-color-surface-hover, #f3f4f6);\n}\n\n.combobox-clear svg {\n  width: 0.875rem;\n  height: 0.875rem;\n}\n\n/* Arrow icon */\n.combobox-arrow {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 2rem;\n  height: 100%;\n  color: var(--le-color-primary, #3b82f6);\n  transition: transform 0.2s ease;\n}\n\n.combobox-arrow svg {\n  width: 1rem;\n  height: 1rem;\n}\n\n.combobox-trigger.is-open .combobox-arrow {\n  transform: rotate(180deg);\n}\n\n/* Size variants */\n:host([size='small']) .combobox-trigger {\n  --le-combobox-height: 2rem;\n}\n\n:host([size='small']) .combobox-input {\n  --le-combobox-padding-x: 0.5rem;\n  --le-combobox-font-size: 0.75rem;\n}\n\n:host([size='large']) .combobox-trigger {\n  --le-combobox-height: 3rem;\n}\n\n:host([size='large']) .combobox-input {\n  --le-combobox-padding-x: 1rem;\n  --le-combobox-font-size: 1rem;\n}\n","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"],"names":["h"],"mappings":";;;;AAAA,MAAM,aAAa,GAAG,mvEAAmvE;;MC6C5vE,UAAU,GAAA,MAAA;;;;;;;;;AAGrB;;AAEG;IACK,OAAO,GAAwB,EAAE;AAEzC;;AAEG;AACsB,IAAA,KAAK;AAE9B;;AAEG;IACK,WAAW,GAAW,mBAAmB;AAEjD;;AAEG;IACsB,QAAQ,GAAY,KAAK;AAElD;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACK,IAAA,IAAI;AAEZ;;AAEG;IACsB,SAAS,GAAY,KAAK;AAEnD;;AAEG;IACsB,IAAI,GAAiC,QAAQ;AAEtE;;AAEG;IACK,WAAW,GAAY,KAAK;AAEpC;;AAEG;IACK,eAAe,GAAW,CAAC;AAEnC;;AAEG;IACK,SAAS,GAAW,kBAAkB;AAE9C;;AAEG;IACqC,IAAI,GAAY,KAAK;AAE7D;;AAEG;AACM,IAAA,QAAQ;AAEjB;;AAEG;AACM,IAAA,OAAO;AAEhB;;AAEG;AACM,IAAA,MAAM;AAEf;;AAEG;AACM,IAAA,OAAO;AAGhB,IAAA,iBAAiB,CAAC,KAAiB,EAAA;AACjC,QAAA,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;AAC3C,YAAA,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE;;;IAIV,UAAU,GAAW,EAAE;AACvB,IAAA,cAAc;AAEvB,IAAA,UAAU;AACV,IAAA,OAAO;IAGf,iBAAiB,GAAA;QACf,IAAI,CAAC,oBAAoB,EAAE;;IAI7B,mBAAmB,GAAA;QACjB,IAAI,CAAC,oBAAoB,EAAE;;IAG7B,iBAAiB,GAAA;QACf,IAAI,CAAC,oBAAoB,EAAE;;AAG7B,IAAA,IAAY,aAAa,GAAA;AACvB,QAAA,IAAI,OAAO,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE;AACpC,YAAA,IAAI;gBACF,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC;;AAC/B,YAAA,MAAM;AACN,gBAAA,OAAO,EAAE;;;QAGb,OAAO,IAAI,CAAC,OAAO;;IAGb,oBAAoB,GAAA;AAC1B,QAAA,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;YAC5B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,IAAI,GAAG,CAAC,KAAK,MAAM,IAAI,CAAC,KAAK,CAAC;AAC7F,YAAA,IAAI,IAAI,CAAC,cAAc,EAAE;gBACvB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK;;AACtC,iBAAA,IAAI,IAAI,CAAC,WAAW,EAAE;gBAC3B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;;;aAEpC;AACL,YAAA,IAAI,CAAC,cAAc,GAAG,SAAS;AAC/B,YAAA,IAAI,CAAC,UAAU,GAAG,EAAE;;;AAIhB,IAAA,YAAY,GAAG,CAAC,MAAgB,EAAE,KAAa,KAAa;QAClE,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,eAAe;AAAE,YAAA,OAAO,IAAI;AAC9D,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,EAAE;QACvC,QACE,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC;AAChD,aAAC,MAAM,CAAC,WAAW,EAAE,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,KAAK,CAAC;AAEtE,KAAC;AAEO,IAAA,kBAAkB,GAAG,CAAC,CAAoC,KAAI;QACpE,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK;QAC3B,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,MAAM,CAAC,MAAM;QACrC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK;QACvC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;AAC9B,KAAC;IAEO,kBAAkB,GAAG,MAAK;AAChC,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI;AAChB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;AACpB,KAAC;IAEO,mBAAmB,GAAG,MAAK;AACjC,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK;AACjB,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;;QAGnB,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,cAAc,EAAE;YAC5C,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK;;aACtC,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;AACpD,YAAA,IAAI,CAAC,UAAU,GAAG,EAAE;;AAExB,KAAC;AAEO,IAAA,iBAAiB,GAAG,CAAC,CAAQ,KAAI;AACvC,QAAA,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B;AAC3C,QAAA,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,KAAK;;AAG9B,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE;AACpB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC;;;AAI/C,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,IAAI,IAAI,CAAC,eAAe,EAAE;AAChE,YAAA,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE;;AAE3B,KAAC;IAEO,gBAAgB,GAAG,MAAK;AAC9B,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAClB,YAAA,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE;;AAE3B,KAAC;AAEO,IAAA,kBAAkB,GAAG,CAAC,CAAgB,KAAI;QAChD,IAAI,IAAI,CAAC,QAAQ;YAAE;AAEnB,QAAA,QAAQ,CAAC,CAAC,GAAG;AACX,YAAA,KAAK,WAAW;gBACd,CAAC,CAAC,cAAc,EAAE;AAClB,gBAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;AACd,oBAAA,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE;;gBAEzB;AAEF,YAAA,KAAK,OAAO;AACV,gBAAA,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;;AAErD,oBAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,UAAU;AAC5B,oBAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;wBACjB,KAAK,EAAE,IAAI,CAAC,UAAU;AACtB,wBAAA,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;AAC3D,qBAAA,CAAC;;gBAEJ;AAEF,YAAA,KAAK,QAAQ;AACX,gBAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACb,oBAAA,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE;;gBAEzB;;AAEN,KAAC;AAEO,IAAA,WAAW,GAAG,CAAC,CAAa,KAAI;QACtC,CAAC,CAAC,eAAe,EAAE;AACnB,QAAA,IAAI,CAAC,KAAK,GAAG,SAAS;AACtB,QAAA,IAAI,CAAC,cAAc,GAAG,SAAS;AAC/B,QAAA,IAAI,CAAC,UAAU,GAAG,EAAE;AACpB,QAAA,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE;AACrB,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;AACjB,YAAA,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;AACjC,SAAA,CAAC;AACJ,KAAC;AAED;;AAEG;AAEH,IAAA,MAAM,YAAY,GAAA;AAChB,QAAA,MAAM,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE;;AAG/B;;AAEG;AAEH,IAAA,MAAM,YAAY,GAAA;AAChB,QAAA,MAAM,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE;;AAG/B;;AAEG;AAEH,IAAA,MAAM,UAAU,GAAA;AACd,QAAA,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE;;IAGvB,MAAM,GAAA;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC;QAE3C,QACEA,OAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,SAAS,EAAC,aAAa,EAAA,EACnCA,OAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,EACjC,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,WAAW,EAAE,IAAI,CAAC,UAAU,EAC5B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,mBAAmB,EAAE,KAAK,EAC1B,gBAAgB,EAAE,IAAI,CAAC,kBAAkB,EACzC,gBAAgB,EAAE,IAAI,CAAC,kBAAkB,EACzC,iBAAiB,EAAE,IAAI,CAAC,mBAAmB,EAAA,EAE3CA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,IAAI,EAAE,EAAA,EAC3EA,OAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,SAAS,EACd,eAAe,EAAE,IAAI,EACrB,QAAQ,EAAE,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EACnC,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,gBAAgB,EACtB,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,mBACT,SAAS,EAAA,eAAA,EACR,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,EACzB,mBAAA,EAAA,MAAM,EACxB,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAC/B,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAClC,CAAA,EACD,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,KACzBA,OACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,IAAI,CAAC,WAAW,EACd,YAAA,EAAA,OAAO,EAClB,QAAQ,EAAE,EAAE,EAAA,EAEZA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,GAAG,EAAA,EACzEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,oBAAoB,EAAG,CAAA,CAC3B,CACC,CACV,EACDA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EAC1BA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,GAAG,EAAA,EACzEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,cAAc,GAAG,CACrB,CACD,CACH,CACW,EAGlB,IAAI,CAAC,IAAI,IAAIA,OAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAA,CAAI,CAC9E;;;;;;;;;;;"}

package/dist/cjs/le-dropdown-base.cjs.entry.js

@@ -0,0 +1,348 @@
+'use strict';
+
+var index = require('./index-C3iQZ-Ja.js');
+var utils = require('./utils-DjPcLPN9.js');
+
+const leDropdownBaseCss = ":host{display:block;--le-dropdown-list-padding:var(--le-spacing-1);--le-dropdown-empty-padding:var(--le-spacing-4);--le-dropdown-option-radius:var(--le-radius-md);--le-dropdown-font-size:var(--le-font-size-sm);--le-dropdown-option-padding:var(--le-spacing-1) var(--le-spacing-2);--le-dropdown-group-padding:var(--le-spacing-2) var(--le-spacing-2) var(--le-spacing-1);--le-dropdown-group-font-size:var(--le-font-size-xs)}:host([disabled]){pointer-events:none;opacity:0.5}le-popover::part(content){overflow-y:auto;overflow-x:hidden;padding:var(--le-dropdown-list-padding, 0.25rem)}.dropdown-empty{padding:var(--le-dropdown-empty-padding);text-align:center;color:var(--le-color-text-secondary, #9ca3af);font-size:var(--le-dropdown-font-size)}.dropdown-group-header{padding:var(--le-dropdown-group-padding);font-size:var(--le-dropdown-group-font-size);font-weight:700;color:var(--le-color-text-secondary, #9ca3af);letter-spacing:0.05em}.dropdown-separator{height:1px;margin:var(--le-dropdown-separator-margin, 0.25rem 0);background:var(--le-color-border, #e5e7eb)}.dropdown-option{display:flex;align-items:center;gap:var(--le-dropdown-option-gap, 0.5rem);padding:var(--le-dropdown-option-padding);font-size:var(--le-dropdown-font-size, 0.875rem);line-height:1.4;color:var(--le-color-text, #1f2937);border:1px solid transparent;border-radius:var(--le-dropdown-option-radius, 0.25rem);cursor:pointer;user-select:none;transition:background-color 0.1s ease}.dropdown-option:hover,.dropdown-option.is-focused{border-color:var(--le-color-border-hover, #d1d5db)}.dropdown-option.is-disabled{opacity:0.5;cursor:not-allowed}.dropdown-option.is-disabled:hover{background:transparent}.option-checkbox{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;border:2px solid var(--le-color-border, #d1d5db);border-radius:0.25rem;background:var(--le-color-surface, #fff);flex-shrink:0}.is-selected .option-checkbox{background:var(--le-color-primary, #3b82f6);border-color:var(--le-color-primary, #3b82f6);color:white}.option-checkbox svg{width:0.75rem;height:0.75rem}.option-icon-start,.option-icon-end{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem}.option-icon-start img,.option-icon-end img{width:100%;height:100%;object-fit:contain}.option-content{flex:1;min-width:0;display:flex;flex-direction:column}.option-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.option-description{font-size:0.75rem;color:var(--le-color-text-muted, #6b7280);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.option-check{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;color:var(--le-color-primary, #3b82f6);flex-shrink:0}.option-check svg{width:1rem;height:1rem}";
+
+const LeDropdownBase = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.leOptionSelect = index.createEvent(this, "leOptionSelect");
+        this.leDropdownOpen = index.createEvent(this, "leDropdownOpen");
+        this.leDropdownClose = index.createEvent(this, "leDropdownClose");
+    }
+    get el() { return index.getElement(this); }
+    /**
+     * The options to display in the dropdown.
+     */
+    options = [];
+    /**
+     * Current value(s) - single value or array for multiselect.
+     */
+    value;
+    /**
+     * Whether multiple selection is allowed.
+     */
+    multiple = false;
+    /**
+     * Whether the dropdown is open.
+     */
+    open = false;
+    /**
+     * Whether the dropdown is disabled.
+     */
+    disabled = false;
+    /**
+     * Filter function for options.
+     * Return true to include the option.
+     */
+    filterFn;
+    /**
+     * Current filter query string.
+     */
+    filterQuery = '';
+    /**
+     * Placeholder text when no options match filter.
+     */
+    emptyText = 'No options';
+    /**
+     * Whether to show checkboxes for multiselect mode.
+     */
+    showCheckboxes = true;
+    /**
+     * Maximum height of the dropdown list.
+     */
+    maxHeight = '300px';
+    /**
+     * Width of the dropdown. If not set, matches trigger width.
+     */
+    width;
+    /**
+     * Sets the dropdown to full width of the trigger.
+     */
+    fullWidth = false;
+    /**
+     * Whether to close the dropdown when clicking outside.
+     * (used to support combobox with input focus)
+     */
+    closeOnClickOutside = true;
+    /**
+     * Emitted when an option is selected.
+     */
+    leOptionSelect;
+    /**
+     * Emitted when the dropdown opens.
+     */
+    leDropdownOpen;
+    /**
+     * Emitted when the dropdown closes.
+     */
+    leDropdownClose;
+    focusedIndex = -1;
+    filteredOptions = [];
+    popoverEl;
+    listEl;
+    triggerWidth = 0;
+    handleOptionsChange() {
+        this.updateFilteredOptions();
+    }
+    componentWillLoad() {
+        this.updateFilteredOptions();
+    }
+    updateFilteredOptions() {
+        // Remember previously focused option
+        const focusedOption = this.filteredOptions[this.focusedIndex];
+        if (!this.filterQuery || !this.filterFn) {
+            this.filteredOptions = this.options;
+        }
+        else {
+            this.filteredOptions = this.options.filter(opt => this.filterFn(opt, this.filterQuery));
+        }
+        // try to maintain focus on same option if still present
+        if (focusedOption) {
+            const newIndex = this.filteredOptions.indexOf(focusedOption);
+            this.focusedIndex = newIndex >= 0 ? newIndex : this.getInitialFocusIndex();
+        }
+        else {
+            this.focusedIndex = -1;
+        }
+    }
+    getSelectableOptions() {
+        return this.filteredOptions.filter(opt => !opt.disabled);
+    }
+    isSelected(option) {
+        const optValue = option.value ?? option.label;
+        if (this.multiple && Array.isArray(this.value)) {
+            setTimeout(() => {
+                this.popoverEl?.updatePosition();
+            }, 50);
+            return this.value.includes(optValue);
+        }
+        return this.value === optValue;
+    }
+    handleOptionClick(option, e) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (option.disabled)
+            return;
+        this.leOptionSelect.emit({
+            value: option.value ?? option.label,
+            option,
+        });
+        // Close dropdown for single select
+        if (!this.multiple) {
+            this.hide();
+        }
+    }
+    handleKeyDown = (e) => {
+        if (!this.open)
+            return;
+        const optionCount = this.filteredOptions.length;
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                // check for the next non-disabled option and focus
+                let nextIndex = this.focusedIndex < optionCount - 1 ? this.focusedIndex + 1 : 0;
+                while (this.filteredOptions[nextIndex].disabled) {
+                    nextIndex = ++nextIndex < optionCount ? nextIndex : 0;
+                }
+                this.focusedIndex = nextIndex;
+                this.scrollToFocused();
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                // check for the previous non-disabled option and focus
+                let prevIndex = this.focusedIndex > 0 ? this.focusedIndex - 1 : optionCount - 1;
+                while (this.filteredOptions[prevIndex].disabled) {
+                    prevIndex = --prevIndex >= 0 ? prevIndex : optionCount - 1;
+                }
+                this.focusedIndex = prevIndex;
+                this.scrollToFocused();
+                break;
+            case 'Home':
+                e.preventDefault();
+                // check for the first non-disabled option and focus
+                let firstIndex = 0;
+                while (this.filteredOptions[firstIndex].disabled) {
+                    firstIndex++;
+                    if (firstIndex >= optionCount) {
+                        firstIndex = -1;
+                        break;
+                    }
+                }
+                this.focusedIndex = firstIndex;
+                this.scrollToFocused();
+                break;
+            case 'End':
+                e.preventDefault();
+                // check for the last non-disabled option and focus
+                let lastIndex = optionCount - 1;
+                while (this.filteredOptions[lastIndex].disabled) {
+                    lastIndex--;
+                    if (lastIndex < 0) {
+                        lastIndex = -1;
+                        break;
+                    }
+                }
+                this.focusedIndex = lastIndex;
+                this.scrollToFocused();
+                break;
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                if (this.focusedIndex >= 0 && this.focusedIndex < optionCount) {
+                    const option = this.filteredOptions[this.focusedIndex];
+                    if (!option || option.disabled)
+                        return;
+                    this.leOptionSelect.emit({
+                        value: option.value ?? option.label,
+                        option,
+                    });
+                    if (!this.multiple) {
+                        this.hide();
+                    }
+                }
+                break;
+            case 'Escape':
+                e.preventDefault();
+                this.hide();
+                break;
+            case 'Tab':
+                this.hide();
+                break;
+        }
+    };
+    scrollToFocused() {
+        if (!this.listEl || this.focusedIndex < 0)
+            return;
+        const focusedEl = this.listEl.querySelector(`[data-index="${this.focusedIndex}"]`);
+        if (focusedEl) {
+            focusedEl.scrollIntoView({ block: 'nearest' });
+        }
+    }
+    handlePopoverOpen = () => {
+        this.open = true;
+        this.focusedIndex = this.getInitialFocusIndex();
+        this.leDropdownOpen.emit();
+        // Add keyboard listener
+        document.addEventListener('keydown', this.handleKeyDown);
+    };
+    handlePopoverClose = () => {
+        this.open = false;
+        this.focusedIndex = -1;
+        this.leDropdownClose.emit();
+        // Remove keyboard listener
+        document.removeEventListener('keydown', this.handleKeyDown);
+    };
+    getInitialFocusIndex() {
+        // Focus on first selected option, or first option
+        const selectableOptions = this.getSelectableOptions();
+        const selectedIndex = selectableOptions.findIndex(opt => this.isSelected(opt));
+        return selectedIndex >= 0 ? selectedIndex : 0;
+    }
+    /**
+     * Opens the dropdown.
+     */
+    async show() {
+        if (this.disabled)
+            return;
+        // Capture trigger width for matching dropdown width
+        const trigger = this.el.querySelector('[slot="trigger"]');
+        if (trigger) {
+            this.triggerWidth = trigger.offsetWidth;
+        }
+        await this.popoverEl?.show();
+    }
+    /**
+     * Closes the dropdown.
+     */
+    async hide() {
+        await this.popoverEl?.hide();
+    }
+    /**
+     * Toggles the dropdown.
+     */
+    async toggle() {
+        if (this.open) {
+            await this.hide();
+        }
+        else {
+            await this.show();
+        }
+    }
+    renderIcon(icon, className) {
+        if (!icon)
+            return null;
+        if (icon.startsWith('http') || icon.startsWith('/')) {
+            return index.h("img", { class: className, src: icon, alt: "" });
+        }
+        return index.h("span", { class: className }, icon);
+    }
+    renderOption(option, index$1) {
+        const isSelected = this.isSelected(option);
+        const isFocused = index$1 === this.focusedIndex;
+        const optionId = option.id || utils.generateId();
+        return (index.h("div", { class: {
+                'dropdown-option': true,
+                'is-selected': isSelected,
+                'is-focused': isFocused,
+                'is-disabled': !!option.disabled,
+            }, role: "option", id: optionId, "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": option.disabled ? 'true' : undefined, "data-index": index$1, onClick: e => this.handleOptionClick(option, e), onMouseEnter: () => {
+                if (!option.disabled) {
+                    this.focusedIndex = index$1;
+                }
+            } }, this.renderIcon(option.iconStart, 'option-icon-start'), index.h("div", { class: "option-content" }, index.h("span", { class: "option-label" }, option.label), option.description && index.h("span", { class: "option-description" }, option.description)), this.renderIcon(option.iconEnd, 'option-icon-end'), (!this.multiple || this.showCheckboxes) && isSelected && (index.h("span", { class: "option-check" }, index.h("svg", { viewBox: "0 0 16 16", fill: "currentColor" }, index.h("path", { d: "M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z" }))))));
+    }
+    renderOptions() {
+        if (this.filteredOptions.length === 0) {
+            return index.h("div", { class: "dropdown-empty" }, this.emptyText);
+        }
+        // Group options if they have group property
+        const grouped = new Map();
+        const ungrouped = [];
+        this.filteredOptions.forEach(opt => {
+            if (opt.group) {
+                const group = grouped.get(opt.group) || [];
+                group.push(opt);
+                grouped.set(opt.group, group);
+            }
+            else {
+                ungrouped.push(opt);
+            }
+        });
+        // Build flat list with group headers for index tracking
+        let globalIndex = 0;
+        const elements = [];
+        // Render ungrouped options first
+        ungrouped.forEach(opt => {
+            if (opt.separator === 'before') {
+                elements.push(index.h("div", { class: "dropdown-separator", role: "separator" }));
+            }
+            elements.push(this.renderOption(opt, globalIndex++));
+            if (opt.separator === 'after') {
+                elements.push(index.h("div", { class: "dropdown-separator", role: "separator" }));
+            }
+        });
+        // Render grouped options
+        grouped.forEach((options, groupLabel) => {
+            elements.push(index.h("div", { class: "dropdown-group-header", role: "presentation" }, groupLabel));
+            options.forEach(opt => {
+                elements.push(this.renderOption(opt, globalIndex++));
+            });
+        });
+        return elements;
+    }
+    render() {
+        const dropdownWidth = this.width || (this.triggerWidth ? `${this.triggerWidth}px` : undefined);
+        return (index.h(index.Host, { key: 'c074cbfbc9a802ed01935b27baa6d0074d87c2e1' }, index.h("le-popover", { key: 'c5ff7f61f81df0f482e6a809a85f29ac73674de6', ref: el => (this.popoverEl = el), position: "bottom", align: "start", showClose: false, closeOnClickOutside: this.closeOnClickOutside, closeOnEscape: true, offset: 4, width: dropdownWidth, minWidth: "150px", "trigger-full-width": this.fullWidth, onLePopoverOpen: this.handlePopoverOpen, onLePopoverClose: this.handlePopoverClose }, index.h("slot", { key: 'b5ce8dba5357be102e282f10d0041cdd5ee11cb4', name: "trigger", slot: "trigger" }), index.h("slot", { key: '2534ee79fab3b7a1a44c61ab7e977c6f2f2be4d7', name: "header" }), index.h("div", { key: 'fd37d09cca2c96557030df201e095fab7a441fd9', class: "dropdown-list", role: "listbox", "aria-multiselectable": this.multiple ? 'true' : undefined, ref: el => (this.listEl = el), style: { maxHeight: this.maxHeight } }, this.renderOptions()))));
+    }
+    static get watchers() { return {
+        "options": ["handleOptionsChange"],
+        "filterQuery": ["handleOptionsChange"]
+    }; }
+};
+LeDropdownBase.style = leDropdownBaseCss;
+
+exports.le_dropdown_base = LeDropdownBase;
+//# sourceMappingURL=le-dropdown-base.entry.cjs.js.map