le-kit 0.0.3 → 0.1.0

package/dist/core/components/p-DxxFRStS.js

@@ -0,0 +1,1370 @@
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host, F as Fragment } from './p-IPZGv1ea.js';
+import { d as defineCustomElement$5 } from './p-CXeWQG7d.js';
+
+/**
+ * Helper function to get the current mode for an element.
+ * Can be used programmatically in components.
+ *
+ * This function traverses both regular DOM and shadow DOM boundaries
+ * to find the nearest mode attribute.
+ */
+function getMode(el) {
+    // Check element's own mode
+    const ownMode = el.getAttribute('mode');
+    if (ownMode) {
+        return ownMode;
+    }
+    // Traverse up DOM, crossing shadow boundaries
+    let current = el;
+    while (current) {
+        // Try parent element first
+        if (current instanceof Element && current.parentElement) {
+            current = current.parentElement;
+            const mode = current.getAttribute?.('mode');
+            if (mode) {
+                return mode;
+            }
+        }
+        else {
+            // No parent element - check if we're in a shadow root
+            const root = current.getRootNode();
+            if (root instanceof ShadowRoot) {
+                // Cross the shadow boundary to the host element
+                current = root.host;
+                const mode = current.getAttribute?.('mode');
+                if (mode) {
+                    return mode;
+                }
+            }
+            else {
+                // We've reached the document root
+                break;
+            }
+        }
+    }
+    // Check document root
+    const rootMode = document.documentElement.getAttribute('mode');
+    if (rootMode) {
+        return rootMode;
+    }
+    return 'default';
+}
+/**
+ * Helper function to get the current theme for an element.
+ * Theme inheritance works the same as mode - cascades through DOM.
+ */
+function getTheme(el) {
+    // Check element's own theme
+    const ownTheme = el.getAttribute('theme');
+    if (ownTheme) {
+        return ownTheme;
+    }
+    // Traverse up DOM
+    let parent = el.parentElement;
+    while (parent) {
+        const parentTheme = parent.getAttribute('theme');
+        if (parentTheme) {
+            return parentTheme;
+        }
+        parent = parent.parentElement;
+    }
+    // Check root
+    const rootTheme = document.documentElement.getAttribute('theme');
+    if (rootTheme) {
+        return rootTheme;
+    }
+    return 'default';
+}
+/**
+ * Helper function to set mode on the document root.
+ * Useful for switching all components to admin mode.
+ */
+function setGlobalMode(mode) {
+    document.documentElement.setAttribute('mode', mode);
+}
+/**
+ * Helper function to set theme on the document root.
+ * Useful for switching all components to a different theme.
+ */
+function setGlobalTheme(theme) {
+    document.documentElement.setAttribute('theme', theme);
+}
+
+/**
+ * Utility functions for le-kit components
+ */
+/**
+ * Generates a unique ID for component instances
+ */
+function generateId(prefix = 'le') {
+    return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;
+}
+/**
+ * Parses a comma-separated string into an array
+ */
+function parseCommaSeparated(value) {
+    if (!value)
+        return [];
+    return value
+        .split(',')
+        .map(s => s.trim())
+        .filter(Boolean);
+}
+/**
+ * Checks if a slot has content
+ */
+function slotHasContent(el, slotName = '') {
+    const selector = slotName ? `[slot="${slotName}"]` : ':not([slot])';
+    return el.querySelector(selector) !== null;
+}
+/**
+ * Sets up a MutationObserver to track mode changes on ancestor elements.
+ * Returns a cleanup function to disconnect the observer.
+ *
+ * If the element or any ancestor has an explicit `mode` attribute, that creates
+ * a "mode boundary" - the mode is determined from that point, not from further up.
+ * This allows components like le-popover to force default mode for their children.
+ *
+ * @param el - The component's host element
+ * @param callback - Function to call when mode changes, receives the new mode
+ * @returns Cleanup function to disconnect the observer
+ *
+ * @example
+ * ```tsx
+ * export class MyComponent {
+ *   @Element() el: HTMLElement;
+ *   @State() adminMode: boolean = false;
+ *   private disconnectModeObserver?: () => void;
+ *
+ *   connectedCallback() {
+ *     this.disconnectModeObserver = observeModeChanges(this.el, (mode) => {
+ *       this.adminMode = mode === 'admin';
+ *     });
+ *   }
+ *
+ *   disconnectedCallback() {
+ *     this.disconnectModeObserver?.();
+ *   }
+ * }
+ * ```
+ */
+function observeModeChanges(el, callback) {
+    // Call immediately with current mode
+    callback(getMode(el));
+    // Set up observer for mode attribute changes
+    const observer = new MutationObserver(() => {
+        callback(getMode(el));
+    });
+    // Observe the element itself (for mode boundary changes)
+    observer.observe(el, {
+        attributes: true,
+        attributeFilter: ['mode'],
+    });
+    // Observe document root
+    observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['mode'],
+    });
+    // Traverse up, crossing shadow boundaries, and observe each element
+    let current = el;
+    while (current) {
+        if (current instanceof Element && current.parentElement) {
+            current = current.parentElement;
+            observer.observe(current, {
+                attributes: true,
+                attributeFilter: ['mode'],
+            });
+            // If this element has an explicit mode, it's a boundary
+            if (current.hasAttribute('mode')) {
+                break;
+            }
+        }
+        else {
+            // Check if we're in a shadow root
+            const root = current.getRootNode();
+            if (root instanceof ShadowRoot) {
+                // Cross the shadow boundary and observe the host
+                current = root.host;
+                observer.observe(current, {
+                    attributes: true,
+                    attributeFilter: ['mode'],
+                });
+                // If the host has an explicit mode, it's a boundary
+                if (current.hasAttribute('mode')) {
+                    break;
+                }
+            }
+            else {
+                break;
+            }
+        }
+    }
+    // Return cleanup function
+    return () => observer.disconnect();
+}
+/**
+ * Combines multiple class names into a single string, filtering out falsy values.
+ *
+ * @param classes - arguments of class names, undefined, arrays, objects with boolean values and nested combinations of these
+ * @returns Combined class names string
+ */
+function classnames(...classes) {
+    const result = [];
+    classes.forEach(cls => {
+        if (!cls)
+            return;
+        if (typeof cls === 'string') {
+            result.push(cls);
+        }
+        else if (Array.isArray(cls)) {
+            result.push(classnames(...cls));
+        }
+        else if (typeof cls === 'object') {
+            Object.entries(cls).forEach(([key, value]) => {
+                if (value) {
+                    result.push(key);
+                }
+            });
+        }
+    });
+    return result.join(' ');
+}
+
+const leStringInputCss = ":host{display:block;--le-input-bg:var(--le-color-surface, #ffffff);--le-input-color:var(--le-color-text-primary, #333333);--le-input-border:var(--le-border-width, 2px) solid var(--le-color-border-input, #007bff);--le-input-radius:var(--le-radius-sm, 4px);--le-input-padding:2px 6px;--le-input-height:1.5rem;--le-input-label-color:var(--le-color-text-primary, #333333);--le-input-desc-color:var(--le-color-text-secondary, #666666);--le-input-placeholder-color:#999999}.le-input-wrapper{display:flex;flex-direction:column;gap:2px}.le-input-label{display:block;font-size:0.9em;font-weight:500;color:var(--le-input-label-color);margin-bottom:2px}.le-input-container{position:relative;display:flex;align-items:center;background:var(--le-input-bg);border:var(--le-input-border);border-radius:var(--le-input-radius);transition:border-color 0.2s}.le-input-container:focus-within{outline:2px solid var(--le-color-focus);outline-offset:2px}:host([disabled]) .le-input-container{opacity:0.6;background-color:rgba(0,0,0,0.05);cursor:not-allowed}input{flex:1;min-height:var(--le-input-height);padding:var(--le-input-padding);border:none;background:transparent;color:var(--le-input-color);font-family:inherit;font-size:inherit;outline:none;width:100%}input::placeholder{color:var(--le-input-placeholder-color)}.icon-start,.icon-end{display:flex;align-items:center;justify-content:center;padding:0 8px;color:var(--le-input-desc-color)}.le-input-description{font-size:0.85em;color:var(--le-input-desc-color);margin-top:2px}.le-input-description::has(le-slot>slot[name=description]:empty){display:none}";
+
+const LeStringInput = /*@__PURE__*/ proxyCustomElement(class LeStringInput extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.leChange = createEvent(this, "change");
+        this.leInput = createEvent(this, "input");
+    }
+    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
+     */
+    name;
+    /**
+     * The type of the input (text, email, password, etc.)
+     */
+    type = 'text';
+    /**
+     * Label for the input
+     */
+    label;
+    /**
+     * Icon for the start icon
+     */
+    iconStart;
+    /**
+     * Icon for the end icon
+     */
+    iconEnd;
+    /**
+     * Placeholder text
+     */
+    placeholder;
+    /**
+     * Whether the input is disabled
+     */
+    disabled = false;
+    /**
+     * Whether the input is read-only
+     */
+    readonly = false;
+    /**
+     * External ID for linking with external systems
+     */
+    externalId;
+    /**
+     * Emitted when the value changes (on blur or Enter)
+     */
+    leChange;
+    /**
+     * Emitted when the input value changes (on keystroke)
+     */
+    leInput;
+    handleInput = (ev) => {
+        const input = ev.target;
+        this.value = input.value;
+        this.leInput.emit({
+            value: this.value,
+            name: this.name,
+            externalId: this.externalId
+        });
+    };
+    handleChange = (ev) => {
+        const input = ev.target;
+        this.value = input.value;
+        this.leChange.emit({
+            value: this.value,
+            name: this.name,
+            externalId: this.externalId
+        });
+    };
+    handleClick = (ev) => {
+        ev.stopPropagation();
+    };
+    render() {
+        return (h("le-component", { key: 'd0c69370dae2d1fee5700954e4823d2a03a51331', component: "le-string-input", hostClass: classnames({ 'disabled': this.disabled }) }, h("div", { key: '4acae8d3c34da2a86970a616c493ff210d561f5f', class: "le-input-wrapper" }, this.label && (h("label", { key: '609191b45187b6b1a65d05cd594b149760ac6882', class: "le-input-label", htmlFor: this.name }, this.label)), h("div", { key: '36b4caff4468ac7421db03f811cb3ef4a622b001', class: "le-input-container" }, this.iconStart && (h("span", { key: '344f88887fe8270bbef7e26ec1ad5da9fae1f8e4', class: "icon-start" }, this.iconStart)), h("input", { key: '4ba7beeddd7fb3cf23d03e029d11a804764cdd6e', id: this.name, type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onChange: this.handleChange, onClick: this.handleClick }), this.iconEnd && (h("span", { key: '7cdd4b52c3e1a1b18b19e697bdb42431941bba01', class: "icon-end" }, this.iconEnd))), h("div", { key: '113a75aa413e4d95300aeaa97d1ce7a75cf68c7a', class: "le-input-description" }, h("le-slot", { key: '0b37fc14e6df68f6c44cf9001d63a70f019e1cc3', name: "description", type: "text", tag: "p", label: "Description" }, h("slot", { key: '2674056dc915fabdb4fcbcaa13294a116b9509a6', name: "description" }))))));
+    }
+    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;
+    }
+    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 leSlotDefaultCss = ":host{display:contents;--le-slot-border-color:#0088ff;--le-slot-bg-color:rgba(0, 136, 255, 0.05);--le-slot-header-bg:rgb(218, 238, 255);--le-slot-label-color:#0066cc;--le-slot-description-color:#666;--le-slot-required-color:#e53935;--le-slot-dropzone-min-height:20px;--le-slot-dropzone-border-color:#ccc}.le-slot-container,.le-slot-header,.le-slot-description,.le-slot-dropzone,.le-slot-input{display:none}.hidden-slot{display:none}:host(.admin-mode){display:block;flex:1}:host(.admin-mode) .le-slot-container{position:relative;display:flex;flex-direction:column;border:2px dashed var(--le-slot-border-color);border-radius:4px;background:var(--le-slot-bg-color);margin:4px 0}:host(.admin-mode) .le-slot-header{display:flex;align-items:center;gap:4px;padding:0 0 0 var(--le-spacing-1, 4px);background:var(--le-slot-header-bg);border-bottom:1px solid var(--le-slot-border-color);font-size:var(--le-font-size-xs, 11px);font-weight:400;text-transform:capitalize}:host(.admin-mode) .le-slot-header-no-label{justify-content:flex-end;height:16px;border:none;background-color:transparent}.le-slot-label{color:var(--le-slot-label-color);text-align:start;overflow:hidden;width:0;flex:1 1 0%}.le-slot-required{color:var(--le-slot-required-color);font-weight:bold}:host(.admin-mode) .le-slot-description{display:block;padding:4px 8px;font-size:12px;color:var(--le-slot-description-color);font-style:italic}:host(.admin-mode) .le-slot-description-icon{display:inline-block;font-size:9px;line-height:1;cursor:pointer;color:var(--le-slot-description-color)}:host(.admin-mode) .le-slot-dropzone{display:block;min-height:var(--le-slot-dropzone-min-height);padding:var(--le-spacing-1, 4px);position:relative}:host(.admin-mode) .le-slot-dropzone:empty::before{content:'Drop content here';display:flex;align-items:center;justify-content:center;position:absolute;inset:8px;border:2px dashed var(--le-slot-dropzone-border-color);border-radius:4px;color:#999;font-size:12px;pointer-events:none}:host(.admin-mode.drag-over) .le-slot-container{border-color:#00cc66;background:rgba(0, 204, 102, 0.1)}:host(.admin-mode.drag-over) .le-slot-dropzone:empty::before{border-color:#00cc66;color:#00cc66;content:'Release to drop'}:host(.admin-mode) .le-slot-input{display:block;padding:var(--le-spacing-1, 4px)}:host(.admin-mode) .le-slot-input input,:host(.admin-mode) .le-slot-input textarea{display:block;width:100%;padding:8px 10px;border:1px solid var(--le-slot-dropzone-border-color);border-radius:4px;font-family:inherit;font-size:14px;line-height:1.4;background:#fff;color:#333;box-sizing:border-box;transition:border-color 0.2s, box-shadow 0.2s}:host(.admin-mode) .le-slot-input input:focus,:host(.admin-mode) .le-slot-input textarea:focus{outline:none;border-color:var(--le-slot-border-color);box-shadow:0 0 0 3px rgba(0, 136, 255, 0.15)}:host(.admin-mode) .le-slot-input input::placeholder,:host(.admin-mode) .le-slot-input textarea::placeholder{color:#999}:host(.admin-mode) .le-slot-input textarea{resize:vertical;min-height:60px}:host(.admin-mode) .le-slot-input slot{display:none}.le-slot-invalid{color:var(--le-slot-required-color);font-size:10px;margin-left:auto;font-weight:normal;text-transform:none}:host(.admin-mode) .le-slot-input.has-error input,:host(.admin-mode) .le-slot-input.has-error textarea{border-color:var(--le-slot-required-color);background:rgba(229, 57, 53, 0.05)}:host(.admin-mode) .le-slot-input.has-error input:focus,:host(.admin-mode) .le-slot-input.has-error textarea:focus{border-color:var(--le-slot-required-color);box-shadow:0 0 0 3px rgba(229, 57, 53, 0.15)}.le-slot-add-btn{font-size:24px;line-height:0px;width:12px;height:12px}.le-slot-header-no-label .le-slot-add-btn{font-size:16px}.le-slot-button{width:20px;height:20px}:host(.admin-mode) .le-slot-header-no-label.le-slot-header-text{height:0}";
+
+const LeSlot = /*@__PURE__*/ proxyCustomElement(class LeSlot extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.leSlotChange = createEvent(this, "leSlotChange");
+    }
+    get el() { return this; }
+    /**
+     * The type of slot content.
+     * - `slot`: Default, shows a dropzone for components (default)
+     * - `text`: Shows a single-line text input
+     * - `textarea`: Shows a multi-line text area
+     */
+    type = 'slot';
+    /**
+     * The name of the slot this placeholder represents.
+     * Should match the slot name in the parent component.
+     */
+    name = '';
+    /**
+     * Label to display in admin mode.
+     * If not provided, the slot name will be used.
+     */
+    label;
+    /**
+     * Description of what content this slot accepts.
+     * Shown in admin mode to guide content editors.
+     */
+    description;
+    /**
+     * Comma-separated list of allowed component tags for this slot.
+     * Used by CMS to filter available components.
+     *
+     * @example "le-card,le-button,le-text"
+     */
+    allowedComponents;
+    /**
+     * Whether multiple components can be dropped in this slot.
+     */
+    multiple = true;
+    /**
+     * Whether this slot is required to have content.
+     */
+    required = false;
+    /**
+     * Placeholder text for text/textarea inputs in admin mode.
+     */
+    placeholder;
+    /**
+     * The HTML tag to create when there's no slotted element.
+     * Used with type="text" or type="textarea" to auto-create elements.
+     *
+     * @example "h3" - creates <h3 slot="header">content</h3>
+     * @example "p" - creates <p slot="content">content</p>
+     */
+    tag;
+    /**
+     * CSS styles for the slot dropzone container.
+     * Useful for layouts - e.g., "flex-direction: row" for horizontal stacks.
+     * Only applies in admin mode for type="slot".
+     */
+    slotStyle;
+    /**
+     * Internal state to track admin mode
+     */
+    adminMode = false;
+    /**
+     * Internal state for text input value (synced from slot content)
+     */
+    textValue = '';
+    /**
+     * Whether the current textValue contains valid HTML
+     */
+    isValidHtml = true;
+    /**
+     * Available components loaded from Custom Elements Manifest
+     */
+    availableComponents = [];
+    /**
+     * Whether the component picker popover is open
+     */
+    pickerOpen = false;
+    /**
+     * Reference to the slot element to access assignedNodes
+     */
+    slotRef;
+    /**
+     * The original slotted element (e.g., <h3 slot="header">)
+     */
+    slottedElement;
+    /**
+     * Emitted when text content changes in admin mode.
+     * The event detail contains the new text value and validity.
+     */
+    leSlotChange;
+    disconnectModeObserver;
+    connectedCallback() {
+        this.disconnectModeObserver = observeModeChanges(this.el, (mode) => {
+            const wasAdmin = this.adminMode;
+            this.adminMode = mode === 'admin';
+            // When entering admin mode, read content from slotted elements
+            if (this.adminMode && !wasAdmin) {
+                // Need to wait for render to access slot ref
+                requestAnimationFrame(() => this.readSlottedContent());
+                // Load available components for the component picker
+                if (this.type === 'slot') {
+                    this.loadAvailableComponents();
+                }
+            }
+        });
+    }
+    disconnectedCallback() {
+        this.disconnectModeObserver?.();
+    }
+    /**
+     * Flag to prevent re-reading content right after we updated it
+     */
+    isUpdating = false;
+    /**
+     * Read content from slotted elements via assignedNodes()
+     */
+    readSlottedContent() {
+        if (!this.slotRef)
+            return;
+        // Skip if we just updated the content ourselves
+        if (this.isUpdating) {
+            this.isUpdating = false;
+            return;
+        }
+        const assignedNodes = this.slotRef.assignedNodes({ flatten: true });
+        // For text/textarea types, we want to edit the innerHTML of slotted elements
+        if (this.type === 'text' || this.type === 'textarea') {
+            // Find the first element node (skip text nodes that are just whitespace)
+            const elementNode = assignedNodes.find(node => node.nodeType === Node.ELEMENT_NODE);
+            if (elementNode) {
+                // Only update textValue if slotted element changed or we don't have one yet
+                if (this.slottedElement !== elementNode) {
+                    this.slottedElement = elementNode;
+                    this.textValue = elementNode.innerHTML?.trim() || '';
+                    // console.log(`[le-slot "${this.name}"] Read slotted content:`, this.textValue);
+                }
+            }
+            else {
+                // No element, check for direct text content
+                const textContent = assignedNodes
+                    .filter(node => node.nodeType === Node.TEXT_NODE)
+                    .map(node => node.textContent)
+                    .join('')
+                    .trim();
+                if (textContent && !this.textValue) {
+                    this.textValue = textContent;
+                    // console.log(`[le-slot "${this.name}"] Read text content:`, this.textValue);
+                }
+            }
+        }
+    }
+    /**
+     * Validates if a string contains valid HTML
+     */
+    validateHtml(html) {
+        // Empty string is valid
+        if (!html.trim())
+            return true;
+        // Create a template element to parse the HTML
+        const template = document.createElement('template');
+        template.innerHTML = html;
+        // Check that we don't have obviously broken HTML
+        // Count opening and closing tags for common elements
+        const openTags = (html.match(/<[a-z][^>]*(?<!\/)>/gi) || []).length;
+        const closeTags = (html.match(/<\/[a-z][^>]*>/gi) || []).length;
+        const selfClosing = (html.match(/<[a-z][^>]*\/>/gi) || []).length;
+        // Simple validation: opening tags (minus self-closing) should roughly match closing tags
+        // Allow some tolerance for void elements like <br>, <img>, etc.
+        const voidElements = (html.match(/<(br|hr|img|input|meta|link|area|base|col|embed|param|source|track|wbr)[^>]*>/gi) || []).length;
+        const effectiveOpenTags = openTags - selfClosing - voidElements;
+        // If difference is too large, HTML is likely broken
+        if (Math.abs(effectiveOpenTags - closeTags) > 1) {
+            return false;
+        }
+        return true;
+    }
+    handleTextInput = (event) => {
+        const target = event.target;
+        this.textValue = target.value;
+        this.isValidHtml = this.validateHtml(this.textValue);
+        if (this.isValidHtml) {
+            // Set flag to prevent slotchange from re-reading what we just wrote
+            this.isUpdating = true;
+            console.log('Updating text value:', this.textValue, 'slottedElement:', this.slottedElement);
+            if (this.slottedElement) {
+                // Update existing slotted element's innerHTML
+                this.slottedElement.innerHTML = this.textValue;
+            }
+            else if (this.tag && this.textValue) {
+                // No slotted element exists
+                // If the slot doesn't have a name, then it's the default slot
+                // remove the existing non-slotted content (text nodes and elements without slot attribute)
+                const rootNode = this.el.getRootNode();
+                if (!this.name && rootNode instanceof ShadowRoot) {
+                    const hostComponent = rootNode.host;
+                    Array.from(hostComponent.childNodes).forEach(node => {
+                        if (node.nodeType === Node.TEXT_NODE ||
+                            (node.nodeType === Node.ELEMENT_NODE && !node.hasAttribute('slot'))) {
+                            node.remove();
+                        }
+                    });
+                }
+                // create one using the specified tag
+                this.createSlottedElement();
+            }
+            else if (this.textValue) {
+                // no tag specified - just replace everything in the host component
+                const rootNode = this.el.getRootNode();
+                if (rootNode instanceof ShadowRoot) {
+                    const hostComponent = rootNode.host;
+                    hostComponent.innerHTML = this.textValue;
+                }
+            }
+        }
+        this.leSlotChange.emit({
+            name: this.name,
+            value: this.textValue,
+            isValid: this.isValidHtml
+        });
+    };
+    /**
+     * Create a new slotted element when none exists.
+     * The element is appended to the host component's light DOM.
+     */
+    createSlottedElement() {
+        if (!this.tag)
+            return;
+        // Find the host component (le-card, etc.) by traversing up through shadow DOM
+        // le-slot is inside le-card's shadow DOM, so we need to find le-card's host
+        const rootNode = this.el.getRootNode();
+        if (!(rootNode instanceof ShadowRoot))
+            return;
+        const hostComponent = rootNode.host;
+        if (!hostComponent)
+            return;
+        // Create the new element
+        const newElement = document.createElement(this.tag);
+        newElement.innerHTML = this.textValue;
+        // Set the slot attribute if this is a named slot
+        if (this.name) {
+            newElement.setAttribute('slot', this.name);
+        }
+        // Append to the host component's light DOM
+        hostComponent.appendChild(newElement);
+        // Store reference to the new element
+        this.slottedElement = newElement;
+        // console.log(`[le-slot "${this.name}"] Created new <${this.tag}> element`);
+    }
+    /**
+     * Load available components from Custom Elements Manifest
+     */
+    async loadAvailableComponents() {
+        try {
+            const response = await fetch('/custom-elements.json');
+            const manifest = await response.json();
+            const components = [];
+            const allowedList = this.allowedComponents?.split(',').map(s => s.trim()) || [];
+            for (const module of manifest.modules) {
+                for (const declaration of module.declarations || []) {
+                    if (declaration.tagName && declaration.customElement) {
+                        // Skip internal components (le-slot, le-component, le-popover)
+                        const isInternal = ['le-slot', 'le-component', 'le-popover'].includes(declaration.tagName);
+                        if (isInternal)
+                            continue;
+                        // If allowedComponents is specified, filter by it
+                        if (allowedList.length > 0 && !allowedList.includes(declaration.tagName)) {
+                            continue;
+                        }
+                        components.push({
+                            tagName: declaration.tagName,
+                            name: this.formatComponentName(declaration.tagName),
+                            description: declaration.description || '',
+                        });
+                    }
+                }
+            }
+            this.availableComponents = components;
+        }
+        catch (error) {
+            console.warn('[le-slot] Failed to load component manifest:', error);
+        }
+    }
+    /**
+     * Format a tag name into a display name
+     * e.g., 'le-card' -> 'Card'
+     */
+    formatComponentName(tagName) {
+        return tagName
+            .replace(/^le-/, '')
+            .split('-')
+            .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+            .join(' ');
+    }
+    /**
+     * Add a new component to the slot
+     */
+    addComponent(tagName) {
+        // Find the host component by traversing up through shadow DOM
+        const rootNode = this.el.getRootNode();
+        if (!(rootNode instanceof ShadowRoot))
+            return;
+        const hostComponent = rootNode.host;
+        if (!hostComponent)
+            return;
+        // Create the new component element
+        const newElement = document.createElement(tagName);
+        // Set the slot attribute if this is a named slot
+        if (this.name) {
+            newElement.setAttribute('slot', this.name);
+        }
+        // Append to the host component's light DOM
+        hostComponent.appendChild(newElement);
+        // Emit change event so the page can save
+        this.leSlotChange.emit({
+            name: this.name,
+            value: hostComponent.innerHTML,
+            isValid: true,
+        });
+    }
+    /**
+     * Handle slot change event to re-read content when nodes are assigned
+     */
+    handleSlotChange = () => {
+        this.readSlottedContent();
+    };
+    render() {
+        const displayLabel = this.label || this.name;
+        // Always render the same structure, CSS handles visibility via .admin-mode class
+        return (h(Host, { key: 'bae03733e0443c10f1abe8b4c846d3eae0723d3d', class: {
+                'admin-mode': this.adminMode,
+                'invalid-html': !this.isValidHtml
+            }, role: this.adminMode ? 'region' : undefined, "aria-label": this.adminMode ? `Slot: ${displayLabel}` : undefined, "data-slot-name": this.name, "data-slot-type": this.type, "data-allowed": this.allowedComponents, "data-multiple": this.multiple, "data-required": this.required }, this.adminMode ? (h("div", { class: "le-slot-container" }, h("div", { class: classnames('le-slot-header', {
+                'le-slot-header-no-label': !displayLabel,
+                'le-slot-header-text': this.type === 'text',
+                'le-slot-header-error': !this.isValidHtml
+            }) }, displayLabel && (h("span", { class: "le-slot-label" }, displayLabel, this.required && h("span", { class: "le-slot-required" }, "*"))), !this.isValidHtml && h("span", { class: "le-slot-invalid" }, "\u26A0 Invalid HTML"), this.type === 'slot' && this.adminMode && (h("le-popover", { mode: "default", showClose: true, align: "start", position: "right", popoverTitle: "Add Component", open: this.pickerOpen, onLePopoverOpen: () => this.pickerOpen = true, onLePopoverClose: () => this.pickerOpen = false }, h("le-button", { type: "button", class: "le-slot-button", slot: "trigger", variant: "clear", size: "small", "aria-label": "Add component", "icon-only": true }, h("span", { class: "le-slot-add-btn", slot: "icon-only" }, "+")), h("div", { class: "le-slot-picker" }, this.availableComponents.length > 0 ? (h("ul", { class: "le-slot-picker-list" }, this.availableComponents.map(component => (h("li", { key: component.tagName }, h("button", { class: "le-slot-picker-item", onClick: () => {
+                this.addComponent(component.tagName);
+                this.pickerOpen = false;
+            } }, h("span", { class: "le-slot-picker-name" }, component.name), component.description && (h("span", { class: "le-slot-picker-desc" }, component.description)))))))) : (h("div", { class: "le-slot-picker-empty" }, "No components available")))))), this.renderContent())) : (
+        // In default mode, just pass through the slot - slotted content renders naturally
+        // Note: We use unnamed slot here because named slots from parent component
+        // are passed as le-slot's light DOM children
+        h("slot", null))));
+    }
+    renderContent() {
+        // Create the slot element with ref for reading assignedNodes
+        // Wrap in a hidden div since slot elements can't have style prop in Stencil
+        // Note: We use unnamed slot here because named slots from parent component
+        // are passed as le-slot's light DOM children
+        const slotElement = (h("div", { class: "hidden-slot" }, h("slot", { ref: (el) => this.slotRef = el, onSlotchange: this.handleSlotChange })));
+        switch (this.type) {
+            case 'text':
+                return (h("div", { class: { 'le-slot-input': true, 'has-error': !this.isValidHtml } }, h("le-string-input", { mode: "default", value: this.textValue, placeholder: this.placeholder || `Enter ${this.label || this.name || 'text'}...`, onChange: this.handleTextInput }), slotElement));
+            case 'textarea':
+                return (h("div", { class: { 'le-slot-input': true, 'has-error': !this.isValidHtml } }, h("textarea", { value: this.textValue, placeholder: this.placeholder || `Enter ${this.label || this.name || 'text'}...`, onInput: this.handleTextInput, required: this.required, rows: 3 }), slotElement));
+            case 'slot':
+            default:
+                // Parse slotStyle string into style object if provided
+                const dropzoneStyle = {};
+                if (this.slotStyle) {
+                    this.slotStyle.split(';').forEach(rule => {
+                        const [prop, value] = rule.split(':').map(s => s.trim());
+                        if (prop && value) {
+                            // Convert kebab-case to camelCase for style object
+                            const camelProp = prop.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+                            dropzoneStyle[camelProp] = value;
+                        }
+                    });
+                }
+                return (h("div", { class: "le-slot-dropzone", style: dropzoneStyle }, h("slot", { ref: (el) => this.slotRef = el, onSlotchange: this.handleSlotChange })));
+        }
+    }
+    static get style() { return leSlotDefaultCss; }
+}, [769, "le-slot", {
+        "type": [1],
+        "name": [1],
+        "label": [1],
+        "description": [1],
+        "allowedComponents": [1, "allowed-components"],
+        "multiple": [4],
+        "required": [4],
+        "placeholder": [1],
+        "tag": [1],
+        "slotStyle": [1, "slot-style"],
+        "adminMode": [32],
+        "textValue": [32],
+        "isValidHtml": [32],
+        "availableComponents": [32],
+        "pickerOpen": [32]
+    }]);
+function defineCustomElement$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 leComponentCss = ":host{display:contents}:host(.admin-mode){display:block}.le-component-wrapper{position:relative;border:2px dashed var(--le-admin-border-color, #90caf9);border-radius:var(--le-radius-md, 8px);background:var(--le-admin-bg, rgba(144, 202, 249, 0.05));transition:border-color 0.2s ease, box-shadow 0.2s ease}.le-component-wrapper:hover{border-color:var(--le-admin-border-hover, #42a5f5);box-shadow:0 0 0 2px var(--le-admin-glow, rgba(66, 165, 245, 0.2))}.le-component-header{display:flex;align-items:center;justify-content:space-between;gap:var(--le-spacing-1, 4px);padding:0 0 0 var(--le-spacing-1, 4px);background:var(--le-admin-header-bg, rgba(144, 202, 249, 0.15));border-bottom:1px solid var(--le-admin-border-color, #90caf9);border-radius:var(--le-radius-md, 8px) var(--le-radius-md, 8px) 0 0;font-size:var(--le-font-size-xs, 11px)}.le-component-name{font-weight:var(--le-font-weight-medium, 500);color:var(--le-admin-text, #1976d2);text-transform:capitalize;text-align:start;overflow:hidden;width:0;flex:1 1 0%}.le-component-content{padding:var(--le-space-xs, 4px)}.le-component-trigger{font-size:24px;line-height:0px;width:12px;height:12px}.le-component-button{width:20px}.property-editor{display:flex;flex-direction:column;gap:var(--le-space-sm, 8px);max-width:380px}.property-field{display:flex;flex-direction:column;gap:var(--le-space-xs, 4px)}.property-field label{display:flex;flex-direction:column;gap:2px;font-size:var(--le-font-size-sm, 13px);font-weight:var(--le-font-weight-medium, 500);color:var(--le-color-text, #333)}.property-hint{font-size:var(--le-font-size-xs, 11px);font-weight:normal;color:var(--le-color-text-secondary, #666);line-height:1.3}.property-field input[type=\"text\"],.property-field input[type=\"number\"],.property-field select{padding:var(--le-space-xs, 4px) var(--le-space-sm, 8px);border:1px solid var(--le-color-border, #ddd);border-radius:var(--le-radius-md, 7px);font-size:var(--le-font-size-sm, 13px);font-family:inherit;background:var(--le-color-surface, #fff);color:var(--le-color-text, #333);transition:border-color 0.15s ease, box-shadow 0.15s ease}.property-field input:focus,.property-field select:focus{outline:none;border-color:var(--le-color-primary, #1976d2);box-shadow:0 0 0 2px var(--le-color-primary-light, rgba(25, 118, 210, 0.2))}.property-field--checkbox{flex-direction:column}.property-field--checkbox label{flex-direction:row;align-items:center;gap:var(--le-space-sm, 8px);cursor:pointer}.property-field--checkbox input[type=\"checkbox\"]{width:16px;height:16px;margin:0;cursor:pointer;accent-color:var(--le-color-primary, #1976d2)}.property-field--checkbox .property-hint{margin-left:24px}.no-properties{margin:0;padding:var(--le-space-sm, 8px);font-size:var(--le-font-size-sm, 13px);color:var(--le-color-text-secondary, #666);text-align:center}.property-editor-container{display:flex;flex-direction:column;gap:var(--le-space-md, 12px)}.property-editor-actions{padding-top:var(--le-space-sm, 8px);border-top:1px solid var(--le-color-border, #e5e5e5)}.delete-component-btn{display:flex;align-items:center;justify-content:center;gap:var(--le-space-xs, 4px);width:100%;padding:var(--le-space-sm, 8px) var(--le-space-md, 12px);border:1px solid var(--le-color-danger, #e53935);border-radius:var(--le-radius-md, 6px);background:transparent;color:var(--le-color-danger, #e53935);font-size:var(--le-font-size-sm, 13px);font-weight:500;cursor:pointer;transition:background-color 0.15s, color 0.15s}.delete-component-btn:hover{background:var(--le-color-danger, #e53935);color:white}.delete-component-btn:active{opacity:0.9}";
+
+const LeComponent = /*@__PURE__*/ proxyCustomElement(class LeComponent extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    get el() { return this; }
+    /**
+     * The tag name of the component (e.g., 'le-card').
+     * Used to look up property metadata and display the component name.
+     */
+    component;
+    /**
+     * Optional display name for the component.
+     * If not provided, the tag name will be formatted as the display name.
+     */
+    displayName;
+    /**
+     * Classes to apply to the host element.
+     * Allows parent components to pass their styling classes.
+     */
+    hostClass;
+    /**
+     * Inline styles to apply to the host element.
+     * Allows parent components to pass dynamic styles (e.g., flex properties).
+     */
+    hostStyle;
+    /**
+     * Reference to the host element (found automatically from parent)
+     */
+    hostElement;
+    /**
+     * Internal state to track admin mode
+     */
+    adminMode = false;
+    /**
+     * Component metadata loaded from Custom Elements Manifest
+     */
+    componentMeta = null;
+    /**
+     * Current property values of the host component
+     */
+    propertyValues = {};
+    disconnectModeObserver;
+    connectedCallback() {
+        // Find the host element - le-component is rendered inside the component's shadow DOM,
+        // so we need to find the shadow root's host element
+        this.findHostElement();
+        this.disconnectModeObserver = observeModeChanges(this.el, (mode) => {
+            this.adminMode = mode === 'admin';
+            // Load metadata and refresh property values only when entering admin mode
+            if (this.adminMode) {
+                if (!this.componentMeta) {
+                    this.loadComponentMetadata();
+                }
+                else {
+                    this.readPropertyValues();
+                }
+            }
+        });
+    }
+    /**
+     * Find the host element by traversing up through shadow DOM
+     */
+    findHostElement() {
+        // Get the shadow root that contains this le-component
+        const rootNode = this.el.getRootNode();
+        if (rootNode instanceof ShadowRoot) {
+            // The host of this shadow root is our target component (e.g., le-card)
+            this.hostElement = rootNode.host;
+        }
+    }
+    componentDidLoad() {
+        // Read initial property values from the host element
+        this.readPropertyValues();
+    }
+    disconnectedCallback() {
+        this.disconnectModeObserver?.();
+    }
+    /**
+     * Formats a tag name into a display name
+     * e.g., 'le-card' -> 'Card'
+     */
+    formatDisplayName(tagName) {
+        return tagName
+            .replace(/^le-/, '') // Remove 'le-' prefix
+            .split('-')
+            .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+            .join(' ');
+    }
+    /**
+     * Load component metadata from the Custom Elements Manifest
+     */
+    async loadComponentMetadata() {
+        try {
+            // Fetch the manifest - in production this would be bundled or cached
+            const response = await fetch('/custom-elements.json');
+            const manifest = await response.json();
+            // Find the component definition
+            for (const module of manifest.modules) {
+                for (const declaration of module.declarations || []) {
+                    if (declaration.tagName === this.component) {
+                        const attributes = (declaration.attributes || []).filter((attr) => !this.isInternalAttribute(attr.name));
+                        this.componentMeta = {
+                            tagName: declaration.tagName,
+                            description: declaration.description,
+                            attributes,
+                        };
+                        // console.log(`[le-component] Loaded metadata for ${this.component}:`, this.componentMeta);
+                        // Read property values after metadata is loaded
+                        this.readPropertyValues();
+                        return;
+                    }
+                }
+            }
+            // console.warn(`[le-component] No metadata found for component: ${this.component}`);
+        }
+        catch (error) {
+            // console.warn(`[le-component] Failed to load metadata for component: ${this.component}`, error);
+        }
+    }
+    /**
+     * Check if an attribute is internal (should not be shown in editor)
+     */
+    isInternalAttribute(name) {
+        const internalAttrs = ['mode', 'theme', 'class', 'style', 'id', 'slot'];
+        return internalAttrs.includes(name);
+    }
+    /**
+     * Read current property values from the host element
+     */
+    readPropertyValues() {
+        if (!this.hostElement || !this.componentMeta)
+            return;
+        const values = {};
+        for (const attr of this.componentMeta.attributes) {
+            const value = this.hostElement.getAttribute(attr.name);
+            values[attr.name] = this.parseAttributeValue(value, attr.type?.text);
+        }
+        this.propertyValues = values;
+    }
+    /**
+     * Parse an attribute value based on its type
+     */
+    parseAttributeValue(value, type) {
+        if (value === null)
+            return undefined;
+        if (type === 'boolean') {
+            return value !== null && value !== 'false';
+        }
+        if (type === 'number') {
+            return parseFloat(value);
+        }
+        return value;
+    }
+    /**
+     * Handle property value changes from the editor
+     */
+    handlePropertyChange(attrName, value, type) {
+        if (!this.hostElement)
+            return;
+        // Update the host element's attribute
+        if (type === 'boolean') {
+            if (value) {
+                this.hostElement.setAttribute(attrName, '');
+            }
+            else {
+                this.hostElement.removeAttribute(attrName);
+            }
+        }
+        else if (value === undefined || value === '') {
+            this.hostElement.removeAttribute(attrName);
+        }
+        else {
+            this.hostElement.setAttribute(attrName, String(value));
+        }
+        // Update local state
+        this.propertyValues = { ...this.propertyValues, [attrName]: value };
+    }
+    /**
+     * Delete this component from the DOM
+     */
+    deleteComponent() {
+        if (!this.hostElement)
+            return;
+        // Confirm deletion
+        const name = this.displayName || this.formatDisplayName(this.component);
+        if (!confirm(`Delete this ${name}?`))
+            return;
+        // Remove the host element from its parent
+        const parent = this.hostElement.parentElement;
+        if (parent) {
+            this.hostElement.remove();
+        }
+    }
+    /**
+     * Render the property editor form
+     */
+    renderPropertyEditor() {
+        const hasProperties = this.componentMeta && this.componentMeta.attributes.length > 0;
+        return (h("div", { class: "property-editor-container" }, hasProperties ? (h("form", { class: "property-editor", onSubmit: (e) => e.preventDefault() }, this.componentMeta.attributes.map(attr => this.renderPropertyField(attr)))) : (h("p", { class: "no-properties" }, "No editable properties")), h("div", { class: "property-editor-actions" }, h("le-button", { type: "button", variant: "outlined", color: "danger", "full-width": true, onClick: () => this.deleteComponent() }, h("span", { slot: "icon-start" }, "\uD83D\uDDD1\uFE0F"), h("span", null, "Delete Component")))));
+    }
+    /**
+     * Render a single property field based on its type
+     */
+    renderPropertyField(attr) {
+        const value = this.propertyValues[attr.name];
+        const type = attr.type?.text || 'string';
+        // Check if type is a union of string literals (e.g., "'default' | 'outlined' | 'elevated'")
+        const enumMatch = type.match(/^'[^']+'/);
+        if (enumMatch) {
+            const options = type.split('|').map(opt => opt.trim().replace(/'/g, ''));
+            return (h("div", { class: "property-field" }, h("label", { htmlFor: `prop-${attr.name}` }, attr.name, attr.description && h("span", { class: "property-hint" }, attr.description)), h("select", { id: `prop-${attr.name}`, onChange: (e) => this.handlePropertyChange(attr.name, e.target.value, type) }, options.map(opt => (h("option", { value: opt, selected: value === opt || (!value && attr.default?.replace(/'/g, '') === opt) }, opt))))));
+        }
+        // Boolean type
+        if (type === 'boolean') {
+            return (h("div", { class: "property-field property-field--checkbox" }, h("le-checkbox", { name: `prop-${attr.name}`, checked: value === true || value === '', onChange: (e) => this.handlePropertyChange(attr.name, e.target.checked, type) }, attr.name, attr.description && h("div", { slot: "description" }, attr.description))));
+        }
+        // Number type
+        if (type === 'number') {
+            return (h("div", { class: "property-field" }, h("label", { htmlFor: `prop-${attr.name}` }, attr.name, attr.description && h("span", { class: "property-hint" }, attr.description)), h("input", { type: "number", id: `prop-${attr.name}`, value: value ?? '', placeholder: attr.default, onChange: (e) => this.handlePropertyChange(attr.name, e.target.value, type) })));
+        }
+        // Default: string/text input
+        return (h("div", { class: "property-field" }, h("le-string-input", { name: `prop-${attr.name}`, label: attr.name, value: value ?? '', placeholder: attr.default?.replace(/'/g, ''), onChange: (e) => this.handlePropertyChange(attr.name, e.detail.value, type) }, h("span", { slot: "description" }, attr.description))));
+    }
+    render() {
+        const name = this.displayName || this.formatDisplayName(this.component);
+        // In default mode, just pass through content with host classes
+        if (!this.adminMode) {
+            return (h(Host, { class: classnames(this.component, this.hostClass), style: this.hostStyle }, h("slot", null)));
+        }
+        // In admin mode, show wrapper with header and settings
+        return (h(Host, { class: classnames(this.component, this.hostClass, 'admin-mode'), style: this.hostStyle }, h("div", { class: "le-component-wrapper" }, h("div", { class: "le-component-header" }, h("span", { class: "le-component-name" }, name), h("le-popover", { popoverTitle: `${name} Settings`, position: "right", align: "start", "min-width": "300px", mode: "default" }, h("le-button", { type: "button", class: "le-component-button", slot: "trigger", variant: "clear", size: "small", "aria-label": "Edit component properties", "icon-only": true }, h("span", { class: "le-component-trigger", slot: "icon-only" }, "\u2699")), this.renderPropertyEditor())), h("div", { class: "le-component-content" }, h("slot", null)))));
+    }
+    static get 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);
+            }
+            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 LeCheckbox = /*@__PURE__*/ proxyCustomElement(class LeCheckbox extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.leChange = createEvent(this, "change");
+    }
+    get el() { return this; }
+    /**
+     * Whether the checkbox is checked
+     */
+    checked = false;
+    /**
+     * Whether the checkbox is disabled
+     */
+    disabled = false;
+    /**
+     * The name of the checkbox input
+     */
+    name;
+    /**
+     * The value of the checkbox input
+     */
+    value;
+    /**
+     * External ID for linking with external systems (e.g. database ID, PDF form field ID)
+     */
+    externalId;
+    /**
+     * Emitted when the checked state changes
+     */
+    leChange;
+    handleChange = (event) => {
+        // We stop the internal button click from bubbling up
+        event.stopPropagation();
+        if (this.disabled) {
+            event.preventDefault();
+            return;
+        }
+        const input = event.target;
+        this.checked = input.checked;
+        this.leChange.emit({
+            checked: this.checked,
+            value: this.value,
+            name: this.name,
+            externalId: this.externalId
+        });
+    };
+    render() {
+        return (h("le-component", { key: '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" }))))));
+    }
+    static get style() { return leCheckboxCss; }
+}, [769, "le-checkbox", {
+        "checked": [1540],
+        "disabled": [4],
+        "name": [1],
+        "value": [1],
+        "externalId": [1, "external-id"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["le-checkbox", "le-button", "le-checkbox", "le-component", "le-popover", "le-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 leButtonDefaultCss = ":host{display:inline-block;--le-button-border-radius:var(--le-radius-md);--le-button-padding-x:0.4rem;--le-button-padding-y:0.4rem;--le-button-small-padding:0.25rem;--le-button-font-size:var(--le-font-size-md);--le-button-font-weight:var(--le-font-weight-medium);--le-button-transition:var(--le-transition-fast);--le-button-icon-aspect-ratio:1;--_btn-bg:var(--le-color-primary);--_btn-bg-hover:var(--le-color-primary-dark);--_btn-bg-system:var(--le-color-black);--_btn-color:var(--le-color-primary-contrast);--_btn-border-color:var(--le-color-primary)}:host([full-width]){display:block;width:100%}.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--le-spacing-3);width:100%;padding:var(--le-button-padding-y) var(--le-button-padding-x);border:1px solid var(--_btn-border-color);border-radius:var(--le-button-border-radius);background:var(--_btn-bg);color:var(--_btn-color);font-family:var(--le-font-family-base);font-size:var(--le-button-font-size);font-weight:var(--le-button-font-weight);line-height:var(--le-line-height-tight);text-decoration:none;cursor:pointer;transition:background-color var(--le-button-transition) var(--le-transition-easing),\n    border-color var(--le-button-transition) var(--le-transition-easing),\n    box-shadow var(--le-button-transition) var(--le-transition-easing),\n    transform var(--le-button-transition) var(--le-transition-easing)}.button:hover:not(:disabled){background:var(--_btn-bg-hover);border-color:var(--_btn-bg-hover)}.button:active:not(:disabled){transform:translateY(1px)}.button:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px}.button:disabled{opacity:0.5;cursor:not-allowed}:host>le-component.color-primary{--_btn-bg:var(--le-color-primary);--_btn-bg-hover:var(--le-color-primary-dark);--_btn-color:var(--le-color-primary-contrast);--_btn-border-color:var(--le-color-primary)}:host>le-component.color-secondary{--_btn-bg:var(--le-color-secondary);--_btn-bg-hover:var(--le-color-secondary-dark);--_btn-color:var(--le-color-secondary-contrast);--_btn-border-color:var(--le-color-secondary)}:host>le-component.color-success{--_btn-bg:var(--le-color-success);--_btn-bg-hover:var(--le-color-success-dark);--_btn-color:var(--le-color-success-contrast);--_btn-border-color:var(--le-color-success)}:host>le-component.color-warning{--_btn-bg:var(--le-color-warning);--_btn-bg-hover:var(--le-color-warning-dark);--_btn-color:var(--le-color-warning-contrast);--_btn-border-color:var(--le-color-warning)}:host>le-component.color-danger{--_btn-bg:var(--le-color-danger);--_btn-bg-hover:var(--le-color-danger-dark);--_btn-color:var(--le-color-danger-contrast);--_btn-border-color:var(--le-color-danger)}:host>le-component.color-info{--_btn-bg:var(--le-color-info);--_btn-bg-hover:var(--le-color-info-dark);--_btn-color:var(--le-color-info-contrast);--_btn-border-color:var(--le-color-info)}:host>le-component.variant-solid .button{box-shadow:var(--le-shadow-sm)}:host>le-component.variant-solid .button:hover:not(:disabled){box-shadow:var(--le-shadow-md)}:host>le-component.variant-outlined .button{background:transparent;color:var(--_btn-bg);border-color:var(--_btn-border-color)}:host>le-component.variant-outlined .button:hover:not(:disabled){background:var(--_btn-bg);color:var(--_btn-color)}:host>le-component.variant-clear .button{background:transparent;color:var(--_btn-bg);border-color:transparent}:host>le-component.variant-clear .button:hover:not(:disabled){background:var(--le-color-gray-100);border-color:transparent}:host>le-component.variant-system .button{background:transparent;color:var(--_btn-bg-system);border-color:transparent}:host>le-component.size-small .button{--le-button-padding-x:0.4rem;--le-button-padding-y:0.3rem;--le-button-padding-top:0.35rem;--le-button-font-size:var(--le-button-small-font-size, var(--le-font-size-xs))}:host>le-component.size-large .button{--le-button-padding-x:0.9rem;--le-button-padding-y:0.6rem;--le-button-font-size:var(--le-font-size-xl)}:host>le-component.full-width{display:block;width:100%}:host>le-component.selected .button{box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.2)}:host>le-component.variant-outlined.selected .button,:host>le-component.variant-clear.selected .button{background:var(--_btn-bg);color:var(--_btn-color)}:host>le-component.icon-only .button{padding:0.5rem;padding-bottom:0.6rem;aspect-ratio:var(--le-button-icon-aspect-ratio, 1)}:host>le-component.icon-only.size-small .button{padding:var(--le-button-small-padding, 0.25rem)}:host>le-component.icon-only.size-large .button{padding:0.75rem}:host>le-component.icon-only .content{display:none}.content{display:inline}.content:empty{display:none}.icon-start,.icon-only,.icon-end{display:flex;align-items:center;justify-content:center}.icon-start:empty,.icon-only:empty,.icon-end:empty{display:none}::slotted([slot=\"icon-start\"]),::slotted([slot=\"icon-only\"]),::slotted([slot=\"icon-end\"]){display:flex;align-items:center;justify-content:center;width:1.125em;height:1.125em}";
+
+const LeButton = /*@__PURE__*/ proxyCustomElement(class LeButton extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.leClick = createEvent(this, "click");
+    }
+    get el() { return this; }
+    /**
+     * Mode of the popover should be 'default' for internal use
+     */
+    mode;
+    /**
+     * Button variant style
+     * @allowedValues solid | outlined | clear
+     */
+    variant = 'solid';
+    /**
+     * Button color theme (uses theme semantic colors)
+     * @allowedValues primary | secondary | success | warning | danger | info
+     */
+    color = 'primary';
+    /**
+     * Button size
+     * @allowedValues small | medium | large
+     */
+    size = 'medium';
+    /**
+     * Whether the button is in a selected/active state
+     */
+    selected = false;
+    /**
+     * Whether the button takes full width of its container
+     */
+    fullWidth = false;
+    /**
+     * Whether the button displays only an icon (square aspect ratio)
+     */
+    iconOnly = false;
+    /**
+     * Whether the button is disabled
+     */
+    disabled = false;
+    /**
+     * The button type attribute
+     * @allowedValues button | submit | reset
+     */
+    type = 'button';
+    /**
+     * Optional href to make the button act as a link
+     */
+    href;
+    /**
+     * Link target when href is set
+     */
+    target;
+    /**
+     * Emitted when the button is clicked.
+     * This is a custom event that wraps the native click but ensures the target is the le-button.
+     */
+    leClick;
+    handleClick = (event) => {
+        // We stop the internal button click from bubbling up
+        event.stopPropagation();
+        if (this.disabled) {
+            event.preventDefault();
+            return;
+        }
+        // And emit our own click event from the host element
+        this.leClick.emit(event);
+    };
+    render() {
+        const classes = classnames(`variant-${this.variant}`, `color-${this.color}`, `size-${this.size}`, {
+            'selected': this.selected,
+            'full-width': this.fullWidth,
+            'icon-only': this.iconOnly,
+            'disabled': this.disabled,
+        });
+        const TagType = this.href ? 'a' : 'button';
+        const attrs = this.href ? { href: this.href, target: this.target, role: 'button' } : { type: this.type, disabled: this.disabled };
+        return (h("le-component", { key: '363dbfddf4a765bfd6f36ed16d0912e281153806', component: "le-button", hostClass: classes }, h(TagType, { key: 'e112acdff4278e976ad767bd1ea7c9ced5e85f43', class: "button", part: "button", ...attrs, onClick: this.handleClick }, this.iconOnly ? (h("span", { class: "icon-start" }, h("slot", { name: "icon-only" }))) : (h(Fragment, null, h("span", { class: "icon-start" }, h("slot", { name: "icon-start" })), h("le-slot", { name: "", description: "Button text", type: "text", class: "content", part: "content" }, h("slot", null)), h("span", { class: "icon-end" }, h("slot", { name: "icon-end" })))))));
+    }
+    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;
+    }
+    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, getMode as a, setGlobalMode as b, getTheme as c, setGlobalTheme as d, defineCustomElement$4 as e, defineCustomElement$3 as f, generateId as g, defineCustomElement$2 as h, defineCustomElement$1 as i, defineCustomElement as j, classnames as k, LeCheckbox as l, LeComponent as m, LeSlot as n, LeStringInput as o, parseCommaSeparated as p, observeModeChanges as q, slotHasContent as s };
+//# sourceMappingURL=p-DxxFRStS.js.map
+
+//# sourceMappingURL=p-DxxFRStS.js.map