le-kit 0.1.14 → 0.1.16

package/dist/cjs/le-button_13.cjs.entry.js

@@ -0,0 +1,2579 @@
+'use strict';
+
+var index = require('./index-CHzu3ydp.js');
+var utils = require('./utils-CYOKcOW8.js');
+var index$1 = require('./index.cjs.js');
+
+const leButtonCss = ":host{display:inline-block;--le-button-border-radius:var(--le-radius-md);--le-button-padding-x:var(--le-spacing-3);--le-button-padding-y:var(--le-spacing-1);--le-button-padding:var(--le-button-padding-y) var(--le-button-padding-x);--le-button-small-padding:0.25rem;--le-button-font-size:var(--le-font-size-md);--le-button-font-weight:var(--le-font-weight-medium);--le-button-transition:var(--le-transition-fast);--le-transition-easing:ease-in-out;--le-button-icon-aspect-ratio:1;--le-button-color:var(--le-color-primary-contrast);--_btn-bg:var(--le-color-primary);--_btn-bg-hover:var(--le-color-primary-dark);--_btn-bg-system:var(--le-color-black);--_btn-color:var(--le-button-color);--_btn-border-color:var(--le-color-primary)}:host([full-width]){display:block;width:100%}.le-button-container{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--le-spacing-3);width:100%;padding:var(--le-button-padding);border:1px solid var(--_btn-border-color);border-radius:var(--le-button-border-radius);background:var(--_btn-bg);color:var(--_btn-color);font-family:var(--le-font-family-base);font-size:var(--le-button-font-size);font-weight:var(--le-button-font-weight);line-height:var(--le-line-height-tight);text-decoration:none;cursor:pointer;transition:background-color var(--le-button-transition) var(--le-transition-easing),\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)}.le-button-container:hover:not(:disabled){background:var(--_btn-bg-hover);border-color:var(--_btn-bg-hover)}.le-button-container:active:not(:disabled){box-shadow:inset 0 0 6px var(--le-color-shadow)}.le-button-container:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px}.le-button-container:disabled{opacity:0.5;cursor:not-allowed}.le-button-label{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--le-spacing-2)}:host>le-component.color-primary{--_btn-bg:var(--le-color-primary);--_btn-bg-hover:var(--le-color-primary-dark);--_btn-color:var(--le-button-color);--_btn-border-color:var(--le-color-primary)}:host>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 .le-button-container{box-shadow:var(--le-shadow-sm)}:host>le-component.variant-solid .le-button-container:hover:not(:disabled){box-shadow:var(--le-shadow-md)}:host>le-component.variant-outlined .le-button-container{background:transparent;color:var(--_btn-bg);border-color:color-mix(in srgb, var(--_btn-border-color) 33%, transparent)}:host>le-component.variant-outlined .le-button-container:hover:not(:disabled){border-color:var(--_btn-border-color)}:host>le-component.variant-clear .le-button-container{background:transparent;color:var(--_btn-bg);border-color:transparent}:host>le-component.variant-clear .le-button-container:hover:not(:disabled){background:var(--le-color-gray-100);border-color:transparent}:host>le-component.variant-system .le-button-container{background:transparent;color:var(--_btn-bg-system);border-color:transparent}:host>le-component.size-small .le-button-container{--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 .le-button-container{--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 .le-button-container{box-shadow:inset 0 0 4px var(--le-color-shadow)}:host>le-component.variant-outlined.selected .le-button-container,:host>le-component.variant-clear.selected .le-button-container{background:var(--_btn-bg);color:var(--_btn-color)}:host>le-component.icon-only .le-button-container{padding:0.5rem;padding-bottom:0.6rem;aspect-ratio:var(--le-button-icon-aspect-ratio, 1)}:host>le-component.icon-only.size-small .le-button-container{padding:var(--le-button-small-padding, 0.25rem)}:host>le-component.icon-only.size-large .le-button-container{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}.le-button-align-start{justify-content:flex-start}.le-button-align-center{justify-content:center}.le-button-align-space-between{justify-content:space-between}.le-button-align-end{justify-content:flex-end}";
+
+const LeButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.leClick = index.createEvent(this, "click");
+    }
+    get el() { return index.getElement(this); }
+    /**
+     * Mode of the popover should be 'default' for internal use
+     */
+    mode;
+    /**
+     * Button variant style
+     * @allowedValues solid | outlined | clear
+     */
+    variant = 'solid';
+    /**
+     * Button color theme (uses theme semantic colors)
+     * @allowedValues primary | secondary | success | warning | danger | info
+     */
+    color = 'primary';
+    /**
+     * Button size
+     * @allowedValues small | medium | large
+     */
+    size = 'medium';
+    /**
+     * Whether the button is in a selected/active state
+     */
+    selected = false;
+    /**
+     * Whether the button takes full width of its container
+     */
+    fullWidth = false;
+    /**
+     * Icon only button image or emoji
+     * if this prop is set, the button will render only the icon slot
+     */
+    iconOnly;
+    /**
+     * Start icon image or emoji
+     */
+    iconStart;
+    /**
+     * End icon image or emoji
+     */
+    iconEnd;
+    /**
+     * Whether the button is disabled
+     */
+    disabled = false;
+    /**
+     * The button type attribute
+     * @allowedValues button | submit | reset
+     */
+    type = 'button';
+    /**
+     * Optional href to make the button act as a link
+     */
+    href;
+    /**
+     * Link target when href is set
+     */
+    target;
+    /**
+     * Alignment of the button label without the end icon
+     * @allowedValues start | center | space-between | end
+     */
+    align = 'center';
+    /**
+     * Emitted when the button is clicked.
+     * This is a custom event that wraps the native click but ensures the target is the le-button.
+     */
+    leClick;
+    handleClick = (event) => {
+        // We stop the internal button click from bubbling up
+        event.stopPropagation();
+        if (this.disabled) {
+            event.preventDefault();
+            return;
+        }
+        // And emit our own click event from the host element
+        this.leClick.emit(event);
+    };
+    render() {
+        const classes = utils.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 (index.h("le-component", { key: 'bf247365c4ceeaccdb05cbbb17604265f1608fa4', component: "le-button", hostClass: classes }, index.h(TagType, { key: 'a01540b86ace35d55b5635e2e5ce1049f480a788', class: utils.classnames('le-button-container', `le-button-align-${this.align}`), part: "button", ...attrs, onClick: this.handleClick }, this.iconOnly !== undefined ? (index.h("slot", { name: "icon-only" }, typeof this.iconOnly === 'string' ? this.iconOnly : null)) : (index.h(index.Fragment, null, index.h("span", { class: "le-button-label" }, this.iconStart && (index.h("span", { class: "icon-start", part: "icon-start" }, this.iconStart)), index.h("le-slot", { name: "", description: "Button text", type: "text", class: "content", part: "content" }, index.h("slot", null))), this.iconEnd && (index.h("span", { class: "icon-end", part: "icon-end" }, this.iconEnd)))))));
+    }
+};
+LeButton.style = leButtonCss;
+
+const leCheckboxCss = ":host{display:block;--le-checkbox-size:18px;--le-checkbox-color:var(--le-color-primary, #007bff);--le-checkbox-label-color:var(--le-color-text-primary, #333);--le-checkbox-desc-color:var(--le-color-text-secondary, #666);--le-checkbox-border-radius:var(--le-radius-sm, 2px);--le-checkbox-marker-color:var(--le-color-surface, #fff)}.le-checkbox-wrapper{display:flex;flex-direction:column;gap:4px}.le-checkbox-label{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;user-select:none}:host([disabled]) .le-checkbox-label{cursor:not-allowed;opacity:0.6}.le-checkbox-input{display:flex;align-items:center;justify-content:center;min-height:1.4em}input[type=\"checkbox\"]{appearance:none;-webkit-appearance:none;width:var(--le-checkbox-size);height:var(--le-checkbox-size);border:var(--le-border-width, 2px) solid var(--le-checkbox-color);border-radius:var(--le-checkbox-border-radius);margin:0;margin-top:2px;position:relative;cursor:inherit;background-color:transparent;transition:background-color 0.2s, border-color 0.2s}input[type=\"checkbox\"]:checked{background-color:var(--le-checkbox-color)}input[type=\"checkbox\"]:checked::after{content:'';position:absolute;left:0;top:0;bottom:calc(var(--le-checkbox-size) / 5);right:0;margin:auto;width:calc(var(--le-checkbox-size) / 4);height:calc(var(--le-checkbox-size) / 2);border:solid var(--le-checkbox-marker-color, #fff);border-width:0 calc(var(--le-checkbox-size) / 10) calc(var(--le-checkbox-size) / 10) 0;transform:rotate(45deg)}input[type=\"checkbox\"]:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px}.le-checkbox-text{flex:1;flex-wrap:wrap;color:var(--le-checkbox-label-color);line-height:1.5;text-align:start}.le-checkbox-description{margin-left:calc(var(--le-checkbox-size) + 8px);font-size:0.875em;color:var(--le-checkbox-desc-color);line-height:1.4}:host [slot=\"description\"]{margin:0}";
+
+const LeCheckbox = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.leChange = index.createEvent(this, "change");
+    }
+    get el() { return index.getElement(this); }
+    /**
+     * Whether the checkbox is checked
+     */
+    checked = false;
+    /**
+     * Whether the checkbox is disabled
+     */
+    disabled = false;
+    /**
+     * The name of the checkbox input
+     */
+    name;
+    /**
+     * The value of the checkbox input
+     */
+    value;
+    /**
+     * External ID for linking with external systems (e.g. database ID, PDF form field ID)
+     */
+    externalId;
+    /**
+     * Emitted when the checked state changes
+     */
+    leChange;
+    handleChange = (event) => {
+        // We stop the internal button click from bubbling up
+        event.stopPropagation();
+        if (this.disabled) {
+            event.preventDefault();
+            return;
+        }
+        const input = event.target;
+        this.checked = input.checked;
+        this.leChange.emit({
+            checked: this.checked,
+            value: this.value,
+            name: this.name,
+            externalId: this.externalId
+        });
+    };
+    render() {
+        return (index.h("le-component", { key: '43399929e07835e0019d509803e50a151921fa72', component: "le-checkbox", hostClass: utils.classnames({ 'disabled': this.disabled }) }, index.h("div", { key: '7ddbf2ac1690bb09082adfea70b9767c972d007a', class: "le-checkbox-wrapper" }, index.h("label", { key: '8eec4055c713e8b3b155695751b10bff64c9f903', class: "le-checkbox-label" }, index.h("span", { key: '2118b1cbe7911ff1674e522d723949d81cade185', class: "le-checkbox-input" }, index.h("input", { key: 'd0a30af5c14497fa6fa294c07ba74ae2e032481f', type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.handleChange })), index.h("span", { key: '02cf9588431240039a53ee50e02b08ba5d63b974', class: "le-checkbox-text" }, index.h("le-slot", { key: 'e7d7b253deab72e627164eb72fc06109abfca6a5', name: "", type: "text", tag: "span" }, index.h("slot", { key: '1d8c443073e48848513a8a6d04cd7805a394e54e' })))), index.h("div", { key: '16c2c927dc0c0f7844a203a0628bf0e561009bd0', class: "le-checkbox-description" }, index.h("le-slot", { key: 'c6898ecc8992dce4786e68ab4b136bf5c3a4d3aa', name: "description", type: "text", tag: "div", label: "Description" }, index.h("slot", { key: '3342add8ed1400ab74681e445163eeb3dd415941', name: "description" }))))));
+    }
+};
+LeCheckbox.style = leCheckboxCss;
+
+const leCollapseCss = ":host{--le-collapse-duration:var(--le-transition-normal);display:grid;grid-template-rows:1fr;opacity:1;transition:grid-template-rows var(--le-collapse-duration),\n    opacity var(--le-collapse-duration)}:host([data-open=\"false\"]),:host([open=\"false\"]){grid-template-rows:0fr;opacity:0}:host([no-fading][data-open=\"false\"]),:host([no-fading][open=\"false\"]){opacity:1}.region{display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}:host([scroll-down]) .region{justify-content:flex-start}";
+
+const LeCollapse = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    /** Whether the content should be shown. */
+    open = true;
+    /** Whether the content should scroll down from the top when open. */
+    scrollDown = false;
+    /** Stop fading the content when collapsing/expanding. */
+    noFading = false;
+    /** If true, collapse/expand based on the nearest header shrink event. */
+    collapseOnHeaderShrink = false;
+    /**
+     * Handles `leHeaderShrinkChange` events from the `le-header`.
+     * In case multiple headers are present, only the nearest one in the DOM tree is used.
+     */
+    handleHeaderShrink(ev) {
+        const e = ev;
+        this.headerShrunk = !!e.detail?.shrunk;
+    }
+    headerShrunk = false;
+    componentWillLoad() {
+        // Stencil boolean props default to `false` when the attribute is missing.
+        // For this component, the desired default is open=true.
+        if (!this.el.hasAttribute('open')) {
+            this.open = true;
+        }
+    }
+    componentDidLoad() {
+        this.applyOpenState();
+    }
+    onOpenChange() {
+        this.applyOpenState();
+    }
+    onDrivenStateChange() {
+        this.applyOpenState();
+    }
+    shouldBeOpen() {
+        if (!this.open)
+            return false;
+        if (this.collapseOnHeaderShrink && this.headerShrunk)
+            return false;
+        return true;
+    }
+    applyOpenState() {
+        const nextOpen = this.shouldBeOpen();
+        this.el.toggleAttribute('data-open', nextOpen);
+    }
+    render() {
+        return (index.h(index.Host, { key: '30fe288583bae1645ce00714de95c40ed92b7af0', "data-open": this.shouldBeOpen() ? 'true' : 'false' }, index.h("le-component", { key: '5fdc1e83caaff73fedb61d7286fc56f03fa8127a', component: "le-collapse" }, index.h("div", { key: '185df372a5039be23abf42ff262ef2d3eaa1602f', class: "region", part: "region" }, index.h("slot", { key: '1790f5457264342d71aecb94a67ce4ee11149af2' })))));
+    }
+    static get watchers() { return {
+        "open": ["onOpenChange"],
+        "headerShrunk": ["onDrivenStateChange"]
+    }; }
+};
+LeCollapse.style = leCollapseCss;
+
+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) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    /**
+     * The tag name of the component (e.g., 'le-card').
+     * Used to look up property metadata and display the component name.
+     */
+    component;
+    /**
+     * Optional display name for the component.
+     * If not provided, the tag name will be formatted as the display name.
+     */
+    displayName;
+    /**
+     * Classes to apply to the host element.
+     * Allows parent components to pass their styling classes.
+     */
+    hostClass;
+    /**
+     * Inline styles to apply to the host element.
+     * Allows parent components to pass dynamic styles (e.g., flex properties).
+     */
+    hostStyle;
+    /**
+     * Reference to the host element (found automatically from parent)
+     */
+    hostElement;
+    /**
+     * Internal state to track admin mode
+     */
+    adminMode = false;
+    /**
+     * Component metadata loaded from Custom Elements Manifest
+     */
+    componentMeta = null;
+    /**
+     * Current property values of the host component
+     */
+    propertyValues = {};
+    disconnectModeObserver;
+    connectedCallback() {
+        // Find the host element - le-component is rendered inside the component's shadow DOM,
+        // so we need to find the shadow root's host element
+        this.findHostElement();
+        this.disconnectModeObserver = utils.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 from configured URL
+            const { manifestFile } = index.getLeKitConfig();
+            const manifestFileResolved = index.getAssetPath(`./assets/${manifestFile}`);
+            const response = await fetch(manifestFileResolved);
+            const manifest = await response.json();
+            // Find the component definition
+            for (const module of manifest.modules) {
+                for (const declaration of module.declarations || []) {
+                    if (declaration.tagName === this.component) {
+                        const attributes = (declaration.attributes || []).filter((attr) => !this.isInternalAttribute(attr.name));
+                        this.componentMeta = {
+                            tagName: declaration.tagName,
+                            description: declaration.description,
+                            attributes,
+                        };
+                        // console.log(`[le-component] Loaded metadata for ${this.component}:`, this.componentMeta);
+                        // Read property values after metadata is loaded
+                        this.readPropertyValues();
+                        return;
+                    }
+                }
+            }
+            // console.warn(`[le-component] No metadata found for component: ${this.component}`);
+        }
+        catch (error) {
+            // console.warn(`[le-component] Failed to load metadata for component: ${this.component}`, error);
+        }
+    }
+    /**
+     * Check if an attribute is internal (should not be shown in editor)
+     */
+    isInternalAttribute(name) {
+        const internalAttrs = ['mode', 'theme', 'class', 'style', 'id', 'slot'];
+        return internalAttrs.includes(name);
+    }
+    /**
+     * Read current property values from the host element
+     */
+    readPropertyValues() {
+        if (!this.hostElement || !this.componentMeta)
+            return;
+        const values = {};
+        for (const attr of this.componentMeta.attributes) {
+            const value = this.hostElement.getAttribute(attr.name);
+            values[attr.name] = this.parseAttributeValue(value, attr.type?.text);
+        }
+        this.propertyValues = values;
+    }
+    /**
+     * Parse an attribute value based on its type
+     */
+    parseAttributeValue(value, type) {
+        if (value === null)
+            return undefined;
+        if (type === 'boolean') {
+            return value !== null && value !== 'false';
+        }
+        if (type === 'number') {
+            return parseFloat(value);
+        }
+        return value;
+    }
+    /**
+     * Handle property value changes from the editor
+     */
+    handlePropertyChange(attrName, value, type) {
+        if (!this.hostElement)
+            return;
+        // Update the host element's attribute
+        if (type === 'boolean') {
+            if (value) {
+                this.hostElement.setAttribute(attrName, '');
+            }
+            else {
+                this.hostElement.removeAttribute(attrName);
+            }
+        }
+        else if (value === undefined || value === '') {
+            this.hostElement.removeAttribute(attrName);
+        }
+        else {
+            this.hostElement.setAttribute(attrName, String(value));
+        }
+        // Update local state
+        this.propertyValues = { ...this.propertyValues, [attrName]: value };
+        // update the host element the way the parent element mutation observer would catch it?
+    }
+    /**
+     * Delete this component from the DOM
+     */
+    deleteComponent() {
+        if (!this.hostElement)
+            return;
+        // Confirm deletion
+        const name = this.displayName || this.formatDisplayName(this.component);
+        if (!index$1.leConfirm(`Delete this ${name}?`))
+            return;
+        // Remove the host element from its parent
+        const parent = this.hostElement.parentElement;
+        if (parent) {
+            this.hostElement.remove();
+        }
+    }
+    /**
+     * Render the property editor form
+     */
+    renderPropertyEditor() {
+        const hasProperties = this.componentMeta && this.componentMeta.attributes.length > 0;
+        return (index.h("div", { class: "property-editor-container" }, hasProperties ? (index.h("form", { class: "property-editor", onSubmit: e => e.preventDefault() }, this.componentMeta.attributes.map(attr => this.renderPropertyField(attr)))) : (index.h("p", { class: "no-properties" }, "No editable properties")), index.h("div", { class: "property-editor-actions" }, index.h("le-button", { type: "button", variant: "outlined", color: "danger", "full-width": true, onClick: () => this.deleteComponent() }, index.h("span", { slot: "icon-start" }, "\uD83D\uDDD1\uFE0F"), index.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 (index.h("div", { class: "property-field" }, index.h("label", { htmlFor: `prop-${attr.name}` }, attr.name, attr.description && index.h("span", { class: "property-hint" }, attr.description)), index.h("le-select", { options: [...options.map(opt => ({ label: opt, value: opt }))], "full-width": true, value: value ?? attr.default?.replace(/'/g, ''), placeholder: attr.default?.replace(/'/g, ''), onLeChange: (e) => this.handlePropertyChange(attr.name, e.detail.value, type) })));
+        }
+        // Boolean type
+        if (type === 'boolean') {
+            return (index.h("div", { class: "property-field property-field--checkbox" }, index.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 && index.h("div", { slot: "description" }, attr.description))));
+        }
+        // Number type
+        if (type === 'number') {
+            return (index.h("div", { class: "property-field" }, index.h("label", { htmlFor: `prop-${attr.name}` }, attr.name, attr.description && index.h("span", { class: "property-hint" }, attr.description)), index.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 (index.h("div", { class: "property-field" }, index.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) }, index.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 (index.h(index.Host, { class: utils.classnames(this.component, this.hostClass), style: this.hostStyle }, index.h("slot", null)));
+        }
+        // In admin mode, show wrapper with header and settings
+        return (index.h(index.Host, { class: utils.classnames(this.component, this.hostClass, 'admin-mode'), style: this.hostStyle }, index.h("div", { class: "le-component-wrapper" }, index.h("div", { class: "le-component-header" }, index.h("span", { class: "le-component-name" }, name), index.h("le-popover", { popoverTitle: `${name} Settings`, position: "right", align: "start", "min-width": "300px", mode: "default" }, index.h("le-button", { type: "button", class: "le-component-button", slot: "trigger", variant: "clear", size: "small", "aria-label": "Edit component properties", "icon-only": true }, index.h("span", { class: "le-component-trigger", slot: "icon-only" }, "\u2699")), this.renderPropertyEditor())), index.h("div", { class: "le-component-content" }, index.h("slot", null)))));
+    }
+    static get assetsDirs() { return ["assets"]; }
+};
+LeComponent.style = leComponentCss;
+
+const leCurrentHeadingCss = ":host{display:inline-flex;min-width:0}.title{font:inherit;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}";
+
+const LeCurrentHeading = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    /** CSS selector for page title/headings to watch (e.g. `.page-title`, `main h2`). */
+    selector = '';
+    activeText = null;
+    componentWillLoad() {
+        this.updateActiveTitle();
+    }
+    onSelectorChange() {
+        this.updateActiveTitle();
+    }
+    onScroll() {
+        this.updateActiveTitle();
+    }
+    onResize() {
+        this.updateActiveTitle();
+    }
+    updateActiveTitle() {
+        if (typeof window === 'undefined')
+            return;
+        const selector = (this.selector ?? '').trim();
+        if (!selector) {
+            this.activeText = null;
+            return;
+        }
+        let elements = [];
+        try {
+            elements = Array.from(document.querySelectorAll(selector));
+        }
+        catch {
+            this.activeText = null;
+            return;
+        }
+        // Pick the last element that is fully above the viewport.
+        let nextText = null;
+        for (const element of elements) {
+            const rect = element.getBoundingClientRect();
+            if (rect.height > 0 && rect.bottom <= 0) {
+                const t = (element.textContent ?? '').trim();
+                if (t)
+                    nextText = t;
+            }
+        }
+        // Do not create oscillations: update only when the computed title changes.
+        if (nextText !== this.activeText) {
+            this.activeText = nextText;
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: 'e6b473d3633eb8f194edf19e88850390f4319929' }, this.activeText ? (index.h("span", { class: "title", part: "title" }, this.activeText)) : (index.h("slot", null))));
+    }
+    static get watchers() { return {
+        "selector": ["onSelectorChange"]
+    }; }
+};
+LeCurrentHeading.style = leCurrentHeadingCss;
+
+const leDropdownBaseCss = ":host{display:block;--le-dropdown-list-padding:var(--le-spacing-1);--le-dropdown-empty-padding:var(--le-spacing-4);--le-dropdown-option-radius:var(--le-radius-md);--le-dropdown-font-size:var(--le-font-size-sm);--le-dropdown-option-padding:var(--le-spacing-1) var(--le-spacing-2);--le-dropdown-group-padding:var(--le-spacing-2) var(--le-spacing-2) var(--le-spacing-1);--le-dropdown-group-font-size:var(--le-font-size-xs)}:host([disabled]){pointer-events:none;opacity:0.5}le-popover::part(content){overflow-y:auto;overflow-x:hidden;padding:var(--le-dropdown-list-padding, 0.25rem)}.dropdown-empty{padding:var(--le-dropdown-empty-padding);text-align:center;color:var(--le-color-text-secondary, #9ca3af);font-size:var(--le-dropdown-font-size)}.dropdown-group-header{padding:var(--le-dropdown-group-padding);font-size:var(--le-dropdown-group-font-size);font-weight:700;color:var(--le-color-text-secondary, #9ca3af);letter-spacing:0.05em}.dropdown-list{text-align:initial}.dropdown-separator{height:1px;margin:var(--le-dropdown-separator-margin, 0.25rem 0);background:var(--le-color-border, #e5e7eb)}.dropdown-option{display:flex;align-items:center;gap:var(--le-dropdown-option-gap, 0.5rem);padding:var(--le-dropdown-option-padding);font-size:var(--le-dropdown-font-size, 0.875rem);line-height:1.4;color:var(--le-color-text, #1f2937);border:1px solid transparent;border-radius:var(--le-dropdown-option-radius, 0.25rem);cursor:pointer;user-select:none;transition:background-color 0.1s ease}.dropdown-option:hover,.dropdown-option.is-focused{border-color:var(--le-color-border-hover, #d1d5db)}.dropdown-option.is-disabled{opacity:0.5;cursor:not-allowed}.dropdown-option.is-disabled:hover{background:transparent}.option-checkbox{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;border:2px solid var(--le-color-border, #d1d5db);border-radius:0.25rem;background:var(--le-color-surface, #fff);flex-shrink:0}.is-selected .option-checkbox{background:var(--le-color-primary, #3b82f6);border-color:var(--le-color-primary, #3b82f6);color:white}.option-checkbox svg{width:0.75rem;height:0.75rem}.option-icon-start,.option-icon-end{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem}.option-icon-start img,.option-icon-end img{width:100%;height:100%;object-fit:contain}.option-content{flex:1;min-width:0;display:flex;flex-direction:column}.option-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.option-description{font-size:0.75rem;color:var(--le-color-text-muted, #6b7280);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.option-check{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;color:var(--le-color-primary, #3b82f6);flex-shrink:0}.option-check svg{width:1rem;height:1rem}";
+
+const LeDropdownBase = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.leOptionSelect = index.createEvent(this, "leOptionSelect");
+        this.leDropdownOpen = index.createEvent(this, "leDropdownOpen");
+        this.leDropdownClose = index.createEvent(this, "leDropdownClose");
+    }
+    get el() { return index.getElement(this); }
+    /**
+     * The options to display in the dropdown.
+     */
+    options = [];
+    /**
+     * Current value(s) - single value or array for multiselect.
+     */
+    value;
+    /**
+     * Whether multiple selection is allowed.
+     */
+    multiple = false;
+    /**
+     * Whether the dropdown is open.
+     */
+    open = false;
+    /**
+     * Whether the dropdown is disabled.
+     */
+    disabled = false;
+    /**
+     * Filter function for options.
+     * Return true to include the option.
+     */
+    filterFn;
+    /**
+     * Current filter query string.
+     */
+    filterQuery = '';
+    /**
+     * Placeholder text when no options match filter.
+     */
+    emptyText = 'No options';
+    /**
+     * Whether to show checkboxes for multiselect mode.
+     */
+    showCheckboxes = true;
+    /**
+     * Maximum height of the dropdown list.
+     */
+    maxHeight = '300px';
+    /**
+     * Width of the dropdown. If not set, matches trigger width.
+     */
+    width;
+    /**
+     * Sets the dropdown to full width of the trigger.
+     */
+    fullWidth = false;
+    /**
+     * Whether to close the dropdown when clicking outside.
+     * (used to support combobox with input focus)
+     */
+    closeOnClickOutside = true;
+    /**
+     * Emitted when an option is selected.
+     */
+    leOptionSelect;
+    /**
+     * Emitted when the dropdown opens.
+     */
+    leDropdownOpen;
+    /**
+     * Emitted when the dropdown closes.
+     */
+    leDropdownClose;
+    focusedIndex = -1;
+    filteredOptions = [];
+    popoverEl;
+    listEl;
+    triggerWidth = 0;
+    handleOptionsChange() {
+        this.updateFilteredOptions();
+    }
+    componentWillLoad() {
+        this.updateFilteredOptions();
+    }
+    updateFilteredOptions() {
+        // Remember previously focused option
+        const focusedOption = this.filteredOptions[this.focusedIndex];
+        if (!this.filterQuery || !this.filterFn) {
+            this.filteredOptions = this.options;
+        }
+        else {
+            this.filteredOptions = this.options.filter(opt => this.filterFn(opt, this.filterQuery));
+        }
+        // try to maintain focus on same option if still present
+        if (focusedOption) {
+            const newIndex = this.filteredOptions.indexOf(focusedOption);
+            this.focusedIndex = newIndex >= 0 ? newIndex : this.getInitialFocusIndex();
+        }
+        else {
+            this.focusedIndex = -1;
+        }
+    }
+    getSelectableOptions() {
+        return this.filteredOptions.filter(opt => !opt.disabled);
+    }
+    isSelected(option) {
+        const optValue = option.value ?? option.label;
+        if (this.multiple && Array.isArray(this.value)) {
+            setTimeout(() => {
+                this.popoverEl?.updatePosition();
+            }, 50);
+            return this.value.includes(optValue);
+        }
+        return this.value === optValue;
+    }
+    handleOptionClick(option, e) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (option.disabled)
+            return;
+        this.leOptionSelect.emit({
+            value: option.value ?? option.label,
+            option,
+        });
+        // Close dropdown for single select
+        if (!this.multiple) {
+            this.hide();
+        }
+    }
+    handleKeyDown = (e) => {
+        if (!this.open)
+            return;
+        const optionCount = this.filteredOptions.length;
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                // check for the next non-disabled option and focus
+                let nextIndex = this.focusedIndex < optionCount - 1 ? this.focusedIndex + 1 : 0;
+                while (this.filteredOptions[nextIndex].disabled) {
+                    nextIndex = ++nextIndex < optionCount ? nextIndex : 0;
+                }
+                this.focusedIndex = nextIndex;
+                this.scrollToFocused();
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                // check for the previous non-disabled option and focus
+                let prevIndex = this.focusedIndex > 0 ? this.focusedIndex - 1 : optionCount - 1;
+                while (this.filteredOptions[prevIndex].disabled) {
+                    prevIndex = --prevIndex >= 0 ? prevIndex : optionCount - 1;
+                }
+                this.focusedIndex = prevIndex;
+                this.scrollToFocused();
+                break;
+            case 'Home':
+                e.preventDefault();
+                // check for the first non-disabled option and focus
+                let firstIndex = 0;
+                while (this.filteredOptions[firstIndex].disabled) {
+                    firstIndex++;
+                    if (firstIndex >= optionCount) {
+                        firstIndex = -1;
+                        break;
+                    }
+                }
+                this.focusedIndex = firstIndex;
+                this.scrollToFocused();
+                break;
+            case 'End':
+                e.preventDefault();
+                // check for the last non-disabled option and focus
+                let lastIndex = optionCount - 1;
+                while (this.filteredOptions[lastIndex].disabled) {
+                    lastIndex--;
+                    if (lastIndex < 0) {
+                        lastIndex = -1;
+                        break;
+                    }
+                }
+                this.focusedIndex = lastIndex;
+                this.scrollToFocused();
+                break;
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                if (this.focusedIndex >= 0 && this.focusedIndex < optionCount) {
+                    const option = this.filteredOptions[this.focusedIndex];
+                    if (!option || option.disabled)
+                        return;
+                    this.leOptionSelect.emit({
+                        value: option.value ?? option.label,
+                        option,
+                    });
+                    if (!this.multiple) {
+                        this.hide();
+                    }
+                }
+                break;
+            case 'Escape':
+                e.preventDefault();
+                this.hide();
+                break;
+            case 'Tab':
+                this.hide();
+                break;
+        }
+    };
+    scrollToFocused() {
+        if (!this.listEl || this.focusedIndex < 0)
+            return;
+        const focusedEl = this.listEl.querySelector(`[data-index="${this.focusedIndex}"]`);
+        if (focusedEl) {
+            focusedEl.scrollIntoView({ block: 'nearest' });
+        }
+    }
+    handlePopoverOpen = () => {
+        this.open = true;
+        this.focusedIndex = this.getInitialFocusIndex();
+        this.leDropdownOpen.emit();
+        // Add keyboard listener
+        document.addEventListener('keydown', this.handleKeyDown);
+    };
+    handlePopoverClose = () => {
+        this.open = false;
+        this.focusedIndex = -1;
+        this.leDropdownClose.emit();
+        // Remove keyboard listener
+        document.removeEventListener('keydown', this.handleKeyDown);
+    };
+    getInitialFocusIndex() {
+        // Focus on first selected option, or first option
+        const selectableOptions = this.getSelectableOptions();
+        const selectedIndex = selectableOptions.findIndex(opt => this.isSelected(opt));
+        return selectedIndex >= 0 ? selectedIndex : 0;
+    }
+    /**
+     * Opens the dropdown.
+     */
+    async show() {
+        if (this.disabled)
+            return;
+        // Capture trigger width for matching dropdown width
+        const trigger = this.el.querySelector('[slot="trigger"]');
+        if (trigger) {
+            this.triggerWidth = trigger.offsetWidth;
+        }
+        await this.popoverEl?.show();
+    }
+    /**
+     * Closes the dropdown.
+     */
+    async hide() {
+        await this.popoverEl?.hide();
+    }
+    /**
+     * Toggles the dropdown.
+     */
+    async toggle() {
+        if (this.open) {
+            await this.hide();
+        }
+        else {
+            await this.show();
+        }
+    }
+    renderIcon(icon, className) {
+        if (!icon)
+            return null;
+        if (icon.startsWith('http') || icon.startsWith('/')) {
+            return index.h("img", { class: className, src: icon, alt: "" });
+        }
+        return index.h("span", { class: className }, icon);
+    }
+    renderOption(option, index$1) {
+        const isSelected = this.isSelected(option);
+        const isFocused = index$1 === this.focusedIndex;
+        const optionId = option.id || utils.generateId();
+        return (index.h("div", { class: {
+                'dropdown-option': true,
+                'is-selected': isSelected,
+                'is-focused': isFocused,
+                'is-disabled': !!option.disabled,
+            }, role: "option", id: optionId, "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": option.disabled ? 'true' : undefined, "data-index": index$1, onClick: e => this.handleOptionClick(option, e), onMouseEnter: () => {
+                if (!option.disabled) {
+                    this.focusedIndex = index$1;
+                }
+            } }, this.renderIcon(option.iconStart, 'option-icon-start'), index.h("div", { class: "option-content" }, index.h("span", { class: "option-label" }, option.label), option.description && index.h("span", { class: "option-description" }, option.description)), this.renderIcon(option.iconEnd, 'option-icon-end'), (!this.multiple || this.showCheckboxes) && isSelected && (index.h("span", { class: "option-check" }, index.h("svg", { viewBox: "0 0 16 16", fill: "currentColor" }, index.h("path", { d: "M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z" }))))));
+    }
+    renderOptions() {
+        if (this.filteredOptions.length === 0) {
+            return index.h("div", { class: "dropdown-empty" }, this.emptyText);
+        }
+        // Group options if they have group property
+        const grouped = new Map();
+        const ungrouped = [];
+        this.filteredOptions.forEach(opt => {
+            if (opt.group) {
+                const group = grouped.get(opt.group) || [];
+                group.push(opt);
+                grouped.set(opt.group, group);
+            }
+            else {
+                ungrouped.push(opt);
+            }
+        });
+        // Build flat list with group headers for index tracking
+        let globalIndex = 0;
+        const elements = [];
+        // Render ungrouped options first
+        ungrouped.forEach(opt => {
+            if (opt.separator === 'before') {
+                elements.push(index.h("div", { class: "dropdown-separator", role: "separator" }));
+            }
+            elements.push(this.renderOption(opt, globalIndex++));
+            if (opt.separator === 'after') {
+                elements.push(index.h("div", { class: "dropdown-separator", role: "separator" }));
+            }
+        });
+        // Render grouped options
+        grouped.forEach((options, groupLabel) => {
+            elements.push(index.h("div", { class: "dropdown-group-header", role: "presentation" }, groupLabel));
+            options.forEach(opt => {
+                elements.push(this.renderOption(opt, globalIndex++));
+            });
+        });
+        return elements;
+    }
+    render() {
+        const dropdownWidth = this.width || (this.triggerWidth ? `${this.triggerWidth}px` : undefined);
+        return (index.h(index.Host, { key: '838bef3556e494770fbb34cbff69c782ca717fe4' }, index.h("le-popover", { key: 'd72576e799c6cc065d3b0f3f1b918e84a7c5f690', ref: el => (this.popoverEl = el), position: "bottom", align: "start", showClose: false, closeOnClickOutside: this.closeOnClickOutside, closeOnEscape: true, offset: 4, width: dropdownWidth, minWidth: "150px", "trigger-full-width": this.fullWidth, onLePopoverOpen: this.handlePopoverOpen, onLePopoverClose: this.handlePopoverClose }, index.h("slot", { key: 'fbe84a553a126ad34f3ea159b182f825a065d1f6', name: "trigger", slot: "trigger" }), index.h("slot", { key: '957ac9208cdfe8be96a15979853e0b5cfdfc756f', name: "header" }), index.h("div", { key: '8c15f620b55035191979aca56514771c860051e3', class: "dropdown-list", role: "listbox", "aria-multiselectable": this.multiple ? 'true' : undefined, ref: el => (this.listEl = el), style: { maxHeight: this.maxHeight } }, this.renderOptions()))));
+    }
+    static get watchers() { return {
+        "options": ["handleOptionsChange"],
+        "filterQuery": ["handleOptionsChange"]
+    }; }
+};
+LeDropdownBase.style = leDropdownBaseCss;
+
+const leHeaderCss = ":host{display:block;width:100%;--le-header-top-offset:0;--le-header-bg:var(--le-color-surface);--le-header-max-width:var(--le-header-max-width, auto);--le-header-margin:0 auto;--le-header-border:1px solid var(--le-color-border);--le-header-border-radius:0px;--le-header-shadow:var(--le-header-shadow, none);--le-header-color:var(--le-color-text);--le-header-content-max-width:800px;--le-header-padding-x:var(--le-space-md);--le-header-padding-y:var(--le-space-sm);--le-header-gap:var(--le-space-sm);--le-header-transition:var(--le-transition-normal);--le-header-z:1000}.header{width:100%;max-width:var(--le-header-max-width);margin:var(--le-header-margin);background:var(--le-header-bg);color:var(--le-header-color);border-bottom:var(--le-header-border);border-radius:var(--le-header-border-radius);box-shadow:var(--le-header-shadow)}:host(.is-fixed){position:fixed;top:var(--le-header-top-offset);left:0;right:0;z-index:var(--le-header-z)}:host(.is-sticky){position:sticky;top:var(--le-header-top-offset);z-index:var(--le-header-z)}:host(.is-static){position:relative}.inner{max-width:var(--le-header-content-max-width);margin:0 auto;padding:var(--le-header-padding-y) var(--le-header-padding-x)}.row{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);align-items:center;gap:var(--le-header-gap);transition:height var(--le-header-transition),\n    padding var(--le-header-transition),\n    transform var(--le-header-transition)}:host(.is-shrunk) .row{height:var(--le-header-height-condensed)}:host(.is-sticky.is-hidden){transform:translateY(-150%);transition:transform var(--le-header-transition)}:host(.is-sticky.is-revealed){transform:translateY(0);transition:transform var(--le-header-transition)}.start,.title,.end{min-width:0;display:flex;align-items:center}.start{justify-content:flex-start}.end{justify-content:flex-end}.title{justify-content:center;text-align:center}.title-slot ::slotted(*){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compact-title{font:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}";
+
+const LeHeader = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.leHeaderState = index.createEvent(this, "leHeaderState");
+        this.leHeaderShrinkChange = index.createEvent(this, "leHeaderShrinkChange");
+        this.leHeaderVisibilityChange = index.createEvent(this, "leHeaderVisibilityChange");
+    }
+    get el() { return index.getElement(this); }
+    /** Force static positioning (default). Ignored if `sticky` or `fixed` are true. */
+    isStatic = false;
+    /** Sticky positioning (in-flow). Ignored if `fixed` is true. */
+    sticky = false;
+    /** Fixed positioning (out-of-flow). Takes precedence over `sticky`/`static`. */
+    fixed = false;
+    /**
+     * Sticky-only reveal behavior (hide on scroll down, show on scroll up).
+     * - missing/false: disabled
+     * - true/empty attribute: enabled with default threshold (16)
+     * - number (as string): enabled and used as threshold
+     */
+    revealOnScroll;
+    /**
+     * Shrink trigger.
+     * - missing/0: disabled
+     * - number (px): shrink when scrollY >= that value (but never before header height)
+     * - css var name (e.g. --foo): shrink when scrollY >= resolved var value
+     * - selector (e.g. .page-title): shrink when that element scrolls out of view above the viewport
+     */
+    shrinkOffset;
+    /**
+     * If true, expand the header when hovered
+     */
+    expandOnHover = false;
+    /** Emits whenever scroll-driven state changes. */
+    leHeaderState;
+    /** Emits when the header shrinks/expands (only on change). */
+    leHeaderShrinkChange;
+    /** Emits when the header hides/shows (only on change). */
+    leHeaderVisibilityChange;
+    revealed = true;
+    shrunk = false;
+    placeholderHeight = null;
+    hoverActive = false;
+    disconnectModeObserver;
+    rafId = null;
+    measureRafId = null;
+    lastY = 0;
+    lastEmittedDirection = 'down';
+    headerEl;
+    shrinkSelectorEl;
+    setShrunk(next, y) {
+        if (next === this.shrunk)
+            return;
+        this.shrunk = next;
+        this.leHeaderShrinkChange.emit({ shrunk: this.shrunk, y });
+    }
+    componentDidLoad() {
+        if (typeof window === 'undefined')
+            return;
+        this.lastY = window.scrollY || 0;
+        this.scheduleMeasure(true);
+        this.scheduleUpdate(true);
+    }
+    disconnectedCallback() {
+        this.disconnectModeObserver?.();
+        if (this.rafId != null) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = null;
+        }
+        if (this.measureRafId != null) {
+            cancelAnimationFrame(this.measureRafId);
+            this.measureRafId = null;
+        }
+    }
+    onBehaviorPropsChange() {
+        this.scheduleUpdate(true);
+        this.scheduleMeasure(true);
+    }
+    onWindowScroll() {
+        this.scheduleUpdate();
+    }
+    onWindowResize() {
+        this.scheduleMeasure(true);
+        this.scheduleUpdate(true);
+    }
+    getPosition() {
+        if (this.fixed)
+            return 'fixed';
+        if (this.sticky)
+            return 'sticky';
+        return 'static';
+    }
+    parseRevealThreshold() {
+        // Only applies in sticky mode.
+        if (!this.sticky || this.fixed)
+            return null;
+        if (this.revealOnScroll == null)
+            return null;
+        const raw = String(this.revealOnScroll).trim();
+        if (raw === '' || raw === 'true')
+            return 16;
+        if (raw === 'false')
+            return null;
+        const n = Number(raw);
+        return Number.isFinite(n) ? Math.max(0, n) : 16;
+    }
+    resolveShrinkStartPx() {
+        const raw = (this.shrinkOffset ?? '').trim();
+        if (!raw || raw === '0')
+            return null;
+        // Numeric
+        const numeric = Number(raw);
+        if (Number.isFinite(numeric))
+            return Math.max(0, numeric);
+        // CSS variable name
+        if (raw.startsWith('--')) {
+            const value = getComputedStyle(document.documentElement).getPropertyValue(raw).trim();
+            const v = Number(value.replace('px', '').trim());
+            return Number.isFinite(v) ? Math.max(0, v) : null;
+        }
+        // Selector
+        try {
+            const el = document.querySelector(raw);
+            this.shrinkSelectorEl = el;
+            return null;
+        }
+        catch {
+            this.shrinkSelectorEl = null;
+            return null;
+        }
+    }
+    scheduleUpdate(force = false) {
+        if (this.rafId != null) {
+            if (!force)
+                return;
+            cancelAnimationFrame(this.rafId);
+            this.rafId = null;
+        }
+        this.rafId = requestAnimationFrame(() => {
+            this.rafId = null;
+            this.updateFromScroll();
+        });
+    }
+    scheduleMeasure(force = false) {
+        if (this.measureRafId != null && !force)
+            return;
+        this.measureRafId = requestAnimationFrame(() => {
+            this.measureRafId = null;
+            this.measurePlaceholderHeight();
+        });
+    }
+    measurePlaceholderHeight() {
+        // Measure the rendered header height once (and on resize/mode change).
+        // This intentionally ignores scroll/shrink behavior; it should reserve the full header height.
+        if (!this.headerEl)
+            return;
+        const next = Math.ceil(this.headerEl.getBoundingClientRect().height);
+        if (!Number.isFinite(next) || next <= 0)
+            return;
+        if (next !== this.placeholderHeight) {
+            this.placeholderHeight = next;
+            // Publish to global root so placeholders anywhere can read it.
+            if (typeof document !== 'undefined') {
+                document.documentElement.style.setProperty('--le-header-height', `${next}px`);
+            }
+        }
+    }
+    updateFromScroll() {
+        const y = typeof window !== 'undefined' ? window.scrollY || 0 : 0;
+        const delta = y - this.lastY;
+        const direction = delta < 0 ? 'up' : 'down';
+        // Shrink behavior
+        let computedShrunk = false;
+        const headerHeight = Math.max(0, this.placeholderHeight ?? 0);
+        const shrinkStartPx = typeof window !== 'undefined' ? this.resolveShrinkStartPx() : null;
+        if (this.shrinkSelectorEl) {
+            const rect = this.shrinkSelectorEl.getBoundingClientRect();
+            computedShrunk = rect.bottom <= 0;
+        }
+        else if (shrinkStartPx != null) {
+            const effectiveStart = Math.max(shrinkStartPx, headerHeight);
+            computedShrunk = y >= effectiveStart;
+        }
+        // Hover override: when enabled and hovered, force expanded.
+        const nextShrunk = this.expandOnHover && this.hoverActive ? false : computedShrunk;
+        this.setShrunk(nextShrunk, y);
+        // Reveal-on-scroll (sticky-only)
+        const revealThreshold = this.parseRevealThreshold();
+        if (revealThreshold != null) {
+            // Always show the header near the top of the page.
+            const topLock = Math.max(0, this.placeholderHeight ?? 0);
+            if (y <= topLock) {
+                if (!this.revealed) {
+                    this.revealed = true;
+                    this.leHeaderVisibilityChange.emit({ visible: true, y });
+                }
+            }
+            else if (Math.abs(delta) >= revealThreshold) {
+                const nextRevealed = direction === 'up' || y <= 0;
+                if (nextRevealed !== this.revealed) {
+                    this.revealed = nextRevealed;
+                    this.leHeaderVisibilityChange.emit({ visible: this.revealed, y });
+                }
+                this.lastEmittedDirection = direction;
+            }
+        }
+        else {
+            if (!this.revealed) {
+                this.revealed = true;
+                this.leHeaderVisibilityChange.emit({ visible: true, y });
+            }
+        }
+        this.lastY = y;
+        this.leHeaderState.emit({
+            y,
+            direction: this.lastEmittedDirection,
+            revealed: this.revealed,
+            shrunk: this.shrunk,
+        });
+    }
+    render() {
+        const position = this.getPosition();
+        const hostClass = utils.classnames('le-header', {
+            'header-is-shrunk': this.shrunk,
+            'is-fixed': position === 'fixed',
+            'is-sticky': position === 'sticky',
+            'is-static': position === 'static',
+            'is-revealed': this.revealed,
+            'is-hidden': !this.revealed,
+            'is-shrunk': this.shrunk,
+        });
+        return (index.h(index.Host, { key: '3fc823975a0ebcae3cb799bf94e35a289813cd35', class: hostClass, onMouseEnter: () => {
+                if (!this.expandOnHover)
+                    return;
+                this.hoverActive = true;
+                this.scheduleUpdate(true);
+            }, onMouseLeave: () => {
+                if (!this.expandOnHover)
+                    return;
+                this.hoverActive = false;
+                this.scheduleUpdate(true);
+            } }, index.h("le-component", { key: 'bb8e3c5717112e427fd86a6af4231b33147769e7', component: "le-header" }, index.h("header", { key: 'da96d6a1eb91a85ea8050870895fcd13bdb28391', class: "header", part: "header", role: "banner", ref: el => (this.headerEl = el) }, index.h("div", { key: '04386a3d535189012655ee352822812349d386d7', class: "inner", part: "inner" }, index.h("div", { key: '4b1fc43ca08e981f3dc810a23c14e6ed3200a1de', class: "row", part: "row" }, index.h("div", { key: '8fad255865a0d2e2662f3ad1030d48f8586ae8c7', class: "start", part: "start" }, index.h("le-slot", { key: '702eeebfe3133dae44e5268848ce5cac81f3b306', name: "start", label: "Start", description: "Logo / back button / nav", "allowed-components": "le-button,le-text,le-tag,le-box,le-stack" }, index.h("slot", { key: 'bdd3478abbdcd46143ce8a79d096baab84d12588', name: "start" }))), index.h("div", { key: 'e5b7d3d42e28d80b2df89a3ab365a29b39544f14', class: "title", part: "title" }, index.h("le-slot", { key: 'b5a68c8baaf05769ea838ca0482fa1db52b03b3a', name: "title", label: "Title", description: "Header title", type: "text", tag: "span" }, index.h("span", { key: '91763f968886e052a637959253863e583da51b76', class: "title-slot", part: "title" }, index.h("slot", { key: '060be7c91cca50c26db56cd15ad5d38962c8003f', name: "title" })))), index.h("div", { key: '938222741cbe15e531ff355185c4f599a3d26147', class: "end", part: "end" }, index.h("le-slot", { key: '8e1c91426dc87f1bdcb98d33b7da4cc6988781cf', name: "end", label: "End", description: "Actions", "allowed-components": "le-button,le-text,le-tag,le-box,le-stack" }, index.h("slot", { key: '67e4bda7e7c754dda5a7d9505a9b451f2487f47b', name: "end" })))), index.h("div", { key: '84dfedd30ec9bd49b668b2e1676ce3712b9d2faf', class: "secondary", part: "secondary" }, index.h("le-slot", { key: '95c56a8e3dbaaf284b03d72f1d9ec01d24c148d2', name: "", label: "Secondary", description: "Secondary row content", "allowed-components": "le-tabs,le-tab-bar,le-select,le-combobox,le-text,le-stack,le-box" }, index.h("slot", { key: '240df8fc23a9bc4e7aa294c52b229c7abf7c427d' }))))))));
+    }
+    static get watchers() { return {
+        "revealOnScroll": ["onBehaviorPropsChange"],
+        "shrinkOffset": ["onBehaviorPropsChange"],
+        "fixed": ["onBehaviorPropsChange"],
+        "sticky": ["onBehaviorPropsChange"],
+        "isStatic": ["onBehaviorPropsChange"]
+    }; }
+};
+LeHeader.style = leHeaderCss;
+
+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:host([trigger-full-width]) {\n  display: block;\n  width: 100%;\n}\n\n/* ============================================\n   Trigger\n   ============================================ */\n\n.le-popover-trigger {\n  display: inline-flex;\n  cursor: pointer;\n}\n\n.le-popover-trigger-full-width {\n  display: flex;\n  width: 100%;\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/* Fallback for browsers without the Popover API */\n.le-popover-content[data-fallback-open=\"false\"] {\n  display: none;\n}\n\n.le-popover-content[data-fallback-open=\"true\"] {\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";
+
+// Keep a simple stack so Escape closes the most recently opened popover first.
+// This also helps nested popovers behave naturally.
+const openPopoverStack = [];
+const LePopover = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.lePopoverOpen = index.createEvent(this, "lePopoverOpen");
+        this.lePopoverClose = index.createEvent(this, "lePopoverClose");
+    }
+    get el() { return index.getElement(this); }
+    /**
+     * Mode of the popover should be 'default' for internal use
+     */
+    mode;
+    /**
+     * Whether the popover is currently open
+     */
+    open = false;
+    /**
+     * Position of the popover relative to its trigger
+     */
+    position = 'bottom';
+    /**
+     * Alignment of the popover
+     */
+    align = 'start';
+    /**
+     * Optional title for the popover header
+     */
+    popoverTitle;
+    /**
+     * Whether to show a close button in the header
+     */
+    showClose = true;
+    /**
+     * Whether clicking outside closes the popover
+     */
+    closeOnClickOutside = true;
+    /**
+     * Whether pressing Escape closes the popover
+     */
+    closeOnEscape = true;
+    /**
+     * Offset from the trigger element (in pixels)
+     */
+    offset = 8;
+    /**
+     * Fixed width for the popover (e.g., '300px', '20rem')
+     */
+    width;
+    /**
+     * Minimum width for the popover (e.g., '200px', '15rem')
+     */
+    minWidth = '200px';
+    /**
+     * Maximum width for the popover (e.g., '400px', '25rem')
+     */
+    maxWidth;
+    /**
+     * Should the popover's trigger take full width of its container
+     */
+    triggerFullWidth = false;
+    /**
+     * Emitted when the popover opens
+     */
+    lePopoverOpen;
+    /**
+     * Emitted when the popover closes
+     */
+    lePopoverClose;
+    /**
+     * Method to update the popover position from a parent component
+     */
+    async updatePosition() {
+        this._updatePosition();
+    }
+    isPositioned = false;
+    triggerEl;
+    popoverEl;
+    uniqueId = `le-popover-${Math.random().toString(36).substr(2, 9)}`;
+    scrollParents = [];
+    isListeningForDismiss = false;
+    get supportsPopoverApi() {
+        return typeof HTMLElement.prototype.showPopover === 'function';
+    }
+    shadowContains(container, node) {
+        let current = node;
+        while (current) {
+            if (current === container)
+                return true;
+            if (current instanceof ShadowRoot) {
+                current = current.host;
+                continue;
+            }
+            if (current.parentNode) {
+                current = current.parentNode;
+                continue;
+            }
+            const root = current.getRootNode?.();
+            if (root instanceof ShadowRoot) {
+                current = root.host;
+                continue;
+            }
+            break;
+        }
+        return false;
+    }
+    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);
+        // If the popover is initially open (unlikely, but possible), wire listeners.
+        if (this.open) {
+            this.addDismissListeners();
+        }
+    }
+    disconnectedCallback() {
+        this.popoverEl?.removeEventListener('toggle', this.handlePopoverToggle);
+        document.removeEventListener('le-popover-will-open', this.handleOtherPopoverOpen);
+        this.removeScrollListeners();
+        this.removeDismissListeners();
+    }
+    addDismissListeners() {
+        if (this.isListeningForDismiss)
+            return;
+        // Use capture so clicks inside the trigger (which stops propagation) are still observed.
+        document.addEventListener('pointerdown', this.handleDocumentPointerDown, true);
+        document.addEventListener('keydown', this.handleDocumentKeyDown, true);
+        this.isListeningForDismiss = true;
+    }
+    removeDismissListeners() {
+        if (!this.isListeningForDismiss)
+            return;
+        document.removeEventListener('pointerdown', this.handleDocumentPointerDown, true);
+        document.removeEventListener('keydown', this.handleDocumentKeyDown, true);
+        this.isListeningForDismiss = false;
+    }
+    handleDocumentPointerDown = (event) => {
+        if (!this.open || !this.closeOnClickOutside)
+            return;
+        // If the click happens inside this popover component (trigger OR content), don't close.
+        const path = (event.composedPath?.() ?? []);
+        if (path.includes(this.el))
+            return;
+        this.hide();
+    };
+    handleDocumentKeyDown = (event) => {
+        if (!this.open || !this.closeOnEscape)
+            return;
+        if (event.key !== 'Escape')
+            return;
+        // Only the top-most opened popover handles Escape.
+        const top = openPopoverStack[openPopoverStack.length - 1];
+        if (top !== this.el)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.hide();
+    };
+    /**
+     * Find all scrollable parent elements
+     */
+    getScrollParents(element) {
+        const scrollParents = [];
+        let parent = element.parentElement;
+        while (parent) {
+            const style = getComputedStyle(parent);
+            const overflow = style.overflow + style.overflowY + style.overflowX;
+            if (/(auto|scroll)/.test(overflow)) {
+                scrollParents.push(parent);
+            }
+            parent = parent.parentElement;
+        }
+        // Always include window for page scroll
+        return scrollParents;
+    }
+    /**
+     * Add scroll listeners to all scrollable parents
+     */
+    addScrollListeners() {
+        if (!this.triggerEl)
+            return;
+        this.scrollParents = this.getScrollParents(this.triggerEl);
+        // Listen to each scroll parent
+        this.scrollParents.forEach(parent => {
+            parent.addEventListener('scroll', this.handleScroll, { passive: true });
+        });
+        // Also listen to window scroll and resize
+        window.addEventListener('scroll', this.handleScroll, { passive: true });
+        window.addEventListener('resize', this.handleScroll, { passive: true });
+    }
+    /**
+     * Remove scroll listeners
+     */
+    removeScrollListeners() {
+        this.scrollParents.forEach(parent => {
+            parent.removeEventListener('scroll', this.handleScroll);
+        });
+        window.removeEventListener('scroll', this.handleScroll);
+        window.removeEventListener('resize', this.handleScroll);
+        this.scrollParents = [];
+    }
+    handleScroll = () => {
+        if (this.open) {
+            this._updatePosition();
+        }
+    };
+    handleOpened() {
+        this.open = true;
+        // Track stack order for Escape handling.
+        const existingIndex = openPopoverStack.indexOf(this.el);
+        if (existingIndex >= 0)
+            openPopoverStack.splice(existingIndex, 1);
+        openPopoverStack.push(this.el);
+        this.addDismissListeners();
+        this.addScrollListeners();
+        this._updatePosition();
+        this.lePopoverOpen.emit();
+    }
+    handleClosed() {
+        this.open = false;
+        this.isPositioned = false;
+        this.removeScrollListeners();
+        this.removeDismissListeners();
+        const index = openPopoverStack.indexOf(this.el);
+        if (index >= 0)
+            openPopoverStack.splice(index, 1);
+        this.lePopoverClose.emit();
+    }
+    handlePopoverToggle = (event) => {
+        if (event.newState === 'open') {
+            this.handleOpened();
+        }
+        else {
+            this.handleClosed();
+        }
+    };
+    handleOtherPopoverOpen = (event) => {
+        const customEvent = event;
+        const openingPopover = customEvent.detail?.popover;
+        if (!openingPopover)
+            return;
+        if (openingPopover === this.el)
+            return;
+        // Allow nested popovers (e.g., le-select inside another popover).
+        // Use a shadow-DOM-aware containment check.
+        if (this.shadowContains(this.el, openingPopover) ||
+            this.shadowContains(openingPopover, this.el)) {
+            return;
+        }
+        if (this.open) {
+            this.hide();
+        }
+    };
+    /**
+     * Opens the popover
+     */
+    async show() {
+        document.dispatchEvent(new CustomEvent('le-popover-will-open', {
+            detail: { popover: this.el },
+        }));
+        if (this.supportsPopoverApi) {
+            this.popoverEl?.showPopover();
+        }
+        else {
+            this.handleOpened();
+        }
+    }
+    /**
+     * Closes the popover
+     */
+    async hide() {
+        if (this.supportsPopoverApi) {
+            this.popoverEl?.hidePopover();
+        }
+        else {
+            this.handleClosed();
+        }
+    }
+    /**
+     * Toggles the popover
+     */
+    async toggle() {
+        if (this.open) {
+            await this.hide();
+        }
+        else {
+            await this.show();
+        }
+    }
+    handleTriggerClick = (event) => {
+        event.stopPropagation();
+        this.toggle();
+    };
+    _updatePosition() {
+        if (!this.triggerEl || !this.popoverEl)
+            return;
+        const triggerRect = this.triggerEl.getBoundingClientRect();
+        const popoverRect = this.popoverEl.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const viewportPadding = 8;
+        let position = this.position;
+        let align = this.align;
+        // Auto-position logic
+        const spaceBelow = viewportHeight - triggerRect.bottom - viewportPadding;
+        const spaceAbove = triggerRect.top - viewportPadding;
+        const spaceRight = viewportWidth - triggerRect.right - viewportPadding;
+        const spaceLeft = triggerRect.left - viewportPadding;
+        if (position === 'auto') {
+            if (spaceBelow >= popoverRect.height + this.offset) {
+                position = 'bottom';
+            }
+            else if (spaceAbove >= popoverRect.height + this.offset) {
+                position = 'top';
+            }
+            else if (spaceRight >= popoverRect.width + this.offset) {
+                position = 'right';
+            }
+            else if (spaceLeft >= popoverRect.width + this.offset) {
+                position = 'left';
+            }
+            else {
+                const maxSpace = Math.max(spaceBelow, spaceAbove, spaceRight, spaceLeft);
+                if (maxSpace === spaceBelow)
+                    position = 'bottom';
+                else if (maxSpace === spaceAbove)
+                    position = 'top';
+                else if (maxSpace === spaceRight)
+                    position = 'right';
+                else
+                    position = 'left';
+            }
+        }
+        // Adjust alignment for horizontal overflow
+        if (position === 'top' || position === 'bottom') {
+            if (align === 'start' &&
+                triggerRect.left + popoverRect.width > viewportWidth - viewportPadding) {
+                align = 'end';
+            }
+            else if (align === 'end' && triggerRect.right - popoverRect.width < viewportPadding) {
+                align = 'start';
+            }
+            else if (align === 'center') {
+                const triggerCenter = triggerRect.left + triggerRect.width / 2;
+                if (triggerCenter - popoverRect.width / 2 < viewportPadding) {
+                    align = 'start';
+                }
+                else if (triggerCenter + popoverRect.width / 2 > viewportWidth - viewportPadding) {
+                    align = 'end';
+                }
+            }
+        }
+        // Calculate position
+        let top = 0;
+        let left = 0;
+        let maxHeight = null;
+        switch (position) {
+            case 'top':
+                top = triggerRect.top - popoverRect.height - this.offset;
+                if (top < viewportPadding) {
+                    maxHeight = triggerRect.top - this.offset - viewportPadding * 2;
+                    top = viewportPadding;
+                }
+                break;
+            case 'bottom':
+                top = triggerRect.bottom + this.offset;
+                if (top + popoverRect.height > viewportHeight - viewportPadding) {
+                    maxHeight = viewportHeight - top - viewportPadding;
+                }
+                break;
+            case 'left':
+                left = triggerRect.left - popoverRect.width - this.offset;
+                top = triggerRect.top;
+                if (left < viewportPadding)
+                    left = viewportPadding;
+                break;
+            case 'right':
+                left = triggerRect.right + this.offset;
+                top = triggerRect.top;
+                if (left + popoverRect.width > viewportWidth - viewportPadding) {
+                    left = viewportWidth - popoverRect.width - viewportPadding;
+                }
+                break;
+        }
+        // Calculate horizontal alignment for top/bottom
+        if (position === 'top' || position === 'bottom') {
+            switch (align) {
+                case 'start':
+                    left = triggerRect.left;
+                    break;
+                case 'center':
+                    left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2;
+                    break;
+                case 'end':
+                    left = triggerRect.right - popoverRect.width;
+                    break;
+            }
+            // Constrain to viewport
+            if (left < viewportPadding) {
+                left = viewportPadding;
+            }
+            else if (left + popoverRect.width > viewportWidth - viewportPadding) {
+                left = viewportWidth - popoverRect.width - viewportPadding;
+            }
+        }
+        // Calculate vertical alignment for left/right
+        if (position === 'left' || position === 'right') {
+            switch (align) {
+                case 'start':
+                    top = triggerRect.top;
+                    break;
+                case 'center':
+                    top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2;
+                    break;
+                case 'end':
+                    top = triggerRect.bottom - popoverRect.height;
+                    break;
+            }
+            if (top < viewportPadding)
+                top = viewportPadding;
+            if (top + popoverRect.height > viewportHeight - viewportPadding) {
+                maxHeight = viewportHeight - top - viewportPadding;
+            }
+        }
+        // Apply styles
+        this.popoverEl.style.top = `${top}px`;
+        this.popoverEl.style.left = `${left}px`;
+        if (maxHeight !== null && maxHeight > 100) {
+            this.popoverEl.style.maxHeight = `${maxHeight}px`;
+            this.popoverEl.style.overflowY = 'auto';
+        }
+        else {
+            this.popoverEl.style.maxHeight = '';
+            this.popoverEl.style.overflowY = '';
+        }
+        this.isPositioned = true;
+    }
+    render() {
+        const popoverStyles = {
+            visibility: this.isPositioned ? 'visible' : 'hidden',
+        };
+        if (this.width)
+            popoverStyles.width = this.width;
+        if (this.minWidth)
+            popoverStyles.minWidth = this.minWidth;
+        if (this.maxWidth)
+            popoverStyles.maxWidth = this.maxWidth;
+        return (index.h(index.Host, { key: '9bbb6c41436ac051529650ef0fbf5e152ec82901', "trigger-full-width": this.triggerFullWidth }, index.h("div", { key: '600f4d8a367e2b52cb6eca2c6bf4d77a3851b078', class: utils.classnames('le-popover-trigger', {
+                'le-popover-trigger-full-width': this.triggerFullWidth,
+            }), ref: el => (this.triggerEl = el), onClick: this.handleTriggerClick, part: "trigger" }, index.h("slot", { key: '6cfc71e93c2ea7552157398ac4aa12507ba55cc3', name: "trigger" }, index.h("button", { key: '06f35fffce2a5e2129733daf5fda9a35762ff586', type: "button", class: "le-popover-default-trigger" }, index.h("span", { key: 'c7dcb2074e40851db8cb9cc9d5ff42d90be479c2' }, "\u2295")))), index.h("div", { key: '5cc7278cc388bd057df4311a5082f8ad29eaf756', id: this.uniqueId, class: "le-popover-content",
+            // Always use manual mode so nested popovers can be open together.
+            // We implement click-outside and Escape handling ourselves.
+            popover: "manual", ref: el => (this.popoverEl = el), style: popoverStyles, "data-fallback-open": this.supportsPopoverApi ? undefined : String(this.open) }, (this.popoverTitle || this.showClose) && (index.h("div", { key: '56b803332842e42387160ab6ab7df3a8b20f00fc', class: "le-popover-header" }, this.popoverTitle && index.h("span", { key: '034c0acc4c08fb5eb7f10f9e9b310874eafada3e', class: "le-popover-title" }, this.popoverTitle), this.showClose && (index.h("button", { key: '29546e93795dc7aefca86b9d8d8ceef109c230c8', type: "button", class: "le-popover-close", onClick: () => this.hide(), "aria-label": "Close" }, "\u00D7")))), index.h("div", { key: 'dbacc49cf8c8198048443f0b8acfdc795eb72b31', class: "le-popover-body", part: "content" }, index.h("slot", { key: 'ca3ceed750c50ba33c58d0cb99ce8378cc358872' })))));
+    }
+};
+LePopover.style = lePopoverCss;
+
+const lePopupCss = ":host{display:contents}.le-popup-dialog{position:fixed;z-index:100;top:0;right:0;bottom:0;left:0;padding:0;border:none;background:transparent;max-width:none;max-height:none;overflow:visible;--_popup-min-width:var(--le-popup-min-width, 320px);--_popup-max-width:var(--le-popup-max-width, min(500px, 90vw));--_popup-min-height:var(--le-popup-min-height, auto)}.le-popup-dialog::backdrop{background:var(--le-popup-backdrop-color, rgba(0, 0, 0, 0.5));animation:le-popup-backdrop-fade 0.2s ease-out}@keyframes le-popup-backdrop-fade{from{opacity:0}to{opacity:1}}.le-popup-position-center{margin:auto}.le-popup-position-top{margin:var(--le-space-2xl, 48px) auto auto auto}.le-popup-position-top-left{margin:var(--le-space-lg, 24px) auto auto var(--le-space-lg, 24px)}.le-popup-position-top-right{margin:var(--le-space-lg, 24px) var(--le-space-lg, 24px) auto auto}.le-popup-position-bottom{margin:auto auto var(--le-space-2xl, 48px) auto}.le-popup-position-bottom-left{margin:auto auto var(--le-space-lg, 24px) var(--le-space-lg, 24px)}.le-popup-position-bottom-right{margin:auto var(--le-space-lg, 24px) var(--le-space-lg, 24px) auto}.le-popup-container{display:flex;flex-direction:column;min-width:var(--_popup-min-width);max-width:var(--_popup-max-width);min-height:var(--_popup-min-height);max-height:calc(100vh - var(--le-space-2xl, 48px) * 2);background:var(--le-color-surface, #ffffff);border:1px solid var(--le-color-border, #e0e0e0);border-radius:var(--le-radius-lg, 12px);box-shadow:var(--le-shadow-xl, 0 8px 32px rgba(0, 0, 0, 0.15));overflow:hidden;font-family:var(--le-font-family, system-ui, -apple-system, sans-serif);color:var(--le-color-text, #333);animation:le-popup-appear 0.2s ease-out}@keyframes le-popup-appear{from{opacity:0;transform:scale(0.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}.le-popup-header{flex-shrink:0;padding:var(--le-space-md, 16px) var(--le-space-lg, 24px);border-bottom:1px solid var(--le-color-border, #e0e0e0);background:var(--le-color-surface-alt, #f9f9f9);font-size:var(--le-font-size-lg, 1.125rem);font-weight:var(--le-font-weight-semibold, 600);color:var(--le-color-text, #333)}.le-popup-body{flex:1;padding:var(--le-space-lg, 24px);overflow-y:auto}.le-popup-message{margin:0;font-size:var(--le-font-size-md, 1rem);line-height:var(--le-line-height-relaxed, 1.6);color:var(--le-color-text, #333)}.le-popup-message+::slotted(*){margin-top:var(--le-space-md, 16px)}.le-popup-input{display:block;width:100%;margin-top:var(--le-space-md, 16px);padding:var(--le-space-sm, 8px) var(--le-space-md, 16px);font-family:inherit;font-size:var(--le-font-size-md, 1rem);color:var(--le-color-text, #333);background:var(--le-color-background, #fff);border:1px solid var(--le-color-border, #e0e0e0);border-radius:var(--le-radius-md, 8px);outline:none;transition:border-color var(--le-transition-fast, 0.15s ease),\n              box-shadow var(--le-transition-fast, 0.15s ease);box-sizing:border-box}.le-popup-input:focus{border-color:var(--le-color-primary, #2196f3);box-shadow:0 0 0 3px var(--le-color-primary-light, rgba(33, 150, 243, 0.2))}.le-popup-input::placeholder{color:var(--le-color-text-muted, #999)}.le-popup-footer{flex-shrink:0;display:flex;justify-content:flex-end;gap:var(--le-space-sm, 8px);padding:var(--le-space-md, 16px) var(--le-space-lg, 24px);border-top:1px solid var(--le-color-border, #e0e0e0);background:var(--le-color-surface-alt, #f9f9f9)}.le-popup-btn{min-width:80px}@media (max-width: 480px){.le-popup-container{min-width:calc(100vw - var(--le-space-md, 16px) * 2);max-width:calc(100vw - var(--le-space-md, 16px) * 2)}.le-popup-footer{flex-direction:column-reverse}.le-popup-btn{width:100%}}";
+
+const LePopup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.leConfirm = index.createEvent(this, "leConfirm");
+        this.leCancel = index.createEvent(this, "leCancel");
+        this.leOpen = index.createEvent(this, "leOpen");
+        this.leClose = index.createEvent(this, "leClose");
+    }
+    get el() { return index.getElement(this); }
+    /**
+     * The mode of the Le Kit (e.g., 'default' or 'admin')
+     */
+    mode = 'default';
+    /**
+     * Whether the popup is currently visible
+     */
+    open = false;
+    /**
+     * Type of popup: alert (OK only), confirm (OK/Cancel), prompt (input + OK/Cancel), custom
+     */
+    type = 'alert';
+    /**
+     * Optional title for the popup header
+     */
+    popupTitle;
+    /**
+     * Message text to display (for alert/confirm/prompt types)
+     */
+    message;
+    /**
+     * Whether the popup is modal (blocks interaction with page behind)
+     */
+    modal = true;
+    /**
+     * Position of the popup on screen
+     */
+    position = 'center';
+    /**
+     * Text for the confirm/OK button
+     */
+    confirmText = 'OK';
+    /**
+     * Text for the cancel button
+     */
+    cancelText = 'Cancel';
+    /**
+     * Placeholder text for prompt input
+     */
+    placeholder = '';
+    /**
+     * Default value for prompt input
+     */
+    defaultValue = '';
+    /**
+     * Whether clicking the backdrop closes the popup (modal only)
+     */
+    closeOnBackdrop = true;
+    /**
+     * Internal state for prompt input value
+     */
+    inputValue = '';
+    /**
+     * Emitted when the popup is confirmed (OK clicked)
+     */
+    leConfirm;
+    /**
+     * Emitted when the popup is cancelled (Cancel clicked or dismissed)
+     */
+    leCancel;
+    /**
+     * Emitted when the popup opens
+     */
+    leOpen;
+    /**
+     * Emitted when the popup closes
+     */
+    leClose;
+    dialogEl;
+    inputEl;
+    resolvePromise;
+    componentWillLoad() {
+        this.inputValue = this.defaultValue;
+    }
+    componentDidLoad() {
+        // Native dialog handles Escape key automatically when modal
+        // We just need to listen for the cancel event
+        this.dialogEl?.addEventListener('cancel', this.handleDialogCancel);
+    }
+    disconnectedCallback() {
+        this.dialogEl?.removeEventListener('cancel', this.handleDialogCancel);
+    }
+    handleDialogCancel = (e) => {
+        e.preventDefault(); // Prevent default close to handle it ourselves
+        this.handleCancel();
+    };
+    /**
+     * Opens the popup and returns a promise that resolves when closed
+     */
+    async show() {
+        return new Promise(resolve => {
+            this.resolvePromise = resolve;
+            this.inputValue = this.defaultValue;
+            this.open = true;
+            // Use requestAnimationFrame to ensure the dialog element is rendered
+            requestAnimationFrame(() => {
+                if (this.dialogEl) {
+                    if (this.modal) {
+                        this.dialogEl.showModal();
+                    }
+                    else {
+                        this.dialogEl.show();
+                    }
+                    this.leOpen.emit();
+                    // Focus input for prompt type
+                    if (this.type === 'prompt' && this.inputEl) {
+                        this.inputEl.focus();
+                        this.inputEl.select();
+                    }
+                }
+            });
+        });
+    }
+    /**
+     * Closes the popup with a result
+     */
+    async hide(confirmed = false) {
+        const result = {
+            confirmed,
+            value: this.type === 'prompt' ? this.inputValue : undefined,
+        };
+        this.dialogEl?.close();
+        this.open = false;
+        this.leClose.emit(result);
+        if (this.resolvePromise) {
+            this.resolvePromise(result);
+            this.resolvePromise = undefined;
+        }
+    }
+    handleConfirm = () => {
+        const result = {
+            confirmed: true,
+            value: this.type === 'prompt' ? this.inputValue : undefined,
+        };
+        this.leConfirm.emit(result);
+        this.hide(true);
+    };
+    handleCancel = () => {
+        const result = {
+            confirmed: false,
+            value: undefined,
+        };
+        this.leCancel.emit(result);
+        this.hide(false);
+    };
+    handleBackdropClick = (e) => {
+        // Check if click was on the dialog backdrop (outside the dialog box)
+        if (this.closeOnBackdrop && e.target === this.dialogEl) {
+            const rect = this.dialogEl.getBoundingClientRect();
+            const clickedInDialog = e.clientX >= rect.left &&
+                e.clientX <= rect.right &&
+                e.clientY >= rect.top &&
+                e.clientY <= rect.bottom;
+            if (!clickedInDialog) {
+                this.handleCancel();
+            }
+        }
+    };
+    handleInputChange = (e) => {
+        this.inputValue = e.target.value;
+    };
+    handleKeyDown = (e) => {
+        if (e.key === 'Enter' && this.type !== 'custom') {
+            e.preventDefault();
+            this.handleConfirm();
+        }
+    };
+    hasSlot(name) {
+        return !!this.el.querySelector(`[slot="${name}"]`);
+    }
+    renderHeader() {
+        if (this.hasSlot('header')) {
+            return (index.h("div", { class: "le-popup-header", part: "header" }, index.h("slot", { name: "header" })));
+        }
+        if (this.popupTitle) {
+            return (index.h("div", { class: "le-popup-header", part: "header" }, this.popupTitle));
+        }
+        return null;
+    }
+    renderBody() {
+        return (index.h("div", { class: "le-popup-body", part: "body" }, this.message && index.h("p", { class: "le-popup-message" }, this.message), this.type === 'prompt' && (index.h("input", { type: "text", class: "le-popup-input", part: "input", placeholder: this.placeholder, value: this.inputValue, onInput: this.handleInputChange, onKeyDown: this.handleKeyDown, ref: el => (this.inputEl = el) })), index.h("le-slot", { name: "", tag: "div", description: "Custom popup content", type: "slot" }, index.h("slot", null))));
+    }
+    renderFooter() {
+        if (this.hasSlot('footer')) {
+            return (index.h("div", { class: "le-popup-footer", part: "footer" }, index.h("slot", { name: "footer" })));
+        }
+        // For custom type without footer slot, don't render default buttons
+        if (this.type === 'custom') {
+            return null;
+        }
+        return (index.h("div", { class: "le-popup-footer", part: "footer" }, (this.type === 'confirm' || this.type === 'prompt') && (index.h("le-button", { variant: "outlined", part: "button-cancel", class: "le-popup-btn", onClick: this.handleCancel }, this.cancelText)), index.h("le-button", { variant: "solid", part: "button-confirm", class: "le-popup-btn", onClick: this.handleConfirm }, this.confirmText)));
+    }
+    render() {
+        const positionClass = `le-popup-position-${this.position}`;
+        return (index.h("dialog", { key: '20ac8e086b2999191c769a0ee03b1c1182103809', class: `le-popup-dialog ${positionClass}`, part: "dialog", ref: el => (this.dialogEl = el), onClick: this.handleBackdropClick }, index.h("le-component", { key: '468b1d737c2301b041c2a7a13afc658505f74c5b', component: "le-popup" }, index.h("div", { key: '829cad08439dc5d0b3f9c78092a46faa016bbec2', class: "le-popup-container", part: "container" }, this.renderHeader(), this.renderBody(), this.renderFooter()))));
+    }
+};
+LePopup.style = lePopupCss;
+
+const leScrollProgressCss = ":host{display:block}:host([sticky]){position:sticky;top:var(--le-scroll-progress-sticky-top, 0);z-index:var(--le-scroll-progress-z, calc(var(--le-header-z, 1000) + 1))}:host([fixed]){position:fixed;top:var(--le-scroll-progress-fixed-top, 0);left:var(--le-scroll-progress-fixed-left, 0);right:var(--le-scroll-progress-fixed-right, 0);z-index:var(--le-scroll-progress-z, calc(var(--le-header-z, 1000) + 1))}.track{width:100%;height:var(--le-scroll-progress-height, 4px);background:var(--le-scroll-progress-bg, transparent)}.fill{height:100%;width:0;background:var(--le-scroll-progress-fill, var(--le-color-primary, currentColor));border-radius:var(--le-scroll-progress-border-radius, 2px);transition:width var(--le-transition-fast, 120ms linear)}";
+
+const LeScrollProgress = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    /** Boolean or selector string. */
+    trackScrollProgress;
+    progress = 0;
+    rafId = null;
+    targetEl = null;
+    componentWillLoad() {
+        this.updateProgress();
+    }
+    componentDidLoad() {
+        this.resolveTarget();
+        this.updateProgress();
+    }
+    disconnectedCallback() {
+        if (this.rafId != null) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = null;
+        }
+    }
+    onTrackChange() {
+        this.resolveTarget();
+        this.updateProgress();
+    }
+    onScroll() {
+        this.scheduleUpdate();
+    }
+    onResize() {
+        this.resolveTarget();
+        this.scheduleUpdate(true);
+    }
+    scheduleUpdate(force = false) {
+        if (this.rafId != null && !force)
+            return;
+        this.rafId = requestAnimationFrame(() => {
+            this.rafId = null;
+            this.updateProgress();
+        });
+    }
+    resolveTarget() {
+        if (typeof document === 'undefined')
+            return;
+        const raw = this.trackScrollProgress;
+        // If attribute missing, default to enabled (full document).
+        // If user explicitly sets 'false', treat as disabled.
+        if (raw == null) {
+            this.targetEl = null;
+            return;
+        }
+        const val = String(raw).trim();
+        if (val === '' || val === 'true') {
+            this.targetEl = null;
+            return;
+        }
+        if (val === 'false') {
+            this.targetEl = null;
+            return;
+        }
+        try {
+            this.targetEl = document.querySelector(val);
+        }
+        catch {
+            this.targetEl = null;
+        }
+    }
+    clamp01(n) {
+        return Math.max(0, Math.min(1, n));
+    }
+    updateProgress() {
+        if (typeof window === 'undefined' || typeof document === 'undefined')
+            return;
+        // If explicitly disabled.
+        if (this.trackScrollProgress === 'false') {
+            if (this.progress !== 0)
+                this.progress = 0;
+            return;
+        }
+        const scrollY = window.scrollY || 0;
+        let p = 0;
+        if (this.targetEl) {
+            const rect = this.targetEl.getBoundingClientRect();
+            const top = scrollY + rect.top;
+            const height = rect.height;
+            const viewport = window.innerHeight || 1;
+            const denom = Math.max(1, height - viewport);
+            p = this.clamp01((scrollY - top) / denom);
+        }
+        else {
+            const doc = document.documentElement;
+            const denom = Math.max(1, doc.scrollHeight - doc.clientHeight);
+            p = this.clamp01(scrollY / denom);
+        }
+        const next = Math.round(p * 1000) / 1000;
+        if (next !== this.progress)
+            this.progress = next;
+    }
+    render() {
+        const width = `${this.progress * 100}%`;
+        return (index.h(index.Host, { key: '46e7659497b80795c79365b97813cf57d517f48f' }, index.h("div", { key: '6e42f3479a1081df5355fb229902e9ee8c0a8918', class: "track", part: "track", "aria-hidden": "true" }, index.h("div", { key: '81cbe2ec0fc43a14b8bc0192b1f901be9c6cba3a', class: "fill", part: "fill", style: { width } }))));
+    }
+    static get watchers() { return {
+        "trackScrollProgress": ["onTrackChange"]
+    }; }
+};
+LeScrollProgress.style = leScrollProgressCss;
+
+const leSelectCss = ":host{display:inline-block;min-width:150px;--le-select-color:var(--le-color-text, #1f2937);--le-select-border-radius:var(--le-radius-md);--le-select-content-padding:var(--le-spacing-2)}:host([disabled]){opacity:0.5;pointer-events:none}:host([full-width]){width:100%}.select-trigger{display:flex;align-items:center;gap:0.5rem;width:100%;padding:0;--le-button-padding:var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-2);font-size:var(--le-select-font-size, 0.875rem);font-family:inherit;line-height:1.4;color:var(--le-select-color);background:var(--le-select-bg, var(--le-color-surface, #fff));border-radius:var(--le-select-border-radius);cursor:pointer;text-align:left;transition:border-color 0.15s ease, box-shadow 0.15s ease}.select-trigger:focus{outline:2px solid var(--le-color-focus);outline-offset:2px}.select-trigger:not(.has-value) .trigger-label{color:color-mix(in srgb, var(--le-color-text-secondary) 66%, transparent)}.trigger-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem}.trigger-icon-end{width:16px;height:16px}.trigger-icon img{width:100%;height:100%;object-fit:contain}.trigger-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--le-color-text)}.trigger-label::not(.has-value){color:var(--le-color-text-disabled, #9ca3af)}le-button::part(icon-end){display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem;margin-left:auto;transition:transform 0.2s ease}le-button::part(icon-end) svg{width:1rem;height:1rem}le-button.is-open::part(icon-end){transform:rotate(180deg)}.search-input::part(container):focus-within{outline:none !important}.search-input{--le-input-radius:var(--le-radius-md)}";
+
+const LeSelect = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.leChange = index.createEvent(this, "leChange");
+        this.leOpen = index.createEvent(this, "leOpen");
+        this.leClose = index.createEvent(this, "leClose");
+    }
+    get el() { return index.getElement(this); }
+    /**
+     * The options to display in the dropdown.
+     */
+    options = [];
+    /**
+     * The currently selected value.
+     */
+    value;
+    /**
+     * Placeholder text when no option is selected.
+     */
+    placeholder = 'Select an option';
+    /**
+     * Whether the select is disabled.
+     */
+    disabled = false;
+    /**
+     * Whether selection is required.
+     */
+    required = false;
+    /**
+     * Name attribute for form submission.
+     */
+    name;
+    /**
+     * Whether the select should take full width of its container.
+     */
+    fullWidth = false;
+    /**
+     * Size variant of the select.
+     */
+    size = 'medium';
+    /**
+     * Visual variant of the select.
+     */
+    variant = 'default';
+    /**
+     * Whether the input is searchable.
+     */
+    searchable = false;
+    /**
+     * Text to show when no options match the search.
+     */
+    emptyText = 'No results found';
+    /**
+     * Whether the dropdown is currently open.
+     */
+    open = false;
+    /**
+     * Emitted when the selected value changes.
+     */
+    leChange;
+    /**
+     * Emitted when the dropdown opens.
+     */
+    leOpen;
+    /**
+     * Emitted when the dropdown closes.
+     */
+    leClose;
+    selectedOption;
+    searchQuery = '';
+    dropdownEl;
+    inputEl;
+    handleValueChange() {
+        this.updateSelectedOption();
+    }
+    handleOptionsChange() {
+        this.updateSelectedOption();
+    }
+    componentWillLoad() {
+        this.updateSelectedOption();
+    }
+    get parsedOptions() {
+        if (typeof this.options === 'string') {
+            try {
+                return JSON.parse(this.options);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.options;
+    }
+    updateSelectedOption() {
+        if (this.value !== undefined) {
+            this.selectedOption = this.parsedOptions.find(opt => (opt.value ?? opt.label) === this.value);
+        }
+        else {
+            this.selectedOption = undefined;
+        }
+    }
+    filterOption = (option, query) => {
+        if (!query)
+            return true;
+        const searchLower = query.toLowerCase();
+        return (option.label.toLowerCase().includes(searchLower) ||
+            (option.description?.toLowerCase().includes(searchLower) ?? false));
+    };
+    handleOptionSelect = (e) => {
+        this.value = e.detail.value;
+        this.selectedOption = e.detail.option;
+        this.leChange.emit(e.detail);
+    };
+    handleDropdownOpen = () => {
+        this.open = true;
+        this.leOpen.emit();
+        // Focus search input if searchable
+        if (this.searchable) {
+            setTimeout(() => {
+                this.inputEl?.focus();
+            }, 50);
+        }
+    };
+    handleDropdownClose = () => {
+        this.open = false;
+        this.leClose.emit();
+    };
+    handleTriggerClick = () => {
+        if (!this.disabled) {
+            this.dropdownEl?.toggle();
+        }
+    };
+    handleTriggerKeyDown = (e) => {
+        if (this.disabled)
+            return;
+        if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
+            e.preventDefault();
+            this.dropdownEl?.show();
+        }
+    };
+    handleSearchInput = (e) => {
+        const target = e.target;
+        this.searchQuery = target.value;
+    };
+    /**
+     * Opens the dropdown.
+     */
+    async showDropdown() {
+        await this.dropdownEl?.show();
+    }
+    /**
+     * Closes the dropdown.
+     */
+    async hideDropdown() {
+        await this.dropdownEl?.hide();
+    }
+    renderIcon(icon) {
+        if (!icon)
+            return null;
+        if (icon.startsWith('http') || icon.startsWith('/')) {
+            return index.h("img", { class: "trigger-icon", src: icon, alt: "" });
+        }
+        return index.h("span", { class: "trigger-icon" }, icon);
+    }
+    render() {
+        const hasValue = this.selectedOption !== undefined;
+        return (index.h("le-component", { key: 'f41bf4f086925b6b37a0131a51e4f7e354797ed5', component: "le-select" }, index.h("le-dropdown-base", { key: '08db701f6b1f7e2c428ea0cc9ee4046c22759757', ref: el => (this.dropdownEl = el), options: this.parsedOptions, value: this.value, disabled: this.disabled, filterFn: this.searchable ? this.filterOption : undefined, filterQuery: this.searchQuery, onLeOptionSelect: this.handleOptionSelect, onLeDropdownOpen: this.handleDropdownOpen, onLeDropdownClose: this.handleDropdownClose, fullWidth: this.fullWidth }, index.h("le-button", { key: 'f994667c5360905a9e6340f0f0331bea55523418', variant: this.variant && this.variant !== 'default' ? this.variant : 'outlined', slot: "trigger", align: "space-between", class: {
+                'select-trigger': true,
+                'has-value': hasValue,
+                'is-open': this.open,
+            }, mode: "default", size: this.size, disabled: this.disabled, "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown, fullWidth: this.fullWidth, iconStart: hasValue && this.selectedOption?.iconStart
+                ? this.renderIcon(this.selectedOption.iconStart)
+                : null, iconEnd: index.h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("path", { d: "M4 6l4 4 4-4" })) }, index.h("span", { key: 'c807e00d21193e558dcf1b601c4aa5f78144fd14', class: "trigger-label" }, hasValue ? this.selectedOption.label : this.placeholder)), this.searchable && this.open && (index.h("div", { key: 'c285d28f7b0093580484b8d077c4f2ddd014aa2e', class: "multiselect-search", slot: "header" }, index.h("le-string-input", { key: '1dd31e5840a29e3a7e181c80182c20ea5ca28bcb', mode: "default", inputRef: el => (this.inputEl = el), class: "search-input", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchInput })))), this.name && index.h("input", { key: '0acb27fafae47b56808e1b1ee20e45c7cb0cfa3e', type: "hidden", name: this.name, value: this.value?.toString() ?? '' })));
+    }
+    static get watchers() { return {
+        "value": ["handleValueChange"],
+        "options": ["handleOptionsChange"]
+    }; }
+};
+LeSelect.style = leSelectCss;
+
+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) {
+        index.registerInstance(this, hostRef);
+        this.leSlotChange = index.createEvent(this, "leSlotChange");
+    }
+    get el() { return index.getElement(this); }
+    /**
+     * The type of slot content.
+     * - `slot`: Default, shows a dropzone for components (default)
+     * - `text`: Shows a single-line text input
+     * - `textarea`: Shows a multi-line text area
+     */
+    type = 'slot';
+    /**
+     * The name of the slot this placeholder represents.
+     * Should match the slot name in the parent component.
+     */
+    name = '';
+    /**
+     * Label to display in admin mode.
+     * If not provided, the slot name will be used.
+     */
+    label;
+    /**
+     * Description of what content this slot accepts.
+     * Shown in admin mode to guide content editors.
+     */
+    description;
+    /**
+     * Comma-separated list of allowed component tags for this slot.
+     * Used by CMS to filter available components.
+     *
+     * @example "le-card,le-button,le-text"
+     */
+    allowedComponents;
+    /**
+     * Whether multiple components can be dropped in this slot.
+     */
+    multiple = true;
+    /**
+     * Whether this slot is required to have content.
+     */
+    required = false;
+    /**
+     * Placeholder text for text/textarea inputs in admin mode.
+     */
+    placeholder;
+    /**
+     * The HTML tag to create when there's no slotted element.
+     * Used with type="text" or type="textarea" to auto-create elements.
+     *
+     * @example "h3" - creates <h3 slot="header">content</h3>
+     * @example "p" - creates <p slot="content">content</p>
+     */
+    tag;
+    /**
+     * CSS styles for the slot dropzone container.
+     * Useful for layouts - e.g., "flex-direction: row" for horizontal stacks.
+     * Only applies in admin mode for type="slot".
+     */
+    slotStyle;
+    /**
+     * Internal state to track admin mode
+     */
+    adminMode = false;
+    /**
+     * Internal state for text input value (synced from slot content)
+     */
+    textValue = '';
+    /**
+     * Whether the current textValue contains valid HTML
+     */
+    isValidHtml = true;
+    /**
+     * Available components loaded from Custom Elements Manifest
+     */
+    availableComponents = [];
+    /**
+     * Whether the component picker popover is open
+     */
+    pickerOpen = false;
+    /**
+     * Reference to the slot element to access assignedNodes
+     */
+    slotRef;
+    /**
+     * The original slotted element (e.g., <h3 slot="header">)
+     */
+    slottedElement;
+    /**
+     * Emitted when text content changes in admin mode.
+     * The event detail contains the new text value and validity.
+     */
+    leSlotChange;
+    disconnectModeObserver;
+    connectedCallback() {
+        this.disconnectModeObserver = utils.observeModeChanges(this.el, mode => {
+            const wasAdmin = this.adminMode;
+            this.adminMode = mode === 'admin';
+            // When entering admin mode, read content from slotted elements
+            if (this.adminMode && !wasAdmin) {
+                // Need to wait for render to access slot ref
+                requestAnimationFrame(() => this.readSlottedContent());
+                // Load available components for the component picker
+                if (this.type === 'slot') {
+                    this.loadAvailableComponents();
+                }
+            }
+        });
+    }
+    disconnectedCallback() {
+        this.disconnectModeObserver?.();
+    }
+    /**
+     * Flag to prevent re-reading content right after we updated it
+     */
+    isUpdating = false;
+    /**
+     * Read content from slotted elements via assignedNodes()
+     */
+    readSlottedContent() {
+        if (!this.slotRef)
+            return;
+        // Skip if we just updated the content ourselves
+        if (this.isUpdating) {
+            this.isUpdating = false;
+            return;
+        }
+        const assignedNodes = this.slotRef.assignedNodes({ flatten: true });
+        // For text/textarea types, we want to edit the innerHTML of slotted elements
+        if (this.type === 'text' || this.type === 'textarea') {
+            // Find the first element node (skip text nodes that are just whitespace)
+            const elementNode = assignedNodes.find(node => node.nodeType === Node.ELEMENT_NODE);
+            if (elementNode) {
+                // Only update textValue if slotted element changed or we don't have one yet
+                if (this.slottedElement !== elementNode) {
+                    this.slottedElement = elementNode;
+                    this.textValue = elementNode.innerHTML?.trim() || '';
+                    // console.log(`[le-slot "${this.name}"] Read slotted content:`, this.textValue);
+                }
+            }
+            else {
+                // No element, check for direct text content
+                const textContent = assignedNodes
+                    .filter(node => node.nodeType === Node.TEXT_NODE)
+                    .map(node => node.textContent)
+                    .join('')
+                    .trim();
+                if (textContent && !this.textValue) {
+                    this.textValue = textContent;
+                    // console.log(`[le-slot "${this.name}"] Read text content:`, this.textValue);
+                }
+            }
+        }
+    }
+    /**
+     * Validates if a string contains valid HTML
+     */
+    validateHtml(html) {
+        // Empty string is valid
+        if (!html.trim())
+            return true;
+        // Create a template element to parse the HTML
+        const template = document.createElement('template');
+        template.innerHTML = html;
+        // Check that we don't have obviously broken HTML
+        // Count opening and closing tags for common elements
+        const openTags = (html.match(/<[a-z][^>]*(?<!\/)>/gi) || []).length;
+        const closeTags = (html.match(/<\/[a-z][^>]*>/gi) || []).length;
+        const selfClosing = (html.match(/<[a-z][^>]*\/>/gi) || []).length;
+        // Simple validation: opening tags (minus self-closing) should roughly match closing tags
+        // Allow some tolerance for void elements like <br>, <img>, etc.
+        const voidElements = (html.match(/<(br|hr|img|input|meta|link|area|base|col|embed|param|source|track|wbr)[^>]*>/gi) || []).length;
+        const effectiveOpenTags = openTags - selfClosing - voidElements;
+        // If difference is too large, HTML is likely broken
+        if (Math.abs(effectiveOpenTags - closeTags) > 1) {
+            return false;
+        }
+        return true;
+    }
+    handleTextInput = (event) => {
+        const target = event.target;
+        this.textValue = target.value;
+        this.isValidHtml = this.validateHtml(this.textValue);
+        if (this.isValidHtml) {
+            // Set flag to prevent slotchange from re-reading what we just wrote
+            this.isUpdating = true;
+            console.log('Updating text value:', this.textValue, 'slottedElement:', this.slottedElement);
+            if (this.slottedElement) {
+                // Update existing slotted element's innerHTML
+                this.slottedElement.innerHTML = this.textValue;
+            }
+            else if (this.tag && this.textValue) {
+                // No slotted element exists
+                // If the slot doesn't have a name, then it's the default slot
+                // remove the existing non-slotted content (text nodes and elements without slot attribute)
+                const rootNode = this.el.getRootNode();
+                if (!this.name && rootNode instanceof ShadowRoot) {
+                    const hostComponent = rootNode.host;
+                    Array.from(hostComponent.childNodes).forEach(node => {
+                        if (node.nodeType === Node.TEXT_NODE || (node.nodeType === Node.ELEMENT_NODE && !node.hasAttribute('slot'))) {
+                            node.remove();
+                        }
+                    });
+                }
+                // create one using the specified tag
+                this.createSlottedElement();
+            }
+            else if (this.textValue) {
+                // no tag specified - just replace everything in the host component
+                const rootNode = this.el.getRootNode();
+                if (rootNode instanceof ShadowRoot) {
+                    const hostComponent = rootNode.host;
+                    hostComponent.innerHTML = this.textValue;
+                }
+            }
+        }
+        this.leSlotChange.emit({
+            name: this.name,
+            value: this.textValue,
+            isValid: this.isValidHtml,
+        });
+    };
+    /**
+     * Create a new slotted element when none exists.
+     * The element is appended to the host component's light DOM.
+     */
+    createSlottedElement() {
+        if (!this.tag)
+            return;
+        // Find the host component (le-card, etc.) by traversing up through shadow DOM
+        // le-slot is inside le-card's shadow DOM, so we need to find le-card's host
+        const rootNode = this.el.getRootNode();
+        if (!(rootNode instanceof ShadowRoot))
+            return;
+        const hostComponent = rootNode.host;
+        if (!hostComponent)
+            return;
+        // Create the new element
+        const newElement = document.createElement(this.tag);
+        newElement.innerHTML = this.textValue;
+        // Set the slot attribute if this is a named slot
+        if (this.name) {
+            newElement.setAttribute('slot', this.name);
+        }
+        // Append to the host component's light DOM
+        hostComponent.appendChild(newElement);
+        // Store reference to the new element
+        this.slottedElement = newElement;
+        // console.log(`[le-slot "${this.name}"] Created new <${this.tag}> element`);
+    }
+    /**
+     * Load available components from Custom Elements Manifest
+     */
+    async loadAvailableComponents() {
+        try {
+            const { manifestFile } = index.getLeKitConfig();
+            const manifestFileResolved = index.getAssetPath(`./assets/${manifestFile}`);
+            const response = await fetch(manifestFileResolved);
+            const manifest = await response.json();
+            const components = [];
+            const allowedList = this.allowedComponents?.split(',').map(s => s.trim()) || [];
+            for (const module of manifest.modules) {
+                for (const declaration of module.declarations || []) {
+                    if (declaration.tagName && declaration.customElement) {
+                        // Skip internal components (le-slot, le-component, le-popover)
+                        const isInternal = ['le-slot', 'le-component', 'le-popover'].includes(declaration.tagName);
+                        if (isInternal)
+                            continue;
+                        // If allowedComponents is specified, filter by it
+                        if (allowedList.length > 0 && !allowedList.includes(declaration.tagName)) {
+                            continue;
+                        }
+                        components.push({
+                            tagName: declaration.tagName,
+                            name: this.formatComponentName(declaration.tagName),
+                            description: declaration.description || '',
+                        });
+                    }
+                }
+            }
+            this.availableComponents = components || [];
+        }
+        catch (error) {
+            console.warn('[le-slot] Failed to load component manifest:', error);
+        }
+    }
+    /**
+     * Format a tag name into a display name
+     * e.g., 'le-card' -> 'Card'
+     */
+    formatComponentName(tagName) {
+        return tagName
+            .replace(/^le-/, '')
+            .split('-')
+            .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+            .join(' ');
+    }
+    /**
+     * Add a new component to the slot
+     */
+    addComponent(tagName) {
+        // Find the host component by traversing up through shadow DOM
+        const rootNode = this.el.getRootNode();
+        if (!(rootNode instanceof ShadowRoot))
+            return;
+        const hostComponent = rootNode.host;
+        if (!hostComponent)
+            return;
+        // Create the new component element
+        const newElement = document.createElement(tagName);
+        // Set the slot attribute if this is a named slot
+        if (this.name) {
+            newElement.setAttribute('slot', this.name);
+        }
+        // Append to the host component's light DOM
+        hostComponent.appendChild(newElement);
+        // Emit change event so the page can save
+        this.leSlotChange.emit({
+            name: this.name,
+            value: hostComponent.innerHTML,
+            isValid: true,
+        });
+    }
+    /**
+     * Handle slot change event to re-read content when nodes are assigned
+     */
+    handleSlotChange = () => {
+        this.readSlottedContent();
+    };
+    render() {
+        const displayLabel = this.label || this.name;
+        // Always render the same structure, CSS handles visibility via .admin-mode class
+        return (index.h(index.Host, { key: '938f14c8d8e46d834031cbfab6756a55bc59307d', 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 ? (index.h("div", { class: "le-slot-container" }, index.h("div", { class: utils.classnames('le-slot-header', {
+                'le-slot-header-no-label': !displayLabel,
+                'le-slot-header-text': this.type === 'text',
+                'le-slot-header-error': !this.isValidHtml,
+            }) }, displayLabel && (index.h("span", { class: "le-slot-label" }, displayLabel, this.required && index.h("span", { class: "le-slot-required" }, "*"))), !this.isValidHtml && index.h("span", { class: "le-slot-invalid" }, "\u26A0 Invalid HTML"), this.type === 'slot' && this.adminMode && (index.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) }, index.h("le-button", { type: "button", class: "le-slot-button", slot: "trigger", variant: "clear", size: "small", "aria-label": "Add component", "icon-only": true }, index.h("span", { class: "le-slot-add-btn", slot: "icon-only" }, "+")), index.h("div", { class: "le-slot-picker" }, this.availableComponents.length > 0 ? (index.h("ul", { class: "le-slot-picker-list" }, this.availableComponents.map(component => (index.h("li", { key: component.tagName }, index.h("button", { class: "le-slot-picker-item", onClick: () => {
+                this.addComponent(component.tagName);
+                this.pickerOpen = false;
+            } }, index.h("span", { class: "le-slot-picker-name" }, component.name), component.description && index.h("span", { class: "le-slot-picker-desc" }, component.description))))))) : (index.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
+        index.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 = (index.h("div", { class: "hidden-slot" }, index.h("slot", { ref: el => (this.slotRef = el), onSlotchange: this.handleSlotChange })));
+        switch (this.type) {
+            case 'text':
+                return (index.h("div", { class: { 'le-slot-input': true, 'has-error': !this.isValidHtml } }, index.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 (index.h("div", { class: { 'le-slot-input': true, 'has-error': !this.isValidHtml } }, index.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 (index.h("div", { class: "le-slot-dropzone", style: dropzoneStyle }, index.h("slot", { ref: el => (this.slotRef = el), onSlotchange: this.handleSlotChange })));
+        }
+    }
+};
+LeSlot.style = leSlotDefaultCss;
+
+const leStringInputCss = ":host{display:block;--le-input-bg:var(--le-color-surface, #ffffff);--le-input-color:var(--le-color-text-primary, #333333);--le-input-border:var(--le-border-width, 2px) solid var(--le-color-border-input, #007bff);--le-input-radius:var(--le-radius-sm, 4px);--le-input-padding:2px 6px;--le-input-height:1.5rem;--le-input-label-color:var(--le-color-text-primary, #333333);--le-input-desc-color:var(--le-color-text-secondary, #666666);--le-input-placeholder-color:#999999}.le-input-wrapper{display:flex;flex-direction:column;gap:2px}.le-input-label{display:block;font-size:0.9em;font-weight:500;color:var(--le-input-label-color);margin-bottom:2px}.le-input-container{position:relative;display:flex;align-items:center;background:var(--le-input-bg);border:var(--le-input-border);border-radius:var(--le-input-radius);transition:border-color 0.2s}.le-input-container:focus-within{outline:2px solid var(--le-color-focus);outline-offset:2px}:host([disabled]) .le-input-container{opacity:0.6;background-color:rgba(0,0,0,0.05);cursor:not-allowed}input{flex:1;min-height:var(--le-input-height);padding:var(--le-input-padding);border:none;background:transparent;color:var(--le-input-color);font-family:inherit;font-size:inherit;outline:none;width:100%}input::placeholder{color:var(--le-input-placeholder-color)}.icon-start,.icon-end{display:flex;align-items:center;justify-content:center;padding:0 8px;color:var(--le-input-desc-color)}.le-input-description{font-size:0.85em;color:var(--le-input-desc-color);margin-top:2px}.le-input-description::has(le-slot>slot[name=description]:empty){display:none}";
+
+const LeStringInput = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.leChange = index.createEvent(this, "change");
+        this.leInput = index.createEvent(this, "input");
+    }
+    get el() { return index.getElement(this); }
+    /**
+     * Pass the ref of the input element to the parent component
+     */
+    inputRef;
+    /**
+     * Mode of the popover should be 'default' for internal use
+     */
+    mode;
+    /**
+     * The value of the input
+     */
+    value;
+    /**
+     * The name of the input
+     */
+    name;
+    /**
+     * The type of the input (text, email, password, etc.)
+     */
+    type = 'text';
+    /**
+     * Label for the input
+     */
+    label;
+    /**
+     * Icon for the start icon
+     */
+    iconStart;
+    /**
+     * Icon for the end icon
+     */
+    iconEnd;
+    /**
+     * Placeholder text
+     */
+    placeholder;
+    /**
+     * Hide description slot
+     */
+    hideDescription = false;
+    /**
+     * Whether the input is disabled
+     */
+    disabled = false;
+    /**
+     * Whether the input is read-only
+     */
+    readonly = false;
+    /**
+     * External ID for linking with external systems
+     */
+    externalId;
+    /**
+     * Emitted when the value changes (on blur or Enter)
+     */
+    leChange;
+    /**
+     * Emitted when the input value changes (on keystroke)
+     */
+    leInput;
+    handleInput = (ev) => {
+        const input = ev.target;
+        this.value = input.value;
+        this.leInput.emit({
+            value: this.value,
+            name: this.name,
+            externalId: this.externalId,
+        });
+    };
+    handleChange = (ev) => {
+        const input = ev.target;
+        this.value = input.value;
+        this.leChange.emit({
+            value: this.value,
+            name: this.name,
+            externalId: this.externalId,
+        });
+    };
+    handleClick = (ev) => {
+        ev.stopPropagation();
+    };
+    render() {
+        return (index.h("le-component", { key: 'c51b121a5ff8458f80de07929467d92cff44de9b', component: "le-string-input", hostClass: utils.classnames({ disabled: this.disabled }) }, index.h("div", { key: '450fa313236401fcb762267f426d0556f90ef200', class: "le-input-wrapper" }, this.label && (index.h("label", { key: 'c01ed376e563f472d84c9943a4a542c1ec2cb39c', class: "le-input-label", htmlFor: this.name }, this.label)), index.h("div", { key: 'e41a98671f3bc61e06f66c773536967d60c97df0', class: "le-input-container", part: "container" }, this.iconStart && index.h("span", { key: 'c6eb682444e091378281b7a2e739ef872ca28973', class: "icon-start" }, this.iconStart), index.h("input", { key: 'bc7f9055dcae290e132f4c91887e5f90427209d4', ref: el => {
+                if (this.inputRef) {
+                    this.inputRef(el);
+                }
+            }, id: this.name, type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onChange: this.handleChange, onClick: this.handleClick }), this.iconEnd && index.h("span", { key: '3470d5c95e208e52b1913369d734e1d741164633', class: "icon-end" }, this.iconEnd)), !this.hideDescription && (index.h("div", { key: '97a123be35907f950c7480352cee29c32e486fe4', class: "le-input-description" }, index.h("le-slot", { key: '490c2a425b3b58f050aced5dcffc530f624c0957', name: "description", type: "text", tag: "p", label: "Description" }, index.h("slot", { key: 'a34ff8c6300a36d6c65ca5d9a77352459f1c85cc', name: "description" })))))));
+    }
+};
+LeStringInput.style = leStringInputCss;
+
+exports.le_button = LeButton;
+exports.le_checkbox = LeCheckbox;
+exports.le_collapse = LeCollapse;
+exports.le_component = LeComponent;
+exports.le_current_heading = LeCurrentHeading;
+exports.le_dropdown_base = LeDropdownBase;
+exports.le_header = LeHeader;
+exports.le_popover = LePopover;
+exports.le_popup = LePopup;
+exports.le_scroll_progress = LeScrollProgress;
+exports.le_select = LeSelect;
+exports.le_slot = LeSlot;
+exports.le_string_input = LeStringInput;
+//# sourceMappingURL=le-button.le-checkbox.le-collapse.le-component.le-current-heading.le-dropdown-base.le-header.le-popover.le-popup.le-scroll-progress.le-select.le-slot.le-string-input.entry.cjs.js.map