le-kit 0.5.2 → 0.5.3

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

@@ -10,71 +10,137 @@ const LeBar = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.leBarOverflowChange = index.createEvent(this, "leBarOverflowChange");
+        /**
+         * Overflow behavior when items don't fit on one row.
+         * - `more`: Overflow items appear in a "more" dropdown
+         * - `scroll`: Items scroll horizontally with optional arrows
+         * - `hamburger`: All items go into a hamburger menu if any overflow
+         * - `wrap`: Items wrap to additional rows
+         */
+        this.overflow = 'more';
+        /**
+         * Alignment of items within the bar (maps to justify-content).
+         */
+        this.alignItems = 'start';
+        /**
+         * Show scroll arrows when overflow is "scroll".
+         */
+        this.arrows = false;
+        /**
+         * Disable the internal overflow popover.
+         * When true, the bar still detects overflow and hides items,
+         * but doesn't render its own popover. Use this when providing
+         * custom overflow handling via the leBarOverflowChange event.
+         */
+        this.disablePopover = false;
+        /**
+         * Minimum number of visible items required when using "more" overflow mode.
+         * If fewer items would be visible, the bar falls back to hamburger mode.
+         * Only applies when overflow is "more".
+         */
+        this.minVisibleItems = 0;
+        /**
+         * Show an "all items" menu button.
+         * - `false`: Don't show
+         * - `true` or `'end'`: Show at end
+         * - `'start'`: Show at start
+         */
+        this.showAllMenu = false;
+        /** Whether the hamburger/more popover is open */
+        this.popoverOpen = false;
+        /** Whether hamburger mode is active (for hamburger overflow) */
+        this.hamburgerActive = false;
+        /** IDs of items that are overflowing */
+        this.overflowingIds = new Set();
+        /** Whether we can scroll left */
+        this.canScrollStart = false;
+        /** Whether we can scroll right */
+        this.canScrollEnd = false;
+        /** Whether the all-menu popover is open */
+        this.allMenuOpen = false;
+        /** Current height of the items container (for overflow handling) */
+        this.containerHeight = null;
+        this.instanceId = utils.generateId('le-bar');
+        // Map to track item elements and their IDs
+        this.itemMap = new Map();
+        // Prevent multiple recalculations in the same frame
+        this.pendingRecalc = null;
+        this.handleScroll = () => {
+            this.updateScrollState();
+        };
+        this.scrollToStart = () => {
+            if (!this.itemsContainerEl)
+                return;
+            const items = this.getSlottedItems();
+            const container = this.itemsContainerEl;
+            // Find the scroll position of the previous item
+            const currentScroll = container.scrollLeft;
+            let targetScroll = 0;
+            for (let i = items.length - 1; i >= 0; i--) {
+                const item = items[i];
+                // Calculate item's left edge relative to container's scroll position
+                const itemLeft = item.offsetLeft - container.offsetLeft;
+                // If this item starts before current scroll position, scroll to it
+                if (itemLeft < currentScroll - 1) {
+                    targetScroll = itemLeft;
+                    break;
+                }
+            }
+            container.scrollTo({ left: targetScroll, behavior: 'smooth' });
+            // Update scroll state after animation
+            setTimeout(() => this.updateScrollState(), 300);
+        };
+        this.scrollToEnd = () => {
+            if (!this.itemsContainerEl)
+                return;
+            const container = this.itemsContainerEl;
+            const items = this.getSlottedItems();
+            if (items.length === 0)
+                return;
+            const containerWidth = container.clientWidth;
+            const currentScroll = container.scrollLeft;
+            let targetScroll = container.scrollWidth - containerWidth;
+            for (const item of items) {
+                // Calculate item's right edge relative to container
+                const itemLeft = item.offsetLeft - container.offsetLeft;
+                // If this is the next item to scroll to from left to right then scroll to it
+                if (itemLeft > currentScroll + 1) {
+                    targetScroll = itemLeft;
+                    break;
+                }
+            }
+            container.scrollTo({ left: Math.max(0, targetScroll), behavior: 'smooth' });
+            // Update scroll state after animation
+            setTimeout(() => this.updateScrollState(), 300);
+        };
+        this.togglePopover = () => {
+            this.popoverOpen = !this.popoverOpen;
+        };
+        this.closePopover = () => {
+            this.popoverOpen = false;
+        };
+        this.toggleAllMenu = () => {
+            this.allMenuOpen = !this.allMenuOpen;
+        };
+        this.closeAllMenu = () => {
+            this.allMenuOpen = false;
+        };
+        this.handleItemClick = (_e, id) => {
+            // Close popover when an item inside is clicked
+            const originalItem = this.itemMap.get(id);
+            if (originalItem) {
+                // Clone the click to the original item
+                const cloneEvent = new MouseEvent('click', {
+                    bubbles: true,
+                    cancelable: true,
+                    view: window,
+                });
+                originalItem.dispatchEvent(cloneEvent);
+            }
+            this.closePopover();
+            this.closeAllMenu();
+        };
     }
