le-kit 0.1.12 → 0.1.14

package/dist/{esm/le-button_6.entry.js → core/components/le-button2.js}

@@ -1,1199 +1,1146 @@
-import { r as registerInstance, i as createEvent, j as getElement, k as h, F as Fragment, h as getLeKitConfig, l as getAssetPath, H as Host } from './index-CwNQ1GTa.js';
-import { c as classnames, o as observeModeChanges } from './utils-Cf7fMI0j.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, getAssetPath, Host, Fragment } from '@stencil/core/internal/client';
+import { h as classnames, o as observeModeChanges, f as getLeKitConfig } from './utils.js';
+import { d as defineCustomElement$5 } from './le-popover2.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 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 LeButton = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.leClick = createEvent(this, "click");
+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 getElement(this); }
+    get el() { return this; }
     /**
      * Mode of the popover should be 'default' for internal use
      */
     mode;
     /**
-     * Button variant style
-     * @allowedValues solid | outlined | clear
+     * The value of the input
      */
-    variant = 'solid';
+    value;
     /**
-     * Button color theme (uses theme semantic colors)
-     * @allowedValues primary | secondary | success | warning | danger | info
+     * The name of the input
      */
-    color = 'primary';
+    name;
     /**
-     * Button size
-     * @allowedValues small | medium | large
+     * The type of the input (text, email, password, etc.)
      */
-    size = 'medium';
+    type = 'text';
     /**
-     * Whether the button is in a selected/active state
+     * Label for the input
      */
-    selected = false;
+    label;
     /**
-     * Whether the button takes full width of its container
+     * Icon for the start icon
      */
-    fullWidth = false;
+    iconStart;
     /**
-     * Whether the button displays only an icon (square aspect ratio)
+     * Icon for the end icon
      */
-    iconOnly = false;
+    iconEnd;
     /**
-     * Whether the button is disabled
+     * Placeholder text
+     */
+    placeholder;
+    /**
+     * Whether the input is disabled
      */
     disabled = false;
     /**
-     * The button type attribute
-     * @allowedValues button | submit | reset
+     * Whether the input is read-only
      */
-    type = 'button';
+    readonly = false;
     /**
-     * Optional href to make the button act as a link
+     * External ID for linking with external systems
      */
-    href;
+    externalId;
     /**
-     * Link target when href is set
+     * Emitted when the value changes (on blur or Enter)
      */
-    target;
+    leChange;
     /**
-     * Emitted when the button is clicked.
-     * This is a custom event that wraps the native click but ensures the target is the le-button.
+     * Emitted when the input value changes (on keystroke)
      */
-    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);
+    leInput;
+    handleInput = (ev) => {
+        const input = ev.target;
+        this.value = input.value;
+        this.leInput.emit({
+            value: this.value,
+            name: this.name,
+            externalId: this.externalId
+        });
     };
-    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,
+    handleChange = (ev) => {
+        const input = ev.target;
+        this.value = input.value;
+        this.leChange.emit({
+            value: this.value,
+            name: this.name,
+            externalId: this.externalId
         });
-        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" })))))));
+    };
+    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" }))))));
+    }
+    static get style() { return leStringInputCss; }
+}, [769, "le-string-input", {
+        "mode": [1537],
+        "value": [1537],
+        "name": [1],
+        "type": [1],
+        "label": [1],
+        "iconStart": [1, "icon-start"],
+        "iconEnd": [1, "icon-end"],
+        "placeholder": [1],
+        "disabled": [4],
+        "readonly": [4],
+        "externalId": [1, "external-id"]
+    }]);
+function defineCustomElement$4() {
+    if (typeof customElements === "undefined") {
+        return;
     }
-};
-LeButton.style = leButtonDefaultCss;
+    const components = ["le-string-input", "le-button", "le-checkbox", "le-component", "le-popover", "le-slot", "le-string-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "le-string-input":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LeStringInput);
+            }
+            break;
+        case "le-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement();
+            }
+            break;
+        case "le-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+        case "le-component":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "le-popover":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "le-slot":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "le-string-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            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 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 LeCheckbox = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.leChange = createEvent(this, "change");
+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 getElement(this); }
+    get el() { return this; }
     /**
-     * Whether the checkbox is checked
-     */
-    checked = false;
-    /**
-     * Whether the checkbox is disabled
+     * 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
      */
-    disabled = false;
+    type = 'slot';
     /**
-     * The name of the checkbox input
+     * The name of the slot this placeholder represents.
+     * Should match the slot name in the parent component.
      */
