le-kit 0.1.5 → 0.1.6

package/dist/esm/le-button_6.entry.js

@@ -0,0 +1,1195 @@
+import { r as registerInstance, f as createEvent, h as getElement, i as h, F as Fragment, j as getAssetPath, H as Host } from './index-CdjJ98OT.js';
+import { c as classnames, o as observeModeChanges } from './utils-CzfSUhYB.js';
+
+const leButtonDefaultCss = ":host{display:inline-block;--le-button-border-radius:var(--le-radius-md);--le-button-padding-x:0.4rem;--le-button-padding-y:0.4rem;--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-button-icon-aspect-ratio:1;--_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-color-primary-contrast);--_btn-border-color:var(--le-color-primary)}:host([full-width]){display:block;width:100%}.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--le-spacing-3);width:100%;padding:var(--le-button-padding-y) var(--le-button-padding-x);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),\n    border-color var(--le-button-transition) var(--le-transition-easing),\n    box-shadow var(--le-button-transition) var(--le-transition-easing),\n    transform var(--le-button-transition) var(--le-transition-easing)}.button:hover:not(:disabled){background:var(--_btn-bg-hover);border-color:var(--_btn-bg-hover)}.button:active:not(:disabled){transform:translateY(1px)}.button:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px}.button:disabled{opacity:0.5;cursor:not-allowed}:host>le-component.color-primary{--_btn-bg:var(--le-color-primary);--_btn-bg-hover:var(--le-color-primary-dark);--_btn-color:var(--le-color-primary-contrast);--_btn-border-color:var(--le-color-primary)}:host>le-component.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>le-component.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>le-component.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>le-component.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>le-component.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>le-component.variant-solid .button{box-shadow:var(--le-shadow-sm)}:host>le-component.variant-solid .button:hover:not(:disabled){box-shadow:var(--le-shadow-md)}:host>le-component.variant-outlined .button{background:transparent;color:var(--_btn-bg);border-color:var(--_btn-border-color)}:host>le-component.variant-outlined .button:hover:not(:disabled){background:var(--_btn-bg);color:var(--_btn-color)}:host>le-component.variant-clear .button{background:transparent;color:var(--_btn-bg);border-color:transparent}:host>le-component.variant-clear .button:hover:not(:disabled){background:var(--le-color-gray-100);border-color:transparent}:host>le-component.variant-system .button{background:transparent;color:var(--_btn-bg-system);border-color:transparent}:host>le-component.size-small .button{--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>le-component.size-large .button{--le-button-padding-x:0.9rem;--le-button-padding-y:0.6rem;--le-button-font-size:var(--le-font-size-xl)}:host>le-component.full-width{display:block;width:100%}:host>le-component.selected .button{box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.2)}:host>le-component.variant-outlined.selected .button,:host>le-component.variant-clear.selected .button{background:var(--_btn-bg);color:var(--_btn-color)}:host>le-component.icon-only .button{padding:0.5rem;padding-bottom:0.6rem;aspect-ratio:var(--le-button-icon-aspect-ratio, 1)}:host>le-component.icon-only.size-small .button{padding:var(--le-button-small-padding, 0.25rem)}:host>le-component.icon-only.size-large .button{padding:0.75rem}:host>le-component.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}";
+
+const LeButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.leClick = createEvent(this, "click");
+    }
+    get el() { return getElement(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;
+    /**
+     * Whether the button displays only an icon (square aspect ratio)
+     */
+    iconOnly = false;
+    /**
+     * 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;
+    /**
+     * 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("le-component", { key: '363dbfddf4a765bfd6f36ed16d0912e281153806', component: "le-button", hostClass: classes }, h(TagType, { key: 'e112acdff4278e976ad767bd1ea7c9ced5e85f43', class: "button", part: "button", ...attrs, onClick: this.handleClick }, this.iconOnly ? (h("span", { class: "icon-start" }, h("slot", { name: "icon-only" }))) : (h(Fragment, null, h("span", { class: "icon-start" }, h("slot", { name: "icon-start" })), h("le-slot", { name: "", description: "Button text", type: "text", class: "content", part: "content" }, h("slot", null)), h("span", { class: "icon-end" }, h("slot", { name: "icon-end" })))))));
+    }
+};
+LeButton.style = leButtonDefaultCss;
+
+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 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.leChange = createEvent(this, "change");
+    }
+    get el() { return getElement(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: '43399929e07835e0019d509803e50a151921fa72', component: "le-checkbox", hostClass: classnames({ 'disabled': this.disabled }) }, h("div", { key: '7ddbf2ac1690bb09082adfea70b9767c972d007a', class: "le-checkbox-wrapper" }, h("label", { key: '8eec4055c713e8b3b155695751b10bff64c9f903', class: "le-checkbox-label" }, h("span", { key: '2118b1cbe7911ff1674e522d723949d81cade185', class: "le-checkbox-input" }, h("input", { key: 'd0a30af5c14497fa6fa294c07ba74ae2e032481f', type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.handleChange })), h("span", { key: '02cf9588431240039a53ee50e02b08ba5d63b974', class: "le-checkbox-text" }, h("le-slot", { key: 'e7d7b253deab72e627164eb72fc06109abfca6a5', name: "", type: "text", tag: "span" }, h("slot", { key: '1d8c443073e48848513a8a6d04cd7805a394e54e' })))), h("div", { key: '16c2c927dc0c0f7844a203a0628bf0e561009bd0', class: "le-checkbox-description" }, h("le-slot", { key: 'c6898ecc8992dce4786e68ab4b136bf5c3a4d3aa', name: "description", type: "text", tag: "div", label: "Description" }, h("slot", { key: '3342add8ed1400ab74681e445163eeb3dd415941', name: "description" }))))));
+    }
+};
+LeCheckbox.style = leCheckboxCss;
+
+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 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(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) {
+        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 using getAssetPath for correct bundle path
+            const manifestPath = getAssetPath('assets/custom-elements.json');
+            const response = await fetch(manifestPath);
+            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 };
+    }
+    /**
+     * Delete this component from the DOM
+     */
+    deleteComponent() {
+        if (!this.hostElement)
+            return;
+        // Confirm deletion
+        const name = this.displayName || this.formatDisplayName(this.component);
+        if (!confirm(`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("select", { id: `prop-${attr.name}`, onChange: e => this.handlePropertyChange(attr.name, e.target.value, type) }, options.map(opt => (h("option", { value: opt, selected: value === opt || (!value && attr.default?.replace(/'/g, '') === opt) }, opt))))));
+        }
+        // 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"]; }
+};
+LeComponent.style = leComponentCss;
+
+const lePopoverCss = "/* ============================================\n   le-popover.css\n   Popover using native HTML Popover API\n   ============================================ */\n\n:host {\n  display: inline-block;\n  position: relative;\n}\n\n/* ============================================\n   Trigger\n   ============================================ */\n\n.le-popover-trigger {\n  display: inline-flex;\n  cursor: pointer;\n}\n\n.le-popover-default-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  border: 1px solid var(--le-color-border, #e0e0e0);\n  border-radius: var(--le-radius-md, 6px);\n  background: var(--le-color-surface, #fff);\n  color: var(--le-color-text-secondary, #666);\n  font-size: 16px;\n  cursor: pointer;\n  transition: all var(--le-transition-fast, 0.15s ease);\n}\n\n.le-popover-default-trigger:hover {\n  border-color: var(--le-color-primary, #2196f3);\n  color: var(--le-color-primary, #2196f3);\n  background: var(--le-color-primary-light, rgba(33, 150, 243, 0.1));\n}\n\n/* ============================================\n   Popover Content (native popover)\n   ============================================ */\n\n.le-popover-content {\n  /* Reset native popover defaults */\n  margin: 0;\n  padding: 0;\n  border: none;\n  background: transparent;\n  \n  /* Positioning - will be set via JS */\n  position: fixed;\n  inset: unset;\n  \n  /* Styling */\n  background: var(--le-color-surface, #ffffff);\n  border: 1px solid var(--le-color-border, #e0e0e0);\n  border-radius: var(--le-radius-lg, 8px);\n  box-shadow: var(--le-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.15));\n  overflow: hidden;\n  font-family: var(--le-font-family, system-ui, -apple-system, sans-serif);\n  font-size: var(--le-font-size-sm, 0.875rem);\n  color: var(--le-color-text, #333);\n  \n  /* Animation */\n  opacity: 0;\n  transform: scale(0.95);\n  transition: opacity 0.15s ease, transform 0.15s ease, display 0.15s ease allow-discrete;\n}\n\n/* When popover is open */\n.le-popover-content:popover-open {\n  opacity: 1;\n  transform: scale(1);\n}\n\n/* Starting style for animation (CSS Anchor Positioning spec) */\n@starting-style {\n  .le-popover-content:popover-open {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n}\n\n/* ============================================\n   Header\n   ============================================ */\n\n.le-popover-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--le-space-xs, 4px) var(--le-space-xs, 4px) var(--le-space-xs, 4px) var(--le-space-sm, 8px);\n  border-bottom: 1px solid var(--le-color-border, #e0e0e0);\n  background: var(--le-color-surface-alt, #f9f9f9);\n  min-height: 32px;\n}\n\n.le-popover-title {\n  font-weight: var(--le-font-weight-semibold, 600);\n  font-size: var(--le-font-size-sm, 0.875rem);\n  color: var(--le-color-text, #333);\n}\n\n.le-popover-close {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: var(--le-color-text-secondary, #666);\n  font-size: 18px;\n  line-height: 1;\n  cursor: pointer;\n  border-radius: var(--le-radius-sm, 4px);\n  transition: background-color 0.15s, color 0.15s;\n}\n\n.le-popover-close:hover {\n  background: var(--le-color-surface-hover, rgba(0, 0, 0, 0.05));\n  color: var(--le-color-text, #333);\n}\n\n/* ============================================\n   Body\n   ============================================ */\n\n.le-popover-body {\n  padding: var(--le-space-md, 12px);\n}\n\n/* ============================================\n   Scrollable content\n   ============================================ */\n\n.le-popover-content[style*=\"overflow-y: auto\"] .le-popover-body {\n  overflow-y: auto;\n}\n";
+
+const LePopover = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.lePopoverOpen = createEvent(this, "lePopoverOpen");
+        this.lePopoverClose = createEvent(this, "lePopoverClose");
+    }
+    get el() { return getElement(this); }
+    /**
+     * Mode of the popover should be 'default' for internal use
+     */
+    mode;
+    /**
+     * Whether the popover is currently open
+     */
+    open = false;
+    /**
+     * Position of the popover relative to its trigger
+     */
+    position = 'bottom';
+    /**
+     * Alignment of the popover
+     */
+    align = 'start';
+    /**
+     * Optional title for the popover header
+     */
+    popoverTitle;
+    /**
+     * Whether to show a close button in the header
+     */
+    showClose = true;
+    /**
+     * Whether clicking outside closes the popover
+     */
+    closeOnClickOutside = true;
+    /**
+     * Whether pressing Escape closes the popover
+     */
+    closeOnEscape = true;
+    /**
+     * Offset from the trigger element (in pixels)
+     */
+    offset = 8;
+    /**
+     * Fixed width for the popover (e.g., '300px', '20rem')
+     */
+    width;
+    /**
+     * Minimum width for the popover (e.g., '200px', '15rem')
+     */
+    minWidth = '200px';
+    /**
+     * Maximum width for the popover (e.g., '400px', '25rem')
+     */
+    maxWidth;
+    /**
+     * Emitted when the popover opens
+     */
+    lePopoverOpen;
+    /**
+     * Emitted when the popover closes
+     */
+    lePopoverClose;
+    isPositioned = false;
+    triggerEl;
+    popoverEl;
+    uniqueId = `le-popover-${Math.random().toString(36).substr(2, 9)}`;
+    scrollParents = [];
+    componentDidLoad() {
+        // Listen for toggle events from the native popover API
+        this.popoverEl?.addEventListener('toggle', this.handlePopoverToggle);
+        // Listen for other popovers opening to close this one
+        document.addEventListener('le-popover-will-open', this.handleOtherPopoverOpen);
+    }
+    disconnectedCallback() {
+        this.popoverEl?.removeEventListener('toggle', this.handlePopoverToggle);
+        document.removeEventListener('le-popover-will-open', this.handleOtherPopoverOpen);
+        this.removeScrollListeners();
+    }
+    /**
+     * Find all scrollable parent elements
+     */
+    getScrollParents(element) {
+        const scrollParents = [];
+        let parent = element.parentElement;
+        while (parent) {
+            const style = getComputedStyle(parent);
+            const overflow = style.overflow + style.overflowY + style.overflowX;
+            if (/(auto|scroll)/.test(overflow)) {
+                scrollParents.push(parent);
+            }
+            parent = parent.parentElement;
+        }
+        // Always include window for page scroll
+        return scrollParents;
+    }
+    /**
+     * Add scroll listeners to all scrollable parents
+     */
+    addScrollListeners() {
+        if (!this.triggerEl)
+            return;
+        this.scrollParents = this.getScrollParents(this.triggerEl);
+        // Listen to each scroll parent
+        this.scrollParents.forEach(parent => {
+            parent.addEventListener('scroll', this.handleScroll, { passive: true });
+        });
+        // Also listen to window scroll and resize
+        window.addEventListener('scroll', this.handleScroll, { passive: true });
+        window.addEventListener('resize', this.handleScroll, { passive: true });
+    }
+    /**
+     * Remove scroll listeners
+     */
+    removeScrollListeners() {
+        this.scrollParents.forEach(parent => {
+            parent.removeEventListener('scroll', this.handleScroll);
+        });
+        window.removeEventListener('scroll', this.handleScroll);
+        window.removeEventListener('resize', this.handleScroll);
+        this.scrollParents = [];
+    }
+    handleScroll = () => {
+        if (this.open) {
+            this.updatePosition();
+        }
+    };
+    handlePopoverToggle = (event) => {
+        if (event.newState === 'open') {
+            this.open = true;
+            this.addScrollListeners();
+            this.updatePosition();
+            this.lePopoverOpen.emit();
+        }
+        else {
+            this.open = false;
+            this.isPositioned = false;
+            this.removeScrollListeners();
+            this.lePopoverClose.emit();
+        }
+    };
+    handleOtherPopoverOpen = (event) => {
+        const customEvent = event;
+        if (customEvent.detail?.popover === this.el)
+            return;
+        if (this.open) {
+            this.hide();
+        }
+    };
+    /**
+     * Opens the popover
+     */
+    async show() {
+        document.dispatchEvent(new CustomEvent('le-popover-will-open', {
+            detail: { popover: this.el }
+        }));
+        this.popoverEl?.showPopover();
+    }
+    /**
+     * Closes the popover
+     */
+    async hide() {
+        this.popoverEl?.hidePopover();
+    }
+    /**
+     * Toggles the popover
+     */
+    async toggle() {
+        if (this.open) {
+            await this.hide();
+        }
+        else {
+            await this.show();
+        }
+    }
+    handleTriggerClick = (event) => {
+        event.stopPropagation();
+        this.toggle();
+    };
+    updatePosition() {
+        if (!this.triggerEl || !this.popoverEl)
+            return;
+        const triggerRect = this.triggerEl.getBoundingClientRect();
+        const popoverRect = this.popoverEl.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const viewportPadding = 8;
+        let position = this.position;
+        let align = this.align;
+        // Auto-position logic
+        const spaceBelow = viewportHeight - triggerRect.bottom - viewportPadding;
+        const spaceAbove = triggerRect.top - viewportPadding;
+        const spaceRight = viewportWidth - triggerRect.right - viewportPadding;
+        const spaceLeft = triggerRect.left - viewportPadding;
+        if (position === 'auto') {
+            if (spaceBelow >= popoverRect.height + this.offset) {
+                position = 'bottom';
+            }
+            else if (spaceAbove >= popoverRect.height + this.offset) {
+                position = 'top';
+            }
+            else if (spaceRight >= popoverRect.width + this.offset) {
+                position = 'right';
+            }
+            else if (spaceLeft >= popoverRect.width + this.offset) {
+                position = 'left';
+            }
+            else {
+                const maxSpace = Math.max(spaceBelow, spaceAbove, spaceRight, spaceLeft);
+                if (maxSpace === spaceBelow)
+                    position = 'bottom';
+                else if (maxSpace === spaceAbove)
+                    position = 'top';
+                else if (maxSpace === spaceRight)
+                    position = 'right';
+                else
+                    position = 'left';
+            }
+        }
+        // Adjust alignment for horizontal overflow
+        if (position === 'top' || position === 'bottom') {
+            if (align === 'start' && triggerRect.left + popoverRect.width > viewportWidth - viewportPadding) {
+                align = 'end';
+            }
+            else if (align === 'end' && triggerRect.right - popoverRect.width < viewportPadding) {
+                align = 'start';
+            }
+            else if (align === 'center') {
+                const triggerCenter = triggerRect.left + triggerRect.width / 2;
+                if (triggerCenter - popoverRect.width / 2 < viewportPadding) {
+                    align = 'start';
+                }
+                else if (triggerCenter + popoverRect.width / 2 > viewportWidth - viewportPadding) {
+                    align = 'end';
+                }
+            }
+        }
+        // Calculate position
+        let top = 0;
+        let left = 0;
+        let maxHeight = null;
+        switch (position) {
+            case 'top':
+                top = triggerRect.top - popoverRect.height - this.offset;
+                if (top < viewportPadding) {
+                    maxHeight = triggerRect.top - this.offset - viewportPadding * 2;
+                    top = viewportPadding;
+                }
+                break;
+            case 'bottom':
+                top = triggerRect.bottom + this.offset;
+                if (top + popoverRect.height > viewportHeight - viewportPadding) {
+                    maxHeight = viewportHeight - top - viewportPadding;
+                }
+                break;
+            case 'left':
+                left = triggerRect.left - popoverRect.width - this.offset;
+                top = triggerRect.top;
+                if (left < viewportPadding)
+                    left = viewportPadding;
+                break;
+            case 'right':
+                left = triggerRect.right + this.offset;
+                top = triggerRect.top;
+                if (left + popoverRect.width > viewportWidth - viewportPadding) {
+                    left = viewportWidth - popoverRect.width - viewportPadding;
+                }
+                break;
+        }
+        // Calculate horizontal alignment for top/bottom
+        if (position === 'top' || position === 'bottom') {
+            switch (align) {
+                case 'start':
+                    left = triggerRect.left;
+                    break;
+                case 'center':
+                    left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2;
+                    break;
+                case 'end':
+                    left = triggerRect.right - popoverRect.width;
+                    break;
+            }
+            // Constrain to viewport
+            if (left < viewportPadding) {
+                left = viewportPadding;
+            }
+            else if (left + popoverRect.width > viewportWidth - viewportPadding) {
+                left = viewportWidth - popoverRect.width - viewportPadding;
+            }
+        }
+        // Calculate vertical alignment for left/right
+        if (position === 'left' || position === 'right') {
+            switch (align) {
+                case 'start':
+                    top = triggerRect.top;
+                    break;
+                case 'center':
+                    top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2;
+                    break;
+                case 'end':
+                    top = triggerRect.bottom - popoverRect.height;
+                    break;
+            }
+            if (top < viewportPadding)
+                top = viewportPadding;
+            if (top + popoverRect.height > viewportHeight - viewportPadding) {
+                maxHeight = viewportHeight - top - viewportPadding;
+            }
+        }
+        // Apply styles
+        this.popoverEl.style.top = `${top}px`;
+        this.popoverEl.style.left = `${left}px`;
+        if (maxHeight !== null && maxHeight > 100) {
+            this.popoverEl.style.maxHeight = `${maxHeight}px`;
+            this.popoverEl.style.overflowY = 'auto';
+        }
+        else {
+            this.popoverEl.style.maxHeight = '';
+            this.popoverEl.style.overflowY = '';
+        }
+        this.isPositioned = true;
+    }
+    render() {
+        const popoverStyles = {
+            visibility: this.isPositioned ? 'visible' : 'hidden',
+        };
+        if (this.width)
+            popoverStyles.width = this.width;
+        if (this.minWidth)
+            popoverStyles.minWidth = this.minWidth;
+        if (this.maxWidth)
+            popoverStyles.maxWidth = this.maxWidth;
+        return [
+            h("div", { key: '3d2a3b86ddb3be577bd0e976a5a00f25396a97fb', class: "le-popover-trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick }, h("slot", { key: '9db2e9e2b0bdb25c5a2361115d2094292fe692ec', name: "trigger" }, h("button", { key: '88d78b192f72731f00d6131b92b8d6a4b445d7f9', type: "button", class: "le-popover-default-trigger" }, h("span", { key: '0f2913f160cda5dcbeb20c714219d587196e230b' }, "\u2295")))),
+            h("div", { key: 'b65d2de900ff6e67a62d92d7452db34afde9f257', id: this.uniqueId, class: "le-popover-content", popover: this.closeOnClickOutside ? 'auto' : 'manual', ref: (el) => (this.popoverEl = el), style: popoverStyles }, (this.popoverTitle || this.showClose) && (h("div", { key: '323061fc49c8e0fc9ae541dfc576e551b0a83818', class: "le-popover-header" }, this.popoverTitle && h("span", { key: 'b1d9f4203966ae6a0bb14186824596643954d6f8', class: "le-popover-title" }, this.popoverTitle), this.showClose && (h("button", { key: 'd0d335d8c9897ed9ba7bd0370572a8cafa72b044', type: "button", class: "le-popover-close", onClick: () => this.hide(), "aria-label": "Close" }, "\u00D7")))), h("div", { key: '52d3294394b0e1fd49f8c361414e228feed68ea9', class: "le-popover-body" }, h("slot", { key: '16d8691545f2eaa44f136bfea33a1f1d71d18cd7' })))
+        ];
+    }
+};
+LePopover.style = lePopoverCss;
+
+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 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.leSlotChange = createEvent(this, "leSlotChange");
+    }
+    get el() { return getElement(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 manifestPath = getAssetPath('assets/custom-elements.json');
+            const response = await fetch(manifestPath);
+            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: 'af150a31db62d9c3df9a8c10be34b9bb6756d07f', 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 assetsDirs() { return ["../../assets"]; }
+};
+LeSlot.style = leSlotDefaultCss;
+
+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 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.leChange = createEvent(this, "change");
+        this.leInput = createEvent(this, "input");
+    }
+    get el() { return getElement(this); }
+    /**
+     * 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;
+    /**
+     * 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: 'd0c69370dae2d1fee5700954e4823d2a03a51331', component: "le-string-input", hostClass: classnames({ 'disabled': this.disabled }) }, h("div", { key: '4acae8d3c34da2a86970a616c493ff210d561f5f', class: "le-input-wrapper" }, this.label && (h("label", { key: '609191b45187b6b1a65d05cd594b149760ac6882', class: "le-input-label", htmlFor: this.name }, this.label)), h("div", { key: '36b4caff4468ac7421db03f811cb3ef4a622b001', class: "le-input-container" }, this.iconStart && (h("span", { key: '344f88887fe8270bbef7e26ec1ad5da9fae1f8e4', class: "icon-start" }, this.iconStart)), h("input", { key: '4ba7beeddd7fb3cf23d03e029d11a804764cdd6e', 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: '7cdd4b52c3e1a1b18b19e697bdb42431941bba01', class: "icon-end" }, this.iconEnd))), h("div", { key: '113a75aa413e4d95300aeaa97d1ce7a75cf68c7a', class: "le-input-description" }, h("le-slot", { key: '0b37fc14e6df68f6c44cf9001d63a70f019e1cc3', name: "description", type: "text", tag: "p", label: "Description" }, h("slot", { key: '2674056dc915fabdb4fcbcaa13294a116b9509a6', name: "description" }))))));
+    }
+};
+LeStringInput.style = leStringInputCss;
+
+export { LeButton as le_button, LeCheckbox as le_checkbox, LeComponent as le_component, LePopover as le_popover, LeSlot as le_slot, LeStringInput as le_string_input };
+//# sourceMappingURL=le-button.le-checkbox.le-component.le-popover.le-slot.le-string-input.entry.js.map