-    get el() { return index.getElement(this); }
-    /**
-     * Overflow behavior when items don't fit on one row.
-     * - `more`: Overflow items appear in a "more" dropdown
-     * - `scroll`: Items scroll horizontally with optional arrows
-     * - `hamburger`: All items go into a hamburger menu if any overflow
-     * - `wrap`: Items wrap to additional rows
-     */
-    overflow = 'more';
-    /**
-     * Alignment of items within the bar (maps to justify-content).
-     */
-    alignItems = 'start';
-    /**
-     * Show scroll arrows when overflow is "scroll".
-     */
-    arrows = false;
-    /**
-     * Disable the internal overflow popover.
-     * When true, the bar still detects overflow and hides items,
-     * but doesn't render its own popover. Use this when providing
-     * custom overflow handling via the leBarOverflowChange event.
-     */
-    disablePopover = false;
-    /**
-     * Minimum number of visible items required when using "more" overflow mode.
-     * If fewer items would be visible, the bar falls back to hamburger mode.
-     * Only applies when overflow is "more".
-     */
-    minVisibleItems = 0;
-    /**
-     * Show an "all items" menu button.
-     * - `false`: Don't show
-     * - `true` or `'end'`: Show at end
-     * - `'start'`: Show at start
-     */
-    showAllMenu = false;
-    /**
-     * Emitted when overflow state changes.
-     */
-    leBarOverflowChange;
-    /** Whether the hamburger/more popover is open */
-    popoverOpen = false;
-    /** Whether hamburger mode is active (for hamburger overflow) */
-    hamburgerActive = false;
-    /** IDs of items that are overflowing */
-    overflowingIds = new Set();
-    /** Whether we can scroll left */
-    canScrollStart = false;
-    /** Whether we can scroll right */
-    canScrollEnd = false;
-    /** Whether the all-menu popover is open */
-    allMenuOpen = false;
-    /** Current height of the items container (for overflow handling) */
-    containerHeight = null;
-    itemsContainerEl;
-    moreButtonEl;
-    resizeObserver;
-    mutationObserver;
-    instanceId = utils.generateId('le-bar');
-    // Map to track item elements and their IDs
-    itemMap = new Map();
-    // Prevent multiple recalculations in the same frame
-    pendingRecalc = null;
     handleOverflowChange() {
         this.resetOverflowState();
         this.scheduleOverflowRecalc();
@@ -281,81 +347,6 @@ const LeBar = class {
         this.canScrollStart = el.scrollLeft > 0;
         this.canScrollEnd = el.scrollLeft < el.scrollWidth - el.clientWidth - 1;
     }
-    handleScroll = () => {
-        this.updateScrollState();
-    };
-    scrollToStart = () => {
-        if (!this.itemsContainerEl)
-            return;
-        const items = this.getSlottedItems();
-        const container = this.itemsContainerEl;
-        // Find the scroll position of the previous item
-        const currentScroll = container.scrollLeft;
-        let targetScroll = 0;
-        for (let i = items.length - 1; i >= 0; i--) {
-            const item = items[i];
-            // Calculate item's left edge relative to container's scroll position
-            const itemLeft = item.offsetLeft - container.offsetLeft;
-            // If this item starts before current scroll position, scroll to it
-            if (itemLeft < currentScroll - 1) {
-                targetScroll = itemLeft;
-                break;
-            }
-        }
-        container.scrollTo({ left: targetScroll, behavior: 'smooth' });
-        // Update scroll state after animation
-        setTimeout(() => this.updateScrollState(), 300);
-    };
-    scrollToEnd = () => {
-        if (!this.itemsContainerEl)
-            return;
-        const container = this.itemsContainerEl;
-        const items = this.getSlottedItems();
-        if (items.length === 0)
-            return;
-        const containerWidth = container.clientWidth;
-        const currentScroll = container.scrollLeft;
-        let targetScroll = container.scrollWidth - containerWidth;
-        for (const item of items) {
-            // Calculate item's right edge relative to container
-            const itemLeft = item.offsetLeft - container.offsetLeft;
-            // If this is the next item to scroll to from left to right then scroll to it
-            if (itemLeft > currentScroll + 1) {
-                targetScroll = itemLeft;
-                break;
-            }
-        }
-        container.scrollTo({ left: Math.max(0, targetScroll), behavior: 'smooth' });
-        // Update scroll state after animation
-        setTimeout(() => this.updateScrollState(), 300);
-    };
-    togglePopover = () => {
-        this.popoverOpen = !this.popoverOpen;
-    };
-    closePopover = () => {
-        this.popoverOpen = false;
-    };
-    toggleAllMenu = () => {
-        this.allMenuOpen = !this.allMenuOpen;
-    };
-    closeAllMenu = () => {
-        this.allMenuOpen = false;
-    };
-    handleItemClick = (_e, id) => {
-        // Close popover when an item inside is clicked
-        const originalItem = this.itemMap.get(id);
-        if (originalItem) {
-            // Clone the click to the original item
-            const cloneEvent = new MouseEvent('click', {
-                bubbles: true,
-                cancelable: true,
-                view: window,
-            });
-            originalItem.dispatchEvent(cloneEvent);
-        }
-        this.closePopover();
-        this.closeAllMenu();
-    };
     renderMoreButton() {
         const hasSlottedMore = this.el.querySelector('[slot="more"]');
         return (index.h("button", { class: "bar-more-button", part: "more-button", ref: el => (this.moreButtonEl = el), onClick: this.togglePopover, "aria-expanded": String(this.popoverOpen), "aria-haspopup": "true" }, hasSlottedMore ? index.h("slot", { name: "more" }) : index.h("le-icon", { name: "ellipsis-horizontal" })));
@@ -451,6 +442,7 @@ const LeBar = class {
                 this.observeContainer(el);
             }, onScroll: this.overflow === 'scroll' ? this.handleScroll : undefined }, index.h("slot", { key: '338698e038b9df4c7b163017ceb0675b834160e4' })), showOverflowButton && (index.h("div", { key: 'd619fcda1b0c28247af60899f73cc076b0517787', class: "bar-controls bar-controls-end" }, this.renderOverflowPopover())), showAllMenuAtEnd && (index.h("div", { key: 'fd9fef90194aabb8d48e77c8f7615daa5d7297ac', class: "bar-controls bar-controls-end" }, this.renderAllMenuPopover())), this.overflow === 'scroll' && this.arrows && (index.h("div", { key: 'bcffb914e2788767c3765351a3eeae771f3e115f', class: "bar-controls bar-controls-end" }, this.renderScrollArrows()?.[1])))));
     }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "overflow": ["handleOverflowChange"]
     }; }
@@ -466,85 +458,54 @@ const LeButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.leClick = index.createEvent(this, "click");
+        /**
+         * Button variant style
+         * @allowedValues solid | outlined | clear
+         */
+        this.variant = 'solid';
+        /**
+         * Button color theme (uses theme semantic colors)
+         * @allowedValues primary | secondary | success | warning | danger | info
+         */
+        this.color = 'primary';
+        /**
+         * Button size
+         * @allowedValues small | medium | large
+         */
+        this.size = 'medium';
+        /**
+         * Whether the button is in a selected/active state
+         */
+        this.selected = false;
+        /**
+         * Whether the button takes full width of its container
+         */
+        this.fullWidth = false;
+        /**
+         * Whether the button is disabled
+         */
+        this.disabled = false;
+        /**
+         * The button type attribute
+         * @allowedValues button | submit | reset
+         */
+        this.type = 'button';
+        /**
+         * Alignment of the button label without the end icon
+         * @allowedValues start | center | space-between | end
+         */
+        this.align = 'center';
+        this.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);
+        };
     }
-    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,
@@ -556,8 +517,9 @@ const LeButton = class {
         const attrs = this.href
             ? { href: this.href, target: this.target, role: 'button' }
             : { type: this.type, disabled: this.disabled };
-        return (index.h(index.Host, { key: 'a42aef03b5faf34f47b50dff799316a6815babd5', class: classes }, index.h("le-component", { key: '86ef8acf04d43e829b83d3e225f210acefc99515', component: "le-button" }, index.h(TagType, { key: '44145a5244577aab167c103501b788f0088799e3', 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))))))));
+        return (index.h(index.Host, { key: '4bf9fb21e9bf0ca5a19193d977ad9fab90b519a0', class: classes }, index.h("le-component", { key: '8e0edefabbe9196eba935a1e8cce788c686c170c', component: "le-button" }, index.h(TagType, { key: '30f88ea834a9029c0f8ec24819107ba318dc6397', 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))))))));
     }
+    get el() { return index.getElement(this); }
 };
 LeButton.style = leButtonCss();
 
@@ -567,51 +529,35 @@ const LeCheckbox = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.leChange = index.createEvent(this, "change");
+        /**
+         * Whether the checkbox is checked
+         */
+        this.checked = false;
+        /**
+         * Whether the checkbox is disabled
+         */
+        this.disabled = false;
+        this.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
+            });
+        };
     }
-    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: 'cb04cc6a990ee321dd7e8fca2f0bf56c76a865fa', component: "le-checkbox", hostClass: utils.classnames({ 'disabled': this.disabled }) }, index.h("div", { key: '1b8737eb0d572ba5fdf8c2cfc5ced4af5ef30997', class: "le-checkbox-wrapper" }, index.h("label", { key: '1d26d68565ade32489f2fade8120c7b8ad75b251', class: "le-checkbox-label" }, index.h("span", { key: '7e6b5e610c9f16c36b93c57284891366e6b3b756', class: "le-checkbox-input" }, index.h("input", { key: 'a12a374aa69526d802f36f00b0ae4bcd4ed27bc3', type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.handleChange })), index.h("span", { key: 'e4ea1f85102c99751f9853b8e23fbd40ebd24780', class: "le-checkbox-text" }, index.h("le-slot", { key: 'cdda2111e4dfa6d7270280bac305255980842d48', name: "", type: "text", tag: "span" }, index.h("slot", { key: '32f57155d7a56f48e5780e37ea1ccac308db6848' })))), index.h("div", { key: '37d54d8c87b90987653f66a319958849893e7d91', class: "le-checkbox-description" }, index.h("le-slot", { key: 'fceedc24ef6a3561120456e9b387801a40c5919c', name: "description", type: "text", tag: "div", label: "Description" }, index.h("slot", { key: 'f1f87b7192565831a2f20428e8e2c0a974166dfd', name: "description" }))))));
+        return (index.h("le-component", { key: '8b4541e96816b6e69ee790779971981b9d112484', component: "le-checkbox", hostClass: utils.classnames({ 'disabled': this.disabled }) }, index.h("div", { key: 'c5e3a8692e59fa59a46bc90302e80f20dc700f04', class: "le-checkbox-wrapper" }, index.h("label", { key: 'b72abfbd39434a2c8be951a933e57ce70e9c922c', class: "le-checkbox-label" }, index.h("span", { key: '624ebbd37e6ea6a0800d702cbcea5ab8fe78b59e', class: "le-checkbox-input" }, index.h("input", { key: '182dc9549cc3494fc61e7779242ff14c304c3d97', type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.handleChange })), index.h("span", { key: 'f14dc486329d8375b47ca75bedd2ac31f04273a7', class: "le-checkbox-text" }, index.h("le-slot", { key: '3be69ca148e121e8970bd3950fcbdee12613c775', name: "", type: "text", tag: "span" }, index.h("slot", { key: '2a258f7ce0331b9d08df5ac23a5ec492493974ca' })))), index.h("div", { key: '2deeab5d1d7c6b4046b5b4f54cd92061fc5f7383', class: "le-checkbox-description" }, index.h("le-slot", { key: '3ec3ca85d9f472d209084c4d95d46d2c114133e8', name: "description", type: "text", tag: "div", label: "Description" }, index.h("slot", { key: 'e1043ec4613df078446e7a6a5550646bbbe7d8be', name: "description" }))))));
     }
