le-kit 0.5.1 → 0.5.3

package/dist/components/le-button2.js

@@ -16,98 +16,54 @@ const LeStringInput = /*@__PURE__*/ proxyCustomElement(class LeStringInput exten
         this.__attachShadow();
         this.leChange = createEvent(this, "change", 7);
         this.leInput = createEvent(this, "input", 7);
+        /**
+         * The type of the input (text, email, password, etc.)
+         */
+        this.type = 'text';
+        /**
+         * Hide description slot
+         */
+        this.hideDescription = false;
+        /**
+         * Whether the input is disabled
+         */
+        this.disabled = false;
+        /**
+         * Whether the input is read-only
+         */
+        this.readonly = false;
+        this.handleInput = (ev) => {
+            const input = ev.target;
+            this.value = input.value;
+            this.leInput.emit({
+                value: this.value,
+                name: this.name,
+                externalId: this.externalId,
+            });
+        };
+        this.handleChange = (ev) => {
+            const input = ev.target;
+            this.value = input.value;
+            this.leChange.emit({
+                value: this.value,
+                name: this.name,
+                externalId: this.externalId,
+            });
+        };
+        this.handleClick = (ev) => {
+            ev.stopPropagation();
+        };
     }
-    get el() { return this; }
-    /**
-     * Pass the ref of the input element to the parent component
-     */
-    inputRef;
-    /**
-     * Mode of the popover should be 'default' for internal use
-     */
-    mode;
-    /**
-     * The value of the input
-     */
-    value;
-    /**
-     * The name of the input
-     */
-    name;
-    /**
-     * The type of the input (text, email, password, etc.)
-     */
-    type = 'text';
-    /**
-     * Label for the input
-     */
-    label;
-    /**
-     * Icon for the start icon
-     */
-    iconStart;
-    /**
-     * Icon for the end icon
-     */
-    iconEnd;
-    /**
-     * Placeholder text
-     */
-    placeholder;
-    /**
-     * Hide description slot
-     */
-    hideDescription = false;
-    /**
-     * Whether the input is disabled
-     */
-    disabled = false;
-    /**
-     * Whether the input is read-only
-     */
-    readonly = false;
-    /**
-     * External ID for linking with external systems
-     */
-    externalId;
-    /**
-     * Emitted when the value changes (on blur or Enter)
-     */
-    leChange;
-    /**
-     * Emitted when the input value changes (on keystroke)
-     */
-    leInput;
-    handleInput = (ev) => {
-        const input = ev.target;
-        this.value = input.value;
-        this.leInput.emit({
-            value: this.value,
-            name: this.name,
-            externalId: this.externalId,
-        });
-    };
-    handleChange = (ev) => {
-        const input = ev.target;
-        this.value = input.value;
-        this.leChange.emit({
-            value: this.value,
-            name: this.name,
-            externalId: this.externalId,
-        });
-    };
-    handleClick = (ev) => {
-        ev.stopPropagation();
-    };
     render() {
-        return (h("le-component", { key: '385fe7607d573ab4cfe81315f74e650f8e57faa1', component: "le-string-input", hostClass: classnames({ disabled: this.disabled }) }, h("div", { key: 'a36c5a32238eb6c9c574aeb3955343e042d89225', class: "le-input-wrapper" }, this.label && (h("label", { key: 'c1ff01932ada19ecea0cd2e2b477615d0c873ff0', class: "le-input-label", htmlFor: this.name }, this.label)), h("div", { key: '7c8909ed5e4e3404a2900a3f9beef8b0f331d62c', class: "le-input-container", part: "container" }, this.iconStart && h("span", { key: 'cf7e7355e22de3100bade2399ba63702731350e0', class: "icon-start" }, this.iconStart), h("input", { key: '6d71245d395f6cd2c55110ca902fc0374c74026b', ref: el => {
+        return (h("le-component", { key: 'b7d315a0bbe587dae606fec9ee3da32c16b773cb', component: "le-string-input", hostClass: classnames({ disabled: this.disabled }) }, h("div", { key: 'cfefdea8ce0625417cef62d0f432e13df652ab44', class: "le-input-wrapper" }, this.label && (h("label", { key: 'bfc0f2c440e00f2212c1ae9b0d3dd5b484ed0c5d', class: "le-input-label", htmlFor: this.name }, this.label)), h("div", { key: '324d58a4e798c4cd4d44c4f23760e38a24bfa4f6', class: "le-input-container", part: "container" }, this.iconStart && h("span", { key: '7851e3d9a30a304f2472e8de3dea1d6ce703b9ea', class: "icon-start" }, this.iconStart), h("input", { key: 'e51b775e8a9f8f55279ea91f04efbb0c5fdb4d1a', ref: el => {
                 if (this.inputRef) {
                     this.inputRef(el);
                 }
-            }, id: this.name, type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onChange: this.handleChange, onClick: this.handleClick }), this.iconEnd && h("span", { key: 'e086f9559b086212be3cd231b7c870cdb229a733', class: "icon-end" }, this.iconEnd)), !this.hideDescription && (h("div", { key: '531ac78b43382166023a79475152345956188bcc', class: "le-input-description" }, h("le-slot", { key: '38700e86adc0c3bf049b0ad828d14993ddef7844', name: "description", type: "text", tag: "p", label: "Description" }, h("slot", { key: 'c2982e93304a872ec79446fe525eb5448e764401', name: "description" })))))));
+            }, id: this.name, type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onChange: this.handleChange, onClick: this.handleClick }), this.iconEnd && h("span", { key: '7018ada874d6b1c85e88a93ba695d00c118c4a6a', class: "icon-end" }, this.iconEnd)), !this.hideDescription && (h("div", { key: '826a2853561ab428e82d879012bc7bfdad4b1dfe', class: "le-input-description" }, h("le-slot", { key: '3a6fc7a46fffacbef6e44fcaa7a80af365754d1c', name: "description", type: "text", tag: "p", label: "Description" }, h("slot", { key: 'b6bbe4efe29c88b1910a53f6704846bfd4280307', name: "description" })))))));
     }