-    name;
+    name = '';
     /**
-     * The value of the checkbox input
+     * Label to display in admin mode.
+     * If not provided, the slot name will be used.
      */
-    value;
+    label;
     /**
-     * External ID for linking with external systems (e.g. database ID, PDF form field ID)
+     * Description of what content this slot accepts.
+     * Shown in admin mode to guide content editors.
      */
-    externalId;
+    description;
     /**
-     * Emitted when the checked state changes
+     * Comma-separated list of allowed component tags for this slot.
+     * Used by CMS to filter available components.
+     *
+     * @example "le-card,le-button,le-text"
      */
-    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); }
+    allowedComponents;
     /**
-     * The tag name of the component (e.g., 'le-card').
-     * Used to look up property metadata and display the component name.
+     * Whether multiple components can be dropped in this slot.
      */
-    component;
+    multiple = true;
     /**
-     * Optional display name for the component.
-     * If not provided, the tag name will be formatted as the display name.
+     * Whether this slot is required to have content.
      */
-    displayName;
+    required = false;
     /**
-     * Classes to apply to the host element.
-     * Allows parent components to pass their styling classes.
+     * Placeholder text for text/textarea inputs in admin mode.
      */
-    hostClass;
+    placeholder;
     /**
-     * Inline styles to apply to the host element.
-     * Allows parent components to pass dynamic styles (e.g., flex properties).
+     * 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>
      */
-    hostStyle;
+    tag;
     /**
-     * Reference to the host element (found automatically from parent)
+     * 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".
      */
-    hostElement;
+    slotStyle;
     /**
      * Internal state to track admin mode
      */
     adminMode = false;
     /**
-     * Component metadata loaded from Custom Elements Manifest
+     * Internal state for text input value (synced from slot content)
      */
-    componentMeta = null;
+    textValue = '';
     /**
-     * Current property values of the host component
+     * Whether the current textValue contains valid HTML
      */
-    propertyValues = {};
+    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() {
-        // 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 => {
+            const wasAdmin = this.adminMode;
             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();
+            // 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();
                 }
             }
         });
     }
-    /**
-     * 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'
+     * Flag to prevent re-reading content right after we updated it
      */
-    formatDisplayName(tagName) {
-        return tagName
-            .replace(/^le-/, '') // Remove 'le-' prefix
-            .split('-')
-            .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-            .join(' ');
-    }
+    isUpdating = false;
     /**
-     * Load component metadata from the Custom Elements Manifest
+     * Read content from slotted elements via assignedNodes()
      */
-    async loadComponentMetadata() {
-        try {
-            // Fetch the manifest from configured URL
-            const { manifestUrl } = getLeKitConfig();
-            const manifestUrlResolved = manifestUrl.startsWith('/')
-                ? getAssetPath(`./assets${manifestUrl}`)
-                : manifestUrl;
-            const response = await fetch(manifestUrlResolved);
-            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;
-                    }
+    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);
                 }
             }
-            // 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)
+     * Validates if a string contains valid HTML
      */
-    isInternalAttribute(name) {
-        const internalAttrs = ['mode', 'theme', 'class', 'style', 'id', 'slot'];
-        return internalAttrs.includes(name);
+    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,
+        });
+    };
     /**
-     * Read current property values from the host element
+     * Create a new slotted element when none exists.
+     * The element is appended to the host component's light DOM.
      */
-    readPropertyValues() {
-        if (!this.hostElement || !this.componentMeta)
+    createSlottedElement() {
+        if (!this.tag)
             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);
+        // 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);
         }
-        this.propertyValues = values;
+        // 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`);
     }
     /**
-     * Parse an attribute value based on its type
+     * Load available components from Custom Elements Manifest
      */
-    parseAttributeValue(value, type) {
-        if (value === null)
-            return undefined;
-        if (type === 'boolean') {
-            return value !== null && value !== 'false';
+    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 || [];
         }
-        if (type === 'number') {
-            return parseFloat(value);
+        catch (error) {
+            console.warn('[le-slot] Failed to load component manifest:', error);
         }
-        return value;
     }
     /**
-     * Handle property value changes from the editor
+     * Format a tag name into a display name
+     * e.g., 'le-card' -> 'Card'
      */
-    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 };
+    formatComponentName(tagName) {
+        return tagName
+            .replace(/^le-/, '')
+            .split('-')
+            .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+            .join(' ');
     }
     /**
-     * Delete this component from the DOM
+     * Add a new component to the slot
      */