+    get el() { return index.getElement(this); }
 };
 LeCheckbox.style = leCheckboxCss();
 
@@ -621,19 +567,19 @@ const leCollapseCss = () => `:host{--le-collapse-duration:var(--le-transition-no
 const LeCollapse = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Since Stencil boolean props default to `false` when the attribute is missing.
+         * instead of `open` defaulting to `true`, using a `closed` prop.
+         */
+        this.closed = false;
+        /** Whether the content should scroll down from the top when open. */
+        this.scrollDown = false;
+        /** Stop fading the content when collapsing/expanding. */
+        this.noFading = false;
+        /** If true, collapse/expand based on the nearest header shrink event. */
+        this.collapseOnHeaderShrink = false;
+        this.headerShrunk = false;
     }
-    get el() { return index.getElement(this); }
-    /**
-     * Since Stencil boolean props default to `false` when the attribute is missing.
-     * instead of `open` defaulting to `true`, using a `closed` prop.
-     */
-    closed = false;
-    /** 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.
@@ -642,7 +588,6 @@ const LeCollapse = class {
         const e = ev;
         this.headerShrunk = !!e.detail?.shrunk;
     }
-    headerShrunk = false;
     componentDidLoad() {
         this.applyOpenState();
     }
@@ -664,8 +609,9 @@ const LeCollapse = class {
         this.el.toggleAttribute('data-open', nextOpen);
     }
     render() {
-        return (index.h(index.Host, { key: 'e0882ec40ed132dbd6eeaa43da4aff03b6e45352', "data-open": this.shouldBeOpen() ? 'true' : 'false' }, index.h("le-component", { key: '55c98e5382ddd6b5ef8a8f506f9a2901fc0b48ce', component: "le-collapse" }, index.h("div", { key: '0bcfa5aada8a7a6f9c86011e6a3dfa5bbb5e08c4', class: { 'region': true, 'scroll-down': this.scrollDown }, part: "region" }, index.h("slot", { key: '7b762e372802512a287ae98d4aeecdb3160bb54e' })))));
+        return (index.h(index.Host, { key: '81a03bdd47d7c6e7d4491f4ee6be2e2f7af66334', "data-open": this.shouldBeOpen() ? 'true' : 'false' }, index.h("le-component", { key: '14cbe57c5cee1a3a7565175528d32b5d1be47919', component: "le-collapse" }, index.h("div", { key: 'c669a8d9f20776dba9d5ba162aaa6a58a31ad5b5', class: { 'region': true, 'scroll-down': this.scrollDown }, part: "region" }, index.h("slot", { key: 'd56fd4c71032da7935800874c13a2ba5b7427c83' })))));
     }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "open": ["onOpenChange"],
         "headerShrunk": ["onDrivenStateChange"]
@@ -678,45 +624,19 @@ const leComponentCss = () => `:host{display:contents}:host(.admin-mode){display:
 const LeComponent = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Internal state to track admin mode
+         */
+        this.adminMode = false;
+        /**
+         * Component metadata loaded from Custom Elements Manifest
+         */
+        this.componentMeta = null;
+        /**
+         * Current property values of the host component
+         */
+        this.propertyValues = {};
     }
-    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
@@ -913,6 +833,7 @@ const LeComponent = class {
         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"]; }
+    get el() { return index.getElement(this); }
 };
 LeComponent.style = leComponentCss();
 