+    get el() { return this; }
     static get style() { return leStringInputCss(); }
-}, [769, "le-string-input", {
+}, [257, "le-string-input", {
         "inputRef": [16],
         "mode": [1537],
         "value": [1537],
@@ -186,97 +142,100 @@ const LeSlot = /*@__PURE__*/ proxyCustomElement(class LeSlot extends HTMLElement
         }
         this.__attachShadow();
         this.leSlotChange = createEvent(this, "leSlotChange", 7);
+        /**
+         * The type of slot content.
+         * - `slot`: Default, shows a dropzone for components (default)
+         * - `text`: Shows a single-line text input
+         * - `textarea`: Shows a multi-line text area
+         */
+        this.type = 'slot';
+        /**
+         * The name of the slot this placeholder represents.
+         * Should match the slot name in the parent component.
+         */
+        this.name = '';
+        /**
+         * Whether multiple components can be dropped in this slot.
+         */
+        this.multiple = true;
+        /**
+         * Whether this slot is required to have content.
+         */
+        this.required = false;
+        /**
+         * Internal state to track admin mode
+         */
+        this.adminMode = false;
+        /**
+         * Internal state for text input value (synced from slot content)
+         */
+        this.textValue = '';
+        /**
+         * Whether the current textValue contains valid HTML
+         */
+        this.isValidHtml = true;
+        /**
+         * Available components loaded from Custom Elements Manifest
+         */
+        this.availableComponents = [];
+        /**
+         * Whether the component picker popover is open
+         */
+        this.pickerOpen = false;
+        /**
+         * Flag to prevent re-reading content right after we updated it
+         */
+        this.isUpdating = false;
+        this.handleTextInput = (event) => {
+            const target = event.target;
+            this.textValue = target.value;
+            this.isValidHtml = this.validateHtml(this.textValue);
+            if (this.isValidHtml) {
+                // Set flag to prevent slotchange from re-reading what we just wrote
+                this.isUpdating = true;
+                console.log('Updating text value:', this.textValue, 'slottedElement:', this.slottedElement);
+                if (this.slottedElement) {
+                    // Update existing slotted element's innerHTML
+                    this.slottedElement.innerHTML = this.textValue;
+                }
+                else if (this.tag && this.textValue) {
+                    // No slotted element exists
+                    // If the slot doesn't have a name, then it's the default slot
+                    // remove the existing non-slotted content (text nodes and elements without slot attribute)
+                    const rootNode = this.el.getRootNode();
+                    if (!this.name && rootNode instanceof ShadowRoot) {
+                        const hostComponent = rootNode.host;
+                        Array.from(hostComponent.childNodes).forEach(node => {
+                            if (node.nodeType === Node.TEXT_NODE || (node.nodeType === Node.ELEMENT_NODE && !node.hasAttribute('slot'))) {
+                                node.remove();
+                            }
+                        });
+                    }
+                    // create one using the specified tag
+                    this.createSlottedElement();
+                }
+                else if (this.textValue) {
+                    // no tag specified - just replace everything in the host component
+                    const rootNode = this.el.getRootNode();
+                    if (rootNode instanceof ShadowRoot) {
+                        const hostComponent = rootNode.host;
+                        hostComponent.innerHTML = this.textValue;
+                    }
+                }
+            }
+            this.leSlotChange.emit({
+                name: this.name,
+                value: this.textValue,
+                isValid: this.isValidHtml,
+            });
+        };
+        /**
+         * Handle slot change event to re-read content when nodes are assigned
+         */
+        this.handleSlotChange = () => {
+            this.readSlottedContent();
+        };
     }
-    get el() { return this; }
-    /**
-     * The type of slot content.
-     * - `slot`: Default, shows a dropzone for components (default)
-     * - `text`: Shows a single-line text input
-     * - `textarea`: Shows a multi-line text area
-     */
-    type = 'slot';
-    /**
-     * The name of the slot this placeholder represents.
-     * Should match the slot name in the parent component.
-     */
-    name = '';
-    /**
-     * Label to display in admin mode.
-     * If not provided, the slot name will be used.
-     */
-    label;
-    /**
-     * Description of what content this slot accepts.
-     * Shown in admin mode to guide content editors.
-     */
-    description;
-    /**
-     * Comma-separated list of allowed component tags for this slot.
-     * Used by CMS to filter available components.
-     *
-     * @example "le-card,le-button,le-text"
-     */
-    allowedComponents;
-    /**
-     * Whether multiple components can be dropped in this slot.
-     */
-    multiple = true;
-    /**
-     * Whether this slot is required to have content.
-     */
-    required = false;
-    /**
-     * Placeholder text for text/textarea inputs in admin mode.
-     */
-    placeholder;
-    /**
-     * The HTML tag to create when there's no slotted element.
-     * Used with type="text" or type="textarea" to auto-create elements.
-     *
-     * @example "h3" - creates <h3 slot="header">content</h3>
-     * @example "p" - creates <p slot="content">content</p>
-     */
-    tag;
-    /**
-     * CSS styles for the slot dropzone container.
-     * Useful for layouts - e.g., "flex-direction: row" for horizontal stacks.
-     * Only applies in admin mode for type="slot".
-     */
-    slotStyle;
-    /**
-     * Internal state to track admin mode
-     */
-    adminMode = false;
-    /**
-     * Internal state for text input value (synced from slot content)
-     */
-    textValue = '';
-    /**
-     * Whether the current textValue contains valid HTML
-     */
-    isValidHtml = true;
-    /**
-     * Available components loaded from Custom Elements Manifest
-     */
-    availableComponents = [];
-    /**
-     * Whether the component picker popover is open
-     */
-    pickerOpen = false;
-    /**
-     * Reference to the slot element to access assignedNodes
-     */
-    slotRef;
-    /**
-     * The original slotted element (e.g., <h3 slot="header">)
-     */
-    slottedElement;
-    /**
-     * Emitted when text content changes in admin mode.
-     * The event detail contains the new text value and validity.
-     */
-    leSlotChange;
-    disconnectModeObserver;
     connectedCallback() {
         this.disconnectModeObserver = observeModeChanges(this.el, mode => {
             const wasAdmin = this.adminMode;
@@ -295,10 +254,6 @@ const LeSlot = /*@__PURE__*/ proxyCustomElement(class LeSlot extends HTMLElement
     disconnectedCallback() {
         this.disconnectModeObserver?.();
     }
-    /**
-     * Flag to prevent re-reading content right after we updated it
-     */
-    isUpdating = false;
     /**
      * Read content from slotted elements via assignedNodes()
      */
@@ -362,49 +317,6 @@ const LeSlot = /*@__PURE__*/ proxyCustomElement(class LeSlot extends HTMLElement
         }
         return true;
     }
-    handleTextInput = (event) => {
-        const target = event.target;
-        this.textValue = target.value;
-        this.isValidHtml = this.validateHtml(this.textValue);
-        if (this.isValidHtml) {
-            // Set flag to prevent slotchange from re-reading what we just wrote
-            this.isUpdating = true;
-            console.log('Updating text value:', this.textValue, 'slottedElement:', this.slottedElement);
-            if (this.slottedElement) {
-                // Update existing slotted element's innerHTML
-                this.slottedElement.innerHTML = this.textValue;
-            }
-            else if (this.tag && this.textValue) {
-                // No slotted element exists
-                // If the slot doesn't have a name, then it's the default slot
-                // remove the existing non-slotted content (text nodes and elements without slot attribute)
-                const rootNode = this.el.getRootNode();
-                if (!this.name && rootNode instanceof ShadowRoot) {
-                    const hostComponent = rootNode.host;
-                    Array.from(hostComponent.childNodes).forEach(node => {
-                        if (node.nodeType === Node.TEXT_NODE || (node.nodeType === Node.ELEMENT_NODE && !node.hasAttribute('slot'))) {
-                            node.remove();
-                        }
-                    });
-                }
-                // create one using the specified tag
-                this.createSlottedElement();
-            }
-            else if (this.textValue) {
-                // no tag specified - just replace everything in the host component
-                const rootNode = this.el.getRootNode();
-                if (rootNode instanceof ShadowRoot) {
-                    const hostComponent = rootNode.host;
-                    hostComponent.innerHTML = this.textValue;
-                }
-            }
-        }
-        this.leSlotChange.emit({
-            name: this.name,
-            value: this.textValue,
-            isValid: this.isValidHtml,
-        });
-    };
     /**
      * Create a new slotted element when none exists.
      * The element is appended to the host component's light DOM.
@@ -506,16 +418,10 @@ const LeSlot = /*@__PURE__*/ proxyCustomElement(class LeSlot extends HTMLElement
             isValid: true,
         });
     }
-    /**
-     * Handle slot change event to re-read content when nodes are assigned
-     */
-    handleSlotChange = () => {
-        this.readSlottedContent();
-    };
     render() {
         const displayLabel = this.label || this.name;
         // Always render the same structure, CSS handles visibility via .admin-mode class
-        return (h(Host, { key: '8a48f7865340d9a2e201a2f878b2f1c66c55d86c', class: {
+        return (h(Host, { key: 'fb2a01670291a714608bc59069991a8ef65dc3e9', class: {
                 'admin-mode': this.adminMode,
                 'invalid-html': !this.isValidHtml,
             }, role: this.adminMode ? 'region' : undefined, "aria-label": this.adminMode ? `Slot: ${displayLabel}` : undefined, "data-slot-name": this.name, "data-slot-type": this.type, "data-allowed": this.allowedComponents, "data-multiple": this.multiple, "data-required": this.required }, this.adminMode ? (h("div", { class: "le-slot-container" }, h("div", { class: classnames('le-slot-header', {
@@ -559,8 +465,9 @@ const LeSlot = /*@__PURE__*/ proxyCustomElement(class LeSlot extends HTMLElement
                 return (h("div", { class: "le-slot-dropzone", style: dropzoneStyle }, h("slot", { ref: el => (this.slotRef = el), onSlotchange: this.handleSlotChange })));
         }
     }
+    get el() { return this; }
     static get style() { return leSlotDefaultCss(); }
-}, [769, "le-slot", {
+}, [257, "le-slot", {
         "type": [1],
         "name": [1],
         "label": [1],
@@ -643,72 +550,91 @@ const LeSelect = /*@__PURE__*/ proxyCustomElement(class LeSelect extends HTMLEle
         this.leChange = createEvent(this, "change", 7);
         this.leOpen = createEvent(this, "leOpen", 7);
         this.leClose = createEvent(this, "leClose", 7);
+        /**
+         * The options to display in the dropdown.
+         */
+        this.options = [];
+        /**
+         * Placeholder text when no option is selected.
+         */
+        this.placeholder = 'Select an option';
+        /**
+         * Whether the select is disabled.
+         */
+        this.disabled = false;
+        /**
+         * Whether selection is required.
+         */
+        this.required = false;
+        /**
+         * Whether the select should take full width of its container.
+         */
+        this.fullWidth = false;
+        /**
+         * Size variant of the select.
+         */
+        this.size = 'medium';
+        /**
+         * Visual variant of the select.
+         */
+        this.variant = 'default';
+        /**
+         * Whether the input is searchable.
+         */
+        this.searchable = false;
+        /**
+         * Text to show when no options match the search.
+         */
+        this.emptyText = 'No results found';
+        /**
+         * Whether the dropdown is currently open.
+         */
+        this.open = false;
+        this.searchQuery = '';
+        this.filterOption = (option, query) => {
+            if (!query)
+                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.leChange.emit(e.detail);
+        };
+        this.handleDropdownOpen = () => {
+            this.open = true;
+            this.leOpen.emit();
+            // Focus search input if searchable
+            if (this.searchable) {
+                setTimeout(() => {
+                    this.inputEl?.focus();
+                }, 50);
+            }
+        };
+        this.handleDropdownClose = () => {
+            this.open = false;
+            this.leClose.emit();
+        };
+        this.handleTriggerClick = () => {
+            if (!this.disabled) {
+                this.dropdownEl?.toggle();
+            }
+        };
+        this.handleTriggerKeyDown = (e) => {
+            if (this.disabled)
+                return;
+            if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
+                e.preventDefault();
+                this.dropdownEl?.show();
+            }
+        };
+        this.handleSearchInput = (e) => {
+            const target = e.target;
+            this.searchQuery = target.value;
+        };
     }
-    get el() { return this; }
-    /**
-     * The options to display in the dropdown.
-     */
-    options = [];
-    /**
-     * The currently selected value.
-     */
-    value;
-    /**
-     * Placeholder text when no option is selected.
-     */
-    placeholder = 'Select an option';
-    /**
-     * Whether the select is disabled.
-     */
-    disabled = false;
-    /**
-     * Whether selection is required.
-     */
-    required = false;
-    /**
-     * Name attribute for form submission.
-     */
-    name;
-    /**
-     * Whether the select should take full width of its container.
-     */
-    fullWidth = false;
-    /**
-     * Size variant of the select.
-     */
-    size = 'medium';
-    /**
-     * Visual variant of the select.
-     */
-    variant = 'default';
-    /**
-     * Whether the input is searchable.
-     */
-    searchable = false;
-    /**
-     * 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 dropdown opens.
-     */
-    leOpen;
-    /**
-     * Emitted when the dropdown closes.
-     */
-    leClose;
-    selectedOption;
-    searchQuery = '';
-    dropdownEl;
-    inputEl;
     handleValueChange() {
         this.updateSelectedOption();
     }
@@ -737,49 +663,6 @@ const LeSelect = /*@__PURE__*/ proxyCustomElement(class LeSelect extends HTMLEle
             this.selectedOption = undefined;
         }
     }
-    filterOption = (option, query) => {
-        if (!query)
-            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.leChange.emit(e.detail);
-    };
-    handleDropdownOpen = () => {
-        this.open = true;
-        this.leOpen.emit();
-        // Focus search input if searchable
-        if (this.searchable) {
-            setTimeout(() => {
-                this.inputEl?.focus();
-            }, 50);
-        }
-    };
-    handleDropdownClose = () => {
-        this.open = false;
-        this.leClose.emit();
-    };
-    handleTriggerClick = () => {
-        if (!this.disabled) {
-            this.dropdownEl?.toggle();
-        }
-    };
-    handleTriggerKeyDown = (e) => {
-        if (this.disabled)
-            return;
-        if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
-            e.preventDefault();
-            this.dropdownEl?.show();
-        }
-    };
-    handleSearchInput = (e) => {
-        const target = e.target;
-        this.searchQuery = target.value;
-    };
     /**
      * Opens the dropdown.
      */
@@ -802,20 +685,21 @@ const LeSelect = /*@__PURE__*/ proxyCustomElement(class LeSelect extends HTMLEle
     }
     render() {
         const hasValue = this.selectedOption !== undefined;
-        return (h("le-component", { key: '670430a0ca8f310b7454c7dd93098b6b57f3bb82', component: "le-select" }, h("le-dropdown-base", { key: '58716c031b14513b67a1106b90b6174fa363c8b4', ref: el => (this.dropdownEl = el), options: this.parsedOptions, value: this.value, disabled: this.disabled, filterFn: this.searchable ? this.filterOption : undefined, filterQuery: this.searchQuery, onLeOptionSelect: this.handleOptionSelect, onLeDropdownOpen: this.handleDropdownOpen, onLeDropdownClose: this.handleDropdownClose, fullWidth: this.fullWidth }, h("le-button", { key: 'b9cb202179c8fbc6dea9bc7af5ccf11deeb7c0f1', variant: this.variant && this.variant !== 'default' ? this.variant : 'outlined', slot: "trigger", align: "space-between", class: {
+        return (h("le-component", { key: 'cd0d10eb7ee1cc6f52fcb32bc3675e2f74219d9b', component: "le-select" }, h("le-dropdown-base", { key: '200e03a079caaa6c091f82d0384134a3e2d0154d', ref: el => (this.dropdownEl = el), options: this.parsedOptions, value: this.value, disabled: this.disabled, filterFn: this.searchable ? this.filterOption : undefined, filterQuery: this.searchQuery, onLeOptionSelect: this.handleOptionSelect, onLeDropdownOpen: this.handleDropdownOpen, onLeDropdownClose: this.handleDropdownClose, fullWidth: this.fullWidth }, h("le-button", { key: '0fa315cceaf6f18a5e370351027f27167fe64ce0', variant: this.variant && this.variant !== 'default' ? this.variant : 'outlined', slot: "trigger", align: "space-between", class: {
                 'select-trigger': true,
                 'has-value': hasValue,
                 'is-open': this.open,
             }, mode: "default", size: this.size, disabled: this.disabled, "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown, fullWidth: this.fullWidth, iconStart: hasValue && this.selectedOption?.iconStart
                 ? this.renderIcon(this.selectedOption.iconStart)
-                : null, iconEnd: h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: "M4 6l4 4 4-4" })) }, h("span", { key: '592267788f6a02d6b501941863e91bcd68742233', class: "trigger-label" }, hasValue ? this.selectedOption.label : this.placeholder)), this.searchable && this.open && (h("div", { key: 'd4d2611e8b1f7fb243675cc11fa4982331b3c330', class: "multiselect-search", slot: "header" }, h("le-string-input", { key: 'f2a7e477eaf730173cfbca35b33d263eda860dc2', mode: "default", inputRef: el => (this.inputEl = el), class: "search-input", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchInput })))), this.name && h("input", { key: 'bf9dc8141d02c272b0b81557dbc7c24a419ce558', type: "hidden", name: this.name, value: this.value?.toString() ?? '' })));
+                : null, iconEnd: h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: "M4 6l4 4 4-4" })) }, h("span", { key: 'aae9bb220fb206622dbf6959f125c78adfb13e00', class: "trigger-label" }, hasValue ? this.selectedOption.label : this.placeholder)), this.searchable && this.open && (h("div", { key: '0e7e360672e2e7ce7d32dc726a450ccff245cee0', class: "multiselect-search", slot: "header" }, h("le-string-input", { key: 'a2a36fc139d4b477d35910541fab6071eddc3de5', mode: "default", inputRef: el => (this.inputEl = el), class: "search-input", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchInput })))), this.name && h("input", { key: '9555b72d2f433ce9ee3803d0bb3ceb0dae1c37e3', type: "hidden", name: this.name, value: this.value?.toString() ?? '' })));
     }
+    get el() { return this; }
     static get watchers() { return {
         "value": ["handleValueChange"],
         "options": ["handleOptionsChange"]
     }; }
     static get style() { return leSelectCss(); }
-}, [769, "le-select", {
+}, [257, "le-select", {
         "options": [1],
         "value": [1032],
         "placeholder": [1],
@@ -909,79 +793,93 @@ const LePopup = /*@__PURE__*/ proxyCustomElement(class LePopup extends HTMLEleme
         this.leCancel = createEvent(this, "leCancel", 7);
         this.leOpen = createEvent(this, "leOpen", 7);
         this.leClose = createEvent(this, "leClose", 7);
+        /**
+         * The mode of the Le Kit (e.g., 'default' or 'admin')
+         */
+        this.mode = 'default';
+        /**
+         * Whether the popup is currently visible
+         */
+        this.open = false;
+        /**
+         * Type of popup: alert (OK only), confirm (OK/Cancel), prompt (input + OK/Cancel), custom
+         */
+        this.type = 'alert';
+        /**
+         * Whether the popup is modal (blocks interaction with page behind)
+         */
+        this.modal = true;
+        /**
+         * Position of the popup on screen
+         */
+        this.position = 'center';
+        /**
+         * Text for the confirm/OK button
+         */
+        this.confirmText = 'OK';
+        /**
+         * Text for the cancel button
+         */
+        this.cancelText = 'Cancel';
+        /**
+         * Placeholder text for prompt input
+         */
+        this.placeholder = '';
+        /**
+         * Default value for prompt input
+         */
+        this.defaultValue = '';
+        /**
+         * Whether clicking the backdrop closes the popup (modal only)
+         */
+        this.closeOnBackdrop = true;
+        /**
+         * Internal state for prompt input value
+         */
+        this.inputValue = '';
+        this.handleDialogCancel = (e) => {
+            e.preventDefault(); // Prevent default close to handle it ourselves
+            this.handleCancel();
+        };
+        this.handleConfirm = () => {
+            const result = {
+                confirmed: true,
+                value: this.type === 'prompt' ? this.inputValue : undefined,
+            };
+            this.leConfirm.emit(result);
+            this.hide(true);
+        };
+        this.handleCancel = () => {
+            const result = {
+                confirmed: false,
+                value: undefined,
+            };
+            this.leCancel.emit(result);
+            this.hide(false);
+        };
+        this.handleBackdropClick = (e) => {
+            // Check if click was on the dialog backdrop (outside the dialog box)
+            if (this.closeOnBackdrop && e.target === this.dialogEl) {
+                const rect = this.dialogEl.getBoundingClientRect();
+                const clickedInDialog = e.clientX >= rect.left &&
+                    e.clientX <= rect.right &&
+                    e.clientY >= rect.top &&
+                    e.clientY <= rect.bottom;
+                if (!clickedInDialog) {
+                    this.handleCancel();
+                }
+            }
+        };
+        this.handleInputChange = (e) => {
+            this.inputValue = e.target.value;
+        };
+        this.handleKeyDown = (e) => {
+            if (e.key === 'Enter' && this.type !== 'custom') {
+                e.preventDefault();
+                this.handleConfirm();
+            }
+        };
     }
-    get el() { return this; }
-    /**
-     * The mode of the Le Kit (e.g., 'default' or 'admin')
-     */
-    mode = 'default';
-    /**
-     * Whether the popup is currently visible
-     */
-    open = false;
-    /**
-     * Type of popup: alert (OK only), confirm (OK/Cancel), prompt (input + OK/Cancel), custom
-     */
-    type = 'alert';
-    /**
-     * Optional title for the popup header
-     */
-    popupTitle;
-    /**
-     * Message text to display (for alert/confirm/prompt types)
-     */
-    message;
-    /**
-     * Whether the popup is modal (blocks interaction with page behind)
-     */
-    modal = true;
-    /**
-     * Position of the popup on screen
-     */
-    position = 'center';
-    /**
-     * Text for the confirm/OK button
-     */
-    confirmText = 'OK';
-    /**
-     * Text for the cancel button
-     */
-    cancelText = 'Cancel';
-    /**
-     * Placeholder text for prompt input
-     */
-    placeholder = '';
-    /**
-     * Default value for prompt input
-     */
-    defaultValue = '';
-    /**
-     * Whether clicking the backdrop closes the popup (modal only)
-     */
-    closeOnBackdrop = true;
-    /**
-     * Internal state for prompt input value
-     */
-    inputValue = '';
-    /**
-     * Emitted when the popup is confirmed (OK clicked)
-     */
-    leConfirm;
-    /**
-     * Emitted when the popup is cancelled (Cancel clicked or dismissed)
-     */
-    leCancel;
-    /**
-     * Emitted when the popup opens
-     */
-    leOpen;
-    /**
-     * Emitted when the popup closes
-     */
-    leClose;
-    dialogEl;
-    inputEl;
-    resolvePromise;
     componentWillLoad() {
         this.inputValue = this.defaultValue;
     }
@@ -993,10 +891,6 @@ const LePopup = /*@__PURE__*/ proxyCustomElement(class LePopup extends HTMLEleme
     disconnectedCallback() {
         this.dialogEl?.removeEventListener('cancel', this.handleDialogCancel);
     }
-    handleDialogCancel = (e) => {
-        e.preventDefault(); // Prevent default close to handle it ourselves
-        this.handleCancel();
-    };
     /**
      * Opens the popup and returns a promise that resolves when closed
      */
@@ -1040,44 +934,6 @@ const LePopup = /*@__PURE__*/ proxyCustomElement(class LePopup extends HTMLEleme
             this.resolvePromise = undefined;
         }
     }
-    handleConfirm = () => {
-        const result = {
-            confirmed: true,
-            value: this.type === 'prompt' ? this.inputValue : undefined,
-        };
-        this.leConfirm.emit(result);
-        this.hide(true);
-    };
-    handleCancel = () => {
-        const result = {
-            confirmed: false,
-            value: undefined,
-        };
-        this.leCancel.emit(result);
-        this.hide(false);
-    };
-    handleBackdropClick = (e) => {
-        // Check if click was on the dialog backdrop (outside the dialog box)
-        if (this.closeOnBackdrop && e.target === this.dialogEl) {
-            const rect = this.dialogEl.getBoundingClientRect();
-            const clickedInDialog = e.clientX >= rect.left &&
-                e.clientX <= rect.right &&
-                e.clientY >= rect.top &&
-                e.clientY <= rect.bottom;
-            if (!clickedInDialog) {
-                this.handleCancel();
-            }
-        }
-    };
-    handleInputChange = (e) => {
-        this.inputValue = e.target.value;
-    };
-    handleKeyDown = (e) => {
-        if (e.key === 'Enter' && this.type !== 'custom') {
-            e.preventDefault();
-            this.handleConfirm();
-        }
-    };
     hasSlot(name) {
         return !!this.el.querySelector(`[slot="${name}"]`);
     }
@@ -1105,10 +961,11 @@ const LePopup = /*@__PURE__*/ proxyCustomElement(class LePopup extends HTMLEleme
     }
     render() {
         const positionClass = `le-popup-position-${this.position}`;
-        return (h("dialog", { key: '75ff06ac2532818f2951283fb455d165d1b13e89', class: `le-popup-dialog ${positionClass}`, part: "dialog", ref: el => (this.dialogEl = el), onClick: this.handleBackdropClick }, h("le-component", { key: '0fea1c4ea66d8457c66bf5e14b08b7ac3251a9cc', component: "le-popup" }, h("div", { key: 'eb95845004b27cdba2e817b2f296a59ae1d62552', class: "le-popup-container", part: "container" }, this.renderHeader(), this.renderBody(), this.renderFooter()))));
+        return (h("dialog", { key: '9a42c63b24b521264654847ff45ea026000a642d', class: `le-popup-dialog ${positionClass}`, part: "dialog", ref: el => (this.dialogEl = el), onClick: this.handleBackdropClick }, h("le-component", { key: 'a3f086d20a9e611f3907f039bbcf9f7054927fa5', component: "le-popup" }, h("div", { key: 'b2ee2bc7d9eb42f457541c8ffb20af52b7cde8e9', class: "le-popup-container", part: "container" }, this.renderHeader(), this.renderBody(), this.renderFooter()))));
     }
+    get el() { return this; }
     static get style() { return lePopupCss(); }
-}, [769, "le-popup", {
+}, [257, "le-popup", {
         "mode": [1537],
         "open": [1540],
         "type": [1],
@@ -1188,45 +1045,19 @@ const LeComponent = /*@__PURE__*/ proxyCustomElement(class LeComponent extends H
             this.__registerHost();
         }
         this.__attachShadow();
+        /**
+         * Internal state to track admin mode
+         */
+        this.adminMode = false;
+        /**
+         * Component metadata loaded from Custom Elements Manifest
+         */
+        this.componentMeta = null;
+        /**
+         * Current property values of the host component
+         */
+        this.propertyValues = {};
     }
-    get el() { return this; }
-    /**
-     * The tag name of the component (e.g., 'le-card').
-     * Used to look up property metadata and display the component name.
-     */
-    component;
-    /**
-     * Optional display name for the component.
-     * If not provided, the tag name will be formatted as the display name.
-     */
-    displayName;
-    /**
-     * Classes to apply to the host element.
-     * Allows parent components to pass their styling classes.
-     */
-    hostClass;
-    /**
-     * Inline styles to apply to the host element.
-     * Allows parent components to pass dynamic styles (e.g., flex properties).
-     */
-    hostStyle;
-    /**
-     * Reference to the host element (found automatically from parent)
-     */
-    hostElement;
-    /**
-     * Internal state to track admin mode
-     */
-    adminMode = false;
-    /**
-     * Component metadata loaded from Custom Elements Manifest
-     */
-    componentMeta = null;
-    /**
-     * Current property values of the host component
-     */
-    propertyValues = {};
-    disconnectModeObserver;
     connectedCallback() {
         // Find the host element - le-component is rendered inside the component's shadow DOM,
         // so we need to find the shadow root's host element
@@ -1423,8 +1254,9 @@ const LeComponent = /*@__PURE__*/ proxyCustomElement(class LeComponent extends H
         return (h(Host, { class: classnames(this.component, this.hostClass, 'admin-mode'), style: this.hostStyle }, h("div", { class: "le-component-wrapper" }, h("div", { class: "le-component-header" }, h("span", { class: "le-component-name" }, name), h("le-popover", { popoverTitle: `${name} Settings`, position: "right", align: "start", "min-width": "300px", mode: "default" }, h("le-button", { type: "button", class: "le-component-button", slot: "trigger", variant: "clear", size: "small", "aria-label": "Edit component properties", "icon-only": true }, h("span", { class: "le-component-trigger", slot: "icon-only" }, "\u2699")), this.renderPropertyEditor())), h("div", { class: "le-component-content" }, h("slot", null)))));
     }
     static get assetsDirs() { return ["assets"]; }
+    get el() { return this; }
     static get style() { return leComponentCss(); }
-}, [769, "le-component", {
+}, [257, "le-component", {
         "component": [1],
         "displayName": [1, "display-name"],
         "hostClass": [1, "host-class"],
@@ -1502,53 +1334,37 @@ const LeCheckbox = /*@__PURE__*/ proxyCustomElement(class LeCheckbox extends HTM
         }
         this.__attachShadow();
         this.leChange = createEvent(this, "change", 7);
+        /**
+         * Whether the checkbox is checked
+         */
+        this.checked = false;
+        /**
+         * Whether the checkbox is disabled
+         */
+        this.disabled = false;
+        this.handleChange = (event) => {
+            // We stop the internal button click from bubbling up
+            event.stopPropagation();
+            if (this.disabled) {
+                event.preventDefault();
+                return;
+            }
+            const input = event.target;
+            this.checked = input.checked;
+            this.leChange.emit({
+                checked: this.checked,
+                value: this.value,
+                name: this.name,
+                externalId: this.externalId
+            });
+        };
     }
-    get el() { return this; }
-    /**
-     * Whether the checkbox is checked
-     */
-    checked = false;
-    /**
-     * Whether the checkbox is disabled
-     */
-    disabled = false;
-    /**
-     * The name of the checkbox input
-     */
-    name;
-    /**
-     * The value of the checkbox input
-     */
-    value;
-    /**
-     * External ID for linking with external systems (e.g. database ID, PDF form field ID)
-     */
-    externalId;
-    /**
-     * Emitted when the checked state changes
-     */
-    leChange;
-    handleChange = (event) => {
-        // We stop the internal button click from bubbling up
-        event.stopPropagation();
-        if (this.disabled) {
-            event.preventDefault();
-            return;
-        }
-        const input = event.target;
-        this.checked = input.checked;
-        this.leChange.emit({
-            checked: this.checked,
-            value: this.value,
-            name: this.name,
-            externalId: this.externalId
-        });
-    };
     render() {
-        return (h("le-component", { key: 'cb04cc6a990ee321dd7e8fca2f0bf56c76a865fa', component: "le-checkbox", hostClass: classnames({ 'disabled': this.disabled }) }, h("div", { key: '1b8737eb0d572ba5fdf8c2cfc5ced4af5ef30997', class: "le-checkbox-wrapper" }, h("label", { key: '1d26d68565ade32489f2fade8120c7b8ad75b251', class: "le-checkbox-label" }, h("span", { key: '7e6b5e610c9f16c36b93c57284891366e6b3b756', class: "le-checkbox-input" }, h("input", { key: 'a12a374aa69526d802f36f00b0ae4bcd4ed27bc3', type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.handleChange })), h("span", { key: 'e4ea1f85102c99751f9853b8e23fbd40ebd24780', class: "le-checkbox-text" }, h("le-slot", { key: 'cdda2111e4dfa6d7270280bac305255980842d48', name: "", type: "text", tag: "span" }, h("slot", { key: '32f57155d7a56f48e5780e37ea1ccac308db6848' })))), h("div", { key: '37d54d8c87b90987653f66a319958849893e7d91', class: "le-checkbox-description" }, h("le-slot", { key: 'fceedc24ef6a3561120456e9b387801a40c5919c', name: "description", type: "text", tag: "div", label: "Description" }, h("slot", { key: 'f1f87b7192565831a2f20428e8e2c0a974166dfd', name: "description" }))))));
+        return (h("le-component", { key: '8b4541e96816b6e69ee790779971981b9d112484', component: "le-checkbox", hostClass: classnames({ 'disabled': this.disabled }) }, h("div", { key: 'c5e3a8692e59fa59a46bc90302e80f20dc700f04', class: "le-checkbox-wrapper" }, h("label", { key: 'b72abfbd39434a2c8be951a933e57ce70e9c922c', class: "le-checkbox-label" }, h("span", { key: '624ebbd37e6ea6a0800d702cbcea5ab8fe78b59e', class: "le-checkbox-input" }, h("input", { key: '182dc9549cc3494fc61e7779242ff14c304c3d97', type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.handleChange })), h("span", { key: 'f14dc486329d8375b47ca75bedd2ac31f04273a7', class: "le-checkbox-text" }, h("le-slot", { key: '3be69ca148e121e8970bd3950fcbdee12613c775', name: "", type: "text", tag: "span" }, h("slot", { key: '2a258f7ce0331b9d08df5ac23a5ec492493974ca' })))), h("div", { key: '2deeab5d1d7c6b4046b5b4f54cd92061fc5f7383', class: "le-checkbox-description" }, h("le-slot", { key: '3ec3ca85d9f472d209084c4d95d46d2c114133e8', name: "description", type: "text", tag: "div", label: "Description" }, h("slot", { key: 'e1043ec4613df078446e7a6a5550646bbbe7d8be', name: "description" }))))));
     }
+    get el() { return this; }
     static get style() { return leCheckboxCss(); }
-}, [769, "le-checkbox", {
+}, [257, "le-checkbox", {
         "checked": [1540],
         "disabled": [4],
         "name": [1],
@@ -1622,85 +1438,54 @@ const LeButton = /*@__PURE__*/ proxyCustomElement(class LeButton extends HTMLEle
         }
         this.__attachShadow();
         this.leClick = createEvent(this, "click", 7);
+        /**
+         * Button variant style
+         * @allowedValues solid | outlined | clear
+         */
+        this.variant = 'solid';
+        /**
+         * Button color theme (uses theme semantic colors)
+         * @allowedValues primary | secondary | success | warning | danger | info
+         */
+        this.color = 'primary';
+        /**
+         * Button size
+         * @allowedValues small | medium | large
+         */
+        this.size = 'medium';
+        /**
+         * Whether the button is in a selected/active state
+         */
+        this.selected = false;
+        /**
+         * Whether the button takes full width of its container
+         */
+        this.fullWidth = false;
+        /**
+         * Whether the button is disabled
+         */
+        this.disabled = false;
+        /**
+         * The button type attribute
+         * @allowedValues button | submit | reset
+         */
+        this.type = 'button';
+        /**
+         * Alignment of the button label without the end icon
+         * @allowedValues start | center | space-between | end
+         */
+        this.align = 'center';
+        this.handleClick = (event) => {
+            // We stop the internal button click from bubbling up
+            event.stopPropagation();
+            if (this.disabled) {
+                event.preventDefault();
+                return;
+            }
+            // And emit our own click event from the host element
+            this.leClick.emit(event);
+        };
     }
-    get el() { return this; }
-    /**
-     * Mode of the popover should be 'default' for internal use
-     */
-    mode;
-    /**
-     * Button variant style
-     * @allowedValues solid | outlined | clear
-     */
-    variant = 'solid';
-    /**
-     * Button color theme (uses theme semantic colors)
-     * @allowedValues primary | secondary | success | warning | danger | info
-     */
-    color = 'primary';
-    /**
-     * Button size
-     * @allowedValues small | medium | large
-     */
-    size = 'medium';
-    /**
-     * Whether the button is in a selected/active state
-     */
-    selected = false;
-    /**
-     * Whether the button takes full width of its container
-     */
-    fullWidth = false;
-    /**
-     * Icon only button image or emoji
-     * if this prop is set, the button will render only the icon slot
-     */
-    iconOnly;
-    /**
-     * Start icon image or emoji
-     */
-    iconStart;
-    /**
-     * End icon image or emoji
-     */
-    iconEnd;
-    /**
-     * Whether the button is disabled
-     */
-    disabled = false;
-    /**
-     * The button type attribute
-     * @allowedValues button | submit | reset
-     */
-    type = 'button';
-    /**
-     * Optional href to make the button act as a link
-     */
-    href;
-    /**
-     * Link target when href is set
-     */
-    target;
-    /**
-     * Alignment of the button label without the end icon
-     * @allowedValues start | center | space-between | end
-     */
-    align = 'center';
-    /**
-     * Emitted when the button is clicked.
-     * This is a custom event that wraps the native click but ensures the target is the le-button.
-     */
-    leClick;
-    handleClick = (event) => {
-        // We stop the internal button click from bubbling up
-        event.stopPropagation();
-        if (this.disabled) {
-            event.preventDefault();
-            return;
-        }
-        // And emit our own click event from the host element
-        this.leClick.emit(event);
-    };
     render() {
         const classes = classnames(`variant-${this.variant}`, `color-${this.color}`, `size-${this.size}`, {
             'selected': this.selected,
@@ -1712,10 +1497,11 @@ const LeButton = /*@__PURE__*/ proxyCustomElement(class LeButton extends HTMLEle
         const attrs = this.href
             ? { href: this.href, target: this.target, role: 'button' }
             : { type: this.type, disabled: this.disabled };
-        return (h(Host, { key: 'a42aef03b5faf34f47b50dff799316a6815babd5', class: classes }, h("le-component", { key: '86ef8acf04d43e829b83d3e225f210acefc99515', component: "le-button" }, h(TagType, { key: '44145a5244577aab167c103501b788f0088799e3', class: classnames('le-button-container', `le-button-align-${this.align}`), part: "button", ...attrs, onClick: this.handleClick }, this.iconOnly !== undefined ? (h("slot", { name: "icon-only" }, typeof this.iconOnly === 'string' ? this.iconOnly : null)) : (h(Fragment, null, h("span", { class: "le-button-label" }, this.iconStart && (h("span", { class: "icon-start", part: "icon-start" }, this.iconStart)), h("le-slot", { name: "", description: "Button text", type: "text", class: "content", part: "content" }, h("slot", null))), this.iconEnd && (h("span", { class: "icon-end", part: "icon-end" }, this.iconEnd))))))));
+        return (h(Host, { key: '4bf9fb21e9bf0ca5a19193d977ad9fab90b519a0', class: classes }, h("le-component", { key: '8e0edefabbe9196eba935a1e8cce788c686c170c', component: "le-button" }, h(TagType, { key: '30f88ea834a9029c0f8ec24819107ba318dc6397', class: classnames('le-button-container', `le-button-align-${this.align}`), part: "button", ...attrs, onClick: this.handleClick }, this.iconOnly !== undefined ? (h("slot", { name: "icon-only" }, typeof this.iconOnly === 'string' ? this.iconOnly : null)) : (h(Fragment, null, h("span", { class: "le-button-label" }, this.iconStart && (h("span", { class: "icon-start", part: "icon-start" }, this.iconStart)), h("le-slot", { name: "", description: "Button text", type: "text", class: "content", part: "content" }, h("slot", null))), this.iconEnd && (h("span", { class: "icon-end", part: "icon-end" }, this.iconEnd))))))));
     }
+    get el() { return this; }
     static get style() { return leButtonCss(); }
-}, [769, "le-button", {
+}, [257, "le-button", {
         "mode": [1537],
         "variant": [1],
         "color": [1],