-    deleteComponent() {
-        if (!this.hostElement)
+    addComponent(tagName) {
+        // Find the host component by traversing up through shadow DOM
+        const rootNode = this.el.getRootNode();
+        if (!(rootNode instanceof ShadowRoot))
             return;
-        // Confirm deletion
-        const name = this.displayName || this.formatDisplayName(this.component);
-        if (!confirm(`Delete this ${name}?`))
+        const hostComponent = rootNode.host;
+        if (!hostComponent)
             return;
-        // Remove the host element from its parent
-        const parent = this.hostElement.parentElement;
-        if (parent) {
-            this.hostElement.remove();
+        // 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,
+        });
     }
     /**
-     * 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
+     * Handle slot change event to re-read content when nodes are assigned
      */
-    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))));
-    }
+    handleSlotChange = () => {
+        this.readSlottedContent();
+    };
     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)));
+        const displayLabel = this.label || this.name;
+        // Always render the same structure, CSS handles visibility via .admin-mode class
+        return (h(Host, { key: '0ffbcff05009d390a4de52aac1395c4c769ed948', 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 })));
         }
-        // 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)))));
     }
-};
-LeComponent.style = leComponentCss;
+    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$3() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["le-slot", "le-button", "le-checkbox", "le-component", "le-popover", "le-slot", "le-string-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "le-slot":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LeSlot);
+            }
+            break;
+        case "le-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement();
+            }
+            break;
+        case "le-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+        case "le-component":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "le-popover":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "le-slot":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "le-string-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+    } });
+}
 
-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 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 LePopover = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.lePopoverOpen = createEvent(this, "lePopoverOpen");
-        this.lePopoverClose = createEvent(this, "lePopoverClose");
+const LeComponent = /*@__PURE__*/ proxyCustomElement(class LeComponent extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
     }
-    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';
+    get el() { return this; }
     /**
-     * Optional title for the popover header
-     */
-    popoverTitle;
-    /**
-     * Whether to show a close button in the header
+     * The tag name of the component (e.g., 'le-card').
+     * Used to look up property metadata and display the component name.
      */
-    showClose = true;
+    component;
     /**
-     * Whether clicking outside closes the popover
+     * Optional display name for the component.
+     * If not provided, the tag name will be formatted as the display name.
      */
-    closeOnClickOutside = true;
+    displayName;
     /**
-     * Whether pressing Escape closes the popover
+     * Classes to apply to the host element.
+     * Allows parent components to pass their styling classes.
      */
-    closeOnEscape = true;
+    hostClass;
     /**
-     * Offset from the trigger element (in pixels)
+     * Inline styles to apply to the host element.
+     * Allows parent components to pass dynamic styles (e.g., flex properties).
      */
-    offset = 8;
+    hostStyle;
     /**
-     * Fixed width for the popover (e.g., '300px', '20rem')
+     * Reference to the host element (found automatically from parent)
      */
-    width;
+    hostElement;
     /**
-     * Minimum width for the popover (e.g., '200px', '15rem')
+     * Internal state to track admin mode
      */
-    minWidth = '200px';
+    adminMode = false;
     /**
-     * Maximum width for the popover (e.g., '400px', '25rem')
+     * Component metadata loaded from Custom Elements Manifest
      */
-    maxWidth;
+    componentMeta = null;
     /**
-     * Emitted when the popover opens
+     * Current property values of the host component
      */
-    lePopoverOpen;
+    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();
+                }
+            }
+        });
+    }
     /**
-     * Emitted when the popover closes
+     * Find the host element by traversing up through shadow DOM
      */
-    lePopoverClose;
-    isPositioned = false;
-    triggerEl;
-    popoverEl;
-    uniqueId = `le-popover-${Math.random().toString(36).substr(2, 9)}`;
-    scrollParents = [];
+    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() {
-        // 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);
+        // Read initial property values from the host element
+        this.readPropertyValues();
     }
     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;
+        this.disconnectModeObserver?.();
     }
     /**
-     * Add scroll listeners to all scrollable parents
+     * Formats a tag name into a display name
+     * e.g., 'le-card' -> 'Card'
      */
-    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 });
+    formatDisplayName(tagName) {
+        return tagName
+            .replace(/^le-/, '') // Remove 'le-' prefix
+            .split('-')
+            .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+            .join(' ');
     }
     /**
-     * Remove scroll listeners
+     * Load component metadata from the Custom Elements Manifest
      */