@@ -921,11 +842,10 @@ const leCurrentHeadingCss = () => `:host{display:inline-flex;min-width:0}.title{
 const LeCurrentHeading = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /** CSS selector for page title/headings to watch (e.g. `.page-title`, `main h2`). */
+        this.selector = '';
+        this.activeText = null;
     }
-    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();
     }
@@ -970,8 +890,9 @@ const LeCurrentHeading = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'c8d94a695a402039000210914b6780264a034a89' }, this.activeText ? (index.h("span", { class: "title", part: "title" }, this.activeText)) : (index.h("slot", null))));
+        return (index.h(index.Host, { key: '72903f20413e002efaef27210a1dedfdc4065404' }, this.activeText ? (index.h("span", { class: "title", part: "title" }, this.activeText)) : (index.h("slot", null))));
     }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "selector": ["onSelectorChange"]
     }; }
@@ -986,79 +907,143 @@ const LeDropdownBase = class {
         this.leOptionSelect = index.createEvent(this, "leOptionSelect");
         this.leDropdownOpen = index.createEvent(this, "leDropdownOpen");
         this.leDropdownClose = index.createEvent(this, "leDropdownClose");
+        /**
+         * The options to display in the dropdown.
+         */
+        this.options = [];
+        /**
+         * Whether multiple selection is allowed.
+         */
+        this.multiple = false;
+        /**
+         * Whether the dropdown is open.
+         */
+        this.open = false;
+        /**
+         * Whether the dropdown is disabled.
+         */
+        this.disabled = false;
+        /**
+         * Current filter query string.
+         */
+        this.filterQuery = '';
+        /**
+         * Placeholder text when no options match filter.
+         */
+        this.emptyText = 'No options';
+        /**
+         * Whether to show checkboxes for multiselect mode.
+         */
+        this.showCheckboxes = true;
+        /**
+         * Maximum height of the dropdown list.
+         */
+        this.maxHeight = '300px';
+        /**
+         * Sets the dropdown to full width of the trigger.
+         */
+        this.fullWidth = false;
+        /**
+         * Whether to close the dropdown when clicking outside.
+         * (used to support combobox with input focus)
+         */
+        this.closeOnClickOutside = true;
+        this.focusedIndex = -1;
+        this.filteredOptions = [];
+        this.triggerWidth = 0;
+        this.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;
+            }
+        };
+        this.handlePopoverOpen = () => {
+            this.open = true;
+            this.focusedIndex = this.getInitialFocusIndex();
+            this.leDropdownOpen.emit();
+            // Add keyboard listener
+            document.addEventListener('keydown', this.handleKeyDown);
+        };
+        this.handlePopoverClose = () => {
+            this.open = false;
+            this.focusedIndex = -1;
+            this.leDropdownClose.emit();
+            // Remove keyboard listener
+            document.removeEventListener('keydown', this.handleKeyDown);
+        };
     }
-    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();
     }
@@ -1110,84 +1095,6 @@ const LeDropdownBase = class {
             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;
@@ -1196,20 +1103,6 @@ const LeDropdownBase = class {
             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();
@@ -1310,8 +1203,9 @@ const LeDropdownBase = class {
     }
     render() {
         const dropdownWidth = this.width || (this.triggerWidth ? `${this.triggerWidth}px` : undefined);
-        return (index.h(index.Host, { key: '90bca5763b9110f8e5cad70870110cab1efeeec6' }, index.h("le-popover", { key: 'ebded64a4f2b23c8b1a954dd995c4d6171ef9c88', 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: '57e540660ee269de594209186d6fbe066b9c8fc1', name: "trigger", slot: "trigger" }), index.h("slot", { key: 'e58a76a0097f938873f5462c844ee9f1a5eece72', name: "header" }), index.h("div", { key: 'c4fa35069438df82894e45e87f46aef67a189c43', class: "dropdown-list", role: "listbox", "aria-multiselectable": this.multiple ? 'true' : undefined, ref: el => (this.listEl = el), style: { maxHeight: this.maxHeight } }, this.renderOptions()))));
+        return (index.h(index.Host, { key: '71c3537d6234aebb8c18fb6c07e5a751568a4b87' }, index.h("le-popover", { key: 'e02fcd7454cae5a9c197a509d18cd7b91e49fc9e', 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: 'f1a9e3145119f1cfc1b8a535b98b0858758c6265', name: "trigger", slot: "trigger" }), index.h("slot", { key: '8dd6126a610e167fb2b3c2593677f70c387bd275', name: "header" }), index.h("div", { key: '708b3916132c36f736f8a88e3408d482a50610fb', class: "dropdown-list", role: "listbox", "aria-multiselectable": this.multiple ? 'true' : undefined, ref: el => (this.listEl = el), style: { maxHeight: this.maxHeight } }, this.renderOptions()))));
     }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "options": ["handleOptionsChange"],
         "filterQuery": ["handleOptionsChange"]
@@ -1329,50 +1223,25 @@ const LeHeader = class {
         this.leHeaderState = index.createEvent(this, "leHeaderState");
         this.leHeaderShrinkChange = index.createEvent(this, "leHeaderShrinkChange");
         this.leHeaderVisibilityChange = index.createEvent(this, "leHeaderVisibilityChange");
+        /** Force static positioning (default). Ignored if `sticky` or `fixed` are true. */
+        this.isStatic = false;
+        /** Sticky positioning (in-flow). Ignored if `fixed` is true. */
+        this.sticky = false;
+        /** Fixed positioning (out-of-flow). Takes precedence over `sticky`/`static`. */
+        this.fixed = false;
+        /**
+         * If true, expand the header when hovered
+         */
+        this.expandOnHover = false;
+        this.revealed = true;
+        this.shrunk = false;
+        this.placeholderHeight = null;
+        this.hoverActive = false;
+        this.rafId = null;
+        this.measureRafId = null;
+        this.lastY = 0;
+        this.lastEmittedDirection = 'down';
     }
-    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;
@@ -1554,7 +1423,7 @@ const LeHeader = class {
             'is-hidden': !this.revealed,
             'is-shrunk': this.shrunk,
         });
-        return (index.h(index.Host, { key: 'd1a4ae64dff81139b1c35681698539fdf072ae66', class: hostClass, onMouseEnter: () => {
+        return (index.h(index.Host, { key: 'ade87accbc122a0eb84422598646da357570d7d0', class: hostClass, onMouseEnter: () => {
                 if (!this.expandOnHover)
                     return;
                 this.hoverActive = true;
@@ -1564,8 +1433,9 @@ const LeHeader = class {
                     return;
                 this.hoverActive = false;
                 this.scheduleUpdate(true);
-            } }, index.h("le-component", { key: '305bc8b4aefaf2ef1dd7287422167cfd68d3e8c2', component: "le-header" }, index.h("header", { key: '1cf3b2ab01140e14870c1282e49e6eb3dbae5bf8', class: "header", part: "header", role: "banner", ref: el => (this.headerEl = el) }, index.h("div", { key: 'b238e3762dd31228f3ab3627fbca2ff1a9c630fd', class: "inner", part: "inner" }, index.h("div", { key: 'f186fbecc9c9b6f6f08f45c272c292af9333450e', class: "row", part: "row" }, index.h("div", { key: 'e496055801a36f4cf7a045513df2bc917a573786', class: "start", part: "start" }, index.h("le-slot", { key: '697b90a8291836452c17d2c9d3759c23b7238e93', 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: 'e7e2b7ad283ce089def47d1f11f78a8a1603face', name: "start" }))), index.h("div", { key: '145aaadb93972b9018f9303baee2d5b3c42db319', class: "title", part: "title" }, index.h("le-slot", { key: 'c488ef0d01da476a6351ae4b7dfb397950f9c3ce', name: "title", label: "Title", description: "Header title", type: "text", tag: "span" }, index.h("span", { key: '78c21f46cbc81dc720e2f803cb3edc81ba5f76cf', class: "title-slot", part: "title" }, index.h("slot", { key: 'a47d5c8d4d0ae42b1cb4d7fab98022cbb380a27e', name: "title" })))), index.h("div", { key: '5fb7c5febcfb9b837f313caa65ea9b5e08b6f9cb', class: "end", part: "end" }, index.h("le-slot", { key: 'cc2ed75ea779a29e5c616daafec3ef90bbec3cfc', name: "end", label: "End", description: "Actions", "allowed-components": "le-button,le-text,le-tag,le-box,le-stack" }, index.h("slot", { key: '135e8c2c0d7a7d9bef174f380d1f31d377cb043f', name: "end" })))), index.h("div", { key: 'b0d9e5fba045b7cfd5640e7ba700cb44d673f982', class: "secondary", part: "secondary" }, index.h("le-slot", { key: '75ed60e3ddef918db1534f8818cd0f337c71e8db', 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: '1266dc5bb54bf22055acbfc23befb398c1ee5a31' }))))))));
+            } }, index.h("le-component", { key: 'dfe9a341d0f8ec702775ff68f2f7afb42bc878dc', component: "le-header" }, index.h("header", { key: '3239f73706082a6dfc5f7637f5ee8c793debd28f', class: "header", part: "header", role: "banner", ref: el => (this.headerEl = el) }, index.h("div", { key: '7e4b99e4b1a8bde81c340086d947598ff7bfd9a6', class: "inner", part: "inner" }, index.h("div", { key: 'b8fb2a8d42a07b35482de7553cd2f3bb608169d2', class: "row", part: "row" }, index.h("div", { key: '89cd5b7707ccb0626c0ecdf1c07494b184fdda1b', class: "start", part: "start" }, index.h("le-slot", { key: 'ee442e5f097bd3dcbc5b8376eb5eed024fe474b4', 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: 'fbf43302c87d9e15cb6e848c1f2e7a30d37ee8f0', name: "start" }))), index.h("div", { key: '295165dbf2b29744d0687e426cd91665a320944f', class: "title", part: "title" }, index.h("le-slot", { key: '96aa340f844a15042a17c98610fd4da7e771f61a', name: "title", label: "Title", description: "Header title", type: "text", tag: "span" }, index.h("span", { key: 'f12cee8413e02e18d3a30a203f61165c4efce673', class: "title-slot", part: "title" }, index.h("slot", { key: 'dddb32fcf70ec8f16017626056668f325c701b99', name: "title" })))), index.h("div", { key: 'bc1c9d0deb4120d335de476211e41d86ea408621', class: "end", part: "end" }, index.h("le-slot", { key: '804482ee7e47f93147899cab94eedbdedc1ba63f', name: "end", label: "End", description: "Actions", "allowed-components": "le-button,le-text,le-tag,le-box,le-stack" }, index.h("slot", { key: '11bc31fd9875f1d38393606833328c31ac651ece', name: "end" })))), index.h("div", { key: '8351339444b373d88d9ac0cc4487b67a8c5267cd', class: "secondary", part: "secondary" }, index.h("le-slot", { key: 'ee99b61af146d91bfb0a84b1fac64ab8e077b85e', 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: '77fabff83384d721715bd0ba6efe129dad285875' }))))))));
     }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "revealOnScroll": ["onBehaviorPropsChange"],
         "shrinkOffset": ["onBehaviorPropsChange"],
@@ -1614,19 +1484,18 @@ async function fetchIcon({ name }) {
 const LeIcon = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Name of the icon to display. Corresponds to a JSON file in the assets folder.
+         * For example, "search" will load the "search.json" file.
+         */
+        this.name = null;
+        /**
+         * Size of the icon in pixels. Default is 16.
+         */
+        this.size = 16;
+        this.iconData = null;
+        this.visible = false;
     }
-    get el() { return index.getElement(this); }
-    /**
-     * Name of the icon to display. Corresponds to a JSON file in the assets folder.
-     * For example, "search" will load the "search.json" file.
-     */
-    name = null;
-    /**
-     * Size of the icon in pixels. Default is 16.
-     */
-    size = 16;
-    iconData = null;
-    visible = false;
     async loadIconData() {
         const { name, visible } = this;
         if (!name || !visible) {
@@ -1634,7 +1503,6 @@ const LeIcon = class {
         }
         this.iconData = await fetchIcon({ name });
     }
-    intersectionObserver;
     connectedCallback() {
         this.waitUntilVisible(() => {
             this.visible = true;
@@ -1685,9 +1553,10 @@ const LeIcon = class {
         return svgElements;
     }
     render() {
-        return (index.h("svg", { key: '679c2641c722c5321ffc90a372d3f5fa5d748946', xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", height: this.size || 16, width: this.size || 16, viewBox: this.iconData?.viewBox || `0 0 ${this.size || 16} ${this.size || 16}` }, this.renderSVGContent(this.iconData?.children)));
+        return (index.h("svg", { key: '15ae743268ab99a174f669436778c2305f4d65df', xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", height: this.size || 16, width: this.size || 16, viewBox: this.iconData?.viewBox || `0 0 ${this.size || 16} ${this.size || 16}` }, this.renderSVGContent(this.iconData?.children)));
     }
     static get assetsDirs() { return ["assets/icons"]; }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "name": ["loadIconData"]
     }; }
@@ -1701,79 +1570,123 @@ const LeNavigation = class {
         index.registerInstance(this, hostRef);
         this.leNavItemSelect = index.createEvent(this, "leNavItemSelect");
         this.leNavItemToggle = index.createEvent(this, "leNavItemToggle");
-    }
-    get el() { return index.getElement(this); }
-    /**
-     * Navigation items.
-     * Can be passed as an array or JSON string (same pattern as le-select).
-     */
-    items = [];
-    /**
-     * Layout orientation.
-     */
-    orientation = 'horizontal';
-    /**
-     * Horizontal wrapping behavior.
-     * If false, overflow behavior depends on `overflowMode`.
-     */
-    wrap = false;
-    /**
-     * Overflow behavior for horizontal, non-wrapping menus.
-     * - more: moves overflow items into a "More" popover
-     * - hamburger: turns the whole nav into a hamburger popover
-     */
-    overflowMode = 'more';
-    /**
-     * Minimum number of visible top-level items required to use the "More" overflow.
-     * If fewer would be visible, the navigation falls back to hamburger.
-     */
-    minVisibleItemsForMore = 2;
-    /**
-     * Alignment of the menu items within the navigation bar.
-     */
-    align = 'start';
-    /**
-     * Active url for automatic selection.
-     */
-    activeUrl = '';
-    /**
-     * Enables a search input for the vertical navigation.
-     */
-    searchable = false;
-    /**
-     * Placeholder text for the search input.
-     */
-    searchPlaceholder = 'Search...';
-    /**
-     * Text shown when no items match the filter.
-     */
-    emptyText = 'No results found';
-    /**
-     * Whether submenu popovers should include a filter input.
-     */
-    submenuSearchable = false;
-    /**
-     * Fired when a navigation item is activated.
-     *
-     * This event is cancelable. Call `event.preventDefault()` to prevent
-     * default browser navigation and implement custom routing.
-     */
-    leNavItemSelect;
-    /**
-     * Fired when a tree branch is toggled.
-     */
-    leNavItemToggle;
-    searchQuery = '';
-    openState = {};
-    /** IDs of items currently in overflow (from le-bar) */
-    overflowIds = [];
-    /** Whether hamburger mode is active (from le-bar) */
-    hamburgerActive = false;
-    submenuQueries = {};
-    /** Whether the overflow popover is open */
-    overflowPopoverOpen = false;
-    popoverRefs = new Map();
-    instanceId = utils.generateId('le-nav');
+        /**
+         * Navigation items.
+         * Can be passed as an array or JSON string (same pattern as le-select).
+         */
+        this.items = [];
+        /**
+         * Layout orientation.
+         */
+        this.orientation = 'horizontal';
+        /**
+         * Horizontal wrapping behavior.
+         * If false, overflow behavior depends on `overflowMode`.
+         */
+        this.wrap = false;
+        /**
+         * Overflow behavior for horizontal, non-wrapping menus.
+         * - more: moves overflow items into a "More" popover
+         * - hamburger: turns the whole nav into a hamburger popover
+         */
+        this.overflowMode = 'more';
+        /**
+         * Minimum number of visible top-level items required to use the "More" overflow.
+         * If fewer would be visible, the navigation falls back to hamburger.
+         */
+        this.minVisibleItemsForMore = 2;
+        /**
+         * Alignment of the menu items within the navigation bar.
+         */
+        this.align = 'start';
+        /**
+         * Active url for automatic selection.
+         */
+        this.activeUrl = '';
+        /**
+         * Enables a search input for the vertical navigation.
+         */
+        this.searchable = false;
+        /**
+         * Placeholder text for the search input.
+         */
+        this.searchPlaceholder = 'Search...';
+        /**
+         * Text shown when no items match the filter.
+         */
+        this.emptyText = 'No results found';
+        /**
+         * Whether submenu popovers should include a filter input.
+         */
+        this.submenuSearchable = false;
+        this.searchQuery = '';
+        this.openState = {};
+        /** IDs of items currently in overflow (from le-bar) */
+        this.overflowIds = [];
+        /** Whether hamburger mode is active (from le-bar) */
+        this.hamburgerActive = false;
+        this.submenuQueries = {};
+        /** Whether the overflow popover is open */
+        this.overflowPopoverOpen = false;
+        this.popoverRefs = new Map();
+        this.instanceId = utils.generateId('le-nav');
+        this.handleItemSelect = (e, item, id) => {
+            if (item.disabled) {
+                e.preventDefault();
+                e.stopPropagation();
+                return;
+            }
+            const emitted = this.leNavItemSelect.emit({
+                item,
+                id,
+                href: item.href,
+                originalEvent: e,
+            });
+            if (emitted.defaultPrevented) {
+                e.preventDefault();
+            }
+        };
+        this.handleToggle = (e, item, id) => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (item.disabled)
+                return;
+            const next = !this.isOpen(item, id);
+            this.setOpen(id, next);
+            this.leNavItemToggle.emit({
+                item,
+                id,
+                open: next,
+                originalEvent: e,
+            });
+        };
+        this.handleSearchInput = (e) => {
+            const target = e.target;
+            this.searchQuery = target.value;
+        };
+        this.handleSubmenuSearchInput = (submenuId, e) => {
+            const target = e.target;
+            const value = target.value;
+            if (this.submenuQueries[submenuId] === value)
+                return;
+            this.submenuQueries = {
+                ...this.submenuQueries,
+                [submenuId]: value,
+            };
+            // Position may change as items filter.
+            requestAnimationFrame(() => this.popoverRefs.get(submenuId)?.updatePosition());
+        };
+        this.handleBarOverflowChange = (e) => {
+            this.overflowIds = e.detail.overflowingIds || [];
+            this.hamburgerActive = e.detail.hamburgerActive || false;
+        };
+        this.openOverflowPopover = () => {
+            this.overflowPopoverOpen = true;
+        };
+        this.closeOverflowPopover = () => {
+            this.overflowPopoverOpen = false;
+        };
+    }
     partFromOptionPart(base, part) {
         const raw = (part ?? '').trim();
         if (!raw)
@@ -1860,62 +1773,6 @@ const LeNavigation = class {
         });
         return result;
     }
-    handleItemSelect = (e, item, id) => {
-        if (item.disabled) {
-            e.preventDefault();
-            e.stopPropagation();
-            return;
-        }
-        const emitted = this.leNavItemSelect.emit({
-            item,
-            id,
-            href: item.href,
-            originalEvent: e,
-        });
-        if (emitted.defaultPrevented) {
-            e.preventDefault();
-        }
-    };
-    handleToggle = (e, item, id) => {
-        e.preventDefault();
-        e.stopPropagation();
-        if (item.disabled)
-            return;
-        const next = !this.isOpen(item, id);
-        this.setOpen(id, next);
-        this.leNavItemToggle.emit({
-            item,
-            id,
-            open: next,
-            originalEvent: e,
-        });
-    };
-    handleSearchInput = (e) => {
-        const target = e.target;
-        this.searchQuery = target.value;
-    };
-    handleSubmenuSearchInput = (submenuId, e) => {
-        const target = e.target;
-        const value = target.value;
-        if (this.submenuQueries[submenuId] === value)
-            return;
-        this.submenuQueries = {
-            ...this.submenuQueries,
-            [submenuId]: value,
-        };
-        // Position may change as items filter.
-        requestAnimationFrame(() => this.popoverRefs.get(submenuId)?.updatePosition());
-    };
-    handleBarOverflowChange = (e) => {
-        this.overflowIds = e.detail.overflowingIds || [];
-        this.hamburgerActive = e.detail.hamburgerActive || false;
-    };
-    openOverflowPopover = () => {
-        this.overflowPopoverOpen = true;
-    };
-    closeOverflowPopover = () => {
-        this.overflowPopoverOpen = false;
-    };
     renderVerticalList(items, { depth, pathPrefix, autoOpenIds, searchable, searchQuery, searchPlaceholder, emptyText, submenuId, closePopover, }) {
         const query = searchQuery ?? '';
         const openFromSearch = autoOpenIds ?? new Set();
@@ -2071,6 +1928,7 @@ const LeNavigation = class {
             emptyText: this.emptyText,
         }))));
     }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "items": ["handleLayoutInputsChange"],
         "orientation": ["handleLayoutInputsChange"],
@@ -2088,6 +1946,7 @@ const lePopoverCss = () => `/* ============================================
 :host {
   display: inline-block;
   position: relative;
+  --le-popover-padding: var(--le-space-md, 12px);
 }
 
 :host([trigger-full-width]) {
@@ -2233,7 +2092,7 @@ const lePopoverCss = () => `/* ============================================
    ============================================ */
 
 .le-popover-body {
-  padding: var(--le-space-md, 12px);
+  padding: var(--le-popover-padding);
 }
 
 /* ============================================
@@ -2253,80 +2112,109 @@ const LePopover = class {
         index.registerInstance(this, hostRef);
         this.lePopoverOpen = index.createEvent(this, "lePopoverOpen");
         this.lePopoverClose = index.createEvent(this, "lePopoverClose");
+        /**
+         * Whether the popover is currently open
+         */
+        this.open = false;
+        /**
+         * Position of the popover relative to its trigger
+         */
+        this.position = 'bottom';
+        /**
+         * Alignment of the popover
+         */
+        this.align = 'start';
+        /**
+         * Whether to show a close button in the header
+         */
+        this.showClose = true;
+        /**
+         * Whether clicking outside closes the popover
+         */
+        this.closeOnClickOutside = true;
+        /**
+         * Whether pressing Escape closes the popover
+         */
+        this.closeOnEscape = true;
+        /**
+         * Offset from the trigger element (in pixels)
+         */
+        this.offset = 8;
+        /**
+         * Minimum width for the popover (e.g., '200px', '15rem')
+         */
+        this.minWidth = '200px';
+        /**
+         * Should the popover's trigger take full width of its container
+         */
+        this.triggerFullWidth = false;
+        this.isPositioned = false;
+        this.uniqueId = `le-popover-${Math.random().toString(36).substr(2, 9)}`;
+        this.scrollParents = [];
+        this.isListeningForDismiss = false;
+        this.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();
+        };
+        this.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();
+        };
+        this.handleScroll = () => {
+            if (this.open) {
+                this._updatePosition();
+            }
+        };
+        this.handlePopoverToggle = (event) => {
+            if (event.newState === 'open') {
+                this.handleOpened();
+            }
+            else {
+                this.handleClosed();
+            }
+        };
+        this.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();
+            }
+        };
+        this.handleTriggerClick = (event) => {
+            event.stopPropagation();
+            this.toggle();
+        };
     }
