le-kit 0.5.2 → 0.5.4

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

@@ -1,3692 +0,0 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, H as Host, F as Fragment, e as getLeKitConfig, f as getAssetPath, i as getAssetBasePath } from './index-DFTm5BqT.js';
-import { g as generateId, c as classnames, o as observeModeChanges } from './utils-DZYCZLrF.js';
-import { leConfirm } from './index.js';
-
-const leBarCss = () => `:host{display:block;--le-bar-gap:var(--le-spacing-2);--le-bar-padding:var(--le-spacing-2);--le-bar-min-height:2.5rem;--le-bar-background:transparent;--le-bar-border-color:var(--le-color-border);--le-bar-border-radius:var(--le-radius-md);--le-bar-button-size:2rem;--le-bar-button-color:var(--le-color-text-primary);--le-bar-button-hover-bg:var(--le-color-gray-100);--le-bar-button-border-radius:var(--le-radius-sm);--le-bar-arrow-size:1.5rem;--le-bar-popover-min-width:200px;--le-bar-popover-gap:var(--le-spacing-1)}.bar-container{display:flex;align-items:center;gap:var(--le-bar-gap);min-height:var(--le-bar-min-height);background:var(--le-bar-background);border-radius:var(--le-bar-border-radius);padding:var(--le-bar-padding)}.bar-container.align-start{justify-content:flex-start}.bar-container.align-end .bar-items{justify-content:flex-end}.bar-container.align-center .bar-items{justify-content:center}.bar-container.align-stretch .bar-items{justify-content:space-evenly}.bar-items{display:flex;flex-wrap:wrap;align-items:center;gap:var(--le-bar-gap);overflow:hidden;min-width:0;flex:1 1 0%;position:relative}.bar-items[style*="height"]{overflow:hidden}.bar-items.is-scrollable{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.bar-items.is-scrollable::-webkit-scrollbar{display:none}.bar-items.is-scrollable ::slotted(*){scroll-snap-align:start;flex-shrink:0}.bar-items.is-wrapping{flex-wrap:wrap;overflow:visible;height:auto !important}.bar-controls{display:flex;align-items:center;gap:var(--le-spacing-1);flex-shrink:0}.bar-controls-start{order:-1}.bar-controls-end{order:1}.bar-more-button,.bar-hamburger-button,.bar-all-menu-button{display:inline-flex;align-items:center;justify-content:center;width:var(--le-bar-button-size);height:var(--le-bar-button-size);padding:0;border:none;background:transparent;color:var(--le-bar-button-color);border-radius:var(--le-bar-button-border-radius);cursor:pointer;transition:background-color 0.15s ease}.bar-more-button:hover,.bar-hamburger-button:hover,.bar-all-menu-button:hover{background:var(--le-bar-button-hover-bg)}.bar-more-button:focus-visible,.bar-hamburger-button:focus-visible,.bar-all-menu-button:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px}.bar-arrow{display:inline-flex;align-items:center;justify-content:center;width:var(--le-bar-arrow-size);height:var(--le-bar-arrow-size);padding:0;border:none;background:transparent;color:var(--le-bar-button-color);border-radius:var(--le-bar-button-border-radius);cursor:pointer;transition:background-color 0.15s ease, opacity 0.15s ease}.bar-arrow:hover:not(:disabled){background:var(--le-bar-button-hover-bg)}.bar-arrow:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px}.bar-arrow:disabled,.bar-arrow.disabled{opacity:0.3;cursor:not-allowed}.arrow-icon-start{transform:rotate(90deg)}.arrow-icon-end{transform:rotate(-90deg)}.bar-overflow-trigger,.bar-all-menu-trigger{display:inline-flex}.bar-popover-content{display:flex;flex-direction:column;gap:var(--le-bar-popover-gap);min-width:var(--le-bar-popover-min-width);padding:var(--le-spacing-2)}.bar-popover-item{cursor:pointer}.bar-popover-item:hover{background:var(--le-bar-button-hover-bg);border-radius:var(--le-bar-button-border-radius)}:host(.hamburger-active) .bar-items{visibility:hidden;pointer-events:none}`;
-
-const LeBar = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.leBarOverflowChange = createEvent(this, "leBarOverflowChange");
-    }
-    get el() { return 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 = 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();
-    }
-    handleSlotChange() {
-        this.scheduleOverflowRecalc();
-    }
-    connectedCallback() {
-        this.setupObservers();
-    }
-    componentDidLoad() {
-        this.scheduleOverflowRecalc();
-    }
-    componentDidRender() {
-        // Recalculate after render in case children changed
-        this.scheduleOverflowRecalc();
-    }
-    disconnectedCallback() {
-        this.resizeObserver?.disconnect();
-        this.mutationObserver?.disconnect();
-    }
-    /**
-     * Force recalculation of overflow state.
-     */
-    async recalculate() {
-        this.computeOverflow();
-    }
-    setupObservers() {
-        // ResizeObserver for container size changes
-        if (typeof ResizeObserver !== 'undefined') {
-            this.resizeObserver = new ResizeObserver(() => {
-                this.computeOverflow();
-                this.updateScrollState();
-            });
-        }
-        // MutationObserver for child changes
-        this.mutationObserver = new MutationObserver(() => {
-            this.scheduleOverflowRecalc();
-        });
-        this.mutationObserver.observe(this.el, {
-            childList: true,
-            subtree: false,
-        });
-    }
-    observeContainer(el) {
-        if (!this.resizeObserver)
-            return;
-        this.resizeObserver.disconnect();
-        if (el)
-            this.resizeObserver.observe(el);
-    }
-    scheduleOverflowRecalc() {
-        // Debounce recalculations to prevent infinite loops
-        if (this.pendingRecalc !== null) {
-            cancelAnimationFrame(this.pendingRecalc);
-        }
-        this.pendingRecalc = requestAnimationFrame(() => {
-            this.pendingRecalc = null;
-            this.computeOverflow();
-        });
-    }
-    resetOverflowState() {
-        this.hamburgerActive = false;
-        this.overflowingIds = new Set();
-        this.containerHeight = null;
-        this.popoverOpen = false;
-    }
-    getSlottedItems() {
-        // Get direct children from the light DOM (excluding named slot elements)
-        return Array.from(this.el.children).filter((el) => el instanceof HTMLElement && !el.hasAttribute('slot'));
-    }
-    getItemId(el, index) {
-        return el.id || el.dataset.barId || `${this.instanceId}-item-${index}`;
-    }
-    computeOverflow() {
-        if (this.overflow === 'wrap' || this.overflow === 'scroll') {
-            // No overflow handling needed for wrap/scroll modes
-            this.resetOverflowState();
-            this.updateScrollState();
-            return;
-        }
-        const container = this.itemsContainerEl;
-        if (!container)
-            return;
-        const items = this.getSlottedItems();
-        if (items.length === 0) {
-            this.resetOverflowState();
-            return;
-        }
-        // Build item map
-        this.itemMap.clear();
-        items.forEach((item, index) => {
-            const id = this.getItemId(item, index);
-            this.itemMap.set(id, item);
-        });
-        // Get the position of items to determine which are on the first row
-        const itemRects = items.map((item, index) => ({
-            item,
-            id: this.getItemId(item, index),
-            rect: item.getBoundingClientRect(),
-        }));
-        if (itemRects.length === 0) {
-            return;
-        }
-        // Find the first row's top position (accounting for vertical alignment)
-        const containerRect = container.getBoundingClientRect();
-        const topValues = itemRects.map(i => i.rect.top - containerRect.top);
-        const minTop = Math.min(...topValues);
-        // Items are on the first row if their top is close to minTop
-        // Allow some tolerance for alignment differences
-        const tolerance = 15;
-        const firstRowItems = itemRects.filter(i => i.rect.top - containerRect.top <= minTop + tolerance);
-        const overflowItems = itemRects.filter(i => i.rect.top - containerRect.top > minTop + tolerance);
-        // Calculate the height of the first row
-        const firstRowBottom = firstRowItems.length > 0
-            ? Math.max(...firstRowItems.map(i => i.rect.bottom - containerRect.top))
-            : 0;
-        if (this.overflow === 'hamburger') {
-            // In hamburger mode, if ANY item overflows, all go into the menu
-            const shouldHamburger = overflowItems.length > 0;
-            if (shouldHamburger !== this.hamburgerActive) {
-                this.hamburgerActive = shouldHamburger;
-                this.emitOverflowChange();
-            }
-            // Set height to show only first row (or hide all if hamburger is active)
-            if (shouldHamburger && firstRowBottom > 0) {
-                this.containerHeight = firstRowBottom;
-            }
-            else {
-                this.containerHeight = null;
-            }
-        }
-        else {
-            // 'more' mode
-            let newOverflowingIds = new Set(overflowItems.map(i => i.id));
-            // Check if we need to make room for the "more" button
-            if (newOverflowingIds.size > 0 && this.moreButtonEl) {
-                const moreRect = this.moreButtonEl.getBoundingClientRect();
-                const moreTop = moreRect.top - containerRect.top;
-                // If "more" button is not on the first row, we need to hide one more item
-                if (moreTop > minTop + tolerance) {
-                    // Find the last visible item and move it to overflow
-                    const lastVisible = firstRowItems[firstRowItems.length - 1];
-                    if (lastVisible) {
-                        newOverflowingIds.add(lastVisible.id);
-                    }
-                }
-            }
-            // Check if we should fallback to hamburger mode
-            // This happens when minVisibleItems is set and fewer items would be visible
-            const visibleCount = items.length - newOverflowingIds.size;
-            const shouldFallbackToHamburger = this.minVisibleItems > 0 &&
-                newOverflowingIds.size > 0 &&
-                visibleCount < this.minVisibleItems;
-            if (shouldFallbackToHamburger) {
-                // Switch to hamburger mode - all items go into the menu
-                if (!this.hamburgerActive) {
-                    this.hamburgerActive = true;
-                    this.overflowingIds = new Set();
-                    this.emitOverflowChange();
-                }
-                // Set height to show only first row
-                if (firstRowBottom > 0) {
-                    this.containerHeight = firstRowBottom;
-                }
-                else {
-                    this.containerHeight = null;
-                }
-                return;
-            }
-            // Not falling back to hamburger - ensure hamburgerActive is false
-            if (this.hamburgerActive) {
-                this.hamburgerActive = false;
-            }
-            // Check if overflow state changed
-            const hasChanged = (newOverflowingIds?.size ?? 0) !== (this.overflowingIds?.size ?? 0) ||
-                ![...newOverflowingIds].every(id => this.overflowingIds?.has(id));
-            if (hasChanged) {
-                this.overflowingIds = newOverflowingIds;
-                this.emitOverflowChange();
-            }
-            // Set container height to show only first row
-            if ((newOverflowingIds?.size ?? 0) > 0 && firstRowBottom > 0) {
-                this.containerHeight = firstRowBottom;
-            }
-            else {
-                this.containerHeight = null;
-            }
-        }
-    }
-    emitOverflowChange() {
-        this.leBarOverflowChange.emit({
-            overflowingIds: [...(this.overflowingIds ?? [])],
-            hamburgerActive: this.hamburgerActive,
-        });
-    }
-    updateScrollState() {
-        if (this.overflow !== 'scroll' || !this.itemsContainerEl) {
-            this.canScrollStart = false;
-            this.canScrollEnd = false;
-            return;
-        }
-        const el = this.itemsContainerEl;
-        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 (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 ? h("slot", { name: "more" }) : h("le-icon", { name: "ellipsis-horizontal" })));
-    }
-    renderHamburgerButton() {
-        const hasSlottedHamburger = this.el.querySelector('[slot="hamburger"]');
-        return (h("button", { class: "bar-hamburger-button", part: "hamburger-button", onClick: this.togglePopover, "aria-expanded": String(this.popoverOpen), "aria-haspopup": "true" }, hasSlottedHamburger ? h("slot", { name: "hamburger" }) : h("le-icon", { name: "hamburger" })));
-    }
-    renderScrollArrows() {
-        if (!this.arrows || this.overflow !== 'scroll')
-            return null;
-        const hasSlottedStartArrow = this.el.querySelector('[slot="start-arrow"]');
-        const hasSlottedEndArrow = this.el.querySelector('[slot="end-arrow"]');
-        return [
-            h("button", { class: classnames('bar-arrow', 'bar-arrow-start', {
-                    disabled: !this.canScrollStart,
-                }), part: "arrow-start", onClick: this.scrollToStart, disabled: !this.canScrollStart, "aria-label": "Scroll to start" }, hasSlottedStartArrow ? (h("slot", { name: "start-arrow" })) : (h("le-icon", { name: "chevron-down", class: "arrow-icon-start" }))),
-            h("button", { class: classnames('bar-arrow', 'bar-arrow-end', {
-                    disabled: !this.canScrollEnd,
-                }), part: "arrow-end", onClick: this.scrollToEnd, disabled: !this.canScrollEnd, "aria-label": "Scroll to end" }, hasSlottedEndArrow ? (h("slot", { name: "end-arrow" })) : (h("le-icon", { name: "chevron-down", class: "arrow-icon-end" }))),
-        ];
-    }
-    renderAllMenuButton() {
-        if (!this.showAllMenu)
-            return null;
-        const hasSlottedAllMenu = this.el.querySelector('[slot="all-menu"]');
-        return (h("button", { class: "bar-all-menu-button", part: "all-menu-button", onClick: this.toggleAllMenu, "aria-expanded": String(this.allMenuOpen), "aria-haspopup": "true" }, hasSlottedAllMenu ? h("slot", { name: "all-menu" }) : h("le-icon", { name: "hamburger" })));
-    }
-    renderPopoverContent(itemsToShow) {
-        return (h("div", { class: "bar-popover-content", part: "popover-content" }, itemsToShow.map(({ id, item }) => (h("div", { class: "bar-popover-item", key: id, onClick: (e) => this.handleItemClick(e, id), innerHTML: item.outerHTML })))));
-    }
-    renderOverflowPopover() {
-        if (this.overflow !== 'more' && this.overflow !== 'hamburger')
-            return null;
-        const items = this.getSlottedItems();
-        let itemsToShow = [];
-        if (this.overflow === 'hamburger' && this.hamburgerActive) {
-            // Show all items in hamburger mode
-            itemsToShow = items.map((item, index) => ({
-                id: this.getItemId(item, index),
-                item,
-            }));
-        }
-        else if (this.overflow === 'more' && (this.overflowingIds?.size ?? 0) > 0) {
-            // Show only overflowing items
-            itemsToShow = items
-                .map((item, index) => ({
-                id: this.getItemId(item, index),
-                item,
-            }))
-                .filter(({ id }) => this.overflowingIds?.has(id));
-        }
-        if (itemsToShow.length === 0)
-            return null;
-        return (h("le-popover", { mode: "default", open: this.popoverOpen, position: "bottom", align: "end", showClose: false, closeOnClickOutside: true, closeOnEscape: true, onLePopoverClose: this.closePopover }, h("div", { slot: "trigger", class: "bar-overflow-trigger" }, this.overflow === 'hamburger' ? this.renderHamburgerButton() : this.renderMoreButton()), this.renderPopoverContent(itemsToShow)));
-    }
-    renderAllMenuPopover() {
-        if (!this.showAllMenu)
-            return null;
-        const items = this.getSlottedItems();
-        const itemsToShow = items.map((item, index) => ({
-            id: this.getItemId(item, index),
-            item,
-        }));
-        const position = this.showAllMenu === 'start' ? 'start' : 'end';
-        return (h("le-popover", { mode: "default", open: this.allMenuOpen, position: "bottom", align: position, showClose: false, closeOnClickOutside: true, closeOnEscape: true, onLePopoverClose: this.closeAllMenu }, h("div", { slot: "trigger", class: "bar-all-menu-trigger" }, this.renderAllMenuButton()), this.renderPopoverContent(itemsToShow)));
-    }
-    render() {
-        const showOverflowButton = !this.disablePopover &&
-            ((this.overflow === 'more' && (this.overflowingIds?.size ?? 0) > 0) ||
-                (this.overflow === 'hamburger' && this.hamburgerActive));
-        const containerStyle = {};
-        if (this.containerHeight !== null &&
-            (this.overflow === 'more' || this.overflow === 'hamburger')) {
-            containerStyle.height = `${this.containerHeight}px`;
-        }
-        const showAllMenuAtStart = this.showAllMenu === 'start';
-        const showAllMenuAtEnd = this.showAllMenu === true || this.showAllMenu === 'end';
-        return (h(Host, { key: '56d04e4504ed7ce1d8e78a825c71c71c074d0b62', class: classnames({
-                'overflow-more': this.overflow === 'more',
-                'overflow-scroll': this.overflow === 'scroll',
-                'overflow-hamburger': this.overflow === 'hamburger',
-                'overflow-wrap': this.overflow === 'wrap',
-                'hamburger-active': this.hamburgerActive,
-                'has-overflow': (this.overflowingIds?.size ?? 0) > 0 || this.hamburgerActive,
-            }) }, h("div", { key: '4e7aeb4c84a9964e19012c3d05827fa8406988b0', class: classnames('bar-container', {
-                [`align-${this.alignItems}`]: true,
-            }), part: "container" }, this.overflow === 'scroll' && this.arrows && (h("div", { key: '2e3ae04c00e88e5055216dbc5b6d53574c450470', class: "bar-controls bar-controls-start" }, this.renderScrollArrows()?.[0])), showAllMenuAtStart && (h("div", { key: '9628c8dc2b15d9358baad63b19c75fd933eeb19a', class: "bar-controls bar-controls-start" }, this.renderAllMenuPopover())), h("div", { key: 'd1feb9603d0ff4247852aadb62cb920a5f5a1921', class: classnames('bar-items', {
-                'is-scrollable': this.overflow === 'scroll',
-                'is-wrapping': this.overflow === 'wrap',
-            }), style: containerStyle, ref: el => {
-                this.itemsContainerEl = el;
-                this.observeContainer(el);
-            }, onScroll: this.overflow === 'scroll' ? this.handleScroll : undefined }, h("slot", { key: '338698e038b9df4c7b163017ceb0675b834160e4' })), showOverflowButton && (h("div", { key: 'd619fcda1b0c28247af60899f73cc076b0517787', class: "bar-controls bar-controls-end" }, this.renderOverflowPopover())), showAllMenuAtEnd && (h("div", { key: 'fd9fef90194aabb8d48e77c8f7615daa5d7297ac', class: "bar-controls bar-controls-end" }, this.renderAllMenuPopover())), this.overflow === 'scroll' && this.arrows && (h("div", { key: 'bcffb914e2788767c3765351a3eeae771f3e115f', class: "bar-controls bar-controls-end" }, this.renderScrollArrows()?.[1])))));
-    }
-    static get watchers() { return {
-        "overflow": ["handleOverflowChange"]
-    }; }
-};
-LeBar.style = leBarCss();
-
-const leButtonCss = () => `:host{display:inline-block;--le-button-border-radius:var(--le-radius-md);--le-button-padding-x:var(--le-spacing-3);--le-button-padding-y:var(--le-spacing-1);--le-button-padding:var(--le-button-padding-y) var(--le-button-padding-x);--le-button-small-padding:0.25rem;--le-button-font-size:var(--le-font-size-md);--le-button-font-weight:var(--le-font-weight-medium);--le-button-transition:var(--le-transition-fast);--le-transition-easing:ease-in-out;--le-button-icon-aspect-ratio:1;--le-button-color:var(--le-color-primary-contrast);--_btn-bg:var(--le-color-primary);--_btn-bg-hover:var(--le-color-primary-dark);--_btn-bg-system:var(--le-color-black);--_btn-color:var(--le-button-color);--_btn-border-color:var(--le-color-primary)}:host([full-width]){display:block;width:100%}.le-button-container{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--le-spacing-3);width:100%;padding:var(--le-button-padding);border:1px solid var(--_btn-border-color);border-radius:var(--le-button-border-radius);background:var(--_btn-bg);color:var(--_btn-color);font-family:var(--le-font-family-base);font-size:var(--le-button-font-size);font-weight:var(--le-button-font-weight);line-height:var(--le-line-height-tight);text-decoration:none;cursor:pointer;transition:background-color var(--le-button-transition) var(--le-transition-easing),
-    border-color var(--le-button-transition) var(--le-transition-easing),
-    box-shadow var(--le-button-transition) var(--le-transition-easing),
-    transform var(--le-button-transition) var(--le-transition-easing)}.le-button-container:hover:not(:disabled){background:var(--_btn-bg-hover);border-color:var(--_btn-bg-hover)}.le-button-container:active:not(:disabled){box-shadow:inset 0 0 5px color-mix(in srgb, var(--_btn-bg) 50%, transparent)}.le-button-container:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px}.le-button-container:disabled{opacity:0.5;cursor:not-allowed}.le-button-label{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--le-spacing-2)}:host(.color-primary){--_btn-bg:var(--le-color-primary);--_btn-bg-hover:var(--le-color-primary-dark);--_btn-color:var(--le-button-color);--_btn-border-color:var(--le-color-primary)}:host(.color-secondary){--_btn-bg:var(--le-color-secondary);--_btn-bg-hover:var(--le-color-secondary-dark);--_btn-color:var(--le-color-secondary-contrast);--_btn-border-color:var(--le-color-secondary)}:host(.color-success){--_btn-bg:var(--le-color-success);--_btn-bg-hover:var(--le-color-success-dark);--_btn-color:var(--le-color-success-contrast);--_btn-border-color:var(--le-color-success)}:host(.color-warning){--_btn-bg:var(--le-color-warning);--_btn-bg-hover:var(--le-color-warning-dark);--_btn-color:var(--le-color-warning-contrast);--_btn-border-color:var(--le-color-warning)}:host(.color-danger){--_btn-bg:var(--le-color-danger);--_btn-bg-hover:var(--le-color-danger-dark);--_btn-color:var(--le-color-danger-contrast);--_btn-border-color:var(--le-color-danger)}:host(.color-info){--_btn-bg:var(--le-color-info);--_btn-bg-hover:var(--le-color-info-dark);--_btn-color:var(--le-color-info-contrast);--_btn-border-color:var(--le-color-info)}:host(.variant-solid) .le-button-container{box-shadow:var(--le-shadow-sm)}:host(.variant-solid) .le-button-container:hover:not(:disabled){box-shadow:var(--le-shadow-md)}:host(.variant-outlined) .le-button-container{background:transparent;color:var(--_btn-bg);border-color:color-mix(in srgb, var(--_btn-border-color) 33%, transparent)}:host(.variant-outlined) .le-button-container:hover:not(:disabled){border-color:var(--_btn-border-color)}:host(.variant-clear) .le-button-container{background:transparent;color:var(--_btn-bg);border-color:transparent}:host(.variant-clear) .le-button-container:hover:not(:disabled){background:var(--le-color-gray-100);border-color:transparent}:host(.variant-system) .le-button-container{background:transparent;color:var(--_btn-bg-system);border-color:transparent}:host(.size-small){--le-button-padding-x:0.4rem;--le-button-padding-y:0.3rem;--le-button-padding-top:0.35rem;--le-button-font-size:var(--le-button-small-font-size, var(--le-font-size-xs))}:host(.size-large){--le-button-padding-x:0.9rem;--le-button-padding-y:0.6rem;--le-button-font-size:var(--le-font-size-xl)}:host(.full-width){display:block;width:100%}:host(.selected) .le-button-container{box-shadow:inset 0 0 4px var(--le-color-shadow)}:host(.variant-outlined.selected) .le-button-container,:host(.variant-clear.selected) .le-button-container{background:var(--_btn-bg);color:var(--_btn-color)}:host(.icon-only) .le-button-container{padding:var(--le-button-icon-only-padding, 0.5rem);padding-bottom:var(--le-button-icon-only-padding, 0.6rem);aspect-ratio:var(--le-button-icon-aspect-ratio, 1)}:host(.icon-only.size-small) .le-button-container{padding:var(--le-button-small-padding, 0.25rem)}:host(.icon-only.size-large) .le-button-container{padding:0.75rem}:host(.icon-only) .content{display:none}.content{display:inline}.content:empty{display:none}.icon-start,.icon-only,.icon-end{display:flex;align-items:center;justify-content:center}.icon-start:empty,.icon-only:empty,.icon-end:empty{display:none}::slotted([slot="icon-start"]),::slotted([slot="icon-only"]),::slotted([slot="icon-end"]){display:flex;align-items:center;justify-content:center;width:1.125em;height:1.125em}.le-button-align-start{justify-content:flex-start}.le-button-align-center{justify-content:center}.le-button-align-space-between{justify-content:space-between}.le-button-align-end{justify-content:flex-end}`;
-
-const LeButton = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.leClick = createEvent(this, "click");
-    }
-    get el() { return getElement(this); }
-    /**
-     * Mode of the popover should be 'default' for internal use
-     */
-    mode;
-    /**
-     * Button variant style
-     * @allowedValues solid | outlined | clear
-     */
-    variant = 'solid';
-    /**
-     * Button color theme (uses theme semantic colors)
-     * @allowedValues primary | secondary | success | warning | danger | info
-     */
-    color = 'primary';
-    /**
-     * Button size
-     * @allowedValues small | medium | large
-     */
-    size = 'medium';
-    /**
-     * Whether the button is in a selected/active state
-     */
-    selected = false;
-    /**
-     * Whether the button takes full width of its container
-     */
-    fullWidth = false;
-    /**
-     * 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 = classnames(`variant-${this.variant}`, `color-${this.color}`, `size-${this.size}`, {
-            'selected': this.selected,
-            'full-width': this.fullWidth,
-            'icon-only': this.iconOnly,
-            'disabled': this.disabled,
-        });
-        const TagType = this.href ? 'a' : 'button';
-        const attrs = this.href
-            ? { href: this.href, target: this.target, role: 'button' }
-            : { type: this.type, disabled: this.disabled };
-        return (h(Host, { key: 'a42aef03b5faf34f47b50dff799316a6815babd5', class: classes }, h("le-component", { key: '86ef8acf04d43e829b83d3e225f210acefc99515', component: "le-button" }, h(TagType, { key: '44145a5244577aab167c103501b788f0088799e3', class: classnames('le-button-container', `le-button-align-${this.align}`), part: "button", ...attrs, onClick: this.handleClick }, this.iconOnly !== undefined ? (h("slot", { name: "icon-only" }, typeof this.iconOnly === 'string' ? this.iconOnly : null)) : (h(Fragment, null, h("span", { class: "le-button-label" }, this.iconStart && (h("span", { class: "icon-start", part: "icon-start" }, this.iconStart)), h("le-slot", { name: "", description: "Button text", type: "text", class: "content", part: "content" }, h("slot", null))), this.iconEnd && (h("span", { class: "icon-end", part: "icon-end" }, this.iconEnd))))))));
-    }
-};
-LeButton.style = leButtonCss();
-
-const leCheckboxCss = () => `:host{display:block;--le-checkbox-size:18px;--le-checkbox-color:var(--le-color-primary, #007bff);--le-checkbox-label-color:var(--le-color-text-primary, #333);--le-checkbox-desc-color:var(--le-color-text-secondary, #666);--le-checkbox-border-radius:var(--le-radius-sm, 2px);--le-checkbox-marker-color:var(--le-color-surface, #fff)}.le-checkbox-wrapper{display:flex;flex-direction:column;gap:4px}.le-checkbox-label{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;user-select:none}:host([disabled]) .le-checkbox-label{cursor:not-allowed;opacity:0.6}.le-checkbox-input{display:flex;align-items:center;justify-content:center;min-height:1.4em}input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:var(--le-checkbox-size);height:var(--le-checkbox-size);border:var(--le-border-width, 2px) solid var(--le-checkbox-color);border-radius:var(--le-checkbox-border-radius);margin:0;margin-top:2px;position:relative;cursor:inherit;background-color:transparent;transition:background-color 0.2s, border-color 0.2s}input[type="checkbox"]:checked{background-color:var(--le-checkbox-color)}input[type="checkbox"]:checked::after{content:'';position:absolute;left:0;top:0;bottom:calc(var(--le-checkbox-size) / 5);right:0;margin:auto;width:calc(var(--le-checkbox-size) / 4);height:calc(var(--le-checkbox-size) / 2);border:solid var(--le-checkbox-marker-color, #fff);border-width:0 calc(var(--le-checkbox-size) / 10) calc(var(--le-checkbox-size) / 10) 0;transform:rotate(45deg)}input[type="checkbox"]:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px}.le-checkbox-text{flex:1;flex-wrap:wrap;color:var(--le-checkbox-label-color);line-height:1.5;text-align:start}.le-checkbox-description{margin-left:calc(var(--le-checkbox-size) + 8px);font-size:0.875em;color:var(--le-checkbox-desc-color);line-height:1.4}:host [slot="description"]{margin:0}`;
-
-const LeCheckbox = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.leChange = createEvent(this, "change");
-    }
-    get el() { return getElement(this); }
-    /**
-     * Whether the checkbox is checked
-     */
-    checked = false;
-    /**
-     * Whether the checkbox is disabled
-     */
-    disabled = false;
-    /**
-     * The name of the checkbox input
-     */
-    name;
-    /**
-     * The value of the checkbox input
-     */
-    value;
-    /**
-     * External ID for linking with external systems (e.g. database ID, PDF form field ID)
-     */
-    externalId;
-    /**
-     * Emitted when the checked state changes
-     */
-    leChange;
-    handleChange = (event) => {
-        // We stop the internal button click from bubbling up
-        event.stopPropagation();
-        if (this.disabled) {
-            event.preventDefault();
-            return;
-        }
-        const input = event.target;
-        this.checked = input.checked;
-        this.leChange.emit({
-            checked: this.checked,
-            value: this.value,
-            name: this.name,
-            externalId: this.externalId
-        });
-    };
-    render() {
-        return (h("le-component", { key: 'cb04cc6a990ee321dd7e8fca2f0bf56c76a865fa', component: "le-checkbox", hostClass: classnames({ 'disabled': this.disabled }) }, h("div", { key: '1b8737eb0d572ba5fdf8c2cfc5ced4af5ef30997', class: "le-checkbox-wrapper" }, h("label", { key: '1d26d68565ade32489f2fade8120c7b8ad75b251', class: "le-checkbox-label" }, h("span", { key: '7e6b5e610c9f16c36b93c57284891366e6b3b756', class: "le-checkbox-input" }, h("input", { key: 'a12a374aa69526d802f36f00b0ae4bcd4ed27bc3', type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.handleChange })), h("span", { key: 'e4ea1f85102c99751f9853b8e23fbd40ebd24780', class: "le-checkbox-text" }, h("le-slot", { key: 'cdda2111e4dfa6d7270280bac305255980842d48', name: "", type: "text", tag: "span" }, h("slot", { key: '32f57155d7a56f48e5780e37ea1ccac308db6848' })))), h("div", { key: '37d54d8c87b90987653f66a319958849893e7d91', class: "le-checkbox-description" }, h("le-slot", { key: 'fceedc24ef6a3561120456e9b387801a40c5919c', name: "description", type: "text", tag: "div", label: "Description" }, h("slot", { key: 'f1f87b7192565831a2f20428e8e2c0a974166dfd', name: "description" }))))));
-    }
-};
-LeCheckbox.style = leCheckboxCss();
-
-const leCollapseCss = () => `:host{--le-collapse-duration:var(--le-transition-normal);display:grid;grid-template-rows:1fr;opacity:1;transition:grid-template-rows var(--le-collapse-duration),
-    opacity var(--le-collapse-duration)}:host([data-open="false"]),:host([closed]){grid-template-rows:0fr;opacity:0}:host([no-fading][data-open="false"]),:host([no-fading][closed]){opacity:1}.region{display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}.region.scroll-down{justify-content:flex-start}`;
-
-const LeCollapse = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    get el() { return 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.
-     */
-    handleHeaderShrink(ev) {
-        const e = ev;
-        this.headerShrunk = !!e.detail?.shrunk;
-    }
-    headerShrunk = false;
-    componentDidLoad() {
-        this.applyOpenState();
-    }
-    onOpenChange() {
-        this.applyOpenState();
-    }
-    onDrivenStateChange() {
-        this.applyOpenState();
-    }
-    shouldBeOpen() {
-        if (this.closed)
-            return false;
-        if (this.collapseOnHeaderShrink && this.headerShrunk)
-            return false;
-        return true;
-    }
-    applyOpenState() {
-        const nextOpen = this.shouldBeOpen();
-        this.el.toggleAttribute('data-open', nextOpen);
-    }
-    render() {
-        return (h(Host, { key: 'e0882ec40ed132dbd6eeaa43da4aff03b6e45352', "data-open": this.shouldBeOpen() ? 'true' : 'false' }, h("le-component", { key: '55c98e5382ddd6b5ef8a8f506f9a2901fc0b48ce', component: "le-collapse" }, h("div", { key: '0bcfa5aada8a7a6f9c86011e6a3dfa5bbb5e08c4', class: { 'region': true, 'scroll-down': this.scrollDown }, part: "region" }, h("slot", { key: '7b762e372802512a287ae98d4aeecdb3160bb54e' })))));
-    }
-    static get watchers() { return {
-        "open": ["onOpenChange"],
-        "headerShrunk": ["onDrivenStateChange"]
-    }; }
-};
-LeCollapse.style = leCollapseCss();
-
-const leComponentCss = () => `:host{display:contents}:host(.admin-mode){display:block}.le-component-wrapper{position:relative;border:2px dashed var(--le-admin-border-color, #90caf9);border-radius:var(--le-radius-md, 8px);background:var(--le-admin-bg, rgba(144, 202, 249, 0.05));transition:border-color 0.2s ease, box-shadow 0.2s ease}.le-component-wrapper:hover{border-color:var(--le-admin-border-hover, #42a5f5);box-shadow:0 0 0 2px var(--le-admin-glow, rgba(66, 165, 245, 0.2))}.le-component-header{display:flex;align-items:center;justify-content:space-between;gap:var(--le-spacing-1, 4px);padding:0 0 0 var(--le-spacing-1, 4px);background:var(--le-admin-header-bg, rgba(144, 202, 249, 0.15));border-bottom:1px solid var(--le-admin-border-color, #90caf9);border-radius:var(--le-radius-md, 8px) var(--le-radius-md, 8px) 0 0;font-size:var(--le-font-size-xs, 11px)}.le-component-name{font-weight:var(--le-font-weight-medium, 500);color:var(--le-admin-text, #1976d2);text-transform:capitalize;text-align:start;overflow:hidden;width:0;flex:1 1 0%}.le-component-content{padding:var(--le-space-xs, 4px)}.le-component-trigger{font-size:24px;line-height:0px;width:12px;height:12px}.le-component-button{width:20px}.property-editor{display:flex;flex-direction:column;gap:var(--le-space-sm, 8px);max-width:380px}.property-field{display:flex;flex-direction:column;gap:var(--le-space-xs, 4px)}.property-field label{display:flex;flex-direction:column;gap:2px;font-size:var(--le-font-size-sm, 13px);font-weight:var(--le-font-weight-medium, 500);color:var(--le-color-text, #333)}.property-hint{font-size:var(--le-font-size-xs, 11px);font-weight:normal;color:var(--le-color-text-secondary, #666);line-height:1.3}.property-field input[type="text"],.property-field input[type="number"],.property-field select{padding:var(--le-space-xs, 4px) var(--le-space-sm, 8px);border:1px solid var(--le-color-border, #ddd);border-radius:var(--le-radius-md, 7px);font-size:var(--le-font-size-sm, 13px);font-family:inherit;background:var(--le-color-surface, #fff);color:var(--le-color-text, #333);transition:border-color 0.15s ease, box-shadow 0.15s ease}.property-field input:focus,.property-field select:focus{outline:none;border-color:var(--le-color-primary, #1976d2);box-shadow:0 0 0 2px var(--le-color-primary-light, rgba(25, 118, 210, 0.2))}.property-field--checkbox{flex-direction:column}.property-field--checkbox label{flex-direction:row;align-items:center;gap:var(--le-space-sm, 8px);cursor:pointer}.property-field--checkbox input[type="checkbox"]{width:16px;height:16px;margin:0;cursor:pointer;accent-color:var(--le-color-primary, #1976d2)}.property-field--checkbox .property-hint{margin-left:24px}.no-properties{margin:0;padding:var(--le-space-sm, 8px);font-size:var(--le-font-size-sm, 13px);color:var(--le-color-text-secondary, #666);text-align:center}.property-editor-container{display:flex;flex-direction:column;gap:var(--le-space-md, 12px)}.property-editor-actions{padding-top:var(--le-space-sm, 8px);border-top:1px solid var(--le-color-border, #e5e5e5)}.delete-component-btn{display:flex;align-items:center;justify-content:center;gap:var(--le-space-xs, 4px);width:100%;padding:var(--le-space-sm, 8px) var(--le-space-md, 12px);border:1px solid var(--le-color-danger, #e53935);border-radius:var(--le-radius-md, 6px);background:transparent;color:var(--le-color-danger, #e53935);font-size:var(--le-font-size-sm, 13px);font-weight:500;cursor:pointer;transition:background-color 0.15s, color 0.15s}.delete-component-btn:hover{background:var(--le-color-danger, #e53935);color:white}.delete-component-btn:active{opacity:0.9}`;
-
-const LeComponent = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    get el() { return getElement(this); }
-    /**
-     * The tag name of the component (e.g., 'le-card').
-     * Used to look up property metadata and display the component name.
-     */
-    component;
-    /**
-     * Optional display name for the component.
-     * If not provided, the tag name will be formatted as the display name.
-     */
-    displayName;
-    /**
-     * Classes to apply to the host element.
-     * Allows parent components to pass their styling classes.
-     */
-    hostClass;
-    /**
-     * Inline styles to apply to the host element.
-     * Allows parent components to pass dynamic styles (e.g., flex properties).
-     */
-    hostStyle;
-    /**
-     * Reference to the host element (found automatically from parent)
-     */
-    hostElement;
-    /**
-     * Internal state to track admin mode
-     */
-    adminMode = false;
-    /**
-     * Component metadata loaded from Custom Elements Manifest
-     */
-    componentMeta = null;
-    /**
-     * Current property values of the host component
-     */
-    propertyValues = {};
-    disconnectModeObserver;
-    connectedCallback() {
-        // Find the host element - le-component is rendered inside the component's shadow DOM,
-        // so we need to find the shadow root's host element
-        this.findHostElement();
-        this.disconnectModeObserver = observeModeChanges(this.el, mode => {
-            this.adminMode = mode === 'admin';
-            // Load metadata and refresh property values only when entering admin mode
-            if (this.adminMode) {
-                if (!this.componentMeta) {
-                    this.loadComponentMetadata();
-                }
-                else {
-                    this.readPropertyValues();
-                }
-            }
-        });
-    }
-    /**
-     * Find the host element by traversing up through shadow DOM
-     */
-    findHostElement() {
-        // Get the shadow root that contains this le-component
-        const rootNode = this.el.getRootNode();
-        if (rootNode instanceof ShadowRoot) {
-            // The host of this shadow root is our target component (e.g., le-card)
-            this.hostElement = rootNode.host;
-        }
-    }
-    componentDidLoad() {
-        // Read initial property values from the host element
-        this.readPropertyValues();
-    }
-    disconnectedCallback() {
-        this.disconnectModeObserver?.();
-    }
-    /**
-     * Formats a tag name into a display name
-     * e.g., 'le-card' -> 'Card'
-     */
-    formatDisplayName(tagName) {
-        if (!tagName || typeof tagName !== 'string')
-            return 'unknown';
-        return tagName
-            .replace(/^le-/, '') // Remove 'le-' prefix
-            .split('-')
-            .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-            .join(' ');
-    }
-    /**
-     * Load component metadata from the Custom Elements Manifest
-     */
-    async loadComponentMetadata() {
-        try {
-            // Fetch the manifest from configured URL
-            const { manifestFile } = getLeKitConfig();
-            const manifestFileResolved = getAssetPath(`./assets/${manifestFile}`);
-            const response = await fetch(manifestFileResolved);
-            const manifest = await response.json();
-            // Find the component definition
-            for (const module of manifest.modules) {
-                for (const declaration of module.declarations || []) {
-                    if (declaration.tagName === this.component) {
-                        const attributes = (declaration.attributes || []).filter((attr) => !this.isInternalAttribute(attr.name));
-                        this.componentMeta = {
-                            tagName: declaration.tagName,
-                            description: declaration.description,
-                            attributes,
-                        };
-                        // console.log(`[le-component] Loaded metadata for ${this.component}:`, this.componentMeta);
-                        // Read property values after metadata is loaded
-                        this.readPropertyValues();
-                        return;
-                    }
-                }
-            }
-            // console.warn(`[le-component] No metadata found for component: ${this.component}`);
-        }
-        catch (error) {
-            // console.warn(`[le-component] Failed to load metadata for component: ${this.component}`, error);
-        }
-    }
-    /**
-     * Check if an attribute is internal (should not be shown in editor)
-     */
-    isInternalAttribute(name) {
-        const internalAttrs = ['mode', 'theme', 'class', 'style', 'id', 'slot'];
-        return internalAttrs.includes(name);
-    }
-    /**
-     * Read current property values from the host element
-     */
-    readPropertyValues() {
-        if (!this.hostElement || !this.componentMeta)
-            return;
-        const values = {};
-        for (const attr of this.componentMeta.attributes) {
-            const value = this.hostElement.getAttribute(attr.name);
-            values[attr.name] = this.parseAttributeValue(value, attr.type?.text);
-        }
-        this.propertyValues = values;
-    }
-    /**
-     * Parse an attribute value based on its type
-     */
-    parseAttributeValue(value, type) {
-        if (value === null)
-            return undefined;
-        if (type === 'boolean') {
-            return value !== null && value !== 'false';
-        }
-        if (type === 'number') {
-            return parseFloat(value);
-        }
-        return value;
-    }
-    /**
-     * Handle property value changes from the editor
-     */
-    handlePropertyChange(attrName, value, type) {
-        if (!this.hostElement)
-            return;
-        // Update the host element's attribute
-        if (type === 'boolean') {
-            if (value) {
-                this.hostElement.setAttribute(attrName, '');
-            }
-            else {
-                this.hostElement.removeAttribute(attrName);
-            }
-        }
-        else if (value === undefined || value === '') {
-            this.hostElement.removeAttribute(attrName);
-        }
-        else {
-            this.hostElement.setAttribute(attrName, String(value));
-        }
-        // Update local state
-        this.propertyValues = { ...this.propertyValues, [attrName]: value };
-        // update the host element the way the parent element mutation observer would catch it?
-    }
-    /**
-     * Delete this component from the DOM
-     */
-    deleteComponent() {
-        if (!this.hostElement)
-            return;
-        // Confirm deletion
-        const name = this.displayName || this.formatDisplayName(this.component);
-        if (!leConfirm(`Delete this ${name}?`))
-            return;
-        // Remove the host element from its parent
-        const parent = this.hostElement.parentElement;
-        if (parent) {
-            this.hostElement.remove();
-        }
-    }
-    /**
-     * Render the property editor form
-     */
-    renderPropertyEditor() {
-        const hasProperties = this.componentMeta && this.componentMeta.attributes.length > 0;
-        return (h("div", { class: "property-editor-container" }, hasProperties ? (h("form", { class: "property-editor", onSubmit: e => e.preventDefault() }, this.componentMeta.attributes.map(attr => this.renderPropertyField(attr)))) : (h("p", { class: "no-properties" }, "No editable properties")), h("div", { class: "property-editor-actions" }, h("le-button", { type: "button", variant: "outlined", color: "danger", "full-width": true, onClick: () => this.deleteComponent() }, h("span", { slot: "icon-start" }, "\uD83D\uDDD1\uFE0F"), h("span", null, "Delete Component")))));
-    }
-    /**
-     * Render a single property field based on its type
-     */
-    renderPropertyField(attr) {
-        const value = this.propertyValues[attr.name];
-        const type = attr.type?.text || 'string';
-        // Check if type is a union of string literals (e.g., "'default' | 'outlined' | 'elevated'")
-        const enumMatch = type.match(/^'[^']+'/);
-        if (enumMatch) {
-            const options = type.split('|').map(opt => opt.trim().replace(/'/g, ''));
-            return (h("div", { class: "property-field" }, h("label", { htmlFor: `prop-${attr.name}` }, attr.name, attr.description && h("span", { class: "property-hint" }, attr.description)), h("le-select", { options: [...options.map(opt => ({ label: opt, value: opt }))], "full-width": true, value: value ?? attr.default?.replace(/'/g, ''), placeholder: attr.default?.replace(/'/g, ''), onChange: (e) => this.handlePropertyChange(attr.name, e.detail.value, type) })));
-        }
-        // Boolean type
-        if (type === 'boolean') {
-            return (h("div", { class: "property-field property-field--checkbox" }, h("le-checkbox", { name: `prop-${attr.name}`, checked: value === true || value === '', onChange: e => this.handlePropertyChange(attr.name, e.target.checked, type) }, attr.name, attr.description && h("div", { slot: "description" }, attr.description))));
-        }
-        // Number type
-        if (type === 'number') {
-            return (h("div", { class: "property-field" }, h("label", { htmlFor: `prop-${attr.name}` }, attr.name, attr.description && h("span", { class: "property-hint" }, attr.description)), h("input", { type: "number", id: `prop-${attr.name}`, value: value ?? '', placeholder: attr.default, onChange: e => this.handlePropertyChange(attr.name, e.target.value, type) })));
-        }
-        // Default: string/text input
-        return (h("div", { class: "property-field" }, h("le-string-input", { name: `prop-${attr.name}`, label: attr.name, value: value ?? '', placeholder: attr.default?.replace(/'/g, ''), onChange: (e) => this.handlePropertyChange(attr.name, e.detail.value, type) }, h("span", { slot: "description" }, attr.description))));
-    }
-    render() {
-        const name = this.displayName || this.formatDisplayName(this.component);
-        // In default mode, just pass through content with host classes
-        if (!this.adminMode) {
-            return (h(Host, { class: classnames(this.component, this.hostClass), style: this.hostStyle }, h("slot", null)));
-        }
-        // In admin mode, show wrapper with header and settings
-        return (h(Host, { class: classnames(this.component, this.hostClass, 'admin-mode'), style: this.hostStyle }, h("div", { class: "le-component-wrapper" }, h("div", { class: "le-component-header" }, h("span", { class: "le-component-name" }, name), h("le-popover", { popoverTitle: `${name} Settings`, position: "right", align: "start", "min-width": "300px", mode: "default" }, h("le-button", { type: "button", class: "le-component-button", slot: "trigger", variant: "clear", size: "small", "aria-label": "Edit component properties", "icon-only": true }, h("span", { class: "le-component-trigger", slot: "icon-only" }, "\u2699")), this.renderPropertyEditor())), h("div", { class: "le-component-content" }, h("slot", null)))));
-    }
-    static get assetsDirs() { return ["assets"]; }
-};
-LeComponent.style = leComponentCss();
-
-const leCurrentHeadingCss = () => `:host{display:inline-flex;min-width:0}.title{font:inherit;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--le-current-heading-color, var(--le-color-text-primary))}`;
-
-const LeCurrentHeading = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    get el() { return getElement(this); }
-    /** CSS selector for page title/headings to watch (e.g. `.page-title`, `main h2`). */
-    selector = '';
-    activeText = null;
-    componentWillLoad() {
-        this.updateActiveTitle();
-    }
-    onSelectorChange() {
-        this.updateActiveTitle();
-    }
-    onScroll() {
-        this.updateActiveTitle();
-    }
-    onResize() {
-        this.updateActiveTitle();
-    }
-    updateActiveTitle() {
-        if (typeof window === 'undefined')
-            return;
-        const selector = (this.selector ?? '').trim();
-        if (!selector) {
-            this.activeText = null;
-            return;
-        }
-        let elements = [];
-        try {
-            elements = Array.from(document.querySelectorAll(selector));
-        }
-        catch {
-            this.activeText = null;
-            return;
-        }
-        // Pick the last element that is fully above the viewport.
-        let nextText = null;
-        for (const element of elements) {
-            const rect = element.getBoundingClientRect();
-            if (rect.height > 0 && rect.bottom <= 0) {
-                const t = (element.textContent ?? '').trim();
-                if (t)
-                    nextText = t;
-            }
-        }
-        // Do not create oscillations: update only when the computed title changes.
-        if (nextText !== this.activeText) {
-            this.activeText = nextText;
-        }
-    }
-    render() {
-        return (h(Host, { key: 'c8d94a695a402039000210914b6780264a034a89' }, this.activeText ? (h("span", { class: "title", part: "title" }, this.activeText)) : (h("slot", null))));
-    }
-    static get watchers() { return {
-        "selector": ["onSelectorChange"]
-    }; }
-};
-LeCurrentHeading.style = leCurrentHeadingCss();
-
-const leDropdownBaseCss = () => `:host{display:block;--le-dropdown-list-padding:var(--le-spacing-1);--le-dropdown-empty-padding:var(--le-spacing-4);--le-dropdown-option-radius:var(--le-radius-md);--le-dropdown-font-size:var(--le-font-size-sm);--le-dropdown-option-padding:var(--le-spacing-1) var(--le-spacing-2);--le-dropdown-group-padding:var(--le-spacing-2) var(--le-spacing-2) var(--le-spacing-1);--le-dropdown-group-font-size:var(--le-font-size-xs)}:host([disabled]){pointer-events:none;opacity:0.5}le-popover::part(content){overflow-y:auto;overflow-x:hidden;padding:var(--le-dropdown-list-padding, 0.25rem)}.dropdown-empty{padding:var(--le-dropdown-empty-padding);text-align:center;color:var(--le-color-text-secondary, #9ca3af);font-size:var(--le-dropdown-font-size)}.dropdown-group-header{padding:var(--le-dropdown-group-padding);font-size:var(--le-dropdown-group-font-size);font-weight:700;color:var(--le-color-text-secondary, #9ca3af);letter-spacing:0.05em}.dropdown-list{text-align:initial}.dropdown-separator{height:1px;margin:var(--le-dropdown-separator-margin, 0.25rem 0);background:var(--le-color-border, #e5e7eb)}.dropdown-option{display:flex;align-items:center;gap:var(--le-dropdown-option-gap, 0.5rem);padding:var(--le-dropdown-option-padding);font-size:var(--le-dropdown-font-size, 0.875rem);line-height:1.4;color:var(--le-color-text, #1f2937);border:1px solid transparent;border-radius:var(--le-dropdown-option-radius, 0.25rem);cursor:pointer;user-select:none;transition:background-color 0.1s ease}.dropdown-option:hover,.dropdown-option.is-focused{border-color:var(--le-color-border-hover, #d1d5db)}.dropdown-option.is-disabled{opacity:0.5;cursor:not-allowed}.dropdown-option.is-disabled:hover{background:transparent}.option-checkbox{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;border:2px solid var(--le-color-border, #d1d5db);border-radius:0.25rem;background:var(--le-color-surface, #fff);flex-shrink:0}.is-selected .option-checkbox{background:var(--le-color-primary, #3b82f6);border-color:var(--le-color-primary, #3b82f6);color:white}.option-checkbox svg{width:0.75rem;height:0.75rem}.option-icon-start,.option-icon-end{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem}.option-icon-start img,.option-icon-end img{width:100%;height:100%;object-fit:contain}.option-content{flex:1;min-width:0;display:flex;flex-direction:column}.option-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.option-description{font-size:0.75rem;color:var(--le-color-text-muted, #6b7280);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.option-check{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;color:var(--le-color-primary, #3b82f6);flex-shrink:0}.option-check svg{width:1rem;height:1rem}`;
-
-const LeDropdownBase = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.leOptionSelect = createEvent(this, "leOptionSelect");
-        this.leDropdownOpen = createEvent(this, "leDropdownOpen");
-        this.leDropdownClose = createEvent(this, "leDropdownClose");
-    }
-    get el() { return getElement(this); }
-    /**
-     * The options to display in the dropdown.
-     */
-    options = [];
-    /**
-     * Current value(s) - single value or array for multiselect.
-     */
-    value;
-    /**
-     * Whether multiple selection is allowed.
-     */
-    multiple = false;
-    /**
-     * Whether the dropdown is open.
-     */
-    open = false;
-    /**
-     * Whether the dropdown is disabled.
-     */
-    disabled = false;
-    /**
-     * Filter function for options.
-     * Return true to include the option.
-     */
-    filterFn;
-    /**
-     * Current filter query string.
-     */
-    filterQuery = '';
-    /**
-     * Placeholder text when no options match filter.
-     */
-    emptyText = 'No options';
-    /**
-     * Whether to show checkboxes for multiselect mode.
-     */
-    showCheckboxes = true;
-    /**
-     * Maximum height of the dropdown list.
-     */
-    maxHeight = '300px';
-    /**
-     * Width of the dropdown. If not set, matches trigger width.
-     */
-    width;
-    /**
-     * Sets the dropdown to full width of the trigger.
-     */
-    fullWidth = false;
-    /**
-     * Whether to close the dropdown when clicking outside.
-     * (used to support combobox with input focus)
-     */
-    closeOnClickOutside = true;
-    /**
-     * Emitted when an option is selected.
-     */
-    leOptionSelect;
-    /**
-     * Emitted when the dropdown opens.
-     */
-    leDropdownOpen;
-    /**
-     * Emitted when the dropdown closes.
-     */
-    leDropdownClose;
-    focusedIndex = -1;
-    filteredOptions = [];
-    popoverEl;
-    listEl;
-    triggerWidth = 0;
-    handleOptionsChange() {
-        this.updateFilteredOptions();
-    }
-    componentWillLoad() {
-        this.updateFilteredOptions();
-    }
-    updateFilteredOptions() {
-        // Remember previously focused option
-        const focusedOption = this.filteredOptions[this.focusedIndex];
-        if (!this.filterQuery || !this.filterFn) {
-            this.filteredOptions = this.options;
-        }
-        else {
-            this.filteredOptions = this.options.filter(opt => this.filterFn(opt, this.filterQuery));
-        }
-        // try to maintain focus on same option if still present
-        if (focusedOption) {
-            const newIndex = this.filteredOptions.indexOf(focusedOption);
-            this.focusedIndex = newIndex >= 0 ? newIndex : this.getInitialFocusIndex();
-        }
-        else {
-            this.focusedIndex = -1;
-        }
-    }
-    getSelectableOptions() {
-        return this.filteredOptions.filter(opt => !opt.disabled);
-    }
-    isSelected(option) {
-        const optValue = option.value ?? option.label;
-        if (this.multiple && Array.isArray(this.value)) {
-            setTimeout(() => {
-                this.popoverEl?.updatePosition();
-            }, 50);
-            return this.value.includes(optValue);
-        }
-        return this.value === optValue;
-    }
-    handleOptionClick(option, e) {
-        e.preventDefault();
-        e.stopPropagation();
-        if (option.disabled)
-            return;
-        this.leOptionSelect.emit({
-            value: option.value ?? option.label,
-            option,
-        });
-        // Close dropdown for single select
-        if (!this.multiple) {
-            this.hide();
-        }
-    }
-    handleKeyDown = (e) => {
-        if (!this.open)
-            return;
-        const optionCount = this.filteredOptions.length;
-        switch (e.key) {
-            case 'ArrowDown':
-                e.preventDefault();
-                // check for the next non-disabled option and focus
-                let nextIndex = this.focusedIndex < optionCount - 1 ? this.focusedIndex + 1 : 0;
-                while (this.filteredOptions[nextIndex].disabled) {
-                    nextIndex = ++nextIndex < optionCount ? nextIndex : 0;
-                }
-                this.focusedIndex = nextIndex;
-                this.scrollToFocused();
-                break;
-            case 'ArrowUp':
-                e.preventDefault();
-                // check for the previous non-disabled option and focus
-                let prevIndex = this.focusedIndex > 0 ? this.focusedIndex - 1 : optionCount - 1;
-                while (this.filteredOptions[prevIndex].disabled) {
-                    prevIndex = --prevIndex >= 0 ? prevIndex : optionCount - 1;
-                }
-                this.focusedIndex = prevIndex;
-                this.scrollToFocused();
-                break;
-            case 'Home':
-                e.preventDefault();
-                // check for the first non-disabled option and focus
-                let firstIndex = 0;
-                while (this.filteredOptions[firstIndex].disabled) {
-                    firstIndex++;
-                    if (firstIndex >= optionCount) {
-                        firstIndex = -1;
-                        break;
-                    }
-                }
-                this.focusedIndex = firstIndex;
-                this.scrollToFocused();
-                break;
-            case 'End':
-                e.preventDefault();
-                // check for the last non-disabled option and focus
-                let lastIndex = optionCount - 1;
-                while (this.filteredOptions[lastIndex].disabled) {
-                    lastIndex--;
-                    if (lastIndex < 0) {
-                        lastIndex = -1;
-                        break;
-                    }
-                }
-                this.focusedIndex = lastIndex;
-                this.scrollToFocused();
-                break;
-            case 'Enter':
-            case ' ':
-                e.preventDefault();
-                if (this.focusedIndex >= 0 && this.focusedIndex < optionCount) {
-                    const option = this.filteredOptions[this.focusedIndex];
-                    if (!option || option.disabled)
-                        return;
-                    this.leOptionSelect.emit({
-                        value: option.value ?? option.label,
-                        option,
-                    });
-                    if (!this.multiple) {
-                        this.hide();
-                    }
-                }
-                break;
-            case 'Escape':
-                e.preventDefault();
-                this.hide();
-                break;
-            case 'Tab':
-                this.hide();
-                break;
-        }
-    };
-    scrollToFocused() {
-        if (!this.listEl || this.focusedIndex < 0)
-            return;
-        const focusedEl = this.listEl.querySelector(`[data-index="${this.focusedIndex}"]`);
-        if (focusedEl) {
-            focusedEl.scrollIntoView({ block: 'nearest' });
-        }
-    }
-    handlePopoverOpen = () => {
-        this.open = true;
-        this.focusedIndex = this.getInitialFocusIndex();
-        this.leDropdownOpen.emit();
-        // Add keyboard listener
-        document.addEventListener('keydown', this.handleKeyDown);
-    };
-    handlePopoverClose = () => {
-        this.open = false;
-        this.focusedIndex = -1;
-        this.leDropdownClose.emit();
-        // Remove keyboard listener
-        document.removeEventListener('keydown', this.handleKeyDown);
-    };
-    getInitialFocusIndex() {
-        // Focus on first selected option, or first option
-        const selectableOptions = this.getSelectableOptions();
-        const selectedIndex = selectableOptions.findIndex(opt => this.isSelected(opt));
-        return selectedIndex >= 0 ? selectedIndex : 0;
-    }
-    /**
-     * Opens the dropdown.
-     */
-    async show() {
-        if (this.disabled)
-            return;
-        // Capture trigger width for matching dropdown width
-        const trigger = this.el.querySelector('[slot="trigger"]');
-        if (trigger) {
-            this.triggerWidth = trigger.offsetWidth;
-        }
-        await this.popoverEl?.show();
-    }
-    /**
-     * Closes the dropdown.
-     */
-    async hide() {
-        await this.popoverEl?.hide();
-    }
-    /**
-     * Toggles the dropdown.
-     */
-    async toggle() {
-        if (this.open) {
-            await this.hide();
-        }
-        else {
-            await this.show();
-        }
-    }
-    renderIcon(icon, className) {
-        if (!icon)
-            return null;
-        if (icon.startsWith('http') || icon.startsWith('/')) {
-            return h("img", { class: className, src: icon, alt: "" });
-        }
-        return h("span", { class: className }, icon);
-    }
-    renderOption(option, index) {
-        const isSelected = this.isSelected(option);
-        const isFocused = index === this.focusedIndex;
-        const optionId = option.id || generateId();
-        return (h("div", { class: {
-                'dropdown-option': true,
-                'is-selected': isSelected,
-                'is-focused': isFocused,
-                'is-disabled': !!option.disabled,
-            }, role: "option", id: optionId, "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": option.disabled ? 'true' : undefined, "data-index": index, onClick: e => this.handleOptionClick(option, e), onMouseEnter: () => {
-                if (!option.disabled) {
-                    this.focusedIndex = index;
-                }
-            } }, this.renderIcon(option.iconStart, 'option-icon-start'), h("div", { class: "option-content" }, h("span", { class: "option-label" }, option.label), option.description && h("span", { class: "option-description" }, option.description)), this.renderIcon(option.iconEnd, 'option-icon-end'), (!this.multiple || this.showCheckboxes) && isSelected && (h("span", { class: "option-check" }, h("svg", { viewBox: "0 0 16 16", fill: "currentColor" }, h("path", { d: "M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z" }))))));
-    }
-    renderOptions() {
-        if (this.filteredOptions.length === 0) {
-            return h("div", { class: "dropdown-empty" }, this.emptyText);
-        }
-        // Group options if they have group property
-        const grouped = new Map();
-        const ungrouped = [];
-        this.filteredOptions.forEach(opt => {
-            if (opt.group) {
-                const group = grouped.get(opt.group) || [];
-                group.push(opt);
-                grouped.set(opt.group, group);
-            }
-            else {
-                ungrouped.push(opt);
-            }
-        });
-        // Build flat list with group headers for index tracking
-        let globalIndex = 0;
-        const elements = [];
-        // Render ungrouped options first
-        ungrouped.forEach(opt => {
-            if (opt.separator === 'before') {
-                elements.push(h("div", { class: "dropdown-separator", role: "separator" }));
-            }
-            elements.push(this.renderOption(opt, globalIndex++));
-            if (opt.separator === 'after') {
-                elements.push(h("div", { class: "dropdown-separator", role: "separator" }));
-            }
-        });
-        // Render grouped options
-        grouped.forEach((options, groupLabel) => {
-            elements.push(h("div", { class: "dropdown-group-header", role: "presentation" }, groupLabel));
-            options.forEach(opt => {
-                elements.push(this.renderOption(opt, globalIndex++));
-            });
-        });
-        return elements;
-    }
-    render() {
-        const dropdownWidth = this.width || (this.triggerWidth ? `${this.triggerWidth}px` : undefined);
-        return (h(Host, { key: '90bca5763b9110f8e5cad70870110cab1efeeec6' }, 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 }, h("slot", { key: '57e540660ee269de594209186d6fbe066b9c8fc1', name: "trigger", slot: "trigger" }), h("slot", { key: 'e58a76a0097f938873f5462c844ee9f1a5eece72', name: "header" }), 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()))));
-    }
-    static get watchers() { return {
-        "options": ["handleOptionsChange"],
-        "filterQuery": ["handleOptionsChange"]
-    }; }
-};
-LeDropdownBase.style = leDropdownBaseCss();
-
-const leHeaderCss = () => `:host{display:block;width:100%;--le-header-top-offset:0;--le-header-bg:var(--le-color-surface);--le-header-max-width:var(--le-header-max-width, auto);--le-header-margin:0 auto;--le-header-border:1px solid var(--le-color-border);--le-header-border-radius:0px;--le-header-shadow:var(--le-header-shadow, none);--le-header-color:var(--le-color-text);--le-header-content-max-width:800px;--le-header-padding-x:var(--le-space-md);--le-header-padding-y:var(--le-space-sm);--le-header-gap:var(--le-space-sm);--le-header-transition:var(--le-transition-normal);--le-header-z:1000}.header{width:100%;max-width:var(--le-header-max-width);margin:var(--le-header-margin);background:var(--le-header-bg);color:var(--le-header-color);border-bottom:var(--le-header-border);border-radius:var(--le-header-border-radius);box-shadow:var(--le-header-shadow)}:host(.is-fixed){position:fixed;top:var(--le-header-top-offset);left:0;right:0;z-index:var(--le-header-z)}:host(.is-sticky){position:sticky;top:var(--le-header-top-offset);z-index:var(--le-header-z)}:host(.is-static){position:relative}.inner{max-width:var(--le-header-content-max-width);margin:0 auto;padding:var(--le-header-padding-y) var(--le-header-padding-x)}.row{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);align-items:center;gap:var(--le-header-gap);transition:height var(--le-header-transition),
-    padding var(--le-header-transition),
-    transform var(--le-header-transition)}:host(.is-shrunk) .row{height:var(--le-header-height-condensed)}:host(.is-sticky.is-hidden){transform:translateY(-150%);transition:transform var(--le-header-transition)}:host(.is-sticky.is-revealed){transform:translateY(0);transition:transform var(--le-header-transition)}.start,.title,.end{min-width:0;display:flex;align-items:center}.start{justify-content:flex-start}.end{justify-content:flex-end}.title{justify-content:center;text-align:center}.title-slot ::slotted(*){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compact-title{font:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}`;
-
-const LeHeader = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.leHeaderState = createEvent(this, "leHeaderState");
-        this.leHeaderShrinkChange = createEvent(this, "leHeaderShrinkChange");
-        this.leHeaderVisibilityChange = createEvent(this, "leHeaderVisibilityChange");
-    }
-    get el() { return getElement(this); }
-    /** Force static positioning (default). Ignored if `sticky` or `fixed` are true. */
-    isStatic = false;
-    /** Sticky positioning (in-flow). Ignored if `fixed` is true. */
-    sticky = false;
-    /** Fixed positioning (out-of-flow). Takes precedence over `sticky`/`static`. */
-    fixed = false;
-    /**
-     * Sticky-only reveal behavior (hide on scroll down, show on scroll up).
-     * - missing/false: disabled
-     * - true/empty attribute: enabled with default threshold (16)
-     * - number (as string): enabled and used as threshold
-     */
-    revealOnScroll;
-    /**
-     * Shrink trigger.
-     * - missing/0: disabled
-     * - number (px): shrink when scrollY >= that value (but never before header height)
-     * - css var name (e.g. --foo): shrink when scrollY >= resolved var value
-     * - selector (e.g. .page-title): shrink when that element scrolls out of view above the viewport
-     */
-    shrinkOffset;
-    /**
-     * If true, expand the header when hovered
-     */
-    expandOnHover = false;
-    /** Emits whenever scroll-driven state changes. */
-    leHeaderState;
-    /** Emits when the header shrinks/expands (only on change). */
-    leHeaderShrinkChange;
-    /** Emits when the header hides/shows (only on change). */
-    leHeaderVisibilityChange;
-    revealed = true;
-    shrunk = false;
-    placeholderHeight = null;
-    hoverActive = false;
-    disconnectModeObserver;
-    rafId = null;
-    measureRafId = null;
-    lastY = 0;
-    lastEmittedDirection = 'down';
-    headerEl;
-    shrinkSelectorEl;
-    setShrunk(next, y) {
-        if (next === this.shrunk)
-            return;
-        this.shrunk = next;
-        this.leHeaderShrinkChange.emit({ shrunk: this.shrunk, y });
-    }
-    componentDidLoad() {
-        if (typeof window === 'undefined')
-            return;
-        this.lastY = window.scrollY || 0;
-        this.scheduleMeasure(true);
-        this.scheduleUpdate(true);
-    }
-    disconnectedCallback() {
-        this.disconnectModeObserver?.();
-        if (this.rafId != null) {
-            cancelAnimationFrame(this.rafId);
-            this.rafId = null;
-        }
-        if (this.measureRafId != null) {
-            cancelAnimationFrame(this.measureRafId);
-            this.measureRafId = null;
-        }
-    }
-    onBehaviorPropsChange() {
-        this.scheduleUpdate(true);
-        this.scheduleMeasure(true);
-    }
-    onWindowScroll() {
-        this.scheduleUpdate();
-    }
-    onWindowResize() {
-        this.scheduleMeasure(true);
-        this.scheduleUpdate(true);
-    }
-    getPosition() {
-        if (this.fixed)
-            return 'fixed';
-        if (this.sticky)
-            return 'sticky';
-        return 'static';
-    }
-    parseRevealThreshold() {
-        // Only applies in sticky mode.
-        if (!this.sticky || this.fixed)
-            return null;
-        if (this.revealOnScroll == null)
-            return null;
-        const raw = String(this.revealOnScroll).trim();
-        if (raw === '' || raw === 'true')
-            return 16;
-        if (raw === 'false')
-            return null;
-        const n = Number(raw);
-        return Number.isFinite(n) ? Math.max(0, n) : 16;
-    }
-    resolveShrinkStartPx() {
-        const raw = (this.shrinkOffset ?? '').trim();
-        if (!raw || raw === '0')
-            return null;
-        // Numeric
-        const numeric = Number(raw);
-        if (Number.isFinite(numeric))
-            return Math.max(0, numeric);
-        // CSS variable name
-        if (raw.startsWith('--')) {
-            const value = getComputedStyle(document.documentElement).getPropertyValue(raw).trim();
-            const v = Number(value.replace('px', '').trim());
-            return Number.isFinite(v) ? Math.max(0, v) : null;
-        }
-        // Selector
-        try {
-            const el = document.querySelector(raw);
-            this.shrinkSelectorEl = el;
-            return null;
-        }
-        catch {
-            this.shrinkSelectorEl = null;
-            return null;
-        }
-    }
-    scheduleUpdate(force = false) {
-        if (this.rafId != null) {
-            if (!force)
-                return;
-            cancelAnimationFrame(this.rafId);
-            this.rafId = null;
-        }
-        this.rafId = requestAnimationFrame(() => {
-            this.rafId = null;
-            this.updateFromScroll();
-        });
-    }
-    scheduleMeasure(force = false) {
-        if (this.measureRafId != null && !force)
-            return;
-        this.measureRafId = requestAnimationFrame(() => {
-            this.measureRafId = null;
-            this.measurePlaceholderHeight();
-        });
-    }
-    measurePlaceholderHeight() {
-        // Measure the rendered header height once (and on resize/mode change).
-        // This intentionally ignores scroll/shrink behavior; it should reserve the full header height.
-        if (!this.headerEl)
-            return;
-        const next = Math.ceil(this.headerEl.getBoundingClientRect().height);
-        if (!Number.isFinite(next) || next <= 0)
-            return;
-        if (next !== this.placeholderHeight) {
-            this.placeholderHeight = next;
-            // Publish to global root so placeholders anywhere can read it.
-            if (typeof document !== 'undefined') {
-                document.documentElement.style.setProperty('--le-header-height', `${next}px`);
-            }
-        }
-    }
-    updateFromScroll() {
-        const y = typeof window !== 'undefined' ? window.scrollY || 0 : 0;
-        const delta = y - this.lastY;
-        const direction = delta < 0 ? 'up' : 'down';
-        // Shrink behavior
-        let computedShrunk = false;
-        const headerHeight = Math.max(0, this.placeholderHeight ?? 0);
-        const shrinkStartPx = typeof window !== 'undefined' ? this.resolveShrinkStartPx() : null;
-        if (this.shrinkSelectorEl) {
-            const rect = this.shrinkSelectorEl.getBoundingClientRect();
-            computedShrunk = rect.bottom <= 0;
-        }
-        else if (shrinkStartPx != null) {
-            const effectiveStart = Math.max(shrinkStartPx, headerHeight);
-            computedShrunk = y >= effectiveStart;
-        }
-        // Hover override: when enabled and hovered, force expanded.
-        const nextShrunk = this.expandOnHover && this.hoverActive ? false : computedShrunk;
-        this.setShrunk(nextShrunk, y);
-        // Reveal-on-scroll (sticky-only)
-        const revealThreshold = this.parseRevealThreshold();
-        if (revealThreshold != null) {
-            // Always show the header near the top of the page.
-            const topLock = Math.max(0, this.placeholderHeight ?? 0);
-            if (y <= topLock) {
-                if (!this.revealed) {
-                    this.revealed = true;
-                    this.leHeaderVisibilityChange.emit({ visible: true, y });
-                }
-            }
-            else if (Math.abs(delta) >= revealThreshold) {
-                const nextRevealed = direction === 'up' || y <= 0;
-                if (nextRevealed !== this.revealed) {
-                    this.revealed = nextRevealed;
-                    this.leHeaderVisibilityChange.emit({ visible: this.revealed, y });
-                }
-                this.lastEmittedDirection = direction;
-            }
-        }
-        else {
-            if (!this.revealed) {
-                this.revealed = true;
-                this.leHeaderVisibilityChange.emit({ visible: true, y });
-            }
-        }
-        this.lastY = y;
-        this.leHeaderState.emit({
-            y,
-            direction: this.lastEmittedDirection,
-            revealed: this.revealed,
-            shrunk: this.shrunk,
-        });
-    }
-    render() {
-        const position = this.getPosition();
-        const hostClass = classnames('le-header', {
-            'header-is-shrunk': this.shrunk,
-            'is-fixed': position === 'fixed',
-            'is-sticky': position === 'sticky',
-            'is-static': position === 'static',
-            'is-revealed': this.revealed,
-            'is-hidden': !this.revealed,
-            'is-shrunk': this.shrunk,
-        });
-        return (h(Host, { key: 'd1a4ae64dff81139b1c35681698539fdf072ae66', class: hostClass, onMouseEnter: () => {
-                if (!this.expandOnHover)
-                    return;
-                this.hoverActive = true;
-                this.scheduleUpdate(true);
-            }, onMouseLeave: () => {
-                if (!this.expandOnHover)
-                    return;
-                this.hoverActive = false;
-                this.scheduleUpdate(true);
-            } }, h("le-component", { key: '305bc8b4aefaf2ef1dd7287422167cfd68d3e8c2', component: "le-header" }, h("header", { key: '1cf3b2ab01140e14870c1282e49e6eb3dbae5bf8', class: "header", part: "header", role: "banner", ref: el => (this.headerEl = el) }, h("div", { key: 'b238e3762dd31228f3ab3627fbca2ff1a9c630fd', class: "inner", part: "inner" }, h("div", { key: 'f186fbecc9c9b6f6f08f45c272c292af9333450e', class: "row", part: "row" }, h("div", { key: 'e496055801a36f4cf7a045513df2bc917a573786', class: "start", part: "start" }, 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" }, h("slot", { key: 'e7e2b7ad283ce089def47d1f11f78a8a1603face', name: "start" }))), h("div", { key: '145aaadb93972b9018f9303baee2d5b3c42db319', class: "title", part: "title" }, h("le-slot", { key: 'c488ef0d01da476a6351ae4b7dfb397950f9c3ce', name: "title", label: "Title", description: "Header title", type: "text", tag: "span" }, h("span", { key: '78c21f46cbc81dc720e2f803cb3edc81ba5f76cf', class: "title-slot", part: "title" }, h("slot", { key: 'a47d5c8d4d0ae42b1cb4d7fab98022cbb380a27e', name: "title" })))), h("div", { key: '5fb7c5febcfb9b837f313caa65ea9b5e08b6f9cb', class: "end", part: "end" }, h("le-slot", { key: 'cc2ed75ea779a29e5c616daafec3ef90bbec3cfc', name: "end", label: "End", description: "Actions", "allowed-components": "le-button,le-text,le-tag,le-box,le-stack" }, h("slot", { key: '135e8c2c0d7a7d9bef174f380d1f31d377cb043f', name: "end" })))), h("div", { key: 'b0d9e5fba045b7cfd5640e7ba700cb44d673f982', class: "secondary", part: "secondary" }, 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" }, h("slot", { key: '1266dc5bb54bf22055acbfc23befb398c1ee5a31' }))))))));
-    }
-    static get watchers() { return {
-        "revealOnScroll": ["onBehaviorPropsChange"],
-        "shrinkOffset": ["onBehaviorPropsChange"],
-        "fixed": ["onBehaviorPropsChange"],
-        "sticky": ["onBehaviorPropsChange"],
-        "isStatic": ["onBehaviorPropsChange"]
-    }; }
-};
-LeHeader.style = leHeaderCss();
-
-const leIconCss = () => `:host{display:inline-block;width:var(--le-icon-size, var(--le-size-4));height:var(--le-icon-size, var(--le-size-4));color:var(--le-icon-color, var(--le-color-text-primary))}:host svg{display:block;fill:currentColor}`;
-
-const iconCache = {};
-const requestCache = {};
-/**
- * Get the URL for loading an icon.
- * Uses configurable assetBasePath if set, otherwise falls back to Stencil's getAssetPath.
- */
-function getIconUrl(name) {
-    const basePath = getAssetBasePath();
-    if (basePath) {
-        // Use configured base path - normalize by removing trailing slash
-        const normalizedBase = basePath.endsWith('/') ? basePath.slice(0, -1) : basePath;
-        return `${normalizedBase}/icons/${name}.json`;
-    }
-    // Fall back to Stencil's getAssetPath for local development
-    return getAssetPath(`./assets/icons/${name}.json`);
-}
-async function fetchIcon({ name }) {
-    if (iconCache[name]) {
-        return iconCache[name];
-    }
-    if (!requestCache[name]) {
-        const iconUrl = getIconUrl(name);
-        requestCache[name] = fetch(iconUrl)
-            .then(resp => resp.json())
-            .catch(() => {
-            console.error(`Icon "${name}" could not be loaded from: ${iconUrl}`);
-            return '';
-        });
-    }
-    const path = await requestCache[name];
-    iconCache[name] = path;
-    return path;
-}
-const LeIcon = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    get el() { return 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) {
-            return;
-        }
-        this.iconData = await fetchIcon({ name });
-    }
-    intersectionObserver;
-    connectedCallback() {
-        this.waitUntilVisible(() => {
-            this.visible = true;
-            this.loadIconData();
-        });
-    }
-    disconnectedCallback() {
-        if (this.intersectionObserver) {
-            this.intersectionObserver.disconnect();
-            this.intersectionObserver = null;
-        }
-    }
-    async componentWillLoad() {
-        this.loadIconData();
-    }
-    waitUntilVisible(callback) {
-        if (typeof window === 'undefined' ||
-            !window.IntersectionObserver) {
-            callback();
-            return;
-        }
-        this.intersectionObserver = new IntersectionObserver(entries => {
-            entries.forEach(entry => {
-                if (entry.isIntersecting) {
-                    this.intersectionObserver.disconnect();
-                    this.intersectionObserver = null;
-                    callback();
-                }
-            });
-        }, { rootMargin: '50px' });
-        this.intersectionObserver.observe(this.el);
-    }
-    /**
-     * Renders the SVG content out of a JSON data in a format:
-     * { "viewBox": "...", children: [{ "tag": "g", ""children": [ ... ], ...attrs }, ...] }
-     *
-     * @returns JSX.Element | null
-     */
-    renderSVGContent(children) {
-        if (!children || children.length === 0) {
-            return null;
-        }
-        const createElement = node => {
-            const { tag, children, ...attrs } = node;
-            return h(tag, attrs, children ? children.map(createElement) : null);
-        };
-        const svgElements = children.map(createElement);
-        return svgElements;
-    }
-    render() {
-        return (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)));
-    }
-    static get assetsDirs() { return ["assets/icons"]; }
-    static get watchers() { return {
-        "name": ["loadIconData"]
-    }; }
-};
-LeIcon.style = leIconCss();
-
-const leNavigationCss = () => `:host{display:block;--le-nav-radius:var(--le-radius-md);--le-nav-gap:var(--le-spacing-2);--le-nav-item-padding-x:var(--le-spacing-1);--le-nav-item-padding-y:var(--le-spacing-2);--le-nav-item-gap:var(--le-spacing-2);--le-nav-link-padding-x:var(--le-spacing-2);--le-nav-link-padding-y:var(--le-spacing-1);--le-nav-link-gap:var(--le-spacing-1);--le-nav-color:var(--le-color-text-primary);--le-nav-muted:var(--le-color-text-secondary);--le-nav-hover-bg:var(--le-color-gray-100);--le-nav-selected-bg:var(--le-color-primary);--le-nav-selected-color:var(--le-color-primary-contrast)}:host([orientation='horizontal']:not([wrap])){flex:1 1 0%;min-width:0}.nav-vertical{display:flex;flex-direction:column;gap:var(--le-nav-gap)}.nav-search{width:100%}.nav-search-input{--le-input-radius:var(--le-radius-md)}.nav-empty{padding:var(--le-spacing-2);color:var(--le-nav-muted);font-size:var(--le-font-size-sm)}.nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--le-spacing-1)}.nav-row{display:flex;align-items:stretch;gap:var(--le-spacing-1);border-radius:var(--le-nav-radius)}.nav-row:hover{background:var(--le-nav-hover-bg)}.nav-toggle,.nav-toggle-spacer{box-sizing:border-box;width:var(--le-spacing-4);min-width:var(--le-spacing-4);display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:var(--le-nav-radius);color:inherit}.nav-toggle{background:transparent;cursor:pointer;opacity:0.4}.nav-toggle:hover:not(:disabled){opacity:1}.nav-toggle:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px;opacity:1}.nav-chevron{display:inline-block;transition:transform var(--le-transition-fast)}.nav-chevron svg{display:block;width:var(--le-spacing-4);height:var(--le-spacing-4)}.nav-node>div>button>.nav-chevron{transform:rotate(-90deg)}.nav-node.open>div>button>.nav-chevron{transform:rotate(0deg)}.nav-item{flex:1;display:inline-flex;align-items:center;gap:var(--le-nav-item-gap);padding:var(--le-nav-item-padding-y) var(--le-nav-item-padding-x) var(--le-nav-item-padding-y) 0;border-radius:var(--le-nav-radius);border:1px solid transparent;background:transparent;text-decoration:none;color:var(--le-nav-color);font-family:var(--le-font-family-base);font-size:var(--le-font-size-md);line-height:var(--le-line-height-tight);cursor:pointer}.nav-item:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px}.nav-node.selected>.nav-row{background:var(--le-nav-selected-bg);color:var(--le-nav-selected-color)}.nav-node.selected>.nav-row>.nav-item{color:inherit}.nav-node.disabled>.nav-row>.nav-item{opacity:0.5;cursor:not-allowed}.nav-text{display:flex;flex-direction:column;min-width:0}.nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nav-description{color:color-mix(in srgb, var(--le-nav-muted) 90%, transparent);font-size:var(--le-font-size-sm);line-height:var(--le-line-height-tight)}.nav-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.nav-icon-end{margin-left:auto}.nav-children{margin-top:var(--le-spacing-1)}.nav-horizontal-wrapper{display:flex;align-items:center;gap:var(--le-nav-gap)}.nav-bar{flex:1 1 0%;min-width:0;--le-bar-gap:var(--le-nav-gap)}.nav-bar.align-end{--le-bar-justify:flex-end}.nav-bar.align-center{--le-bar-justify:center}.nav-bar.align-space-between{--le-bar-justify:space-between}.nav-bar.overflow-more.has-overflow,.nav-bar.overflow-hamburger.has-overflow{margin-inline-end:calc((var(--le-nav-gap) + (var(--le-nav-link-padding-x) * 2)) * -1)}.h-item{display:flex;align-items:center}.h-link{display:inline-flex;align-items:center;gap:var(--le-nav-link-gap);padding:var(--le-nav-link-padding-y) var(--le-nav-link-padding-x);border-radius:var(--le-nav-radius);border:1px solid transparent;background:transparent;text-decoration:none;color:var(--le-nav-color);font-family:var(--le-font-family-base);font-size:var(--le-font-size-md);cursor:pointer}.h-link:hover{background:var(--le-nav-hover-bg)}.h-link:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px}.h-link.disabled,.h-trigger.disabled{opacity:0.5;pointer-events:none}.h-link.selected,.h-trigger.selected{background:var(--le-nav-selected-bg);color:var(--le-nav-selected-color)}.h-label{white-space:nowrap}.h-trigger{display:inline-flex;align-items:center;gap:var(--le-spacing-1);border-radius:var(--le-nav-radius)}.h-submenu-toggle{width:var(--le-spacing-3);height:var(--le-spacing-3);display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:var(--le-nav-radius);background:transparent;color:currentColor;cursor:pointer}.h-submenu-toggle:hover{background:var(--le-nav-hover-bg)}.overflow-trigger{display:inline-flex;align-items:center;justify-content:center;gap:var(--le-nav-link-gap);padding:var(--le-nav-link-padding-y) var(--le-nav-link-padding-x);border-radius:var(--le-nav-radius);border:1px solid transparent;background:transparent;color:var(--le-nav-color);cursor:pointer;font-family:var(--le-font-family-base);font-size:var(--le-font-size-md)}.overflow-trigger:hover{background:var(--le-nav-hover-bg)}.overflow-trigger:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px}.nav-overflow-trigger{display:flex;align-items:center}le-popover::part(content){padding:var(--le-spacing-1)}`;
-
-const LeNavigation = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.leNavItemSelect = createEvent(this, "leNavItemSelect");
-        this.leNavItemToggle = createEvent(this, "leNavItemToggle");
-    }
-    get el() { return 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 = generateId('le-nav');
-    partFromOptionPart(base, part) {
-        const raw = (part ?? '').trim();
-        if (!raw)
-            return base;
-        const tokens = raw
-            .split(/\s+/)
-            .map(t => t.replace(/[^a-zA-Z0-9_-]/g, ''))
-            .filter(Boolean);
-        if (tokens.length === 0)
-            return base;
-        return [base, ...tokens.map(t => `${base}-${t}`)].join(' ');
-    }
-    handleLayoutInputsChange() {
-        // Reset overflow state when layout inputs change
-        this.overflowIds = [];
-        this.hamburgerActive = false;
-    }
-    disconnectedCallback() {
-        // Cleanup if needed
-    }
-    get parsedItems() {
-        if (typeof this.items === 'string') {
-            try {
-                return JSON.parse(this.items);
-            }
-            catch {
-                return [];
-            }
-        }
-        return this.items;
-    }
-    getItemId(item, path) {
-        return item.id ?? `${this.instanceId}:${path}`;
-    }
-    getChildItems(item) {
-        return Array.isArray(item.children) ? item.children : [];
-    }
-    isOpen(item, id) {
-        const fromState = this.openState[id];
-        if (typeof fromState === 'boolean')
-            return fromState;
-        return !!item.open;
-    }
-    setOpen(id, open) {
-        if (this.openState[id] === open)
-            return;
-        this.openState = {
-            ...this.openState,
-            [id]: open,
-        };
-    }
-    matchesQuery(option, query) {
-        if (!query)
-            return true;
-        const q = query.toLowerCase();
-        return (option.label.toLowerCase().includes(q) ||
-            (option.description?.toLowerCase().includes(q) ?? false));
-    }
-    filterTree(items, query, pathPrefix, autoOpen) {
-        if (!query)
-            return items;
-        const result = [];
-        items.forEach((item, index) => {
-            const path = pathPrefix ? `${pathPrefix}.${index}` : String(index);
-            const id = this.getItemId(item, path);
-            const children = this.getChildItems(item);
-            const filteredChildren = this.filterTree(children, query, path, autoOpen);
-            const selfMatch = this.matchesQuery(item, query);
-            const childMatch = filteredChildren.length > 0;
-            if (selfMatch || childMatch) {
-                if (childMatch) {
-                    autoOpen.add(id);
-                }
-                if (childMatch && filteredChildren !== children) {
-                    result.push({
-                        ...item,
-                        children: filteredChildren,
-                    });
-                }
-                else {
-                    result.push(item);
-                }
-            }
-        });
-        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();
-        const filtered = query ? this.filterTree(items, query, pathPrefix, openFromSearch) : items;
-        return (h("div", { class: classnames('nav-vertical', { 'is-submenu': !!submenuId }) }, searchable && (h("div", { class: "nav-search" }, h("le-string-input", { mode: "default", class: "nav-search-input", placeholder: searchPlaceholder ?? 'Search...', value: query, onInput: (e) => submenuId ? this.handleSubmenuSearchInput(submenuId, e) : this.handleSearchInput(e) }))), filtered.length === 0 ? (h("div", { class: "nav-empty" }, emptyText ?? this.emptyText)) : (h("ul", { class: "nav-list", role: "tree" }, filtered.map((item, index) => {
-            const path = pathPrefix ? `${pathPrefix}.${index}` : String(index);
-            const id = this.getItemId(item, path);
-            const children = this.getChildItems(item);
-            const hasChildren = children.length > 0;
-            const open = hasChildren && (this.isOpen(item, id) || openFromSearch.has(id));
-            const paddingLeft = `calc(var(--le-nav-item-padding-x) + ${depth} * var(--le-spacing-4))`;
-            const TagType = item.href && !item.disabled ? 'a' : 'button';
-            const attrs = TagType === 'a'
-                ? { href: item.href, role: 'treeitem' }
-                : { type: 'button', role: 'treeitem' };
-            const itemPart = this.partFromOptionPart('item', item.part);
-            return (h("li", { class: classnames('nav-node', {
-                    'disabled': item.disabled,
-                    'selected': item.selected || (this.activeUrl && item.href === this.activeUrl),
-                    open,
-                    'has-children': hasChildren,
-                }), key: id, role: "none" }, h("div", { class: "nav-row", style: { paddingLeft } }, hasChildren ? (h("button", { type: "button", class: "nav-toggle", "aria-label": open ? 'Collapse' : 'Expand', "aria-expanded": open ? 'true' : 'false', onClick: (e) => this.handleToggle(e, item, id), disabled: item.disabled }, h("le-icon", { name: "chevron-down", class: "nav-chevron", "aria-hidden": "true" }))) : (h("span", { class: "nav-toggle-spacer", "aria-hidden": "true" })), h(TagType, { class: "nav-item", part: itemPart, ...attrs, "aria-disabled": item.disabled ? 'true' : undefined, onClick: (e) => {
-                    // For buttons, also toggle if this is a purely structural node.
-                    this.handleItemSelect(e, item, id);
-                    if (!item.href && hasChildren && !item.disabled) {
-                        this.handleToggle(e, item, id);
-                        return;
-                    }
-                    if (!item.disabled && closePopover) {
-                        closePopover();
-                    }
-                } }, item.iconStart && (h("span", { class: "nav-icon", "aria-hidden": "true" }, item.iconStart)), h("span", { class: "nav-text" }, h("span", { class: "nav-label" }, item.label), item.description && (h("span", { class: "nav-description" }, item.description))), item.iconEnd && (h("span", { class: "nav-icon nav-icon-end", "aria-hidden": "true" }, item.iconEnd)))), hasChildren && (h("le-collapse", { class: "nav-children", closed: !open, noFading: true, role: "group" }, this.renderVerticalList(children, {
-                depth: depth + 1,
-                pathPrefix: path,
-                autoOpenIds: openFromSearch,
-                submenuId,
-                closePopover,
-            })))));
-        })))));
-    }
-    renderHorizontalItem(item, index) {
-        const id = this.getItemId(item, String(index));
-        const children = this.getChildItems(item);
-        const hasChildren = children.length > 0;
-        if (!hasChildren) {
-            const TagType = item.href && !item.disabled ? 'a' : 'button';
-            const attrs = TagType === 'a'
-                ? { href: item.href, role: 'menuitem' }
-                : { type: 'button', role: 'menuitem' };
-            const itemPart = this.partFromOptionPart('item', item.part);
-            return (h("div", { class: "h-item", "data-bar-id": id }, h(TagType, { class: classnames('h-link', {
-                    disabled: item.disabled,
-                    selected: item.selected || (this.activeUrl && item.href === this.activeUrl),
-                }), part: itemPart, ...attrs, "aria-disabled": item.disabled ? 'true' : undefined, onClick: (e) => this.handleItemSelect(e, item, id) }, item.iconStart && (h("span", { class: "nav-icon", "aria-hidden": "true" }, item.iconStart)), h("span", { class: "h-label" }, item.label), item.iconEnd && (h("span", { class: "nav-icon nav-icon-end", "aria-hidden": "true" }, item.iconEnd)))));
-        }
-        const submenuId = id;
-        const itemPart = this.partFromOptionPart('item', item.part);
-        return (h("div", { class: "h-item", "data-bar-id": id }, h("le-popover", { ref: el => {
-                if (el)
-                    this.popoverRefs.set(submenuId, el);
-            }, mode: "default", offset: 8, showClose: false, closeOnClickOutside: true, closeOnEscape: true, position: "bottom", align: "start", minWidth: "240px" }, h("div", { slot: "trigger", class: classnames('h-trigger', {
-                disabled: item.disabled,
-                selected: item.selected || (this.activeUrl && item.href === this.activeUrl),
-            }), part: itemPart, role: "menuitem", "aria-disabled": item.disabled ? 'true' : undefined, onClick: (e) => {
-                // Don’t let le-popover auto-toggle from its internal wrapper.
-                e.stopPropagation();
-                if (item.disabled)
-                    return;
-                if (item.href) {
-                    this.handleItemSelect(e, item, id);
-                    this.popoverRefs.get(submenuId)?.hide();
-                }
-                else {
-                    this.popoverRefs.get(submenuId)?.toggle();
-                }
-            } }, item.href ? (h("a", { class: "h-link", href: item.href, onClick: (e) => {
-                e.stopPropagation();
-                this.handleItemSelect(e, item, id);
-            } }, item.iconStart && (h("span", { class: "nav-icon", "aria-hidden": "true" }, item.iconStart)), h("span", { class: "h-label" }, item.label), h("span", { class: "nav-chevron", "aria-hidden": "true" }, h("le-icon", { name: "chevron-down" })))) : (h("button", { type: "button", class: "h-link", onClick: (e) => {
-                e.stopPropagation();
-                if (item.disabled)
-                    return;
-                this.popoverRefs.get(submenuId)?.toggle();
-            } }, item.iconStart && (h("span", { class: "nav-icon", "aria-hidden": "true" }, item.iconStart)), h("span", { class: "h-label" }, item.label), h("span", { class: "nav-chevron", "aria-hidden": "true" }, h("le-icon", { name: "chevron-down" }))))), h("div", { class: "popover-menu" }, this.renderVerticalList(children, {
-            depth: 0,
-            pathPrefix: String(index),
-            searchable: this.submenuSearchable,
-            searchQuery: this.submenuQueries[submenuId] ?? '',
-            searchPlaceholder: this.searchPlaceholder,
-            emptyText: this.emptyText,
-            submenuId,
-            closePopover: () => this.popoverRefs.get(submenuId)?.hide(),
-        })))));
-    }
-    getOverflowMode() {
-        if (this.wrap)
-            return 'wrap';
-        return this.overflowMode;
-    }
-    getBarAlignment() {
-        // Map le-navigation align to le-bar alignItems
-        // 'space-between' doesn't map directly, use 'stretch' as closest
-        if (this.align === 'space-between')
-            return 'stretch';
-        return this.align;
-    }
-    renderOverflowPopover() {
-        const items = this.parsedItems;
-        const overflowSet = new Set(this.overflowIds || []);
-        // Determine which items to show in the popover
-        let itemsToShow;
-        if (this.hamburgerActive) {
-            // In hamburger mode, show all items
-            itemsToShow = items;
-        }
-        else {
-            // In "more" mode, show only overflow items
-            itemsToShow = items.filter((item, index) => {
-                const id = this.getItemId(item, String(index));
-                return overflowSet.has(id);
-            });
-        }
-        if (itemsToShow.length === 0)
-            return null;
-        const isHamburger = this.hamburgerActive;
-        return (h("le-popover", { mode: "default", offset: 8, open: this.overflowPopoverOpen, showClose: false, closeOnClickOutside: true, closeOnEscape: true, position: "bottom", align: "end", minWidth: "260px", onLePopoverClose: this.closeOverflowPopover }, h("button", { slot: "trigger", type: "button", class: "overflow-trigger", part: isHamburger ? 'hamburger-trigger' : 'more-trigger', "aria-label": isHamburger ? 'Open menu' : 'More', onClick: this.openOverflowPopover }, h("slot", { name: isHamburger ? 'hamburger-trigger' : 'more-trigger' }, h("le-icon", { name: isHamburger ? 'hamburger' : 'ellipsis-horizontal' }))), h("div", { class: "popover-menu" }, this.renderVerticalList(itemsToShow, {
-            depth: 0,
-            pathPrefix: '',
-            closePopover: this.closeOverflowPopover,
-        }))));
-    }
-    renderHorizontal() {
-        const items = this.parsedItems;
-        const overflowMode = this.getOverflowMode();
-        const showOverflowButton = (this.overflowIds?.length ?? 0) > 0 || this.hamburgerActive;
-        return (h("div", { class: "nav-horizontal-wrapper" }, h("le-bar", { class: classnames('nav-bar', {
-                'align-end': this.align === 'end',
-                'align-center': this.align === 'center',
-                'align-space-between': this.align === 'space-between',
-            }), overflow: overflowMode, alignItems: this.getBarAlignment(), disablePopover: true, minVisibleItems: this.minVisibleItemsForMore, onLeBarOverflowChange: this.handleBarOverflowChange }, items.map((item, index) => this.renderHorizontalItem(item, index))), showOverflowButton && this.renderOverflowPopover()));
-    }
-    render() {
-        const items = this.parsedItems;
-        if (this.orientation === 'horizontal') {
-            return (h(Host, null, h("le-component", { component: "le-navigation" }, this.renderHorizontal())));
-        }
-        return (h(Host, null, h("le-component", { component: "le-navigation" }, this.renderVerticalList(items, {
-            depth: 0,
-            pathPrefix: '',
-            searchable: this.searchable,
-            searchQuery: this.searchQuery,
-            searchPlaceholder: this.searchPlaceholder,
-            emptyText: this.emptyText,
-        }))));
-    }
-    static get watchers() { return {
-        "items": ["handleLayoutInputsChange"],
-        "orientation": ["handleLayoutInputsChange"],
-        "wrap": ["handleLayoutInputsChange"],
-        "overflowMode": ["handleLayoutInputsChange"]
-    }; }
-};
-LeNavigation.style = leNavigationCss();
-
-const lePopoverCss = () => `/* ============================================
-   le-popover.css
-   Popover using native HTML Popover API
-   ============================================ */
-
-:host {
-  display: inline-block;
-  position: relative;
-}
-
-:host([trigger-full-width]) {
-  display: block;
-  width: 100%;
-}
-
-/* ============================================
-   Trigger
-   ============================================ */
-
-.le-popover-trigger {
-  display: inline-flex;
-  cursor: pointer;
-}
-
-.le-popover-trigger-full-width {
-  display: flex;
-  width: 100%;
-}
-
-.le-popover-default-trigger {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  border: 1px solid var(--le-color-border, #e0e0e0);
-  border-radius: var(--le-radius-md, 6px);
-  background: var(--le-color-surface, #fff);
-  color: var(--le-color-text-secondary, #666);
-  font-size: 16px;
-  cursor: pointer;
-  transition: all var(--le-transition-fast, 0.15s ease);
-}
-
-.le-popover-default-trigger:hover {
-  border-color: var(--le-color-primary, #2196f3);
-  color: var(--le-color-primary, #2196f3);
-  background: var(--le-color-primary-light, rgba(33, 150, 243, 0.1));
-}
-
-/* ============================================
-   Popover Content (native popover)
-   ============================================ */
-
-.le-popover-content {
-  /* Reset native popover defaults */
-  margin: 0;
-  padding: 0;
-  border: none;
-  background: transparent;
-  
-  /* Positioning - will be set via JS */
-  position: fixed;
-  inset: unset;
-  
-  /* Styling */
-  background: var(--le-color-surface, #ffffff);
-  border: 1px solid var(--le-color-border, #e0e0e0);
-  border-radius: var(--le-radius-lg, 8px);
-  box-shadow: var(--le-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.15));
-  overflow: hidden;
-  font-family: var(--le-font-family, system-ui, -apple-system, sans-serif);
-  font-size: var(--le-font-size-sm, 0.875rem);
-  color: var(--le-color-text, #333);
-  
-  /* Animation */
-  opacity: 0;
-  transform: scale(0.95);
-  transition: opacity 0.15s ease, transform 0.15s ease, display 0.15s ease allow-discrete;
-}
-
-/* When popover is open */
-.le-popover-content:popover-open {
-  opacity: 1;
-  transform: scale(1);
-}
-
-/* Fallback for browsers without the Popover API */
-.le-popover-content[data-fallback-open="false"] {
-  display: none;
-}
-
-.le-popover-content[data-fallback-open="true"] {
-  opacity: 1;
-  transform: scale(1);
-}
-
-/* Starting style for animation (CSS Anchor Positioning spec) */
-@starting-style {
-  .le-popover-content:popover-open {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-}
-
-/* ============================================
-   Header
-   ============================================ */
-
-.le-popover-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--le-space-xs, 4px) var(--le-space-xs, 4px) var(--le-space-xs, 4px) var(--le-space-sm, 8px);
-  border-bottom: 1px solid var(--le-color-border, #e0e0e0);
-  background: var(--le-color-surface-alt, #f9f9f9);
-  min-height: 32px;
-}
-
-.le-popover-title {
-  font-weight: var(--le-font-weight-semibold, 600);
-  font-size: var(--le-font-size-sm, 0.875rem);
-  color: var(--le-color-text, #333);
-}
-
-.le-popover-close {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  border: none;
-  background: transparent;
-  color: var(--le-color-text-secondary, #666);
-  font-size: 18px;
-  line-height: 1;
-  cursor: pointer;
-  border-radius: var(--le-radius-sm, 4px);
-  transition: background-color 0.15s, color 0.15s;
-}
-
-.le-popover-close:hover {
-  background: var(--le-color-surface-hover, rgba(0, 0, 0, 0.05));
-  color: var(--le-color-text, #333);
-}
-
-/* ============================================
-   Body
-   ============================================ */
-
-.le-popover-body {
-  padding: var(--le-space-md, 12px);
-}
-
-/* ============================================
-   Scrollable content
-   ============================================ */
-
-.le-popover-content[style*="overflow-y: auto"] .le-popover-body {
-  overflow-y: auto;
-}
-`;
-
-// Keep a simple stack so Escape closes the most recently opened popover first.
-// This also helps nested popovers behave naturally.
-const openPopoverStack = [];
-const LePopover = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.lePopoverOpen = createEvent(this, "lePopoverOpen");
-        this.lePopoverClose = createEvent(this, "lePopoverClose");
-    }
-    get el() { return getElement(this); }
-    /**
-     * Mode of the popover should be 'default' for internal use
-     */
-    mode;
-    /**
-     * Whether the popover is currently open
-     */
-    open = false;
-    /**
-     * Position of the popover relative to its trigger
-     */
-    position = 'bottom';
-    /**
-     * Alignment of the popover
-     */
-    align = 'start';
-    /**
-     * Optional title for the popover header
-     */
-    popoverTitle;
-    /**
-     * Whether to show a close button in the header
-     */
-    showClose = true;
-    /**
-     * Whether clicking outside closes the popover
-     */
-    closeOnClickOutside = true;
-    /**
-     * Whether pressing Escape closes the popover
-     */
-    closeOnEscape = true;
-    /**
-     * Offset from the trigger element (in pixels)
-     */
-    offset = 8;
-    /**
-     * Fixed width for the popover (e.g., '300px', '20rem')
-     */
-    width;
-    /**
-     * Minimum width for the popover (e.g., '200px', '15rem')
-     */
-    minWidth = '200px';
-    /**
-     * Maximum width for the popover (e.g., '400px', '25rem')
-     */
-    maxWidth;
-    /**
-     * Should the popover's trigger take full width of its container
-     */
-    triggerFullWidth = false;
-    /**
-     * Emitted when the popover opens
-     */
-    lePopoverOpen;
-    /**
-     * Emitted when the popover closes
-     */
-    lePopoverClose;
-    /**
-     * Method to update the popover position from a parent component
-     */
-    async updatePosition() {
-        this._updatePosition();
-    }
-    isPositioned = false;
-    triggerEl;
-    popoverEl;
-    uniqueId = `le-popover-${Math.random().toString(36).substr(2, 9)}`;
-    scrollParents = [];
-    isListeningForDismiss = false;
-    get supportsPopoverApi() {
-        return typeof HTMLElement.prototype.showPopover === 'function';
-    }
-    shadowContains(container, node) {
-        let current = node;
-        while (current) {
-            if (current === container)
-                return true;
-            if (current instanceof ShadowRoot) {
-                current = current.host;
-                continue;
-            }
-            if (current.parentNode) {
-                current = current.parentNode;
-                continue;
-            }
-            const root = current.getRootNode?.();
-            if (root instanceof ShadowRoot) {
-                current = root.host;
-                continue;
-            }
-            break;
-        }
-        return false;
-    }
-    componentDidLoad() {
-        // Listen for toggle events from the native popover API
-        this.popoverEl?.addEventListener('toggle', this.handlePopoverToggle);
-        // Listen for other popovers opening to close this one
-        document.addEventListener('le-popover-will-open', this.handleOtherPopoverOpen);
-        // If the popover is initially open (unlikely, but possible), wire listeners.
-        if (this.open) {
-            this.addDismissListeners();
-        }
-    }
-    disconnectedCallback() {
-        this.popoverEl?.removeEventListener('toggle', this.handlePopoverToggle);
-        document.removeEventListener('le-popover-will-open', this.handleOtherPopoverOpen);
-        this.removeScrollListeners();
-        this.removeDismissListeners();
-    }
-    addDismissListeners() {
-        if (this.isListeningForDismiss)
-            return;
-        // Use capture so clicks inside the trigger (which stops propagation) are still observed.
-        document.addEventListener('pointerdown', this.handleDocumentPointerDown, true);
-        document.addEventListener('keydown', this.handleDocumentKeyDown, true);
-        this.isListeningForDismiss = true;
-    }
-    removeDismissListeners() {
-        if (!this.isListeningForDismiss)
-            return;
-        document.removeEventListener('pointerdown', this.handleDocumentPointerDown, true);
-        document.removeEventListener('keydown', this.handleDocumentKeyDown, true);
-        this.isListeningForDismiss = false;
-    }
-    handleDocumentPointerDown = (event) => {
-        if (!this.open || !this.closeOnClickOutside)
-            return;
-        // If the click happens inside this popover component (trigger OR content), don't close.
-        const path = (event.composedPath?.() ?? []);
-        if (path.includes(this.el))
-            return;
-        this.hide();
-    };
-    handleDocumentKeyDown = (event) => {
-        if (!this.open || !this.closeOnEscape)
-            return;
-        if (event.key !== 'Escape')
-            return;
-        // Only the top-most opened popover handles Escape.
-        const top = openPopoverStack[openPopoverStack.length - 1];
-        if (top !== this.el)
-            return;
-        event.preventDefault();
-        event.stopPropagation();
-        this.hide();
-    };
-    /**
-     * Find all scrollable parent elements
-     */
-    getScrollParents(element) {
-        const scrollParents = [];
-        let parent = element.parentElement;
-        while (parent) {
-            const style = getComputedStyle(parent);
-            const overflow = style.overflow + style.overflowY + style.overflowX;
-            if (/(auto|scroll)/.test(overflow)) {
-                scrollParents.push(parent);
-            }
-            parent = parent.parentElement;
-        }
-        // Always include window for page scroll
-        return scrollParents;
-    }
-    /**
-     * Add scroll listeners to all scrollable parents
-     */
-    addScrollListeners() {
-        if (!this.triggerEl)
-            return;
-        this.scrollParents = this.getScrollParents(this.triggerEl);
-        // Listen to each scroll parent
-        this.scrollParents.forEach(parent => {
-            parent.addEventListener('scroll', this.handleScroll, { passive: true });
-        });
-        // Also listen to window scroll and resize
-        window.addEventListener('scroll', this.handleScroll, { passive: true });
-        window.addEventListener('resize', this.handleScroll, { passive: true });
-    }
-    /**
-     * Remove scroll listeners
-     */
-    removeScrollListeners() {
-        this.scrollParents.forEach(parent => {
-            parent.removeEventListener('scroll', this.handleScroll);
-        });
-        window.removeEventListener('scroll', this.handleScroll);
-        window.removeEventListener('resize', this.handleScroll);
-        this.scrollParents = [];
-    }
-    handleScroll = () => {
-        if (this.open) {
-            this._updatePosition();
-        }
-    };
-    handleOpened() {
-        this.open = true;
-        // Track stack order for Escape handling.
-        const existingIndex = openPopoverStack.indexOf(this.el);
-        if (existingIndex >= 0)
-            openPopoverStack.splice(existingIndex, 1);
-        openPopoverStack.push(this.el);
-        this.addDismissListeners();
-        this.addScrollListeners();
-        this._updatePosition();
-        this.lePopoverOpen.emit();
-    }
-    handleClosed() {
-        this.open = false;
-        this.isPositioned = false;
-        this.removeScrollListeners();
-        this.removeDismissListeners();
-        const index = openPopoverStack.indexOf(this.el);
-        if (index >= 0)
-            openPopoverStack.splice(index, 1);
-        this.lePopoverClose.emit();
-    }
-    handlePopoverToggle = (event) => {
-        if (event.newState === 'open') {
-            this.handleOpened();
-        }
-        else {
-            this.handleClosed();
-        }
-    };
-    handleOtherPopoverOpen = (event) => {
-        const customEvent = event;
-        const openingPopover = customEvent.detail?.popover;
-        if (!openingPopover)
-            return;
-        if (openingPopover === this.el)
-            return;
-        // Allow nested popovers (e.g., le-select inside another popover).
-        // Use a shadow-DOM-aware containment check.
-        if (this.shadowContains(this.el, openingPopover) ||
-            this.shadowContains(openingPopover, this.el)) {
-            return;
-        }
-        if (this.open) {
-            this.hide();
-        }
-    };
-    /**
-     * Opens the popover
-     */
-    async show() {
-        document.dispatchEvent(new CustomEvent('le-popover-will-open', {
-            detail: { popover: this.el },
-        }));
-        if (this.supportsPopoverApi) {
-            this.popoverEl?.showPopover();
-        }
-        else {
-            this.handleOpened();
-        }
-    }
-    /**
-     * Closes the popover
-     */
-    async hide() {
-        if (this.supportsPopoverApi) {
-            this.popoverEl?.hidePopover();
-        }
-        else {
-            this.handleClosed();
-        }
-    }
-    /**
-     * Toggles the popover
-     */
-    async toggle() {
-        if (this.open) {
-            await this.hide();
-        }
-        else {
-            await this.show();
-        }
-    }
-    handleTriggerClick = (event) => {
-        event.stopPropagation();
-        this.toggle();
-    };
-    _updatePosition() {
-        if (!this.triggerEl || !this.popoverEl)
-            return;
-        const triggerRect = this.triggerEl.getBoundingClientRect();
-        const popoverRect = this.popoverEl.getBoundingClientRect();
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-        const viewportPadding = 8;
-        let position = this.position;
-        let align = this.align;
-        // Auto-position logic
-        const spaceBelow = viewportHeight - triggerRect.bottom - viewportPadding;
-        const spaceAbove = triggerRect.top - viewportPadding;
-        const spaceRight = viewportWidth - triggerRect.right - viewportPadding;
-        const spaceLeft = triggerRect.left - viewportPadding;
-        if (position === 'auto') {
-            if (spaceBelow >= popoverRect.height + this.offset) {
-                position = 'bottom';
-            }
-            else if (spaceAbove >= popoverRect.height + this.offset) {
-                position = 'top';
-            }
-            else if (spaceRight >= popoverRect.width + this.offset) {
-                position = 'right';
-            }
-            else if (spaceLeft >= popoverRect.width + this.offset) {
-                position = 'left';
-            }
-            else {
-                const maxSpace = Math.max(spaceBelow, spaceAbove, spaceRight, spaceLeft);
-                if (maxSpace === spaceBelow)
-                    position = 'bottom';
-                else if (maxSpace === spaceAbove)
-                    position = 'top';
-                else if (maxSpace === spaceRight)
-                    position = 'right';
-                else
-                    position = 'left';
-            }
-        }
-        // Adjust alignment for horizontal overflow
-        if (position === 'top' || position === 'bottom') {
-            if (align === 'start' &&
-                triggerRect.left + popoverRect.width > viewportWidth - viewportPadding) {
-                align = 'end';
-            }
-            else if (align === 'end' && triggerRect.right - popoverRect.width < viewportPadding) {
-                align = 'start';
-            }
-            else if (align === 'center') {
-                const triggerCenter = triggerRect.left + triggerRect.width / 2;
-                if (triggerCenter - popoverRect.width / 2 < viewportPadding) {
-                    align = 'start';
-                }
-                else if (triggerCenter + popoverRect.width / 2 > viewportWidth - viewportPadding) {
-                    align = 'end';
-                }
-            }
-        }
-        // Calculate position
-        let top = 0;
-        let left = 0;
-        let maxHeight = null;
-        switch (position) {
-            case 'top':
-                top = triggerRect.top - popoverRect.height - this.offset;
-                if (top < viewportPadding) {
-                    maxHeight = triggerRect.top - this.offset - viewportPadding * 2;
-                    top = viewportPadding;
-                }
-                break;
-            case 'bottom':
-                top = triggerRect.bottom + this.offset;
-                if (top + popoverRect.height > viewportHeight - viewportPadding) {
-                    maxHeight = viewportHeight - top - viewportPadding;
-                }
-                break;
-            case 'left':
-                left = triggerRect.left - popoverRect.width - this.offset;
-                top = triggerRect.top;
-                if (left < viewportPadding)
-                    left = viewportPadding;
-                break;
-            case 'right':
-                left = triggerRect.right + this.offset;
-                top = triggerRect.top;
-                if (left + popoverRect.width > viewportWidth - viewportPadding) {
-                    left = viewportWidth - popoverRect.width - viewportPadding;
-                }
-                break;
-        }
-        // Calculate horizontal alignment for top/bottom
-        if (position === 'top' || position === 'bottom') {
-            switch (align) {
-                case 'start':
-                    left = triggerRect.left;
-                    break;
-                case 'center':
-                    left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2;
-                    break;
-                case 'end':
-                    left = triggerRect.right - popoverRect.width;
-                    break;
-            }
-            // Constrain to viewport
-            if (left < viewportPadding) {
-                left = viewportPadding;
-            }
-            else if (left + popoverRect.width > viewportWidth - viewportPadding) {
-                left = viewportWidth - popoverRect.width - viewportPadding;
-            }
-        }
-        // Calculate vertical alignment for left/right
-        if (position === 'left' || position === 'right') {
-            switch (align) {
-                case 'start':
-                    top = triggerRect.top;
-                    break;
-                case 'center':
-                    top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2;
-                    break;
-                case 'end':
-                    top = triggerRect.bottom - popoverRect.height;
-                    break;
-            }
-            if (top < viewportPadding)
-                top = viewportPadding;
-            if (top + popoverRect.height > viewportHeight - viewportPadding) {
-                maxHeight = viewportHeight - top - viewportPadding;
-            }
-        }
-        // Apply styles
-        this.popoverEl.style.top = `${top}px`;
-        this.popoverEl.style.left = `${left}px`;
-        if (maxHeight !== null && maxHeight > 100) {
-            this.popoverEl.style.maxHeight = `${maxHeight}px`;
-            this.popoverEl.style.overflowY = 'auto';
-        }
-        else {
-            this.popoverEl.style.maxHeight = '';
-            this.popoverEl.style.overflowY = '';
-        }
-        this.isPositioned = true;
-    }
-    render() {
-        const popoverStyles = {
-            visibility: this.isPositioned ? 'visible' : 'hidden',
-        };
-        if (this.width)
-            popoverStyles.width = this.width;
-        if (this.minWidth)
-            popoverStyles.minWidth = this.minWidth;
-        if (this.maxWidth)
-            popoverStyles.maxWidth = this.maxWidth;
-        return (h(Host, { key: '542d4ab391a9b176d110fe00c0dd61f2c46d73ef', "trigger-full-width": this.triggerFullWidth }, h("div", { key: '2248ab763d65e8a9150e62644452085f01c6a238', class: classnames('le-popover-trigger', {
-                'le-popover-trigger-full-width': this.triggerFullWidth,
-            }), ref: el => (this.triggerEl = el), onClick: this.handleTriggerClick, part: "trigger" }, h("slot", { key: '9d9a5f05f4b9f1b11f1fcbb09d29f0c1e36a2cd6', name: "trigger" }, h("button", { key: 'ed573daefaffb7b1effb3c7891722aa40e4b606e', type: "button", class: "le-popover-default-trigger" }, h("span", { key: '61f00ea9761935224e1529adc3b102b85efd4f33' }, "\u2295")))), h("div", { key: 'bf447493c9c7dedb7f2ae7083c80a7a2d06aebe0', 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) && (h("div", { key: '50fe79bb415b5de315aea7f766d57ae911a90343', class: "le-popover-header" }, this.popoverTitle && h("span", { key: 'd809f12c512197bd34ca215a05820b533f4d8734', class: "le-popover-title" }, this.popoverTitle), this.showClose && (h("button", { key: '2baee3e910ad65243a66eee2bba1c46d9fa628b4', type: "button", class: "le-popover-close", onClick: () => this.hide(), "aria-label": "Close" }, "\u00D7")))), h("div", { key: 'eacad60a20becde7f4f8b9fa01d195dd3f4c08f1', class: "le-popover-body", part: "content" }, h("slot", { key: 'f8aa2edd170ee039d5277a1b9ebc8ee077a1a9dc' })))));
-    }
-};
-LePopover.style = lePopoverCss();
-
-const lePopupCss = () => `:host{display:contents}.le-popup-dialog{position:fixed;z-index:100;top:0;right:0;bottom:0;left:0;padding:0;border:none;background:transparent;max-width:none;max-height:none;overflow:visible;--_popup-min-width:var(--le-popup-min-width, 320px);--_popup-max-width:var(--le-popup-max-width, min(500px, 90vw));--_popup-min-height:var(--le-popup-min-height, auto)}.le-popup-dialog::backdrop{background:var(--le-popup-backdrop-color, rgba(0, 0, 0, 0.5));animation:le-popup-backdrop-fade 0.2s ease-out}@keyframes le-popup-backdrop-fade{from{opacity:0}to{opacity:1}}.le-popup-position-center{margin:auto}.le-popup-position-top{margin:var(--le-space-2xl, 48px) auto auto auto}.le-popup-position-top-left{margin:var(--le-space-lg, 24px) auto auto var(--le-space-lg, 24px)}.le-popup-position-top-right{margin:var(--le-space-lg, 24px) var(--le-space-lg, 24px) auto auto}.le-popup-position-bottom{margin:auto auto var(--le-space-2xl, 48px) auto}.le-popup-position-bottom-left{margin:auto auto var(--le-space-lg, 24px) var(--le-space-lg, 24px)}.le-popup-position-bottom-right{margin:auto var(--le-space-lg, 24px) var(--le-space-lg, 24px) auto}.le-popup-container{display:flex;flex-direction:column;min-width:var(--_popup-min-width);max-width:var(--_popup-max-width);min-height:var(--_popup-min-height);max-height:calc(100vh - var(--le-space-2xl, 48px) * 2);background:var(--le-color-surface, #ffffff);border:1px solid var(--le-color-border, #e0e0e0);border-radius:var(--le-radius-lg, 12px);box-shadow:var(--le-shadow-xl, 0 8px 32px rgba(0, 0, 0, 0.15));overflow:hidden;font-family:var(--le-font-family, system-ui, -apple-system, sans-serif);color:var(--le-color-text, #333);animation:le-popup-appear 0.2s ease-out}@keyframes le-popup-appear{from{opacity:0;transform:scale(0.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}.le-popup-header{flex-shrink:0;padding:var(--le-space-md, 16px) var(--le-space-lg, 24px);border-bottom:1px solid var(--le-color-border, #e0e0e0);background:var(--le-color-surface-alt, #f9f9f9);font-size:var(--le-font-size-lg, 1.125rem);font-weight:var(--le-font-weight-semibold, 600);color:var(--le-color-text, #333)}.le-popup-body{flex:1;padding:var(--le-space-lg, 24px);overflow-y:auto}.le-popup-message{margin:0;font-size:var(--le-font-size-md, 1rem);line-height:var(--le-line-height-relaxed, 1.6);color:var(--le-color-text, #333)}.le-popup-message+::slotted(*){margin-top:var(--le-space-md, 16px)}.le-popup-input{display:block;width:100%;margin-top:var(--le-space-md, 16px);padding:var(--le-space-sm, 8px) var(--le-space-md, 16px);font-family:inherit;font-size:var(--le-font-size-md, 1rem);color:var(--le-color-text, #333);background:var(--le-color-background, #fff);border:1px solid var(--le-color-border, #e0e0e0);border-radius:var(--le-radius-md, 8px);outline:none;transition:border-color var(--le-transition-fast, 0.15s ease),
-              box-shadow var(--le-transition-fast, 0.15s ease);box-sizing:border-box}.le-popup-input:focus{border-color:var(--le-color-primary, #2196f3);box-shadow:0 0 0 3px var(--le-color-primary-light, rgba(33, 150, 243, 0.2))}.le-popup-input::placeholder{color:var(--le-color-text-muted, #999)}.le-popup-footer{flex-shrink:0;display:flex;justify-content:flex-end;gap:var(--le-space-sm, 8px);padding:var(--le-space-md, 16px) var(--le-space-lg, 24px);border-top:1px solid var(--le-color-border, #e0e0e0);background:var(--le-color-surface-alt, #f9f9f9)}.le-popup-btn{min-width:80px}@media (max-width: 480px){.le-popup-container{min-width:calc(100vw - var(--le-space-md, 16px) * 2);max-width:calc(100vw - var(--le-space-md, 16px) * 2)}.le-popup-footer{flex-direction:column-reverse}.le-popup-btn{width:100%}}`;
-
-const LePopup = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.leConfirm = createEvent(this, "leConfirm");
-        this.leCancel = createEvent(this, "leCancel");
-        this.leOpen = createEvent(this, "leOpen");
-        this.leClose = createEvent(this, "leClose");
-    }
-    get el() { return getElement(this); }
-    /**
-     * The mode of the Le Kit (e.g., 'default' or 'admin')
-     */
-    mode = 'default';
-    /**
-     * Whether the popup is currently visible
-     */
-    open = false;
-    /**
-     * Type of popup: alert (OK only), confirm (OK/Cancel), prompt (input + OK/Cancel), custom
-     */
-    type = 'alert';
-    /**
-     * Optional title for the popup header
-     */
-    popupTitle;
-    /**
-     * Message text to display (for alert/confirm/prompt types)
-     */
-    message;
-    /**
-     * Whether the popup is modal (blocks interaction with page behind)
-     */
-    modal = true;
-    /**
-     * Position of the popup on screen
-     */
-    position = 'center';
-    /**
-     * Text for the confirm/OK button
-     */
-    confirmText = 'OK';
-    /**
-     * Text for the cancel button
-     */
-    cancelText = 'Cancel';
-    /**
-     * Placeholder text for prompt input
-     */
-    placeholder = '';
-    /**
-     * Default value for prompt input
-     */
-    defaultValue = '';
-    /**
-     * Whether clicking the backdrop closes the popup (modal only)
-     */
-    closeOnBackdrop = true;
-    /**
-     * Internal state for prompt input value
-     */
-    inputValue = '';
-    /**
-     * Emitted when the popup is confirmed (OK clicked)
-     */
-    leConfirm;
-    /**
-     * Emitted when the popup is cancelled (Cancel clicked or dismissed)
-     */
-    leCancel;
-    /**
-     * Emitted when the popup opens
-     */
-    leOpen;
-    /**
-     * Emitted when the popup closes
-     */
-    leClose;
-    dialogEl;
-    inputEl;
-    resolvePromise;
-    componentWillLoad() {
-        this.inputValue = this.defaultValue;
-    }
-    componentDidLoad() {
-        // Native dialog handles Escape key automatically when modal
-        // We just need to listen for the cancel event
-        this.dialogEl?.addEventListener('cancel', this.handleDialogCancel);
-    }
-    disconnectedCallback() {
-        this.dialogEl?.removeEventListener('cancel', this.handleDialogCancel);
-    }
-    handleDialogCancel = (e) => {
-        e.preventDefault(); // Prevent default close to handle it ourselves
-        this.handleCancel();
-    };
-    /**
-     * Opens the popup and returns a promise that resolves when closed
-     */
-    async show() {
-        return new Promise(resolve => {
-            this.resolvePromise = resolve;
-            this.inputValue = this.defaultValue;
-            this.open = true;
-            // Use requestAnimationFrame to ensure the dialog element is rendered
-            requestAnimationFrame(() => {
-                if (this.dialogEl) {
-                    if (this.modal) {
-                        this.dialogEl.showModal();
-                    }
-                    else {
-                        this.dialogEl.show();
-                    }
-                    this.leOpen.emit();
-                    // Focus input for prompt type
-                    if (this.type === 'prompt' && this.inputEl) {
-                        this.inputEl.focus();
-                        this.inputEl.select();
-                    }
-                }
-            });
-        });
-    }
-    /**
-     * Closes the popup with a result
-     */
-    async hide(confirmed = false) {
-        const result = {
-            confirmed,
-            value: this.type === 'prompt' ? this.inputValue : undefined,
-        };
-        this.dialogEl?.close();
-        this.open = false;
-        this.leClose.emit(result);
-        if (this.resolvePromise) {
-            this.resolvePromise(result);
-            this.resolvePromise = undefined;
-        }
-    }
-    handleConfirm = () => {
-        const result = {
-            confirmed: true,
-            value: this.type === 'prompt' ? this.inputValue : undefined,
-        };
-        this.leConfirm.emit(result);
-        this.hide(true);
-    };
-    handleCancel = () => {
-        const result = {
-            confirmed: false,
-            value: undefined,
-        };
-        this.leCancel.emit(result);
-        this.hide(false);
-    };
-    handleBackdropClick = (e) => {
-        // Check if click was on the dialog backdrop (outside the dialog box)
-        if (this.closeOnBackdrop && e.target === this.dialogEl) {
-            const rect = this.dialogEl.getBoundingClientRect();
-            const clickedInDialog = e.clientX >= rect.left &&
-                e.clientX <= rect.right &&
-                e.clientY >= rect.top &&
-                e.clientY <= rect.bottom;
-            if (!clickedInDialog) {
-                this.handleCancel();
-            }
-        }
-    };
-    handleInputChange = (e) => {
-        this.inputValue = e.target.value;
-    };
-    handleKeyDown = (e) => {
-        if (e.key === 'Enter' && this.type !== 'custom') {
-            e.preventDefault();
-            this.handleConfirm();
-        }
-    };
-    hasSlot(name) {
-        return !!this.el.querySelector(`[slot="${name}"]`);
-    }
-    renderHeader() {
-        if (this.hasSlot('header')) {
-            return (h("div", { class: "le-popup-header", part: "header" }, h("slot", { name: "header" })));
-        }
-        if (this.popupTitle) {
-            return (h("div", { class: "le-popup-header", part: "header" }, this.popupTitle));
-        }
-        return null;
-    }
-    renderBody() {
-        return (h("div", { class: "le-popup-body", part: "body" }, this.message && h("p", { class: "le-popup-message" }, this.message), this.type === 'prompt' && (h("input", { type: "text", class: "le-popup-input", part: "input", placeholder: this.placeholder, value: this.inputValue, onInput: this.handleInputChange, onKeyDown: this.handleKeyDown, ref: el => (this.inputEl = el) })), h("le-slot", { name: "", tag: "div", description: "Custom popup content", type: "slot" }, h("slot", null))));
-    }
-    renderFooter() {
-        if (this.hasSlot('footer')) {
-            return (h("div", { class: "le-popup-footer", part: "footer" }, h("slot", { name: "footer" })));
-        }
-        // For custom type without footer slot, don't render default buttons
-        if (this.type === 'custom') {
-            return null;
-        }
-        return (h("div", { class: "le-popup-footer", part: "footer" }, (this.type === 'confirm' || this.type === 'prompt') && (h("le-button", { variant: "outlined", part: "button-cancel", class: "le-popup-btn", onClick: this.handleCancel }, this.cancelText)), h("le-button", { variant: "solid", part: "button-confirm", class: "le-popup-btn", onClick: this.handleConfirm }, this.confirmText)));
-    }
-    render() {
-        const positionClass = `le-popup-position-${this.position}`;
-        return (h("dialog", { key: '75ff06ac2532818f2951283fb455d165d1b13e89', class: `le-popup-dialog ${positionClass}`, part: "dialog", ref: el => (this.dialogEl = el), onClick: this.handleBackdropClick }, h("le-component", { key: '0fea1c4ea66d8457c66bf5e14b08b7ac3251a9cc', component: "le-popup" }, h("div", { key: 'eb95845004b27cdba2e817b2f296a59ae1d62552', class: "le-popup-container", part: "container" }, this.renderHeader(), this.renderBody(), this.renderFooter()))));
-    }
-};
-LePopup.style = lePopupCss();
-
-const leScrollProgressCss = () => `:host{display:block}:host([sticky]){position:sticky;top:var(--le-scroll-progress-sticky-top, 0);z-index:var(--le-scroll-progress-z, calc(var(--le-header-z, 1000) + 1))}:host([fixed]){position:fixed;top:var(--le-scroll-progress-fixed-top, 0);left:var(--le-scroll-progress-fixed-left, 0);right:var(--le-scroll-progress-fixed-right, 0);z-index:var(--le-scroll-progress-z, calc(var(--le-header-z, 1000) + 1))}.track{width:100%;height:var(--le-scroll-progress-height, 4px);background:var(--le-scroll-progress-bg, transparent)}.fill{height:100%;width:0;background:var(--le-scroll-progress-fill, var(--le-color-primary, currentColor));border-radius:var(--le-scroll-progress-border-radius, 2px);transition:width var(--le-transition-fast, 120ms linear)}`;
-
-const LeScrollProgress = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    get el() { return getElement(this); }
-    /** Boolean or selector string. */
-    trackScrollProgress;
-    progress = 0;
-    rafId = null;
-    targetEl = null;
-    componentWillLoad() {
-        this.updateProgress();
-    }
-    componentDidLoad() {
-        this.resolveTarget();
-        this.updateProgress();
-    }
-    disconnectedCallback() {
-        if (this.rafId != null) {
-            cancelAnimationFrame(this.rafId);
-            this.rafId = null;
-        }
-    }
-    onTrackChange() {
-        this.resolveTarget();
-        this.updateProgress();
-    }
-    onScroll() {
-        this.scheduleUpdate();
-    }
-    onResize() {
-        this.resolveTarget();
-        this.scheduleUpdate(true);
-    }
-    scheduleUpdate(force = false) {
-        if (this.rafId != null && !force)
-            return;
-        this.rafId = requestAnimationFrame(() => {
-            this.rafId = null;
-            this.updateProgress();
-        });
-    }
-    resolveTarget() {
-        if (typeof document === 'undefined')
-            return;
-        const raw = this.trackScrollProgress;
-        // If attribute missing, default to enabled (full document).
-        // If user explicitly sets 'false', treat as disabled.
-        if (raw == null) {
-            this.targetEl = null;
-            return;
-        }
-        const val = String(raw).trim();
-        if (val === '' || val === 'true') {
-            this.targetEl = null;
-            return;
-        }
-        if (val === 'false') {
-            this.targetEl = null;
-            return;
-        }
-        try {
-            this.targetEl = document.querySelector(val);
-        }
-        catch {
-            this.targetEl = null;
-        }
-    }
-    clamp01(n) {
-        return Math.max(0, Math.min(1, n));
-    }
-    updateProgress() {
-        if (typeof window === 'undefined' || typeof document === 'undefined')
-            return;
-        // If explicitly disabled.
-        if (this.trackScrollProgress === 'false') {
-            if (this.progress !== 0)
-                this.progress = 0;
-            return;
-        }
-        const scrollY = window.scrollY || 0;
-        let p = 0;
-        if (this.targetEl) {
-            const rect = this.targetEl.getBoundingClientRect();
-            const top = scrollY + rect.top;
-            const height = rect.height;
-            const viewport = window.innerHeight || 1;
-            const denom = Math.max(1, height - viewport);
-            p = this.clamp01((scrollY - top) / denom);
-        }
-        else {
-            const doc = document.documentElement;
-            const denom = Math.max(1, doc.scrollHeight - doc.clientHeight);
-            p = this.clamp01(scrollY / denom);
-        }
-        const next = Math.round(p * 1000) / 1000;
-        if (next !== this.progress)
-            this.progress = next;
-    }
-    render() {
-        const width = `${this.progress * 100}%`;
-        return (h(Host, { key: '7a93dbfd8b14e5e581ff1480ad0e657f8f33bcf4' }, h("div", { key: 'fe4ff14af541e2a610d0b32605aaadb87ccea957', class: "track", part: "track", "aria-hidden": "true" }, h("div", { key: 'f46a09358bf77a7cff64deafa63702360a686c6a', class: "fill", part: "fill", style: { width } }))));
-    }
-    static get watchers() { return {
-        "trackScrollProgress": ["onTrackChange"]
-    }; }
-};
-LeScrollProgress.style = leScrollProgressCss();
-
-const leSelectCss = () => `:host{display:inline-block;min-width:150px;--le-select-color:var(--le-color-text, #1f2937);--le-select-border-radius:var(--le-radius-md);--le-select-content-padding:var(--le-spacing-2)}:host([disabled]){opacity:0.5;pointer-events:none}:host([full-width]){width:100%}.select-trigger{display:flex;align-items:center;gap:0.5rem;width:100%;padding:0;--le-button-padding:var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-2);font-size:var(--le-select-font-size, 0.875rem);font-family:inherit;line-height:1.4;color:var(--le-select-color);background:var(--le-select-bg, var(--le-color-surface, #fff));border-radius:var(--le-select-border-radius);cursor:pointer;text-align:left;transition:border-color 0.15s ease, box-shadow 0.15s ease}.select-trigger:focus{outline:2px solid var(--le-color-focus);outline-offset:2px}.select-trigger:not(.has-value) .trigger-label{color:color-mix(in srgb, var(--le-color-text-secondary) 66%, transparent)}.trigger-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem}.trigger-icon-end{width:16px;height:16px}.trigger-icon img{width:100%;height:100%;object-fit:contain}.trigger-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--le-color-text)}.trigger-label::not(.has-value){color:var(--le-color-text-disabled, #9ca3af)}le-button::part(icon-end){display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem;margin-left:auto;transition:transform 0.2s ease}le-button::part(icon-end) svg{width:1rem;height:1rem}le-button.is-open::part(icon-end){transform:rotate(180deg)}.search-input::part(container):focus-within{outline:none !important}.search-input{--le-input-radius:var(--le-radius-md)}`;
-
-const LeSelect = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.leChange = createEvent(this, "change");
-        this.leOpen = createEvent(this, "leOpen");
-        this.leClose = createEvent(this, "leClose");
-    }
-    get el() { return getElement(this); }
-    /**
-     * The options to display in the dropdown.
-     */
-    options = [];
-    /**
-     * The currently selected value.
-     */
-    value;
-    /**
-     * Placeholder text when no option is selected.
-     */
-    placeholder = 'Select an option';
-    /**
-     * Whether the select is disabled.
-     */
-    disabled = false;
-    /**
-     * Whether selection is required.
-     */
-    required = false;
-    /**
-     * Name attribute for form submission.
-     */
-    name;
-    /**
-     * Whether the select should take full width of its container.
-     */
-    fullWidth = false;
-    /**
-     * Size variant of the select.
-     */
-    size = 'medium';
-    /**
-     * Visual variant of the select.
-     */
-    variant = 'default';
-    /**
-     * Whether the input is searchable.
-     */
-    searchable = false;
-    /**
-     * Text to show when no options match the search.
-     */
-    emptyText = 'No results found';
-    /**
-     * Whether the dropdown is currently open.
-     */
-    open = false;
-    /**
-     * Emitted when the selected value changes.
-     */
-    leChange;
-    /**
-     * Emitted when the dropdown opens.
-     */
-    leOpen;
-    /**
-     * Emitted when the dropdown closes.
-     */
-    leClose;
-    selectedOption;
-    searchQuery = '';
-    dropdownEl;
-    inputEl;
-    handleValueChange() {
-        this.updateSelectedOption();
-    }
-    handleOptionsChange() {
-        this.updateSelectedOption();
-    }
-    componentWillLoad() {
-        this.updateSelectedOption();
-    }
-    get parsedOptions() {
-        if (typeof this.options === 'string') {
-            try {
-                return JSON.parse(this.options);
-            }
-            catch {
-                return [];
-            }
-        }
-        return this.options;
-    }
-    updateSelectedOption() {
-        if (this.value !== undefined) {
-            this.selectedOption = this.parsedOptions.find(opt => (opt.value ?? opt.label) === this.value);
-        }
-        else {
-            this.selectedOption = undefined;
-        }
-    }
-    filterOption = (option, query) => {
-        if (!query)
-            return true;
-        const searchLower = query.toLowerCase();
-        return (option.label.toLowerCase().includes(searchLower) ||
-            (option.description?.toLowerCase().includes(searchLower) ?? false));
-    };
-    handleOptionSelect = (e) => {
-        this.value = e.detail.value;
-        this.selectedOption = e.detail.option;
-        this.leChange.emit(e.detail);
-    };
-    handleDropdownOpen = () => {
-        this.open = true;
-        this.leOpen.emit();
-        // Focus search input if searchable
-        if (this.searchable) {
-            setTimeout(() => {
-                this.inputEl?.focus();
-            }, 50);
-        }
-    };
-    handleDropdownClose = () => {
-        this.open = false;
-        this.leClose.emit();
-    };
-    handleTriggerClick = () => {
-        if (!this.disabled) {
-            this.dropdownEl?.toggle();
-        }
-    };
-    handleTriggerKeyDown = (e) => {
-        if (this.disabled)
-            return;
-        if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
-            e.preventDefault();
-            this.dropdownEl?.show();
-        }
-    };
-    handleSearchInput = (e) => {
-        const target = e.target;
-        this.searchQuery = target.value;
-    };
-    /**
-     * Opens the dropdown.
-     */
-    async showDropdown() {
-        await this.dropdownEl?.show();
-    }
-    /**
-     * Closes the dropdown.
-     */
-    async hideDropdown() {
-        await this.dropdownEl?.hide();
-    }
-    renderIcon(icon) {
-        if (!icon)
-            return null;
-        if (icon.startsWith('http') || icon.startsWith('/')) {
-            return h("img", { class: "trigger-icon", src: icon, alt: "" });
-        }
-        return h("span", { class: "trigger-icon" }, icon);
-    }
-    render() {
-        const hasValue = this.selectedOption !== undefined;
-        return (h("le-component", { key: '670430a0ca8f310b7454c7dd93098b6b57f3bb82', component: "le-select" }, 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 }, h("le-button", { key: 'b9cb202179c8fbc6dea9bc7af5ccf11deeb7c0f1', 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: h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: "M4 6l4 4 4-4" })) }, h("span", { key: '592267788f6a02d6b501941863e91bcd68742233', class: "trigger-label" }, hasValue ? this.selectedOption.label : this.placeholder)), this.searchable && this.open && (h("div", { key: 'd4d2611e8b1f7fb243675cc11fa4982331b3c330', class: "multiselect-search", slot: "header" }, 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 && h("input", { key: 'bf9dc8141d02c272b0b81557dbc7c24a419ce558', type: "hidden", name: this.name, value: this.value?.toString() ?? '' })));
-    }
-    static get watchers() { return {
-        "value": ["handleValueChange"],
-        "options": ["handleOptionsChange"]
-    }; }
-};
-LeSelect.style = leSelectCss();
-
-const leSlotDefaultCss = () => `:host{display:contents;--le-slot-border-color:#0088ff;--le-slot-bg-color:rgba(0, 136, 255, 0.05);--le-slot-header-bg:rgb(218, 238, 255);--le-slot-label-color:#0066cc;--le-slot-description-color:#666;--le-slot-required-color:#e53935;--le-slot-dropzone-min-height:20px;--le-slot-dropzone-border-color:#ccc}.le-slot-container,.le-slot-header,.le-slot-description,.le-slot-dropzone,.le-slot-input{display:none}.hidden-slot{display:none}:host(.admin-mode){display:block;flex:1}:host(.admin-mode) .le-slot-container{position:relative;display:flex;flex-direction:column;border:2px dashed var(--le-slot-border-color);border-radius:4px;background:var(--le-slot-bg-color);margin:4px 0}:host(.admin-mode) .le-slot-header{display:flex;align-items:center;gap:4px;padding:0 0 0 var(--le-spacing-1, 4px);background:var(--le-slot-header-bg);border-bottom:1px solid var(--le-slot-border-color);font-size:var(--le-font-size-xs, 11px);font-weight:400;text-transform:capitalize}:host(.admin-mode) .le-slot-header-no-label{justify-content:flex-end;height:16px;border:none;background-color:transparent}.le-slot-label{color:var(--le-slot-label-color);text-align:start;overflow:hidden;width:0;flex:1 1 0%}.le-slot-required{color:var(--le-slot-required-color);font-weight:bold}:host(.admin-mode) .le-slot-description{display:block;padding:4px 8px;font-size:12px;color:var(--le-slot-description-color);font-style:italic}:host(.admin-mode) .le-slot-description-icon{display:inline-block;font-size:9px;line-height:1;cursor:pointer;color:var(--le-slot-description-color)}:host(.admin-mode) .le-slot-dropzone{display:block;min-height:var(--le-slot-dropzone-min-height);padding:var(--le-spacing-1, 4px);position:relative}:host(.admin-mode) .le-slot-dropzone:empty::before{content:'Drop content here';display:flex;align-items:center;justify-content:center;position:absolute;inset:8px;border:2px dashed var(--le-slot-dropzone-border-color);border-radius:4px;color:#999;font-size:12px;pointer-events:none}:host(.admin-mode.drag-over) .le-slot-container{border-color:#00cc66;background:rgba(0, 204, 102, 0.1)}:host(.admin-mode.drag-over) .le-slot-dropzone:empty::before{border-color:#00cc66;color:#00cc66;content:'Release to drop'}:host(.admin-mode) .le-slot-input{display:block;padding:var(--le-spacing-1, 4px)}:host(.admin-mode) .le-slot-input input,:host(.admin-mode) .le-slot-input textarea{display:block;width:100%;padding:8px 10px;border:1px solid var(--le-slot-dropzone-border-color);border-radius:4px;font-family:inherit;font-size:14px;line-height:1.4;background:#fff;color:#333;box-sizing:border-box;transition:border-color 0.2s, box-shadow 0.2s}:host(.admin-mode) .le-slot-input input:focus,:host(.admin-mode) .le-slot-input textarea:focus{outline:none;border-color:var(--le-slot-border-color);box-shadow:0 0 0 3px rgba(0, 136, 255, 0.15)}:host(.admin-mode) .le-slot-input input::placeholder,:host(.admin-mode) .le-slot-input textarea::placeholder{color:#999}:host(.admin-mode) .le-slot-input textarea{resize:vertical;min-height:60px}:host(.admin-mode) .le-slot-input slot{display:none}.le-slot-invalid{color:var(--le-slot-required-color);font-size:10px;margin-left:auto;font-weight:normal;text-transform:none}:host(.admin-mode) .le-slot-input.has-error input,:host(.admin-mode) .le-slot-input.has-error textarea{border-color:var(--le-slot-required-color);background:rgba(229, 57, 53, 0.05)}:host(.admin-mode) .le-slot-input.has-error input:focus,:host(.admin-mode) .le-slot-input.has-error textarea:focus{border-color:var(--le-slot-required-color);box-shadow:0 0 0 3px rgba(229, 57, 53, 0.15)}.le-slot-add-btn{font-size:24px;line-height:0px;width:12px;height:12px}.le-slot-header-no-label .le-slot-add-btn{font-size:16px}.le-slot-button{width:20px;height:20px}:host(.admin-mode) .le-slot-header-no-label.le-slot-header-text{height:0}`;
-
-const LeSlot = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.leSlotChange = createEvent(this, "leSlotChange");
-    }
-    get el() { return getElement(this); }
-    /**
-     * The type of slot content.
-     * - `slot`: Default, shows a dropzone for components (default)
-     * - `text`: Shows a single-line text input
-     * - `textarea`: Shows a multi-line text area
-     */
-    type = 'slot';
-    /**
-     * The name of the slot this placeholder represents.
-     * Should match the slot name in the parent component.
-     */
-    name = '';
-    /**
-     * Label to display in admin mode.
-     * If not provided, the slot name will be used.
-     */
-    label;
-    /**
-     * Description of what content this slot accepts.
-     * Shown in admin mode to guide content editors.
-     */
-    description;
-    /**
-     * Comma-separated list of allowed component tags for this slot.
-     * Used by CMS to filter available components.
-     *
-     * @example "le-card,le-button,le-text"
-     */
-    allowedComponents;
-    /**
-     * Whether multiple components can be dropped in this slot.
-     */
-    multiple = true;
-    /**
-     * Whether this slot is required to have content.
-     */
-    required = false;
-    /**
-     * Placeholder text for text/textarea inputs in admin mode.
-     */
-    placeholder;
-    /**
-     * The HTML tag to create when there's no slotted element.
-     * Used with type="text" or type="textarea" to auto-create elements.
-     *
-     * @example "h3" - creates <h3 slot="header">content</h3>
-     * @example "p" - creates <p slot="content">content</p>
-     */
-    tag;
-    /**
-     * CSS styles for the slot dropzone container.
-     * Useful for layouts - e.g., "flex-direction: row" for horizontal stacks.
-     * Only applies in admin mode for type="slot".
-     */
-    slotStyle;
-    /**
-     * Internal state to track admin mode
-     */
-    adminMode = false;
-    /**
-     * Internal state for text input value (synced from slot content)
-     */
-    textValue = '';
-    /**
-     * Whether the current textValue contains valid HTML
-     */
-    isValidHtml = true;
-    /**
-     * Available components loaded from Custom Elements Manifest
-     */
-    availableComponents = [];
-    /**
-     * Whether the component picker popover is open
-     */
-    pickerOpen = false;
-    /**
-     * Reference to the slot element to access assignedNodes
-     */
-    slotRef;
-    /**
-     * The original slotted element (e.g., <h3 slot="header">)
-     */
-    slottedElement;
-    /**
-     * Emitted when text content changes in admin mode.
-     * The event detail contains the new text value and validity.
-     */
-    leSlotChange;
-    disconnectModeObserver;
-    connectedCallback() {
-        this.disconnectModeObserver = observeModeChanges(this.el, mode => {
-            const wasAdmin = this.adminMode;
-            this.adminMode = mode === 'admin';
-            // When entering admin mode, read content from slotted elements
-            if (this.adminMode && !wasAdmin) {
-                // Need to wait for render to access slot ref
-                requestAnimationFrame(() => this.readSlottedContent());
-                // Load available components for the component picker
-                if (this.type === 'slot') {
-                    this.loadAvailableComponents();
-                }
-            }
-        });
-    }
-    disconnectedCallback() {
-        this.disconnectModeObserver?.();
-    }
-    /**
-     * Flag to prevent re-reading content right after we updated it
-     */
-    isUpdating = false;
-    /**
-     * Read content from slotted elements via assignedNodes()
-     */
-    readSlottedContent() {
-        if (!this.slotRef)
-            return;
-        // Skip if we just updated the content ourselves
-        if (this.isUpdating) {
-            this.isUpdating = false;
-            return;
-        }
-        const assignedNodes = this.slotRef.assignedNodes({ flatten: true });
-        // For text/textarea types, we want to edit the innerHTML of slotted elements
-        if (this.type === 'text' || this.type === 'textarea') {
-            // Find the first element node (skip text nodes that are just whitespace)
-            const elementNode = assignedNodes.find(node => node.nodeType === Node.ELEMENT_NODE);
-            if (elementNode) {
-                // Only update textValue if slotted element changed or we don't have one yet
-                if (this.slottedElement !== elementNode) {
-                    this.slottedElement = elementNode;
-                    this.textValue = elementNode.innerHTML?.trim() || '';
-                    // console.log(`[le-slot "${this.name}"] Read slotted content:`, this.textValue);
-                }
-            }
-            else {
-                // No element, check for direct text content
-                const textContent = assignedNodes
-                    .filter(node => node.nodeType === Node.TEXT_NODE)
-                    .map(node => node.textContent)
-                    .join('')
-                    .trim();
-                if (textContent && !this.textValue) {
-                    this.textValue = textContent;
-                    // console.log(`[le-slot "${this.name}"] Read text content:`, this.textValue);
-                }
-            }
-        }
-    }
-    /**
-     * Validates if a string contains valid HTML
-     */
-    validateHtml(html) {
-        // Empty string is valid
-        if (!html.trim())
-            return true;
-        // Create a template element to parse the HTML
-        const template = document.createElement('template');
-        template.innerHTML = html;
-        // Check that we don't have obviously broken HTML
-        // Count opening and closing tags for common elements
-        const openTags = (html.match(/<[a-z][^>]*(?<!\/)>/gi) || []).length;
-        const closeTags = (html.match(/<\/[a-z][^>]*>/gi) || []).length;
-        const selfClosing = (html.match(/<[a-z][^>]*\/>/gi) || []).length;
-        // Simple validation: opening tags (minus self-closing) should roughly match closing tags
-        // Allow some tolerance for void elements like <br>, <img>, etc.
-        const voidElements = (html.match(/<(br|hr|img|input|meta|link|area|base|col|embed|param|source|track|wbr)[^>]*>/gi) || []).length;
-        const effectiveOpenTags = openTags - selfClosing - voidElements;
-        // If difference is too large, HTML is likely broken
-        if (Math.abs(effectiveOpenTags - closeTags) > 1) {
-            return false;
-        }
-        return true;
-    }
-    handleTextInput = (event) => {
-        const target = event.target;
-        this.textValue = target.value;
-        this.isValidHtml = this.validateHtml(this.textValue);
-        if (this.isValidHtml) {
-            // Set flag to prevent slotchange from re-reading what we just wrote
-            this.isUpdating = true;
-            console.log('Updating text value:', this.textValue, 'slottedElement:', this.slottedElement);
-            if (this.slottedElement) {
-                // Update existing slotted element's innerHTML
-                this.slottedElement.innerHTML = this.textValue;
-            }
-            else if (this.tag && this.textValue) {
-                // No slotted element exists
-                // If the slot doesn't have a name, then it's the default slot
-                // remove the existing non-slotted content (text nodes and elements without slot attribute)
-                const rootNode = this.el.getRootNode();
-                if (!this.name && rootNode instanceof ShadowRoot) {
-                    const hostComponent = rootNode.host;
-                    Array.from(hostComponent.childNodes).forEach(node => {
-                        if (node.nodeType === Node.TEXT_NODE || (node.nodeType === Node.ELEMENT_NODE && !node.hasAttribute('slot'))) {
-                            node.remove();
-                        }
-                    });
-                }
-                // create one using the specified tag
-                this.createSlottedElement();
-            }
-            else if (this.textValue) {
-                // no tag specified - just replace everything in the host component
-                const rootNode = this.el.getRootNode();
-                if (rootNode instanceof ShadowRoot) {
-                    const hostComponent = rootNode.host;
-                    hostComponent.innerHTML = this.textValue;
-                }
-            }
-        }
-        this.leSlotChange.emit({
-            name: this.name,
-            value: this.textValue,
-            isValid: this.isValidHtml,
-        });
-    };
-    /**
-     * Create a new slotted element when none exists.
-     * The element is appended to the host component's light DOM.
-     */
-    createSlottedElement() {
-        if (!this.tag)
-            return;
-        // Find the host component (le-card, etc.) by traversing up through shadow DOM
-        // le-slot is inside le-card's shadow DOM, so we need to find le-card's host
-        const rootNode = this.el.getRootNode();
-        if (!(rootNode instanceof ShadowRoot))
-            return;
-        const hostComponent = rootNode.host;
-        if (!hostComponent)
-            return;
-        // Create the new element
-        const newElement = document.createElement(this.tag);
-        newElement.innerHTML = this.textValue;
-        // Set the slot attribute if this is a named slot
-        if (this.name) {
-            newElement.setAttribute('slot', this.name);
-        }
-        // Append to the host component's light DOM
-        hostComponent.appendChild(newElement);
-        // Store reference to the new element
-        this.slottedElement = newElement;
-        // console.log(`[le-slot "${this.name}"] Created new <${this.tag}> element`);
-    }
-    /**
-     * Load available components from Custom Elements Manifest
-     */
-    async loadAvailableComponents() {
-        try {
-            const { manifestFile } = getLeKitConfig();
-            const manifestFileResolved = getAssetPath(`./assets/${manifestFile}`);
-            const response = await fetch(manifestFileResolved);
-            const manifest = await response.json();
-            const components = [];
-            const allowedList = this.allowedComponents?.split(',').map(s => s.trim()) || [];
-            for (const module of manifest.modules) {
-                for (const declaration of module.declarations || []) {
-                    if (declaration.tagName && declaration.customElement) {
-                        // Skip internal components (le-slot, le-component, le-popover)
-                        const isInternal = ['le-slot', 'le-component', 'le-popover'].includes(declaration.tagName);
-                        if (isInternal)
-                            continue;
-                        // If allowedComponents is specified, filter by it
-                        if (allowedList.length > 0 && !allowedList.includes(declaration.tagName)) {
-                            continue;
-                        }
-                        components.push({
-                            tagName: declaration.tagName,
-                            name: this.formatComponentName(declaration.tagName),
-                            description: declaration.description || '',
-                        });
-                    }
-                }
-            }
-            this.availableComponents = components || [];
-        }
-        catch (error) {
-            console.warn('[le-slot] Failed to load component manifest:', error);
-        }
-    }
-    /**
-     * Format a tag name into a display name
-     * e.g., 'le-card' -> 'Card'
-     */
-    formatComponentName(tagName) {
-        return tagName
-            .replace(/^le-/, '')
-            .split('-')
-            .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-            .join(' ');
-    }
-    /**
-     * Add a new component to the slot
-     */
-    addComponent(tagName) {
-        // Find the host component by traversing up through shadow DOM
-        const rootNode = this.el.getRootNode();
-        if (!(rootNode instanceof ShadowRoot))
-            return;
-        const hostComponent = rootNode.host;
-        if (!hostComponent)
-            return;
-        // Create the new component element
-        const newElement = document.createElement(tagName);
-        // Set the slot attribute if this is a named slot
-        if (this.name) {
-            newElement.setAttribute('slot', this.name);
-        }
-        // Append to the host component's light DOM
-        hostComponent.appendChild(newElement);
-        // Emit change event so the page can save
-        this.leSlotChange.emit({
-            name: this.name,
-            value: hostComponent.innerHTML,
-            isValid: true,
-        });
-    }
-    /**
-     * Handle slot change event to re-read content when nodes are assigned
-     */
-    handleSlotChange = () => {
-        this.readSlottedContent();
-    };
-    render() {
-        const displayLabel = this.label || this.name;
-        // Always render the same structure, CSS handles visibility via .admin-mode class
-        return (h(Host, { key: '8a48f7865340d9a2e201a2f878b2f1c66c55d86c', class: {
-                'admin-mode': this.adminMode,
-                'invalid-html': !this.isValidHtml,
-            }, role: this.adminMode ? 'region' : undefined, "aria-label": this.adminMode ? `Slot: ${displayLabel}` : undefined, "data-slot-name": this.name, "data-slot-type": this.type, "data-allowed": this.allowedComponents, "data-multiple": this.multiple, "data-required": this.required }, this.adminMode ? (h("div", { class: "le-slot-container" }, h("div", { class: classnames('le-slot-header', {
-                'le-slot-header-no-label': !displayLabel,
-                'le-slot-header-text': this.type === 'text',
-                'le-slot-header-error': !this.isValidHtml,
-            }) }, displayLabel && (h("span", { class: "le-slot-label" }, displayLabel, this.required && h("span", { class: "le-slot-required" }, "*"))), !this.isValidHtml && h("span", { class: "le-slot-invalid" }, "\u26A0 Invalid HTML"), this.type === 'slot' && this.adminMode && (h("le-popover", { mode: "default", showClose: true, align: "start", position: "right", popoverTitle: "Add Component", open: this.pickerOpen, onLePopoverOpen: () => (this.pickerOpen = true), onLePopoverClose: () => (this.pickerOpen = false) }, h("le-button", { type: "button", class: "le-slot-button", slot: "trigger", variant: "clear", size: "small", "aria-label": "Add component", "icon-only": true }, h("span", { class: "le-slot-add-btn", slot: "icon-only" }, "+")), h("div", { class: "le-slot-picker" }, this.availableComponents.length > 0 ? (h("ul", { class: "le-slot-picker-list" }, this.availableComponents.map(component => (h("li", { key: component.tagName }, h("button", { class: "le-slot-picker-item", onClick: () => {
-                this.addComponent(component.tagName);
-                this.pickerOpen = false;
-            } }, h("span", { class: "le-slot-picker-name" }, component.name), component.description && h("span", { class: "le-slot-picker-desc" }, component.description))))))) : (h("div", { class: "le-slot-picker-empty" }, "No components available")))))), this.renderContent())) : (
-        // In default mode, just pass through the slot - slotted content renders naturally
-        // Note: We use unnamed slot here because named slots from parent component
-        // are passed as le-slot's light DOM children
-        h("slot", null))));
-    }
-    renderContent() {
-        // Create the slot element with ref for reading assignedNodes
-        // Wrap in a hidden div since slot elements can't have style prop in Stencil
-        // Note: We use unnamed slot here because named slots from parent component
-        // are passed as le-slot's light DOM children
-        const slotElement = (h("div", { class: "hidden-slot" }, h("slot", { ref: el => (this.slotRef = el), onSlotchange: this.handleSlotChange })));
-        switch (this.type) {
-            case 'text':
-                return (h("div", { class: { 'le-slot-input': true, 'has-error': !this.isValidHtml } }, h("le-string-input", { mode: "default", value: this.textValue, placeholder: this.placeholder || `Enter ${this.label || this.name || 'text'}...`, onChange: this.handleTextInput }), slotElement));
-            case 'textarea':
-                return (h("div", { class: { 'le-slot-input': true, 'has-error': !this.isValidHtml } }, h("textarea", { value: this.textValue, placeholder: this.placeholder || `Enter ${this.label || this.name || 'text'}...`, onInput: this.handleTextInput, required: this.required, rows: 3 }), slotElement));
-            case 'slot':
-            default:
-                // Parse slotStyle string into style object if provided
-                const dropzoneStyle = {};
-                if (this.slotStyle) {
-                    this.slotStyle.split(';').forEach(rule => {
-                        const [prop, value] = rule.split(':').map(s => s.trim());
-                        if (prop && value) {
-                            // Convert kebab-case to camelCase for style object
-                            const camelProp = prop.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
-                            dropzoneStyle[camelProp] = value;
-                        }
-                    });
-                }
-                return (h("div", { class: "le-slot-dropzone", style: dropzoneStyle }, h("slot", { ref: el => (this.slotRef = el), onSlotchange: this.handleSlotChange })));
-        }
-    }
-};
-LeSlot.style = leSlotDefaultCss();
-
-const leStringInputCss = () => `:host{display:block;--le-input-bg:var(--le-color-surface, #ffffff);--le-input-color:var(--le-color-text-primary, #333333);--le-input-border:var(--le-border-width, 2px) solid var(--le-color-border-input, #007bff);--le-input-radius:var(--le-radius-sm, 4px);--le-input-padding:2px 6px;--le-input-height:1.5rem;--le-input-label-color:var(--le-color-text-primary, #333333);--le-input-desc-color:var(--le-color-text-secondary, #666666);--le-input-placeholder-color:#999999}.le-input-wrapper{display:flex;flex-direction:column;gap:2px}.le-input-label{display:block;font-size:0.9em;font-weight:500;color:var(--le-input-label-color);margin-bottom:2px}.le-input-container{position:relative;display:flex;align-items:center;background:var(--le-input-bg);border:var(--le-input-border);border-radius:var(--le-input-radius);transition:border-color 0.2s}.le-input-container:focus-within{outline:2px solid var(--le-color-focus);outline-offset:2px}:host([disabled]) .le-input-container{opacity:0.6;background-color:rgba(0,0,0,0.05);cursor:not-allowed}input{flex:1;min-height:var(--le-input-height);padding:var(--le-input-padding);border:none;background:transparent;color:var(--le-input-color);font-family:inherit;font-size:inherit;outline:none;width:100%}input::placeholder{color:var(--le-input-placeholder-color)}.icon-start,.icon-end{display:flex;align-items:center;justify-content:center;padding:0 8px;color:var(--le-input-desc-color)}.le-input-description{font-size:0.85em;color:var(--le-input-desc-color);margin-top:2px}.le-input-description::has(le-slot>slot[name=description]:empty){display:none}`;
-
-const LeStringInput = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.leChange = createEvent(this, "change");
-        this.leInput = createEvent(this, "input");
-    }
-    get el() { return getElement(this); }
-    /**
-     * 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 (h("le-component", { key: '385fe7607d573ab4cfe81315f74e650f8e57faa1', component: "le-string-input", hostClass: classnames({ disabled: this.disabled }) }, h("div", { key: 'a36c5a32238eb6c9c574aeb3955343e042d89225', class: "le-input-wrapper" }, this.label && (h("label", { key: 'c1ff01932ada19ecea0cd2e2b477615d0c873ff0', class: "le-input-label", htmlFor: this.name }, this.label)), h("div", { key: '7c8909ed5e4e3404a2900a3f9beef8b0f331d62c', class: "le-input-container", part: "container" }, this.iconStart && h("span", { key: 'cf7e7355e22de3100bade2399ba63702731350e0', class: "icon-start" }, this.iconStart), h("input", { key: '6d71245d395f6cd2c55110ca902fc0374c74026b', 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 && h("span", { key: 'e086f9559b086212be3cd231b7c870cdb229a733', class: "icon-end" }, this.iconEnd)), !this.hideDescription && (h("div", { key: '531ac78b43382166023a79475152345956188bcc', class: "le-input-description" }, h("le-slot", { key: '38700e86adc0c3bf049b0ad828d14993ddef7844', name: "description", type: "text", tag: "p", label: "Description" }, h("slot", { key: 'c2982e93304a872ec79446fe525eb5448e764401', name: "description" })))))));
-    }
-};
-LeStringInput.style = leStringInputCss();
-
-export { LeBar as le_bar, LeButton as le_button, LeCheckbox as le_checkbox, LeCollapse as le_collapse, LeComponent as le_component, LeCurrentHeading as le_current_heading, LeDropdownBase as le_dropdown_base, LeHeader as le_header, LeIcon as le_icon, LeNavigation as le_navigation, LePopover as le_popover, LePopup as le_popup, LeScrollProgress as le_scroll_progress, LeSelect as le_select, LeSlot as le_slot, LeStringInput as le_string_input };
-//# sourceMappingURL=le-bar.le-button.le-checkbox.le-collapse.le-component.le-current-heading.le-dropdown-base.le-header.le-icon.le-navigation.le-popover.le-popup.le-scroll-progress.le-select.le-slot.le-string-input.entry.js.map