-    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();
+    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}`);
         }
-    };
-    handleOtherPopoverOpen = (event) => {
-        const customEvent = event;
-        if (customEvent.detail?.popover === this.el)
-            return;
-        if (this.open) {
-            this.hide();
+        catch (error) {
+            // console.warn(`[le-component] Failed to load metadata for component: ${this.component}`, error);
         }
-    };
+    }
     /**
-     * Opens the popover
+     * Check if an attribute is internal (should not be shown in editor)
      */
-    async show() {
-        document.dispatchEvent(new CustomEvent('le-popover-will-open', {
-            detail: { popover: this.el }
-        }));
-        this.popoverEl?.showPopover();
+    isInternalAttribute(name) {
+        const internalAttrs = ['mode', 'theme', 'class', 'style', 'id', 'slot'];
+        return internalAttrs.includes(name);
     }
     /**
-     * Closes the popover
+     * Read current property values from the host element
      */
-    async hide() {
-        this.popoverEl?.hidePopover();
+    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;
     }
     /**
-     * Toggles the popover
+     * Parse an attribute value based on its type
      */
-    async toggle() {
-        if (this.open) {
-            await this.hide();
+    parseAttributeValue(value, type) {
+        if (value === null)
+            return undefined;
+        if (type === 'boolean') {
+            return value !== null && value !== 'false';
         }
-        else {
-            await this.show();
+        if (type === 'number') {
+            return parseFloat(value);
         }
+        return value;
     }
-    handleTriggerClick = (event) => {
-        event.stopPropagation();
-        this.toggle();
-    };
-    updatePosition() {
-        if (!this.triggerEl || !this.popoverEl)
+    /**
+     * Handle property value changes from the editor
+     */
+    handlePropertyChange(attrName, value, type) {
+        if (!this.hostElement)
             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';
+        // Update the host element's attribute
+        if (type === 'boolean') {
+            if (value) {
+                this.hostElement.setAttribute(attrName, '');
             }
             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';
-                }
+                this.hostElement.removeAttribute(attrName);
             }
         }
-        // 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 if (value === undefined || value === '') {
+            this.hostElement.removeAttribute(attrName);
         }
         else {
-            this.popoverEl.style.maxHeight = '';
-            this.popoverEl.style.overflowY = '';
+            this.hostElement.setAttribute(attrName, String(value));
         }
-        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");
+        // Update local state
+        this.propertyValues = { ...this.propertyValues, [attrName]: value };
     }
-    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.
+     * Delete this component from the DOM
      */
-    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?.();
+    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();
+        }
     }
     /**
-     * Flag to prevent re-reading content right after we updated it
+     * Render the property editor form
      */
-    isUpdating = false;
+    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")))));
+    }
     /**
-     * Read content from slotted elements via assignedNodes()
+     * Render a single property field based on its type
      */
-    readSlottedContent() {
-        if (!this.slotRef)
-            return;
-        // Skip if we just updated the content ourselves
-        if (this.isUpdating) {
-            this.isUpdating = false;
-            return;
+    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))))));
         }
-        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);
-                }
-            }
+        // 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))));
     }
-    /**
-     * 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;
+    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)));
         }
-        return true;
+        // 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)))));
     }
-    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;
+    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-popover", "le-slot", "le-string-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "le-component":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LeComponent);
             }
-            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();
+            break;
+        case "le-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement();
             }
-            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;
-                }
+            break;
+        case "le-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
             }
+            break;
+        case "le-component":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "le-popover":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "le-slot":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "le-string-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            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.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`);
+        this.__attachShadow();
+        this.leChange = createEvent(this, "change", 7);
     }
+    get el() { return this; }
     /**
-     * Load available components from Custom Elements Manifest
+     * Whether the checkbox is checked
      */
-    async loadAvailableComponents() {
-        try {
-            const { manifestUrl } = getLeKitConfig();
-            const manifestUrlResolved = manifestUrl.startsWith('/')
-                ? getAssetPath(`./assets${manifestUrl}`)
-                : manifestUrl;
-            const response = await fetch(manifestUrlResolved);
-            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);
-        }
-    }
+    checked = false;
     /**
-     * Format a tag name into a display name
-     * e.g., 'le-card' -> 'Card'
+     * Whether the checkbox is disabled
      */