-    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';
     }
@@ -2383,28 +2271,6 @@ const LePopover = class {
         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
      */
@@ -2448,11 +2314,6 @@ const LePopover = class {
         window.removeEventListener('resize', this.handleScroll);
         this.scrollParents = [];
     }
-    handleScroll = () => {
-        if (this.open) {
-            this._updatePosition();
-        }
-    };
     handleOpened() {
         this.open = true;
         // Track stack order for Escape handling.
@@ -2475,31 +2336,6 @@ const LePopover = class {
             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
      */
@@ -2536,10 +2372,6 @@ const LePopover = class {
             await this.show();
         }
     }
-    handleTriggerClick = (event) => {
-        event.stopPropagation();
-        this.toggle();
-    };
     _updatePosition() {
         if (!this.triggerEl || !this.popoverEl)
             return;
@@ -2694,13 +2526,14 @@ const LePopover = class {
             popoverStyles.minWidth = this.minWidth;
         if (this.maxWidth)
             popoverStyles.maxWidth = this.maxWidth;
-        return (index.h(index.Host, { key: '542d4ab391a9b176d110fe00c0dd61f2c46d73ef', "trigger-full-width": this.triggerFullWidth }, index.h("div", { key: '2248ab763d65e8a9150e62644452085f01c6a238', class: utils.classnames('le-popover-trigger', {
+        return (index.h(index.Host, { key: 'c9adf9fa285b33fca47bd2caa54c3ad62f2784e1', "trigger-full-width": this.triggerFullWidth }, index.h("div", { key: 'e3f6c1441ec018325400e2673e012ba2939d359b', 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: '9d9a5f05f4b9f1b11f1fcbb09d29f0c1e36a2cd6', name: "trigger" }, index.h("button", { key: 'ed573daefaffb7b1effb3c7891722aa40e4b606e', type: "button", class: "le-popover-default-trigger" }, index.h("span", { key: '61f00ea9761935224e1529adc3b102b85efd4f33' }, "\u2295")))), index.h("div", { key: 'bf447493c9c7dedb7f2ae7083c80a7a2d06aebe0', id: this.uniqueId, class: "le-popover-content",
+            }), ref: el => (this.triggerEl = el), onClick: this.handleTriggerClick, part: "trigger" }, index.h("slot", { key: '9ece065f14fedc62905406359f0b6ae25747403b', name: "trigger" }, index.h("button", { key: '816e450c49c441f315bd619c24a4c96ef3bbc164', type: "button", class: "le-popover-default-trigger" }, index.h("span", { key: '4408bf0edee9ccf6e3fa9147110793c94eed8a39' }, "\u2295")))), index.h("div", { key: '9061223ed8051dda88802b1fb54b455aafcd20a6', 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: '50fe79bb415b5de315aea7f766d57ae911a90343', class: "le-popover-header" }, this.popoverTitle && index.h("span", { key: 'd809f12c512197bd34ca215a05820b533f4d8734', class: "le-popover-title" }, this.popoverTitle), this.showClose && (index.h("button", { key: '2baee3e910ad65243a66eee2bba1c46d9fa628b4', type: "button", class: "le-popover-close", onClick: () => this.hide(), "aria-label": "Close" }, "\u00D7")))), index.h("div", { key: 'eacad60a20becde7f4f8b9fa01d195dd3f4c08f1', class: "le-popover-body", part: "content" }, index.h("slot", { key: 'f8aa2edd170ee039d5277a1b9ebc8ee077a1a9dc' })))));
+            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: '92f61d207bfd18693d5e610cdfca708afecadf9d', class: "le-popover-header" }, this.popoverTitle && index.h("span", { key: 'caeb2cfc8b500061bad1e8dc9cf36eff298ba7ed', class: "le-popover-title" }, this.popoverTitle), this.showClose && (index.h("button", { key: '3fc53cc7c0ae0bce3330613ecc90003db5028d69', type: "button", class: "le-popover-close", onClick: () => this.hide(), "aria-label": "Close" }, "\u00D7")))), index.h("div", { key: '829a9d5d78cb8b5d19dfb7c2afeda55faafaa8ac', class: "le-popover-body", part: "content" }, index.h("slot", { key: '684b41952086d22e7d3d79f6db02f7cbfd32bbf5' })))));
     }
