le-kit 0.1.13 → 0.1.15

package/dist/components/le-card.js.map

@@ -1 +1 @@
-{"file":"le-card.js","mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,6wCAA6wC;;MCgCzxCA,QAAM,iBAAAC,kBAAA,CAAA,MAAA,MAAA,SAAA,WAAA,CAAA;;;;;;;;;AAGjB;;;AAGG;IACK,OAAO,GAAwC,SAAS;AAEhE;;AAEG;IACK,WAAW,GAAY,KAAK;IAEpC,MAAM,GAAA;QACJ,QACE,qEAAc,SAAS,EAAC,SAAS,EAAC,SAAS,EAAE,UAAU,CAAC,CAAA,QAAA,EAAW,IAAI,CAAC,OAAO,CAAA,CAAE,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,EAAA,EACrH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,EAC3B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,EAAA,EACpC,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,WAAW,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,EAAC,IAAI,EAAA,EACjF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACnB,CACN,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,SAAS,EAAA,EACtC,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,EAAE,EAAC,KAAK,EAAC,SAAS,EAAC,WAAW,EAAC,cAAc,EAAC,IAAI,EAAC,UAAU,EAAC,GAAG,EAAC,GAAG,EAAC,QAAQ,EAAA,IAAA,EAAA,EAC1F,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACL,CACN,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,EAAA,EACpC,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,WAAW,EAAC,0BAA0B,EAAA,oBAAA,EAAoB,mBAAmB,EAAA,EACjH,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACnB,CACN,CACF,CACO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["LeCard","__stencil_proxyCustomElement"],"sources":["src/components/le-card/le-card.default.css?tag=le-card&encapsulation=shadow","src/components/le-card/le-card.tsx"],"sourcesContent":["/**\n * Default mode styles for le-card\n * Uses global design tokens with component-specific overrides\n */\n:host {\n  display: block;\n  \n  /* Component-specific tokens that map to global tokens */\n  --le-card-bg: var(--le-color-surface);\n  --le-card-border-radius: var(--le-radius-lg);\n  --le-card-shadow: var(--le-shadow-md);\n  --le-card-shadow-elevated: var(--le-shadow-lg);\n  --le-card-shadow-hover: var(--le-shadow-xl);\n  --le-card-padding: var(--le-space-md);\n  --le-card-border-color: var(--le-color-border);\n  --le-card-transition: var(--le-transition-normal);\n}\n\n.card {\n  background: var(--le-card-bg);\n  border-radius: var(--le-card-border-radius);\n  overflow: hidden;\n  color: var(--le-color-text);\n  box-shadow: var(--le-card-shadow);\n}\n\n/* Variants - le-component gets the hostClass, so we use :host > le-component */\n:host > le-component.variant-outlined .card {\n  border: 1px solid var(--le-card-border-color);\n  box-shadow: none;\n}\n\n:host > le-component.variant-elevated .card {\n  box-shadow: var(--le-card-shadow-elevated);\n}\n\n/* Interactive state */\n:host > le-component.interactive .card {\n  cursor: pointer;\n  transition: transform var(--le-card-transition), box-shadow var(--le-card-transition);\n}\n\n:host > le-component.interactive .card:hover {\n  transform: translateY(-2px);\n  box-shadow: var(--le-card-shadow-hover);\n}\n\n:host > le-component.interactive .card:focus-visible {\n  outline: 2px solid var(--le-color-border-focus);\n  outline-offset: 2px;\n}\n\n/* Sections */\n.card-header {\n  padding: var(--le-card-padding);\n  padding-bottom: 0;\n}\n\n.card-header:empty {\n  display: none;\n}\n\n.card-content {\n  padding: var(--le-card-padding);\n}\n\n.card-footer {\n  padding: var(--le-card-padding);\n  padding-top: 0;\n}\n\n.card-footer:empty {\n  display: none;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A flexible card component with header, content, and footer slots.\n *\n * The card uses le-slot wrappers for each slot area. In admin mode,\n * le-slot shows placeholders for CMS editing. In default mode,\n * le-slot acts as a transparent passthrough.\n *\n * @slot header - Card header content (title, actions)\n * @slot - Default slot for main card content\n * @slot footer - Card footer content (buttons, links)\n *\n * @cssprop --le-card-bg - Card background color\n * @cssprop --le-card-border-radius - Card border radius\n * @cssprop --le-card-shadow - Card box shadow\n * @cssprop --le-card-padding - Card content padding\n *\n * @csspart card - The main card container\n * @csspart header - The card header section\n * @csspart content - The card content section\n * @csspart footer - The card footer section\n *\n * @cmsEditable true\n * @cmsCategory Layout\n */\n@Component({\n  tag: 'le-card',\n  styleUrl: 'le-card.default.css',\n  shadow: true,\n})\nexport class LeCard {\n  @Element() el: HTMLElement;\n\n  /**\n   * Card variant style\n   * @allowedValues default | outlined | elevated\n   */\n  @Prop() variant: 'default' | 'outlined' | 'elevated' = 'default';\n\n  /**\n   * Whether the card is interactive (clickable)\n   */\n  @Prop() interactive: boolean = false;\n\n  render() {\n    return (\n      <le-component component=\"le-card\" hostClass={classnames(`variant-${this.variant}`, { 'interactive': this.interactive })}>\n        <div class=\"card\" part=\"card\">\n          <div class=\"card-header\" part=\"header\">\n            <le-slot name=\"header\" label=\"Header\" description=\"Card title\" type=\"text\" tag=\"h3\">\n              <slot name=\"header\"></slot>\n            </le-slot>\n          </div>\n\n          <div class=\"card-content\" part=\"content\">\n            <le-slot name=\"\" label=\"Content\" description=\"Card content\" type=\"textarea\" tag=\"p\" required>\n              <slot></slot>\n            </le-slot>\n          </div>\n\n          <div class=\"card-footer\" part=\"footer\">\n            <le-slot name=\"footer\" label=\"Footer\" description=\"Card footer with actions\" allowed-components=\"le-button,le-link\">\n              <slot name=\"footer\"></slot>\n            </le-slot>\n          </div>\n        </div>\n      </le-component>\n    );\n  }\n}\n"],"version":3}
+{"file":"le-card.js","mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,6wCAA6wC;;MCgCzxCA,QAAM,iBAAAC,kBAAA,CAAA,MAAA,MAAA,SAAA,WAAA,CAAA;;;;;;;;;AAGjB;;;AAGG;IACK,OAAO,GAAwC,SAAS;AAEhE;;AAEG;IACK,WAAW,GAAY,KAAK;IAEpC,MAAM,GAAA;QACJ,QACE,qEAAc,SAAS,EAAC,SAAS,EAAC,SAAS,EAAE,UAAU,CAAC,CAAA,QAAA,EAAW,IAAI,CAAC,OAAO,CAAA,CAAE,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,EAAA,EACrH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,EAC3B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,EAAA,EACpC,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,WAAW,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,EAAC,IAAI,EAAA,EACjF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACnB,CACN,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,SAAS,EAAA,EACtC,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,EAAE,EAAC,KAAK,EAAC,SAAS,EAAC,WAAW,EAAC,cAAc,EAAC,IAAI,EAAC,UAAU,EAAC,GAAG,EAAC,GAAG,EAAC,QAAQ,EAAA,IAAA,EAAA,EAC1F,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACL,CACN,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,EAAA,EACpC,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,WAAW,EAAC,0BAA0B,EAAA,oBAAA,EAAoB,mBAAmB,EAAA,EACjH,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACnB,CACN,CACF,CACO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["LeCard","__stencil_proxyCustomElement"],"sources":["src/components/le-card/le-card.default.css?tag=le-card&encapsulation=shadow","src/components/le-card/le-card.tsx"],"sourcesContent":["/**\n * Default mode styles for le-card\n * Uses global design tokens with component-specific overrides\n */\n:host {\n  display: block;\n  \n  /* Component-specific tokens that map to global tokens */\n  --le-card-bg: var(--le-color-surface);\n  --le-card-border-radius: var(--le-radius-lg);\n  --le-card-shadow: var(--le-shadow-md);\n  --le-card-shadow-elevated: var(--le-shadow-lg);\n  --le-card-shadow-hover: var(--le-shadow-xl);\n  --le-card-padding: var(--le-space-md);\n  --le-card-border-color: var(--le-color-border);\n  --le-card-transition: var(--le-transition-normal);\n}\n\n.card {\n  background: var(--le-card-bg);\n  border-radius: var(--le-card-border-radius);\n  overflow: hidden;\n  color: var(--le-color-text);\n  box-shadow: var(--le-card-shadow);\n}\n\n/* Variants - le-component gets the hostClass, so we use :host > le-component */\n:host > le-component.variant-outlined .card {\n  border: 1px solid var(--le-card-border-color);\n  box-shadow: none;\n}\n\n:host > le-component.variant-elevated .card {\n  box-shadow: var(--le-card-shadow-elevated);\n}\n\n/* Interactive state */\n:host > le-component.interactive .card {\n  cursor: pointer;\n  transition: transform var(--le-card-transition), box-shadow var(--le-card-transition);\n}\n\n:host > le-component.interactive .card:hover {\n  transform: translateY(-2px);\n  box-shadow: var(--le-card-shadow-hover);\n}\n\n:host > le-component.interactive .card:focus-visible {\n  outline: 2px solid var(--le-color-border-focus);\n  outline-offset: 2px;\n}\n\n/* Sections */\n.card-header {\n  padding: var(--le-card-padding);\n  padding-bottom: 0;\n}\n\n.card-header:empty {\n  display: none;\n}\n\n.card-content {\n  padding: var(--le-card-padding);\n}\n\n.card-footer {\n  padding: var(--le-card-padding);\n  padding-top: 0;\n}\n\n.card-footer:empty {\n  display: none;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A flexible card component with header, content, and footer slots.\n *\n * The card uses le-slot wrappers for each slot area. In admin mode,\n * le-slot shows placeholders for CMS editing. In default mode,\n * le-slot acts as a transparent passthrough.\n *\n * @slot header - Card header content (title, actions)\n * @slot - Default slot for main card content\n * @slot footer - Card footer content (buttons, links)\n *\n * @cssprop --le-card-bg - Card background color\n * @cssprop --le-card-border-radius - Card border radius\n * @cssprop --le-card-shadow - Card box shadow\n * @cssprop --le-card-padding - Card content padding\n *\n * @csspart card - The main card container\n * @csspart header - The card header section\n * @csspart content - The card content section\n * @csspart footer - The card footer section\n *\n * @cmsEditable true\n * @cmsCategory Layout\n */\n@Component({\n  tag: 'le-card',\n  styleUrl: 'le-card.default.css',\n  shadow: true,\n})\nexport class LeCard {\n  @Element() el: HTMLElement;\n\n  /**\n   * Card variant style\n   * @allowedValues default | outlined | elevated\n   */\n  @Prop() variant: 'default' | 'outlined' | 'elevated' = 'default';\n\n  /**\n   * Whether the card is interactive (clickable)\n   */\n  @Prop() interactive: boolean = false;\n\n  render() {\n    return (\n      <le-component component=\"le-card\" hostClass={classnames(`variant-${this.variant}`, { 'interactive': this.interactive })}>\n        <div class=\"card\" part=\"card\">\n          <div class=\"card-header\" part=\"header\">\n            <le-slot name=\"header\" label=\"Header\" description=\"Card title\" type=\"text\" tag=\"h3\">\n              <slot name=\"header\"></slot>\n            </le-slot>\n          </div>\n\n          <div class=\"card-content\" part=\"content\">\n            <le-slot name=\"\" label=\"Content\" description=\"Card content\" type=\"textarea\" tag=\"p\" required>\n              <slot></slot>\n            </le-slot>\n          </div>\n\n          <div class=\"card-footer\" part=\"footer\">\n            <le-slot name=\"footer\" label=\"Footer\" description=\"Card footer with actions\" allowed-components=\"le-button,le-link\">\n              <slot name=\"footer\"></slot>\n            </le-slot>\n          </div>\n        </div>\n      </le-component>\n    );\n  }\n}\n"],"version":3}

package/dist/components/le-checkbox.js

@@ -1,4 +1,4 @@
-import { f as LeCheckbox$1, c as defineCustomElement$1 } from './le-button2.js';
+import { g as LeCheckbox$1, e as defineCustomElement$1 } from './le-button2.js';
 
 const LeCheckbox = LeCheckbox$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/le-combobox.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface LeCombobox extends Components.LeCombobox, HTMLElement {}
+export const LeCombobox: {
+    prototype: LeCombobox;
+    new (): LeCombobox;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/le-combobox.js

@@ -0,0 +1,321 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2, a as defineCustomElement$3, b as defineCustomElement$4, c as defineCustomElement$7, e as defineCustomElement$8, f as defineCustomElement$9 } from './le-button2.js';
+import { d as defineCustomElement$6 } from './le-dropdown-base2.js';
+import { d as defineCustomElement$5 } from './le-popover2.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$1 = /*@__PURE__*/ proxyCustomElement(class LeCombobox extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.leChange = createEvent(this, "leChange", 7);
+        this.leInput = createEvent(this, "leInput", 7);
+        this.leOpen = createEvent(this, "leOpen", 7);
+        this.leClose = createEvent(this, "leClose", 7);
+    }
+    get el() { return 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 (h("le-component", { key: '387d52e3054515ecb8b46116deae909fcdb75969', component: "le-combobox" }, 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 }, h("div", { key: '7c57078e2ee0dd371d44f4fafdb8cf5e5914dfee', slot: "trigger", class: { 'combobox-trigger': true, 'is-open': this.open } }, 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 && (h("button", { key: 'a17932b0f41065d5550c343851664bc3967a8341', type: "button", class: "combobox-clear", onClick: this.handleClear, "aria-label": "Clear", tabIndex: -1 }, h("svg", { key: '8ed3c6c92c76152f0898f4f87e69efffacee7aad', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '985476db5f5f36562069513ffd4d873fb83c1f71', d: "M4 4l8 8M12 4l-8 8" })))), h("span", { key: '72663ad4b72f476e35a1024e66f495a343c22006', class: "combobox-arrow" }, h("svg", { key: '7a5ae4711763398b9196bd5ab86043de8579debf', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '9722bd7f24ede8f9c3ee16e0e3ce19234ef38a26', d: "M4 6l4 4 4-4" }))))), this.name && h("input", { key: '5df357f53be8683145e4fbc3e5434807505fd98f', type: "hidden", name: this.name, value: this.value?.toString() ?? '' })));
+    }
+    static get watchers() { return {
+        "value": ["handleValueChange"],
+        "options": ["handleOptionsChange"]
+    }; }
+    static get style() { return leComboboxCss; }
+}, [769, "le-combobox", {
+        "options": [1],
+        "value": [1032],
+        "placeholder": [1],
+        "disabled": [516],
+        "required": [4],
+        "name": [1],
+        "fullWidth": [516, "full-width"],
+        "size": [513],
+        "allowCustom": [4, "allow-custom"],
+        "minSearchLength": [2, "min-search-length"],
+        "emptyText": [1, "empty-text"],
+        "open": [1540],
+        "inputValue": [32],
+        "selectedOption": [32],
+        "showDropdown": [64],
+        "hideDropdown": [64],
+        "focusInput": [64]
+    }, [[8, "click", "handleWindowClick"]], {
+        "value": ["handleValueChange"],
+        "options": ["handleOptionsChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["le-combobox", "le-button", "le-checkbox", "le-component", "le-dropdown-base", "le-popover", "le-popup", "le-slot", "le-string-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "le-combobox":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LeCombobox$1);
+            }
+            break;
+        case "le-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "le-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "le-component":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "le-dropdown-base":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "le-popover":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "le-popup":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "le-slot":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "le-string-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const LeCombobox = LeCombobox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LeCombobox, defineCustomElement };
+//# sourceMappingURL=le-combobox.js.map
+
+//# sourceMappingURL=le-combobox.js.map

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

@@ -0,0 +1 @@
+{"file":"le-combobox.js","mappings":"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","names":["LeCombobox","__stencil_proxyCustomElement"],"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"],"version":3}

package/dist/components/le-component.js

@@ -1,4 +1,4 @@
-import { g as LeComponent$1, b as defineCustomElement$1 } from './le-button2.js';
+import { h as LeComponent$1, c as defineCustomElement$1 } from './le-button2.js';
 
 const LeComponent = LeComponent$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/le-dropdown-base.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface LeDropdownBase extends Components.LeDropdownBase, HTMLElement {}
+export const LeDropdownBase: {
+    prototype: LeDropdownBase;
+    new (): LeDropdownBase;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/le-dropdown-base.js

@@ -0,0 +1,9 @@
+import { L as LeDropdownBase$1, d as defineCustomElement$1 } from './le-dropdown-base2.js';
+
+const LeDropdownBase = LeDropdownBase$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LeDropdownBase, defineCustomElement };
+//# sourceMappingURL=le-dropdown-base.js.map
+
+//# sourceMappingURL=le-dropdown-base.js.map

package/dist/components/le-dropdown-base.js.map

@@ -0,0 +1 @@
+{"file":"le-dropdown-base.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}