-    formatComponentName(tagName) {
-        return tagName
-            .replace(/^le-/, '')
-            .split('-')
-            .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-            .join(' ');
-    }
+    disabled = false;
     /**
-     * Add a new component to the slot
+     * The name of the checkbox input
      */
-    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)
+    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;
-        // 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({
+        const input = event.target;
+        this.checked = input.checked;
+        this.leChange.emit({
+            checked: this.checked,
+            value: this.value,
             name: this.name,
-            value: hostComponent.innerHTML,
-            isValid: true,
+            externalId: this.externalId
         });
-    }
-    /**
-     * 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: 'e89effa647f07ae271cffc05aad6730b51da6447', 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))));
+        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" }))))));
     }
-    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 leCheckboxCss; }
+}, [769, "le-checkbox", {
+        "checked": [1540],
+        "disabled": [4],
+        "name": [1],
+        "value": [1],
+        "externalId": [1, "external-id"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
     }
-};
-LeSlot.style = leSlotDefaultCss;
+    const components = ["le-checkbox", "le-button", "le-checkbox", "le-component", "le-popover", "le-slot", "le-string-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "le-checkbox":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LeCheckbox);
+            }
+            break;
+        case "le-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement();
+            }
+            break;
+        case "le-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+        case "le-component":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "le-popover":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "le-slot":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "le-string-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+    } });
+}
 
-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 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 LeStringInput = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.leChange = createEvent(this, "change");
-        this.leInput = createEvent(this, "input");
+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 getElement(this); }
+    get el() { return this; }
     /**
      * Mode of the popover should be 'default' for internal use
      */
     mode;
     /**
-     * The value of the input
-     */
-    value;
-    /**
-     * The name of the input
+     * Button variant style
+     * @allowedValues solid | outlined | clear
      */
-    name;
+    variant = 'solid';
     /**
-     * The type of the input (text, email, password, etc.)
+     * Button color theme (uses theme semantic colors)
+     * @allowedValues primary | secondary | success | warning | danger | info
      */
-    type = 'text';
+    color = 'primary';
     /**
-     * Label for the input
+     * Button size
+     * @allowedValues small | medium | large
      */
-    label;
+    size = 'medium';
     /**
-     * Icon for the start icon
+     * Whether the button is in a selected/active state
      */
-    iconStart;
+    selected = false;
     /**
-     * Icon for the end icon
+     * Whether the button takes full width of its container
      */
-    iconEnd;
+    fullWidth = false;
     /**
-     * Placeholder text
+     * Whether the button displays only an icon (square aspect ratio)
      */
-    placeholder;
+    iconOnly = false;
     /**
-     * Whether the input is disabled
+     * Whether the button is disabled
      */
     disabled = false;
     /**
-     * Whether the input is read-only
+     * The button type attribute
+     * @allowedValues button | submit | reset
      */
-    readonly = false;
+    type = 'button';
     /**
-     * External ID for linking with external systems
+     * Optional href to make the button act as a link
      */
-    externalId;
+    href;
     /**
-     * Emitted when the value changes (on blur or Enter)
+     * Link target when href is set
      */
-    leChange;
+    target;
     /**
-     * Emitted when the input value changes (on keystroke)
+     * Emitted when the button is clicked.
+     * This is a custom event that wraps the native click but ensures the target is the le-button.
      */
-    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();
+    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() {
-        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" }))))));
+        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" })))))));
+    }
+    static get style() { return leButtonDefaultCss; }
+}, [769, "le-button", {
+        "mode": [1537],
+        "variant": [1],
+        "color": [1],
+        "size": [1],
+        "selected": [4],
+        "fullWidth": [516, "full-width"],
+        "iconOnly": [4, "icon-only"],
+        "disabled": [4],
+        "type": [1],
+        "href": [1],
+        "target": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
     }
-};
-LeStringInput.style = leStringInputCss;
+    const components = ["le-button", "le-button", "le-checkbox", "le-component", "le-popover", "le-slot", "le-string-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "le-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LeButton);
+            }
+            break;
+        case "le-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement();
+            }
+            break;
+        case "le-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+        case "le-component":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "le-popover":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "le-slot":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "le-string-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+    } });
+}
+
+export { LeButton as L, defineCustomElement$3 as a, defineCustomElement$2 as b, defineCustomElement$1 as c, defineCustomElement$4 as d, defineCustomElement as e, LeCheckbox as f, LeComponent as g, LeSlot as h, LeStringInput as i };
+//# sourceMappingURL=le-button2.js.map
 
-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
+//# sourceMappingURL=le-button2.js.map