+    get el() { return index.getElement(this); }
 };
 LePopover.style = lePopoverCss();
 
@@ -2714,79 +2547,93 @@ const LePopup = class {
         this.leCancel = index.createEvent(this, "leCancel");
         this.leOpen = index.createEvent(this, "leOpen");
         this.leClose = index.createEvent(this, "leClose");
+        /**
+         * The mode of the Le Kit (e.g., 'default' or 'admin')
+         */
+        this.mode = 'default';
+        /**
+         * Whether the popup is currently visible
+         */
+        this.open = false;
+        /**
+         * Type of popup: alert (OK only), confirm (OK/Cancel), prompt (input + OK/Cancel), custom
+         */
+        this.type = 'alert';
+        /**
+         * Whether the popup is modal (blocks interaction with page behind)
+         */
+        this.modal = true;
+        /**
+         * Position of the popup on screen
+         */
+        this.position = 'center';
+        /**
+         * Text for the confirm/OK button
+         */
+        this.confirmText = 'OK';
+        /**
+         * Text for the cancel button
+         */
+        this.cancelText = 'Cancel';
+        /**
+         * Placeholder text for prompt input
+         */
+        this.placeholder = '';
+        /**
+         * Default value for prompt input
+         */
+        this.defaultValue = '';
+        /**
+         * Whether clicking the backdrop closes the popup (modal only)
+         */
+        this.closeOnBackdrop = true;
+        /**
+         * Internal state for prompt input value
+         */
+        this.inputValue = '';
+        this.handleDialogCancel = (e) => {
+            e.preventDefault(); // Prevent default close to handle it ourselves
+            this.handleCancel();
+        };
+        this.handleConfirm = () => {
+            const result = {
+                confirmed: true,
+                value: this.type === 'prompt' ? this.inputValue : undefined,
+            };
+            this.leConfirm.emit(result);
+            this.hide(true);
+        };
+        this.handleCancel = () => {
+            const result = {
+                confirmed: false,
+                value: undefined,
+            };
+            this.leCancel.emit(result);
+            this.hide(false);
+        };
+        this.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();
+                }
+            }
+        };
+        this.handleInputChange = (e) => {
+            this.inputValue = e.target.value;
+        };
+        this.handleKeyDown = (e) => {
+            if (e.key === 'Enter' && this.type !== 'custom') {
+                e.preventDefault();
+                this.handleConfirm();
+            }
+        };
     }
