le-kit 0.5.2 → 0.5.4

package/dist/components/le-button2.js

@@ -1,1791 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, transformTag, getAssetPath, Host, Fragment } from '@stencil/core/internal/client';
-import { c as classnames, o as observeModeChanges } from './utils.js';
-import { d as getLeKitConfig } from './app.js';
-import { a as leConfirm } from './le-popup.api.js';
-import { d as defineCustomElement$8 } from './le-dropdown-base2.js';
-import { d as defineCustomElement$7 } from './le-popover2.js';
-
-const leStringInputCss = () => `:host{display:block;--le-input-bg:var(--le-color-surface, #ffffff);--le-input-color:var(--le-color-text-primary, #333333);--le-input-border:var(--le-border-width, 2px) solid var(--le-color-border-input, #007bff);--le-input-radius:var(--le-radius-sm, 4px);--le-input-padding:2px 6px;--le-input-height:1.5rem;--le-input-label-color:var(--le-color-text-primary, #333333);--le-input-desc-color:var(--le-color-text-secondary, #666666);--le-input-placeholder-color:#999999}.le-input-wrapper{display:flex;flex-direction:column;gap:2px}.le-input-label{display:block;font-size:0.9em;font-weight:500;color:var(--le-input-label-color);margin-bottom:2px}.le-input-container{position:relative;display:flex;align-items:center;background:var(--le-input-bg);border:var(--le-input-border);border-radius:var(--le-input-radius);transition:border-color 0.2s}.le-input-container:focus-within{outline:2px solid var(--le-color-focus);outline-offset:2px}:host([disabled]) .le-input-container{opacity:0.6;background-color:rgba(0,0,0,0.05);cursor:not-allowed}input{flex:1;min-height:var(--le-input-height);padding:var(--le-input-padding);border:none;background:transparent;color:var(--le-input-color);font-family:inherit;font-size:inherit;outline:none;width:100%}input::placeholder{color:var(--le-input-placeholder-color)}.icon-start,.icon-end{display:flex;align-items:center;justify-content:center;padding:0 8px;color:var(--le-input-desc-color)}.le-input-description{font-size:0.85em;color:var(--le-input-desc-color);margin-top:2px}.le-input-description::has(le-slot>slot[name=description]:empty){display:none}`;
-
-const LeStringInput = /*@__PURE__*/ proxyCustomElement(class LeStringInput extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.leChange = createEvent(this, "change", 7);
-        this.leInput = createEvent(this, "input", 7);
-    }
-    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 => {
-                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" })))))));
-    }
-    static get style() { return leStringInputCss(); }
-}, [769, "le-string-input", {
-        "inputRef": [16],
-        "mode": [1537],
-        "value": [1537],
-        "name": [1],
-        "type": [1],
-        "label": [1],
-        "iconStart": [1, "icon-start"],
-        "iconEnd": [1, "icon-end"],
-        "placeholder": [1],
-        "hideDescription": [4, "hide-description"],
-        "disabled": [4],
-        "readonly": [4],
-        "externalId": [1, "external-id"]
-    }]);
-function defineCustomElement$6() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["le-string-input", "le-button", "le-checkbox", "le-component", "le-popover", "le-popup", "le-select", "le-slot", "le-string-input"];
-    components.forEach(tagName => { switch (tagName) {
-        case "le-string-input":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), LeStringInput);
-            }
-            break;
-        case "le-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement();
-            }
-            break;
-        case "le-checkbox":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$1();
-            }
-            break;
-        case "le-component":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-        case "le-popover":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$7();
-            }
-            break;
-        case "le-popup":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
-            }
-            break;
-        case "le-select":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
-            }
-            break;
-        case "le-slot":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$5();
-            }
-            break;
-        case "le-string-input":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$6();
-            }
-            break;
-    } });
-}
-
-const leSlotDefaultCss = () => `:host{display:contents;--le-slot-border-color:#0088ff;--le-slot-bg-color:rgba(0, 136, 255, 0.05);--le-slot-header-bg:rgb(218, 238, 255);--le-slot-label-color:#0066cc;--le-slot-description-color:#666;--le-slot-required-color:#e53935;--le-slot-dropzone-min-height:20px;--le-slot-dropzone-border-color:#ccc}.le-slot-container,.le-slot-header,.le-slot-description,.le-slot-dropzone,.le-slot-input{display:none}.hidden-slot{display:none}:host(.admin-mode){display:block;flex:1}:host(.admin-mode) .le-slot-container{position:relative;display:flex;flex-direction:column;border:2px dashed var(--le-slot-border-color);border-radius:4px;background:var(--le-slot-bg-color);margin:4px 0}:host(.admin-mode) .le-slot-header{display:flex;align-items:center;gap:4px;padding:0 0 0 var(--le-spacing-1, 4px);background:var(--le-slot-header-bg);border-bottom:1px solid var(--le-slot-border-color);font-size:var(--le-font-size-xs, 11px);font-weight:400;text-transform:capitalize}:host(.admin-mode) .le-slot-header-no-label{justify-content:flex-end;height:16px;border:none;background-color:transparent}.le-slot-label{color:var(--le-slot-label-color);text-align:start;overflow:hidden;width:0;flex:1 1 0%}.le-slot-required{color:var(--le-slot-required-color);font-weight:bold}:host(.admin-mode) .le-slot-description{display:block;padding:4px 8px;font-size:12px;color:var(--le-slot-description-color);font-style:italic}:host(.admin-mode) .le-slot-description-icon{display:inline-block;font-size:9px;line-height:1;cursor:pointer;color:var(--le-slot-description-color)}:host(.admin-mode) .le-slot-dropzone{display:block;min-height:var(--le-slot-dropzone-min-height);padding:var(--le-spacing-1, 4px);position:relative}:host(.admin-mode) .le-slot-dropzone:empty::before{content:'Drop content here';display:flex;align-items:center;justify-content:center;position:absolute;inset:8px;border:2px dashed var(--le-slot-dropzone-border-color);border-radius:4px;color:#999;font-size:12px;pointer-events:none}:host(.admin-mode.drag-over) .le-slot-container{border-color:#00cc66;background:rgba(0, 204, 102, 0.1)}:host(.admin-mode.drag-over) .le-slot-dropzone:empty::before{border-color:#00cc66;color:#00cc66;content:'Release to drop'}:host(.admin-mode) .le-slot-input{display:block;padding:var(--le-spacing-1, 4px)}:host(.admin-mode) .le-slot-input input,:host(.admin-mode) .le-slot-input textarea{display:block;width:100%;padding:8px 10px;border:1px solid var(--le-slot-dropzone-border-color);border-radius:4px;font-family:inherit;font-size:14px;line-height:1.4;background:#fff;color:#333;box-sizing:border-box;transition:border-color 0.2s, box-shadow 0.2s}:host(.admin-mode) .le-slot-input input:focus,:host(.admin-mode) .le-slot-input textarea:focus{outline:none;border-color:var(--le-slot-border-color);box-shadow:0 0 0 3px rgba(0, 136, 255, 0.15)}:host(.admin-mode) .le-slot-input input::placeholder,:host(.admin-mode) .le-slot-input textarea::placeholder{color:#999}:host(.admin-mode) .le-slot-input textarea{resize:vertical;min-height:60px}:host(.admin-mode) .le-slot-input slot{display:none}.le-slot-invalid{color:var(--le-slot-required-color);font-size:10px;margin-left:auto;font-weight:normal;text-transform:none}:host(.admin-mode) .le-slot-input.has-error input,:host(.admin-mode) .le-slot-input.has-error textarea{border-color:var(--le-slot-required-color);background:rgba(229, 57, 53, 0.05)}:host(.admin-mode) .le-slot-input.has-error input:focus,:host(.admin-mode) .le-slot-input.has-error textarea:focus{border-color:var(--le-slot-required-color);box-shadow:0 0 0 3px rgba(229, 57, 53, 0.15)}.le-slot-add-btn{font-size:24px;line-height:0px;width:12px;height:12px}.le-slot-header-no-label .le-slot-add-btn{font-size:16px}.le-slot-button{width:20px;height:20px}:host(.admin-mode) .le-slot-header-no-label.le-slot-header-text{height:0}`;
-
-const LeSlot = /*@__PURE__*/ proxyCustomElement(class LeSlot extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.leSlotChange = createEvent(this, "leSlotChange", 7);
-    }
-    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;
-            this.adminMode = mode === 'admin';
-            // When entering admin mode, read content from slotted elements
-            if (this.adminMode && !wasAdmin) {
-                // Need to wait for render to access slot ref
-                requestAnimationFrame(() => this.readSlottedContent());
-                // Load available components for the component picker
-                if (this.type === 'slot') {
-                    this.loadAvailableComponents();
-                }
-            }
-        });
-    }
-    disconnectedCallback() {
-        this.disconnectModeObserver?.();
-    }
-    /**
-     * Flag to prevent re-reading content right after we updated it
-     */
-    isUpdating = false;
-    /**
-     * Read content from slotted elements via assignedNodes()
-     */
-    readSlottedContent() {
-        if (!this.slotRef)
-            return;
-        // Skip if we just updated the content ourselves
-        if (this.isUpdating) {
-            this.isUpdating = false;
-            return;
-        }
-        const assignedNodes = this.slotRef.assignedNodes({ flatten: true });
-        // For text/textarea types, we want to edit the innerHTML of slotted elements
-        if (this.type === 'text' || this.type === 'textarea') {
-            // Find the first element node (skip text nodes that are just whitespace)
-            const elementNode = assignedNodes.find(node => node.nodeType === Node.ELEMENT_NODE);
-            if (elementNode) {
-                // Only update textValue if slotted element changed or we don't have one yet
-                if (this.slottedElement !== elementNode) {
-                    this.slottedElement = elementNode;
-                    this.textValue = elementNode.innerHTML?.trim() || '';
-                    // console.log(`[le-slot "${this.name}"] Read slotted content:`, this.textValue);
-                }
-            }
-            else {
-                // No element, check for direct text content
-                const textContent = assignedNodes
-                    .filter(node => node.nodeType === Node.TEXT_NODE)
-                    .map(node => node.textContent)
-                    .join('')
-                    .trim();
-                if (textContent && !this.textValue) {
-                    this.textValue = textContent;
-                    // console.log(`[le-slot "${this.name}"] Read text content:`, this.textValue);
-                }
-            }
-        }
-    }
-    /**
-     * Validates if a string contains valid HTML
-     */
-    validateHtml(html) {
-        // Empty string is valid
-        if (!html.trim())
-            return true;
-        // Create a template element to parse the HTML
-        const template = document.createElement('template');
-        template.innerHTML = html;
-        // Check that we don't have obviously broken HTML
-        // Count opening and closing tags for common elements
-        const openTags = (html.match(/<[a-z][^>]*(?<!\/)>/gi) || []).length;
-        const closeTags = (html.match(/<\/[a-z][^>]*>/gi) || []).length;
-        const selfClosing = (html.match(/<[a-z][^>]*\/>/gi) || []).length;
-        // Simple validation: opening tags (minus self-closing) should roughly match closing tags
-        // Allow some tolerance for void elements like <br>, <img>, etc.
-        const voidElements = (html.match(/<(br|hr|img|input|meta|link|area|base|col|embed|param|source|track|wbr)[^>]*>/gi) || []).length;
-        const effectiveOpenTags = openTags - selfClosing - voidElements;
-        // If difference is too large, HTML is likely broken
-        if (Math.abs(effectiveOpenTags - closeTags) > 1) {
-            return false;
-        }
-        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.
-     */
-    createSlottedElement() {
-        if (!this.tag)
-            return;
-        // Find the host component (le-card, etc.) by traversing up through shadow DOM
-        // le-slot is inside le-card's shadow DOM, so we need to find le-card's host
-        const rootNode = this.el.getRootNode();
-        if (!(rootNode instanceof ShadowRoot))
-            return;
-        const hostComponent = rootNode.host;
-        if (!hostComponent)
-            return;
-        // Create the new element
-        const newElement = document.createElement(this.tag);
-        newElement.innerHTML = this.textValue;
-        // Set the slot attribute if this is a named slot
-        if (this.name) {
-            newElement.setAttribute('slot', this.name);
-        }
-        // Append to the host component's light DOM
-        hostComponent.appendChild(newElement);
-        // Store reference to the new element
-        this.slottedElement = newElement;
-        // console.log(`[le-slot "${this.name}"] Created new <${this.tag}> element`);
-    }
-    /**
-     * Load available components from Custom Elements Manifest
-     */
-    async loadAvailableComponents() {
-        try {
-            const { manifestFile } = getLeKitConfig();
-            const manifestFileResolved = getAssetPath(`./assets/${manifestFile}`);
-            const response = await fetch(manifestFileResolved);
-            const manifest = await response.json();
-            const components = [];
-            const allowedList = this.allowedComponents?.split(',').map(s => s.trim()) || [];
-            for (const module of manifest.modules) {
-                for (const declaration of module.declarations || []) {
-                    if (declaration.tagName && declaration.customElement) {
-                        // Skip internal components (le-slot, le-component, le-popover)
-                        const isInternal = ['le-slot', 'le-component', 'le-popover'].includes(declaration.tagName);
-                        if (isInternal)
-                            continue;
-                        // If allowedComponents is specified, filter by it
-                        if (allowedList.length > 0 && !allowedList.includes(declaration.tagName)) {
-                            continue;
-                        }
-                        components.push({
-                            tagName: declaration.tagName,
-                            name: this.formatComponentName(declaration.tagName),
-                            description: declaration.description || '',
-                        });
-                    }
-                }
-            }
-            this.availableComponents = components || [];
-        }
-        catch (error) {
-            console.warn('[le-slot] Failed to load component manifest:', error);
-        }
-    }
-    /**
-     * Format a tag name into a display name
-     * e.g., 'le-card' -> 'Card'
-     */
-    formatComponentName(tagName) {
-        return tagName
-            .replace(/^le-/, '')
-            .split('-')
-            .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-            .join(' ');
-    }
-    /**
-     * Add a new component to the slot
-     */
-    addComponent(tagName) {
-        // Find the host component by traversing up through shadow DOM
-        const rootNode = this.el.getRootNode();
-        if (!(rootNode instanceof ShadowRoot))
-            return;
-        const hostComponent = rootNode.host;
-        if (!hostComponent)
-            return;
-        // Create the new component element
-        const newElement = document.createElement(tagName);
-        // Set the slot attribute if this is a named slot
-        if (this.name) {
-            newElement.setAttribute('slot', this.name);
-        }
-        // Append to the host component's light DOM
-        hostComponent.appendChild(newElement);
-        // Emit change event so the page can save
-        this.leSlotChange.emit({
-            name: this.name,
-            value: hostComponent.innerHTML,
-            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: {
-                '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', {
-                'le-slot-header-no-label': !displayLabel,
-                'le-slot-header-text': this.type === 'text',
-                'le-slot-header-error': !this.isValidHtml,
-            }) }, displayLabel && (h("span", { class: "le-slot-label" }, displayLabel, this.required && h("span", { class: "le-slot-required" }, "*"))), !this.isValidHtml && h("span", { class: "le-slot-invalid" }, "\u26A0 Invalid HTML"), this.type === 'slot' && this.adminMode && (h("le-popover", { mode: "default", showClose: true, align: "start", position: "right", popoverTitle: "Add Component", open: this.pickerOpen, onLePopoverOpen: () => (this.pickerOpen = true), onLePopoverClose: () => (this.pickerOpen = false) }, h("le-button", { type: "button", class: "le-slot-button", slot: "trigger", variant: "clear", size: "small", "aria-label": "Add component", "icon-only": true }, h("span", { class: "le-slot-add-btn", slot: "icon-only" }, "+")), h("div", { class: "le-slot-picker" }, this.availableComponents.length > 0 ? (h("ul", { class: "le-slot-picker-list" }, this.availableComponents.map(component => (h("li", { key: component.tagName }, h("button", { class: "le-slot-picker-item", onClick: () => {
-                this.addComponent(component.tagName);
-                this.pickerOpen = false;
-            } }, h("span", { class: "le-slot-picker-name" }, component.name), component.description && h("span", { class: "le-slot-picker-desc" }, component.description))))))) : (h("div", { class: "le-slot-picker-empty" }, "No components available")))))), this.renderContent())) : (
-        // In default mode, just pass through the slot - slotted content renders naturally
-        // Note: We use unnamed slot here because named slots from parent component
-        // are passed as le-slot's light DOM children
-        h("slot", null))));
-    }
-    renderContent() {
-        // Create the slot element with ref for reading assignedNodes
-        // Wrap in a hidden div since slot elements can't have style prop in Stencil
-        // Note: We use unnamed slot here because named slots from parent component
-        // are passed as le-slot's light DOM children
-        const slotElement = (h("div", { class: "hidden-slot" }, h("slot", { ref: el => (this.slotRef = el), onSlotchange: this.handleSlotChange })));
-        switch (this.type) {
-            case 'text':
-                return (h("div", { class: { 'le-slot-input': true, 'has-error': !this.isValidHtml } }, h("le-string-input", { mode: "default", value: this.textValue, placeholder: this.placeholder || `Enter ${this.label || this.name || 'text'}...`, onChange: this.handleTextInput }), slotElement));
-            case 'textarea':
-                return (h("div", { class: { 'le-slot-input': true, 'has-error': !this.isValidHtml } }, h("textarea", { value: this.textValue, placeholder: this.placeholder || `Enter ${this.label || this.name || 'text'}...`, onInput: this.handleTextInput, required: this.required, rows: 3 }), slotElement));
-            case 'slot':
-            default:
-                // Parse slotStyle string into style object if provided
-                const dropzoneStyle = {};
-                if (this.slotStyle) {
-                    this.slotStyle.split(';').forEach(rule => {
-                        const [prop, value] = rule.split(':').map(s => s.trim());
-                        if (prop && value) {
-                            // Convert kebab-case to camelCase for style object
-                            const camelProp = prop.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
-                            dropzoneStyle[camelProp] = value;
-                        }
-                    });
-                }
-                return (h("div", { class: "le-slot-dropzone", style: dropzoneStyle }, h("slot", { ref: el => (this.slotRef = el), onSlotchange: this.handleSlotChange })));
-        }
-    }
-    static get style() { return leSlotDefaultCss(); }
-}, [769, "le-slot", {
-        "type": [1],
-        "name": [1],
-        "label": [1],
-        "description": [1],
-        "allowedComponents": [1, "allowed-components"],
-        "multiple": [4],
-        "required": [4],
-        "placeholder": [1],
-        "tag": [1],
-        "slotStyle": [1, "slot-style"],
-        "adminMode": [32],
-        "textValue": [32],
-        "isValidHtml": [32],
-        "availableComponents": [32],
-        "pickerOpen": [32]
-    }]);
-function defineCustomElement$5() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["le-slot", "le-button", "le-checkbox", "le-component", "le-popover", "le-popup", "le-select", "le-slot", "le-string-input"];
-    components.forEach(tagName => { switch (tagName) {
-        case "le-slot":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), LeSlot);
-            }
-            break;
-        case "le-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement();
-            }
-            break;
-        case "le-checkbox":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$1();
-            }
-            break;
-        case "le-component":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-        case "le-popover":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$7();
-            }
-            break;
-        case "le-popup":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
-            }
-            break;
-        case "le-select":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
-            }
-            break;
-        case "le-slot":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$5();
-            }
-            break;
-        case "le-string-input":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$6();
-            }
-            break;
-    } });
-}
-
-const leSelectCss = () => `:host{display:inline-block;min-width:150px;--le-select-color:var(--le-color-text, #1f2937);--le-select-border-radius:var(--le-radius-md);--le-select-content-padding:var(--le-spacing-2)}:host([disabled]){opacity:0.5;pointer-events:none}:host([full-width]){width:100%}.select-trigger{display:flex;align-items:center;gap:0.5rem;width:100%;padding:0;--le-button-padding:var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-2);font-size:var(--le-select-font-size, 0.875rem);font-family:inherit;line-height:1.4;color:var(--le-select-color);background:var(--le-select-bg, var(--le-color-surface, #fff));border-radius:var(--le-select-border-radius);cursor:pointer;text-align:left;transition:border-color 0.15s ease, box-shadow 0.15s ease}.select-trigger:focus{outline:2px solid var(--le-color-focus);outline-offset:2px}.select-trigger:not(.has-value) .trigger-label{color:color-mix(in srgb, var(--le-color-text-secondary) 66%, transparent)}.trigger-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem}.trigger-icon-end{width:16px;height:16px}.trigger-icon img{width:100%;height:100%;object-fit:contain}.trigger-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--le-color-text)}.trigger-label::not(.has-value){color:var(--le-color-text-disabled, #9ca3af)}le-button::part(icon-end){display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem;margin-left:auto;transition:transform 0.2s ease}le-button::part(icon-end) svg{width:1rem;height:1rem}le-button.is-open::part(icon-end){transform:rotate(180deg)}.search-input::part(container):focus-within{outline:none !important}.search-input{--le-input-radius:var(--le-radius-md)}`;
-
-const LeSelect = /*@__PURE__*/ proxyCustomElement(class LeSelect extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.leChange = createEvent(this, "change", 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 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();
-    }
-    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);
-        }
-        else {
-            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.
-     */
-    async showDropdown() {
-        await this.dropdownEl?.show();
-    }
-    /**
-     * Closes the dropdown.
-     */
-    async hideDropdown() {
-        await this.dropdownEl?.hide();
-    }
-    renderIcon(icon) {
-        if (!icon)
-            return null;
-        if (icon.startsWith('http') || icon.startsWith('/')) {
-            return h("img", { class: "trigger-icon", src: icon, alt: "" });
-        }
-        return h("span", { class: "trigger-icon" }, icon);
-    }
-    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: {
-                '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() ?? '' })));
-    }
-    static get watchers() { return {
-        "value": ["handleValueChange"],
-        "options": ["handleOptionsChange"]
-    }; }
-    static get style() { return leSelectCss(); }
-}, [769, "le-select", {
-        "options": [1],
-        "value": [1032],
-        "placeholder": [1],
-        "disabled": [516],
-        "required": [4],
-        "name": [1],
-        "fullWidth": [4, "full-width"],
-        "size": [513],
-        "variant": [513],
-        "searchable": [4],
-        "emptyText": [1, "empty-text"],
-        "open": [1540],
-        "selectedOption": [32],
-        "searchQuery": [32],
-        "showDropdown": [64],
-        "hideDropdown": [64]
-    }, undefined, {
-        "value": ["handleValueChange"],
-        "options": ["handleOptionsChange"]
-    }]);
-function defineCustomElement$4() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["le-select", "le-button", "le-checkbox", "le-component", "le-dropdown-base", "le-popover", "le-popup", "le-select", "le-slot", "le-string-input"];
-    components.forEach(tagName => { switch (tagName) {
-        case "le-select":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), LeSelect);
-            }
-            break;
-        case "le-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement();
-            }
-            break;
-        case "le-checkbox":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$1();
-            }
-            break;
-        case "le-component":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-        case "le-dropdown-base":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$8();
-            }
-            break;
-        case "le-popover":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$7();
-            }
-            break;
-        case "le-popup":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
-            }
-            break;
-        case "le-select":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
-            }
-            break;
-        case "le-slot":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$5();
-            }
-            break;
-        case "le-string-input":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$6();
-            }
-            break;
-    } });
-}
-
-const lePopupCss = () => `:host{display:contents}.le-popup-dialog{position:fixed;z-index:100;top:0;right:0;bottom:0;left:0;padding:0;border:none;background:transparent;max-width:none;max-height:none;overflow:visible;--_popup-min-width:var(--le-popup-min-width, 320px);--_popup-max-width:var(--le-popup-max-width, min(500px, 90vw));--_popup-min-height:var(--le-popup-min-height, auto)}.le-popup-dialog::backdrop{background:var(--le-popup-backdrop-color, rgba(0, 0, 0, 0.5));animation:le-popup-backdrop-fade 0.2s ease-out}@keyframes le-popup-backdrop-fade{from{opacity:0}to{opacity:1}}.le-popup-position-center{margin:auto}.le-popup-position-top{margin:var(--le-space-2xl, 48px) auto auto auto}.le-popup-position-top-left{margin:var(--le-space-lg, 24px) auto auto var(--le-space-lg, 24px)}.le-popup-position-top-right{margin:var(--le-space-lg, 24px) var(--le-space-lg, 24px) auto auto}.le-popup-position-bottom{margin:auto auto var(--le-space-2xl, 48px) auto}.le-popup-position-bottom-left{margin:auto auto var(--le-space-lg, 24px) var(--le-space-lg, 24px)}.le-popup-position-bottom-right{margin:auto var(--le-space-lg, 24px) var(--le-space-lg, 24px) auto}.le-popup-container{display:flex;flex-direction:column;min-width:var(--_popup-min-width);max-width:var(--_popup-max-width);min-height:var(--_popup-min-height);max-height:calc(100vh - var(--le-space-2xl, 48px) * 2);background:var(--le-color-surface, #ffffff);border:1px solid var(--le-color-border, #e0e0e0);border-radius:var(--le-radius-lg, 12px);box-shadow:var(--le-shadow-xl, 0 8px 32px rgba(0, 0, 0, 0.15));overflow:hidden;font-family:var(--le-font-family, system-ui, -apple-system, sans-serif);color:var(--le-color-text, #333);animation:le-popup-appear 0.2s ease-out}@keyframes le-popup-appear{from{opacity:0;transform:scale(0.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}.le-popup-header{flex-shrink:0;padding:var(--le-space-md, 16px) var(--le-space-lg, 24px);border-bottom:1px solid var(--le-color-border, #e0e0e0);background:var(--le-color-surface-alt, #f9f9f9);font-size:var(--le-font-size-lg, 1.125rem);font-weight:var(--le-font-weight-semibold, 600);color:var(--le-color-text, #333)}.le-popup-body{flex:1;padding:var(--le-space-lg, 24px);overflow-y:auto}.le-popup-message{margin:0;font-size:var(--le-font-size-md, 1rem);line-height:var(--le-line-height-relaxed, 1.6);color:var(--le-color-text, #333)}.le-popup-message+::slotted(*){margin-top:var(--le-space-md, 16px)}.le-popup-input{display:block;width:100%;margin-top:var(--le-space-md, 16px);padding:var(--le-space-sm, 8px) var(--le-space-md, 16px);font-family:inherit;font-size:var(--le-font-size-md, 1rem);color:var(--le-color-text, #333);background:var(--le-color-background, #fff);border:1px solid var(--le-color-border, #e0e0e0);border-radius:var(--le-radius-md, 8px);outline:none;transition:border-color var(--le-transition-fast, 0.15s ease),
-              box-shadow var(--le-transition-fast, 0.15s ease);box-sizing:border-box}.le-popup-input:focus{border-color:var(--le-color-primary, #2196f3);box-shadow:0 0 0 3px var(--le-color-primary-light, rgba(33, 150, 243, 0.2))}.le-popup-input::placeholder{color:var(--le-color-text-muted, #999)}.le-popup-footer{flex-shrink:0;display:flex;justify-content:flex-end;gap:var(--le-space-sm, 8px);padding:var(--le-space-md, 16px) var(--le-space-lg, 24px);border-top:1px solid var(--le-color-border, #e0e0e0);background:var(--le-color-surface-alt, #f9f9f9)}.le-popup-btn{min-width:80px}@media (max-width: 480px){.le-popup-container{min-width:calc(100vw - var(--le-space-md, 16px) * 2);max-width:calc(100vw - var(--le-space-md, 16px) * 2)}.le-popup-footer{flex-direction:column-reverse}.le-popup-btn{width:100%}}`;
-
-const LePopup = /*@__PURE__*/ proxyCustomElement(class LePopup extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.leConfirm = createEvent(this, "leConfirm", 7);
-        this.leCancel = createEvent(this, "leCancel", 7);
-        this.leOpen = createEvent(this, "leOpen", 7);
-        this.leClose = createEvent(this, "leClose", 7);
-    }
-    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;
-    }
-    componentDidLoad() {
-        // Native dialog handles Escape key automatically when modal
-        // We just need to listen for the cancel event
-        this.dialogEl?.addEventListener('cancel', this.handleDialogCancel);
-    }
-    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
-     */
-    async show() {
-        return new Promise(resolve => {
-            this.resolvePromise = resolve;
-            this.inputValue = this.defaultValue;
-            this.open = true;
-            // Use requestAnimationFrame to ensure the dialog element is rendered
-            requestAnimationFrame(() => {
-                if (this.dialogEl) {
-                    if (this.modal) {
-                        this.dialogEl.showModal();
-                    }
-                    else {
-                        this.dialogEl.show();
-                    }
-                    this.leOpen.emit();
-                    // Focus input for prompt type
-                    if (this.type === 'prompt' && this.inputEl) {
-                        this.inputEl.focus();
-                        this.inputEl.select();
-                    }
-                }
-            });
-        });
-    }
-    /**
-     * Closes the popup with a result
-     */
-    async hide(confirmed = false) {
-        const result = {
-            confirmed,
-            value: this.type === 'prompt' ? this.inputValue : undefined,
-        };
-        this.dialogEl?.close();
-        this.open = false;
-        this.leClose.emit(result);
-        if (this.resolvePromise) {
-            this.resolvePromise(result);
-            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}"]`);
-    }
-    renderHeader() {
-        if (this.hasSlot('header')) {
-            return (h("div", { class: "le-popup-header", part: "header" }, h("slot", { name: "header" })));
-        }
-        if (this.popupTitle) {
-            return (h("div", { class: "le-popup-header", part: "header" }, this.popupTitle));
-        }
-        return null;
-    }
-    renderBody() {
-        return (h("div", { class: "le-popup-body", part: "body" }, this.message && h("p", { class: "le-popup-message" }, this.message), this.type === 'prompt' && (h("input", { type: "text", class: "le-popup-input", part: "input", placeholder: this.placeholder, value: this.inputValue, onInput: this.handleInputChange, onKeyDown: this.handleKeyDown, ref: el => (this.inputEl = el) })), h("le-slot", { name: "", tag: "div", description: "Custom popup content", type: "slot" }, h("slot", null))));
-    }
-    renderFooter() {
-        if (this.hasSlot('footer')) {
-            return (h("div", { class: "le-popup-footer", part: "footer" }, h("slot", { name: "footer" })));
-        }
-        // For custom type without footer slot, don't render default buttons
-        if (this.type === 'custom') {
-            return null;
-        }
-        return (h("div", { class: "le-popup-footer", part: "footer" }, (this.type === 'confirm' || this.type === 'prompt') && (h("le-button", { variant: "outlined", part: "button-cancel", class: "le-popup-btn", onClick: this.handleCancel }, this.cancelText)), h("le-button", { variant: "solid", part: "button-confirm", class: "le-popup-btn", onClick: this.handleConfirm }, this.confirmText)));
-    }
-    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()))));
-    }
-    static get style() { return lePopupCss(); }
-}, [769, "le-popup", {
-        "mode": [1537],
-        "open": [1540],
-        "type": [1],
-        "popupTitle": [1, "popup-title"],
-        "message": [1],
-        "modal": [4],
-        "position": [1],
-        "confirmText": [1, "confirm-text"],
-        "cancelText": [1, "cancel-text"],
-        "placeholder": [1],
-        "defaultValue": [1, "default-value"],
-        "closeOnBackdrop": [4, "close-on-backdrop"],
-        "inputValue": [32],
-        "show": [64],
-        "hide": [64]
-    }]);
-function defineCustomElement$3() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["le-popup", "le-button", "le-checkbox", "le-component", "le-popover", "le-popup", "le-select", "le-slot", "le-string-input"];
-    components.forEach(tagName => { switch (tagName) {
-        case "le-popup":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), LePopup);
-            }
-            break;
-        case "le-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement();
-            }
-            break;
-        case "le-checkbox":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$1();
-            }
-            break;
-        case "le-component":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-        case "le-popover":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$7();
-            }
-            break;
-        case "le-popup":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
-            }
-            break;
-        case "le-select":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
-            }
-            break;
-        case "le-slot":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$5();
-            }
-            break;
-        case "le-string-input":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$6();
-            }
-            break;
-    } });
-}
-
-const leComponentCss = () => `:host{display:contents}:host(.admin-mode){display:block}.le-component-wrapper{position:relative;border:2px dashed var(--le-admin-border-color, #90caf9);border-radius:var(--le-radius-md, 8px);background:var(--le-admin-bg, rgba(144, 202, 249, 0.05));transition:border-color 0.2s ease, box-shadow 0.2s ease}.le-component-wrapper:hover{border-color:var(--le-admin-border-hover, #42a5f5);box-shadow:0 0 0 2px var(--le-admin-glow, rgba(66, 165, 245, 0.2))}.le-component-header{display:flex;align-items:center;justify-content:space-between;gap:var(--le-spacing-1, 4px);padding:0 0 0 var(--le-spacing-1, 4px);background:var(--le-admin-header-bg, rgba(144, 202, 249, 0.15));border-bottom:1px solid var(--le-admin-border-color, #90caf9);border-radius:var(--le-radius-md, 8px) var(--le-radius-md, 8px) 0 0;font-size:var(--le-font-size-xs, 11px)}.le-component-name{font-weight:var(--le-font-weight-medium, 500);color:var(--le-admin-text, #1976d2);text-transform:capitalize;text-align:start;overflow:hidden;width:0;flex:1 1 0%}.le-component-content{padding:var(--le-space-xs, 4px)}.le-component-trigger{font-size:24px;line-height:0px;width:12px;height:12px}.le-component-button{width:20px}.property-editor{display:flex;flex-direction:column;gap:var(--le-space-sm, 8px);max-width:380px}.property-field{display:flex;flex-direction:column;gap:var(--le-space-xs, 4px)}.property-field label{display:flex;flex-direction:column;gap:2px;font-size:var(--le-font-size-sm, 13px);font-weight:var(--le-font-weight-medium, 500);color:var(--le-color-text, #333)}.property-hint{font-size:var(--le-font-size-xs, 11px);font-weight:normal;color:var(--le-color-text-secondary, #666);line-height:1.3}.property-field input[type="text"],.property-field input[type="number"],.property-field select{padding:var(--le-space-xs, 4px) var(--le-space-sm, 8px);border:1px solid var(--le-color-border, #ddd);border-radius:var(--le-radius-md, 7px);font-size:var(--le-font-size-sm, 13px);font-family:inherit;background:var(--le-color-surface, #fff);color:var(--le-color-text, #333);transition:border-color 0.15s ease, box-shadow 0.15s ease}.property-field input:focus,.property-field select:focus{outline:none;border-color:var(--le-color-primary, #1976d2);box-shadow:0 0 0 2px var(--le-color-primary-light, rgba(25, 118, 210, 0.2))}.property-field--checkbox{flex-direction:column}.property-field--checkbox label{flex-direction:row;align-items:center;gap:var(--le-space-sm, 8px);cursor:pointer}.property-field--checkbox input[type="checkbox"]{width:16px;height:16px;margin:0;cursor:pointer;accent-color:var(--le-color-primary, #1976d2)}.property-field--checkbox .property-hint{margin-left:24px}.no-properties{margin:0;padding:var(--le-space-sm, 8px);font-size:var(--le-font-size-sm, 13px);color:var(--le-color-text-secondary, #666);text-align:center}.property-editor-container{display:flex;flex-direction:column;gap:var(--le-space-md, 12px)}.property-editor-actions{padding-top:var(--le-space-sm, 8px);border-top:1px solid var(--le-color-border, #e5e5e5)}.delete-component-btn{display:flex;align-items:center;justify-content:center;gap:var(--le-space-xs, 4px);width:100%;padding:var(--le-space-sm, 8px) var(--le-space-md, 12px);border:1px solid var(--le-color-danger, #e53935);border-radius:var(--le-radius-md, 6px);background:transparent;color:var(--le-color-danger, #e53935);font-size:var(--le-font-size-sm, 13px);font-weight:500;cursor:pointer;transition:background-color 0.15s, color 0.15s}.delete-component-btn:hover{background:var(--le-color-danger, #e53935);color:white}.delete-component-btn:active{opacity:0.9}`;
-
-const LeComponent = /*@__PURE__*/ proxyCustomElement(class LeComponent extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-    }
-    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
-        this.findHostElement();
-        this.disconnectModeObserver = observeModeChanges(this.el, mode => {
-            this.adminMode = mode === 'admin';
-            // Load metadata and refresh property values only when entering admin mode
-            if (this.adminMode) {
-                if (!this.componentMeta) {
-                    this.loadComponentMetadata();
-                }
-                else {
-                    this.readPropertyValues();
-                }
-            }
-        });
-    }
-    /**
-     * Find the host element by traversing up through shadow DOM
-     */
-    findHostElement() {
-        // Get the shadow root that contains this le-component
-        const rootNode = this.el.getRootNode();
-        if (rootNode instanceof ShadowRoot) {
-            // The host of this shadow root is our target component (e.g., le-card)
-            this.hostElement = rootNode.host;
-        }
-    }
-    componentDidLoad() {
-        // Read initial property values from the host element
-        this.readPropertyValues();
-    }
-    disconnectedCallback() {
-        this.disconnectModeObserver?.();
-    }
-    /**
-     * Formats a tag name into a display name
-     * e.g., 'le-card' -> 'Card'
-     */
-    formatDisplayName(tagName) {
-        if (!tagName || typeof tagName !== 'string')
-            return 'unknown';
-        return tagName
-            .replace(/^le-/, '') // Remove 'le-' prefix
-            .split('-')
-            .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-            .join(' ');
-    }
-    /**
-     * Load component metadata from the Custom Elements Manifest
-     */
-    async loadComponentMetadata() {
-        try {
-            // Fetch the manifest from configured URL
-            const { manifestFile } = getLeKitConfig();
-            const manifestFileResolved = getAssetPath(`./assets/${manifestFile}`);
-            const response = await fetch(manifestFileResolved);
-            const manifest = await response.json();
-            // Find the component definition
-            for (const module of manifest.modules) {
-                for (const declaration of module.declarations || []) {
-                    if (declaration.tagName === this.component) {
-                        const attributes = (declaration.attributes || []).filter((attr) => !this.isInternalAttribute(attr.name));
-                        this.componentMeta = {
-                            tagName: declaration.tagName,
-                            description: declaration.description,
-                            attributes,
-                        };
-                        // console.log(`[le-component] Loaded metadata for ${this.component}:`, this.componentMeta);
-                        // Read property values after metadata is loaded
-                        this.readPropertyValues();
-                        return;
-                    }
-                }
-            }
-            // console.warn(`[le-component] No metadata found for component: ${this.component}`);
-        }
-        catch (error) {
-            // console.warn(`[le-component] Failed to load metadata for component: ${this.component}`, error);
-        }
-    }
-    /**
-     * Check if an attribute is internal (should not be shown in editor)
-     */
-    isInternalAttribute(name) {
-        const internalAttrs = ['mode', 'theme', 'class', 'style', 'id', 'slot'];
-        return internalAttrs.includes(name);
-    }
-    /**
-     * Read current property values from the host element
-     */
-    readPropertyValues() {
-        if (!this.hostElement || !this.componentMeta)
-            return;
-        const values = {};
-        for (const attr of this.componentMeta.attributes) {
-            const value = this.hostElement.getAttribute(attr.name);
-            values[attr.name] = this.parseAttributeValue(value, attr.type?.text);
-        }
-        this.propertyValues = values;
-    }
-    /**
-     * Parse an attribute value based on its type
-     */
-    parseAttributeValue(value, type) {
-        if (value === null)
-            return undefined;
-        if (type === 'boolean') {
-            return value !== null && value !== 'false';
-        }
-        if (type === 'number') {
-            return parseFloat(value);
-        }
-        return value;
-    }
-    /**
-     * Handle property value changes from the editor
-     */
-    handlePropertyChange(attrName, value, type) {
-        if (!this.hostElement)
-            return;
-        // Update the host element's attribute
-        if (type === 'boolean') {
-            if (value) {
-                this.hostElement.setAttribute(attrName, '');
-            }
-            else {
-                this.hostElement.removeAttribute(attrName);
-            }
-        }
-        else if (value === undefined || value === '') {
-            this.hostElement.removeAttribute(attrName);
-        }
-        else {
-            this.hostElement.setAttribute(attrName, String(value));
-        }
-        // Update local state
-        this.propertyValues = { ...this.propertyValues, [attrName]: value };
-        // update the host element the way the parent element mutation observer would catch it?
-    }
-    /**
-     * Delete this component from the DOM
-     */
-    deleteComponent() {
-        if (!this.hostElement)
-            return;
-        // Confirm deletion
-        const name = this.displayName || this.formatDisplayName(this.component);
-        if (!leConfirm(`Delete this ${name}?`))
-            return;
-        // Remove the host element from its parent
-        const parent = this.hostElement.parentElement;
-        if (parent) {
-            this.hostElement.remove();
-        }
-    }
-    /**
-     * Render the property editor form
-     */
-    renderPropertyEditor() {
-        const hasProperties = this.componentMeta && this.componentMeta.attributes.length > 0;
-        return (h("div", { class: "property-editor-container" }, hasProperties ? (h("form", { class: "property-editor", onSubmit: e => e.preventDefault() }, this.componentMeta.attributes.map(attr => this.renderPropertyField(attr)))) : (h("p", { class: "no-properties" }, "No editable properties")), h("div", { class: "property-editor-actions" }, h("le-button", { type: "button", variant: "outlined", color: "danger", "full-width": true, onClick: () => this.deleteComponent() }, h("span", { slot: "icon-start" }, "\uD83D\uDDD1\uFE0F"), h("span", null, "Delete Component")))));
-    }
-    /**
-     * Render a single property field based on its type
-     */
-    renderPropertyField(attr) {
-        const value = this.propertyValues[attr.name];
-        const type = attr.type?.text || 'string';
-        // Check if type is a union of string literals (e.g., "'default' | 'outlined' | 'elevated'")
-        const enumMatch = type.match(/^'[^']+'/);
-        if (enumMatch) {
-            const options = type.split('|').map(opt => opt.trim().replace(/'/g, ''));
-            return (h("div", { class: "property-field" }, h("label", { htmlFor: `prop-${attr.name}` }, attr.name, attr.description && h("span", { class: "property-hint" }, attr.description)), h("le-select", { options: [...options.map(opt => ({ label: opt, value: opt }))], "full-width": true, value: value ?? attr.default?.replace(/'/g, ''), placeholder: attr.default?.replace(/'/g, ''), onChange: (e) => this.handlePropertyChange(attr.name, e.detail.value, type) })));
-        }
-        // Boolean type
-        if (type === 'boolean') {
-            return (h("div", { class: "property-field property-field--checkbox" }, h("le-checkbox", { name: `prop-${attr.name}`, checked: value === true || value === '', onChange: e => this.handlePropertyChange(attr.name, e.target.checked, type) }, attr.name, attr.description && h("div", { slot: "description" }, attr.description))));
-        }
-        // Number type
-        if (type === 'number') {
-            return (h("div", { class: "property-field" }, h("label", { htmlFor: `prop-${attr.name}` }, attr.name, attr.description && h("span", { class: "property-hint" }, attr.description)), h("input", { type: "number", id: `prop-${attr.name}`, value: value ?? '', placeholder: attr.default, onChange: e => this.handlePropertyChange(attr.name, e.target.value, type) })));
-        }
-        // Default: string/text input
-        return (h("div", { class: "property-field" }, h("le-string-input", { name: `prop-${attr.name}`, label: attr.name, value: value ?? '', placeholder: attr.default?.replace(/'/g, ''), onChange: (e) => this.handlePropertyChange(attr.name, e.detail.value, type) }, h("span", { slot: "description" }, attr.description))));
-    }
-    render() {
-        const name = this.displayName || this.formatDisplayName(this.component);
-        // In default mode, just pass through content with host classes
-        if (!this.adminMode) {
-            return (h(Host, { class: classnames(this.component, this.hostClass), style: this.hostStyle }, h("slot", null)));
-        }
-        // In admin mode, show wrapper with header and settings
-        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"]; }
-    static get style() { return leComponentCss(); }
-}, [769, "le-component", {
-        "component": [1],
-        "displayName": [1, "display-name"],
-        "hostClass": [1, "host-class"],
-        "hostStyle": [16],
-        "adminMode": [32],
-        "componentMeta": [32],
-        "propertyValues": [32]
-    }]);
-function defineCustomElement$2() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["le-component", "le-button", "le-checkbox", "le-component", "le-dropdown-base", "le-popover", "le-popup", "le-select", "le-slot", "le-string-input"];
-    components.forEach(tagName => { switch (tagName) {
-        case "le-component":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), LeComponent);
-            }
-            break;
-        case "le-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement();
-            }
-            break;
-        case "le-checkbox":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$1();
-            }
-            break;
-        case "le-component":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-        case "le-dropdown-base":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$8();
-            }
-            break;
-        case "le-popover":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$7();
-            }
-            break;
-        case "le-popup":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
-            }
-            break;
-        case "le-select":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
-            }
-            break;
-        case "le-slot":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$5();
-            }
-            break;
-        case "le-string-input":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$6();
-            }
-            break;
-    } });
-}
-
-const leCheckboxCss = () => `:host{display:block;--le-checkbox-size:18px;--le-checkbox-color:var(--le-color-primary, #007bff);--le-checkbox-label-color:var(--le-color-text-primary, #333);--le-checkbox-desc-color:var(--le-color-text-secondary, #666);--le-checkbox-border-radius:var(--le-radius-sm, 2px);--le-checkbox-marker-color:var(--le-color-surface, #fff)}.le-checkbox-wrapper{display:flex;flex-direction:column;gap:4px}.le-checkbox-label{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;user-select:none}:host([disabled]) .le-checkbox-label{cursor:not-allowed;opacity:0.6}.le-checkbox-input{display:flex;align-items:center;justify-content:center;min-height:1.4em}input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:var(--le-checkbox-size);height:var(--le-checkbox-size);border:var(--le-border-width, 2px) solid var(--le-checkbox-color);border-radius:var(--le-checkbox-border-radius);margin:0;margin-top:2px;position:relative;cursor:inherit;background-color:transparent;transition:background-color 0.2s, border-color 0.2s}input[type="checkbox"]:checked{background-color:var(--le-checkbox-color)}input[type="checkbox"]:checked::after{content:'';position:absolute;left:0;top:0;bottom:calc(var(--le-checkbox-size) / 5);right:0;margin:auto;width:calc(var(--le-checkbox-size) / 4);height:calc(var(--le-checkbox-size) / 2);border:solid var(--le-checkbox-marker-color, #fff);border-width:0 calc(var(--le-checkbox-size) / 10) calc(var(--le-checkbox-size) / 10) 0;transform:rotate(45deg)}input[type="checkbox"]:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px}.le-checkbox-text{flex:1;flex-wrap:wrap;color:var(--le-checkbox-label-color);line-height:1.5;text-align:start}.le-checkbox-description{margin-left:calc(var(--le-checkbox-size) + 8px);font-size:0.875em;color:var(--le-checkbox-desc-color);line-height:1.4}:host [slot="description"]{margin:0}`;
-
-const LeCheckbox = /*@__PURE__*/ proxyCustomElement(class LeCheckbox extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.leChange = createEvent(this, "change", 7);
-    }
-    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" }))))));
-    }
-    static get style() { return leCheckboxCss(); }
-}, [769, "le-checkbox", {
-        "checked": [1540],
-        "disabled": [4],
-        "name": [1],
-        "value": [1],
-        "externalId": [1, "external-id"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["le-checkbox", "le-button", "le-checkbox", "le-component", "le-popover", "le-popup", "le-select", "le-slot", "le-string-input"];
-    components.forEach(tagName => { switch (tagName) {
-        case "le-checkbox":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), LeCheckbox);
-            }
-            break;
-        case "le-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement();
-            }
-            break;
-        case "le-checkbox":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$1();
-            }
-            break;
-        case "le-component":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-        case "le-popover":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$7();
-            }
-            break;
-        case "le-popup":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
-            }
-            break;
-        case "le-select":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
-            }
-            break;
-        case "le-slot":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$5();
-            }
-            break;
-        case "le-string-input":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$6();
-            }
-            break;
-    } });
-}
-
-const leButtonCss = () => `:host{display:inline-block;--le-button-border-radius:var(--le-radius-md);--le-button-padding-x:var(--le-spacing-3);--le-button-padding-y:var(--le-spacing-1);--le-button-padding:var(--le-button-padding-y) var(--le-button-padding-x);--le-button-small-padding:0.25rem;--le-button-font-size:var(--le-font-size-md);--le-button-font-weight:var(--le-font-weight-medium);--le-button-transition:var(--le-transition-fast);--le-transition-easing:ease-in-out;--le-button-icon-aspect-ratio:1;--le-button-color:var(--le-color-primary-contrast);--_btn-bg:var(--le-color-primary);--_btn-bg-hover:var(--le-color-primary-dark);--_btn-bg-system:var(--le-color-black);--_btn-color:var(--le-button-color);--_btn-border-color:var(--le-color-primary)}:host([full-width]){display:block;width:100%}.le-button-container{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--le-spacing-3);width:100%;padding:var(--le-button-padding);border:1px solid var(--_btn-border-color);border-radius:var(--le-button-border-radius);background:var(--_btn-bg);color:var(--_btn-color);font-family:var(--le-font-family-base);font-size:var(--le-button-font-size);font-weight:var(--le-button-font-weight);line-height:var(--le-line-height-tight);text-decoration:none;cursor:pointer;transition:background-color var(--le-button-transition) var(--le-transition-easing),
-    border-color var(--le-button-transition) var(--le-transition-easing),
-    box-shadow var(--le-button-transition) var(--le-transition-easing),
-    transform var(--le-button-transition) var(--le-transition-easing)}.le-button-container:hover:not(:disabled){background:var(--_btn-bg-hover);border-color:var(--_btn-bg-hover)}.le-button-container:active:not(:disabled){box-shadow:inset 0 0 5px color-mix(in srgb, var(--_btn-bg) 50%, transparent)}.le-button-container:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px}.le-button-container:disabled{opacity:0.5;cursor:not-allowed}.le-button-label{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--le-spacing-2)}:host(.color-primary){--_btn-bg:var(--le-color-primary);--_btn-bg-hover:var(--le-color-primary-dark);--_btn-color:var(--le-button-color);--_btn-border-color:var(--le-color-primary)}:host(.color-secondary){--_btn-bg:var(--le-color-secondary);--_btn-bg-hover:var(--le-color-secondary-dark);--_btn-color:var(--le-color-secondary-contrast);--_btn-border-color:var(--le-color-secondary)}:host(.color-success){--_btn-bg:var(--le-color-success);--_btn-bg-hover:var(--le-color-success-dark);--_btn-color:var(--le-color-success-contrast);--_btn-border-color:var(--le-color-success)}:host(.color-warning){--_btn-bg:var(--le-color-warning);--_btn-bg-hover:var(--le-color-warning-dark);--_btn-color:var(--le-color-warning-contrast);--_btn-border-color:var(--le-color-warning)}:host(.color-danger){--_btn-bg:var(--le-color-danger);--_btn-bg-hover:var(--le-color-danger-dark);--_btn-color:var(--le-color-danger-contrast);--_btn-border-color:var(--le-color-danger)}:host(.color-info){--_btn-bg:var(--le-color-info);--_btn-bg-hover:var(--le-color-info-dark);--_btn-color:var(--le-color-info-contrast);--_btn-border-color:var(--le-color-info)}:host(.variant-solid) .le-button-container{box-shadow:var(--le-shadow-sm)}:host(.variant-solid) .le-button-container:hover:not(:disabled){box-shadow:var(--le-shadow-md)}:host(.variant-outlined) .le-button-container{background:transparent;color:var(--_btn-bg);border-color:color-mix(in srgb, var(--_btn-border-color) 33%, transparent)}:host(.variant-outlined) .le-button-container:hover:not(:disabled){border-color:var(--_btn-border-color)}:host(.variant-clear) .le-button-container{background:transparent;color:var(--_btn-bg);border-color:transparent}:host(.variant-clear) .le-button-container:hover:not(:disabled){background:var(--le-color-gray-100);border-color:transparent}:host(.variant-system) .le-button-container{background:transparent;color:var(--_btn-bg-system);border-color:transparent}:host(.size-small){--le-button-padding-x:0.4rem;--le-button-padding-y:0.3rem;--le-button-padding-top:0.35rem;--le-button-font-size:var(--le-button-small-font-size, var(--le-font-size-xs))}:host(.size-large){--le-button-padding-x:0.9rem;--le-button-padding-y:0.6rem;--le-button-font-size:var(--le-font-size-xl)}:host(.full-width){display:block;width:100%}:host(.selected) .le-button-container{box-shadow:inset 0 0 4px var(--le-color-shadow)}:host(.variant-outlined.selected) .le-button-container,:host(.variant-clear.selected) .le-button-container{background:var(--_btn-bg);color:var(--_btn-color)}:host(.icon-only) .le-button-container{padding:var(--le-button-icon-only-padding, 0.5rem);padding-bottom:var(--le-button-icon-only-padding, 0.6rem);aspect-ratio:var(--le-button-icon-aspect-ratio, 1)}:host(.icon-only.size-small) .le-button-container{padding:var(--le-button-small-padding, 0.25rem)}:host(.icon-only.size-large) .le-button-container{padding:0.75rem}:host(.icon-only) .content{display:none}.content{display:inline}.content:empty{display:none}.icon-start,.icon-only,.icon-end{display:flex;align-items:center;justify-content:center}.icon-start:empty,.icon-only:empty,.icon-end:empty{display:none}::slotted([slot="icon-start"]),::slotted([slot="icon-only"]),::slotted([slot="icon-end"]){display:flex;align-items:center;justify-content:center;width:1.125em;height:1.125em}.le-button-align-start{justify-content:flex-start}.le-button-align-center{justify-content:center}.le-button-align-space-between{justify-content:space-between}.le-button-align-end{justify-content:flex-end}`;
-
-const LeButton = /*@__PURE__*/ proxyCustomElement(class LeButton extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.leClick = createEvent(this, "click", 7);
-    }
-    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,
-            'full-width': this.fullWidth,
-            'icon-only': this.iconOnly,
-            'disabled': this.disabled,
-        });
-        const TagType = this.href ? 'a' : 'button';
-        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))))))));
-    }
-    static get style() { return leButtonCss(); }
-}, [769, "le-button", {
-        "mode": [1537],
-        "variant": [1],
-        "color": [1],
-        "size": [1],
-        "selected": [4],
-        "fullWidth": [516, "full-width"],
-        "iconOnly": [1, "icon-only"],
-        "iconStart": [1, "icon-start"],
-        "iconEnd": [1, "icon-end"],
-        "disabled": [4],
-        "type": [1],
-        "href": [1],
-        "target": [1],
-        "align": [1]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["le-button", "le-button", "le-checkbox", "le-component", "le-popover", "le-popup", "le-select", "le-slot", "le-string-input"];
-    components.forEach(tagName => { switch (tagName) {
-        case "le-button":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), LeButton);
-            }
-            break;
-        case "le-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement();
-            }
-            break;
-        case "le-checkbox":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$1();
-            }
-            break;
-        case "le-component":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-        case "le-popover":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$7();
-            }
-            break;
-        case "le-popup":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
-            }
-            break;
-        case "le-select":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
-            }
-            break;
-        case "le-slot":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$5();
-            }
-            break;
-        case "le-string-input":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$6();
-            }
-            break;
-    } });
-}
-
-export { LeButton as L, defineCustomElement$5 as a, defineCustomElement$4 as b, defineCustomElement$3 as c, defineCustomElement$6 as d, defineCustomElement$2 as e, defineCustomElement$1 as f, defineCustomElement as g, LeCheckbox as h, LeComponent as i, LePopup as j, LeSelect as k, LeSlot as l, LeStringInput as m };
-//# sourceMappingURL=le-button2.js.map
-
-//# sourceMappingURL=le-button2.js.map