-    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;
     }
@@ -2798,10 +2645,6 @@ const LePopup = class {
     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
      */
@@ -2845,44 +2688,6 @@ const LePopup = class {
             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}"]`);
     }
@@ -2910,8 +2715,9 @@ const LePopup = class {
     }
     render() {
         const positionClass = `le-popup-position-${this.position}`;
-        return (index.h("dialog", { key: '75ff06ac2532818f2951283fb455d165d1b13e89', class: `le-popup-dialog ${positionClass}`, part: "dialog", ref: el => (this.dialogEl = el), onClick: this.handleBackdropClick }, index.h("le-component", { key: '0fea1c4ea66d8457c66bf5e14b08b7ac3251a9cc', component: "le-popup" }, index.h("div", { key: 'eb95845004b27cdba2e817b2f296a59ae1d62552', class: "le-popup-container", part: "container" }, this.renderHeader(), this.renderBody(), this.renderFooter()))));
+        return (index.h("dialog", { key: '9a42c63b24b521264654847ff45ea026000a642d', class: `le-popup-dialog ${positionClass}`, part: "dialog", ref: el => (this.dialogEl = el), onClick: this.handleBackdropClick }, index.h("le-component", { key: 'a3f086d20a9e611f3907f039bbcf9f7054927fa5', component: "le-popup" }, index.h("div", { key: 'b2ee2bc7d9eb42f457541c8ffb20af52b7cde8e9', class: "le-popup-container", part: "container" }, this.renderHeader(), this.renderBody(), this.renderFooter()))));
     }
+    get el() { return index.getElement(this); }
 };
 LePopup.style = lePopupCss();
 
@@ -2920,13 +2726,10 @@ const leScrollProgressCss = () => `:host{display:block}:host([sticky]){position:
 const LeScrollProgress = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.progress = 0;
+        this.rafId = null;
+        this.targetEl = null;
     }
-    get el() { return index.getElement(this); }
-    /** Boolean or selector string. */
-    trackScrollProgress;
-    progress = 0;
-    rafId = null;
-    targetEl = null;
     componentWillLoad() {
         this.updateProgress();
     }
@@ -3018,8 +2821,9 @@ const LeScrollProgress = class {
     }
     render() {
         const width = `${this.progress * 100}%`;
-        return (index.h(index.Host, { key: '7a93dbfd8b14e5e581ff1480ad0e657f8f33bcf4' }, index.h("div", { key: 'fe4ff14af541e2a610d0b32605aaadb87ccea957', class: "track", part: "track", "aria-hidden": "true" }, index.h("div", { key: 'f46a09358bf77a7cff64deafa63702360a686c6a', class: "fill", part: "fill", style: { width } }))));
+        return (index.h(index.Host, { key: '4521900e44e8226280a6fc1d7431e24832057be3' }, index.h("div", { key: 'a0daeec6b1c39fd4b5cc3ae90f27e615fa9828ef', class: "track", part: "track", "aria-hidden": "true" }, index.h("div", { key: 'd2c683765627c5eea27483ce00c3eff734e8c87a', class: "fill", part: "fill", style: { width } }))));
     }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "trackScrollProgress": ["onTrackChange"]
     }; }
@@ -3034,72 +2838,91 @@ const LeSelect = class {
         this.leChange = index.createEvent(this, "change");
         this.leOpen = index.createEvent(this, "leOpen");
         this.leClose = index.createEvent(this, "leClose");
+        /**
+         * The options to display in the dropdown.
+         */
+        this.options = [];
+        /**
+         * Placeholder text when no option is selected.
+         */
+        this.placeholder = 'Select an option';
+        /**
+         * Whether the select is disabled.
+         */
+        this.disabled = false;
+        /**
+         * Whether selection is required.
+         */
+        this.required = false;
+        /**
+         * Whether the select should take full width of its container.
+         */
+        this.fullWidth = false;
+        /**
+         * Size variant of the select.
+         */
+        this.size = 'medium';
+        /**
+         * Visual variant of the select.
+         */
+        this.variant = 'default';
+        /**
+         * Whether the input is searchable.
+         */
+        this.searchable = false;
+        /**
+         * Text to show when no options match the search.
+         */
+        this.emptyText = 'No results found';
+        /**
+         * Whether the dropdown is currently open.
+         */
+        this.open = false;
+        this.searchQuery = '';
+        this.filterOption = (option, query) => {
+            if (!query)
+                return true;
+            const searchLower = query.toLowerCase();
+            return (option.label.toLowerCase().includes(searchLower) ||
+                (option.description?.toLowerCase().includes(searchLower) ?? false));
+        };
+        this.handleOptionSelect = (e) => {
+            this.value = e.detail.value;
+            this.selectedOption = e.detail.option;
+            this.leChange.emit(e.detail);
+        };
+        this.handleDropdownOpen = () => {
+            this.open = true;
+            this.leOpen.emit();
+            // Focus search input if searchable
+            if (this.searchable) {
+                setTimeout(() => {
+                    this.inputEl?.focus();
+                }, 50);
+            }
+        };
+        this.handleDropdownClose = () => {
+            this.open = false;
+            this.leClose.emit();
+        };
+        this.handleTriggerClick = () => {
+            if (!this.disabled) {
+                this.dropdownEl?.toggle();
+            }
+        };
+        this.handleTriggerKeyDown = (e) => {
+            if (this.disabled)
+                return;
+            if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
+                e.preventDefault();
+                this.dropdownEl?.show();
+            }
+        };
+        this.handleSearchInput = (e) => {
+            const target = e.target;
+            this.searchQuery = target.value;
+        };
     }
-    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();
     }
@@ -3128,49 +2951,6 @@ const LeSelect = class {
             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.
      */
@@ -3193,14 +2973,15 @@ const LeSelect = class {
     }
     render() {
         const hasValue = this.selectedOption !== undefined;
-        return (index.h("le-component", { key: '670430a0ca8f310b7454c7dd93098b6b57f3bb82', component: "le-select" }, index.h("le-dropdown-base", { key: '58716c031b14513b67a1106b90b6174fa363c8b4', ref: el => (this.dropdownEl = el), options: this.parsedOptions, value: this.value, disabled: this.disabled, filterFn: this.searchable ? this.filterOption : undefined, filterQuery: this.searchQuery, onLeOptionSelect: this.handleOptionSelect, onLeDropdownOpen: this.handleDropdownOpen, onLeDropdownClose: this.handleDropdownClose, fullWidth: this.fullWidth }, index.h("le-button", { key: 'b9cb202179c8fbc6dea9bc7af5ccf11deeb7c0f1', variant: this.variant && this.variant !== 'default' ? this.variant : 'outlined', slot: "trigger", align: "space-between", class: {
+        return (index.h("le-component", { key: 'cd0d10eb7ee1cc6f52fcb32bc3675e2f74219d9b', component: "le-select" }, index.h("le-dropdown-base", { key: '200e03a079caaa6c091f82d0384134a3e2d0154d', 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: '0fa315cceaf6f18a5e370351027f27167fe64ce0', 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: '592267788f6a02d6b501941863e91bcd68742233', class: "trigger-label" }, hasValue ? this.selectedOption.label : this.placeholder)), this.searchable && this.open && (index.h("div", { key: 'd4d2611e8b1f7fb243675cc11fa4982331b3c330', class: "multiselect-search", slot: "header" }, index.h("le-string-input", { key: 'f2a7e477eaf730173cfbca35b33d263eda860dc2', mode: "default", inputRef: el => (this.inputEl = el), class: "search-input", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchInput })))), this.name && index.h("input", { key: 'bf9dc8141d02c272b0b81557dbc7c24a419ce558', type: "hidden", name: this.name, value: this.value?.toString() ?? '' })));
+                : 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: 'aae9bb220fb206622dbf6959f125c78adfb13e00', class: "trigger-label" }, hasValue ? this.selectedOption.label : this.placeholder)), this.searchable && this.open && (index.h("div", { key: '0e7e360672e2e7ce7d32dc726a450ccff245cee0', class: "multiselect-search", slot: "header" }, index.h("le-string-input", { key: 'a2a36fc139d4b477d35910541fab6071eddc3de5', mode: "default", inputRef: el => (this.inputEl = el), class: "search-input", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchInput })))), this.name && index.h("input", { key: '9555b72d2f433ce9ee3803d0bb3ceb0dae1c37e3', type: "hidden", name: this.name, value: this.value?.toString() ?? '' })));
     }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "value": ["handleValueChange"],
         "options": ["handleOptionsChange"]
@@ -3214,97 +2995,100 @@ const LeSlot = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.leSlotChange = index.createEvent(this, "leSlotChange");
+        /**
+         * 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
+         */
+        this.type = 'slot';
+        /**
+         * The name of the slot this placeholder represents.
+         * Should match the slot name in the parent component.
+         */
+        this.name = '';
+        /**
+         * Whether multiple components can be dropped in this slot.
+         */
+        this.multiple = true;
+        /**
+         * Whether this slot is required to have content.
+         */
+        this.required = false;
+        /**
+         * Internal state to track admin mode
+         */
+        this.adminMode = false;
+        /**
+         * Internal state for text input value (synced from slot content)
+         */
+        this.textValue = '';
+        /**
+         * Whether the current textValue contains valid HTML
+         */
+        this.isValidHtml = true;
+        /**
+         * Available components loaded from Custom Elements Manifest
+         */
+        this.availableComponents = [];
+        /**
+         * Whether the component picker popover is open
+         */
+        this.pickerOpen = false;
+        /**
+         * Flag to prevent re-reading content right after we updated it
+         */
+        this.isUpdating = false;
+        this.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,
+            });
+        };
+        /**
+         * Handle slot change event to re-read content when nodes are assigned
+         */
+        this.handleSlotChange = () => {
+            this.readSlottedContent();
+        };
     }
-    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;
@@ -3323,10 +3107,6 @@ const LeSlot = class {
     disconnectedCallback() {
         this.disconnectModeObserver?.();
     }
-    /**
-     * Flag to prevent re-reading content right after we updated it
-     */
-    isUpdating = false;
     /**
      * Read content from slotted elements via assignedNodes()
      */
@@ -3390,49 +3170,6 @@ const LeSlot = class {
         }
         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.
@@ -3534,16 +3271,10 @@ const LeSlot = class {
             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: '8a48f7865340d9a2e201a2f878b2f1c66c55d86c', class: {
+        return (index.h(index.Host, { key: 'fb2a01670291a714608bc59069991a8ef65dc3e9', 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', {
@@ -3587,6 +3318,7 @@ const LeSlot = class {
                 return (index.h("div", { class: "le-slot-dropzone", style: dropzoneStyle }, index.h("slot", { ref: el => (this.slotRef = el), onSlotchange: this.handleSlotChange })));
         }
     }
+    get el() { return index.getElement(this); }
 };
 LeSlot.style = leSlotDefaultCss();
 
@@ -3597,96 +3329,52 @@ const LeStringInput = class {
         index.registerInstance(this, hostRef);
         this.leChange = index.createEvent(this, "change");
         this.leInput = index.createEvent(this, "input");
+        /**
+         * The type of the input (text, email, password, etc.)
+         */
+        this.type = 'text';
+        /**
+         * Hide description slot
+         */
+        this.hideDescription = false;
+        /**
+         * Whether the input is disabled
+         */
+        this.disabled = false;
+        /**
+         * Whether the input is read-only
+         */
+        this.readonly = false;
+        this.handleInput = (ev) => {
+            const input = ev.target;
+            this.value = input.value;
+            this.leInput.emit({
+                value: this.value,
+                name: this.name,
+                externalId: this.externalId,
+            });
+        };
+        this.handleChange = (ev) => {
+            const input = ev.target;
+            this.value = input.value;
+            this.leChange.emit({
+                value: this.value,
+                name: this.name,
+                externalId: this.externalId,
+            });
+        };
+        this.handleClick = (ev) => {
+            ev.stopPropagation();
+        };
     }
-    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: '385fe7607d573ab4cfe81315f74e650f8e57faa1', component: "le-string-input", hostClass: utils.classnames({ disabled: this.disabled }) }, index.h("div", { key: 'a36c5a32238eb6c9c574aeb3955343e042d89225', class: "le-input-wrapper" }, this.label && (index.h("label", { key: 'c1ff01932ada19ecea0cd2e2b477615d0c873ff0', class: "le-input-label", htmlFor: this.name }, this.label)), index.h("div", { key: '7c8909ed5e4e3404a2900a3f9beef8b0f331d62c', class: "le-input-container", part: "container" }, this.iconStart && index.h("span", { key: 'cf7e7355e22de3100bade2399ba63702731350e0', class: "icon-start" }, this.iconStart), index.h("input", { key: '6d71245d395f6cd2c55110ca902fc0374c74026b', ref: el => {
+        return (index.h("le-component", { key: 'b7d315a0bbe587dae606fec9ee3da32c16b773cb', component: "le-string-input", hostClass: utils.classnames({ disabled: this.disabled }) }, index.h("div", { key: 'cfefdea8ce0625417cef62d0f432e13df652ab44', class: "le-input-wrapper" }, this.label && (index.h("label", { key: 'bfc0f2c440e00f2212c1ae9b0d3dd5b484ed0c5d', class: "le-input-label", htmlFor: this.name }, this.label)), index.h("div", { key: '324d58a4e798c4cd4d44c4f23760e38a24bfa4f6', class: "le-input-container", part: "container" }, this.iconStart && index.h("span", { key: '7851e3d9a30a304f2472e8de3dea1d6ce703b9ea', class: "icon-start" }, this.iconStart), index.h("input", { key: 'e51b775e8a9f8f55279ea91f04efbb0c5fdb4d1a', 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: 'e086f9559b086212be3cd231b7c870cdb229a733', class: "icon-end" }, this.iconEnd)), !this.hideDescription && (index.h("div", { key: '531ac78b43382166023a79475152345956188bcc', class: "le-input-description" }, index.h("le-slot", { key: '38700e86adc0c3bf049b0ad828d14993ddef7844', name: "description", type: "text", tag: "p", label: "Description" }, index.h("slot", { key: 'c2982e93304a872ec79446fe525eb5448e764401', name: "description" })))))));
+            }, 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: '7018ada874d6b1c85e88a93ba695d00c118c4a6a', class: "icon-end" }, this.iconEnd)), !this.hideDescription && (index.h("div", { key: '826a2853561ab428e82d879012bc7bfdad4b1dfe', class: "le-input-description" }, index.h("le-slot", { key: '3a6fc7a46fffacbef6e44fcaa7a80af365754d1c', name: "description", type: "text", tag: "p", label: "Description" }, index.h("slot", { key: 'b6bbe4efe29c88b1910a53f6704846bfd4280307', name: "description" })))))));
     }
+    get el() { return index.getElement(this); }
 };
 LeStringInput.style = leStringInputCss();