le-kit 0.3.0 → 0.3.2

package/dist/esm/{le-button_13.entry.js → le-bar_16.entry.js}

@@ -1,7 +1,460 @@
-import { r as registerInstance, d as createEvent, c as getElement, h, F as Fragment, H as Host, e as getAssetPath, f as getLeKitConfig } from './index-BqH-zsXr.js';
-import { c as classnames, o as observeModeChanges, g as generateId } from './utils-CdBk0DdF.js';
+import { r as registerInstance, d as createEvent, c as getElement, h, H as Host, F as Fragment, e as getAssetPath, f as getLeKitConfig } from './index-BqH-zsXr.js';
+import { g as generateId, c as classnames, o as observeModeChanges } from './utils-CdBk0DdF.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),
@@ -435,7 +888,7 @@ const LeComponent = class {
         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, ''), onLeChange: (e) => this.handlePropertyChange(attr.name, e.detail.value, type) })));
+            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') {
@@ -1121,6 +1574,496 @@ const LeHeader = class {
 };
 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 = {};
+async function fetchIcon({ name }) {
+    if (iconCache[name]) {
+        return iconCache[name];
+    }
+    if (!requestCache[name]) {
+        console.log(`Fetching icon "${name}"`, getAssetPath(`./assets/icons/${name}.json`));
+        requestCache[name] = fetch(getAssetPath(`./assets/icons/${name}.json`))
+            .then(resp => resp.json())
+            .catch(() => {
+            console.error(`"${name}" is not a valid name`);
+            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: 'ef551908a289cd765ae88ded83b99057d510e142', 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-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-spacing-2)}.nav-bar{flex:1 1 0%;min-width:0;--le-bar-gap:var(--le-spacing-2)}.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}.h-item{display:flex;align-items:center}.h-link{display:inline-flex;align-items:center;gap:var(--le-spacing-2);padding:var(--le-spacing-2) var(--le-spacing-3);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-spacing-2);padding:var(--le-spacing-2) var(--le-spacing-3);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", 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", 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
@@ -2072,7 +3015,7 @@ const leSelectCss = () => `:host{display:inline-block;min-width:150px;--le-selec
 const LeSelect = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.leChange = createEvent(this, "leChange");
+        this.leChange = createEvent(this, "change");
         this.leOpen = createEvent(this, "leOpen");
         this.leClose = createEvent(this, "leClose");
     }
@@ -2234,13 +3177,13 @@ const LeSelect = class {
     }
     render() {
         const hasValue = this.selectedOption !== undefined;
-        return (h("le-component", { key: '1659550d258d0d647cefa5715cc9cbcf5ac3b6c7', component: "le-select" }, h("le-dropdown-base", { key: '4210afe927afaf35adeb25794d684d8bf6265604', 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: '204b62bae909fb979f84f79ab64a7405f44df0a7', variant: this.variant && this.variant !== 'default' ? this.variant : 'outlined', slot: "trigger", align: "space-between", class: {
+        return (h("le-component", { key: '1d67b699f3638ef75a15fecdbba80a531ea90681', component: "le-select" }, h("le-dropdown-base", { key: '9a52d99cdf1f0f0c1b9de6e10f5a694b580469ab', 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: '20c02507679ed44cca089e15801ac8f57cbe3938', 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: 'abb56957a4ddf6b39c3554b26e46c0ad51e022be', class: "trigger-label" }, hasValue ? this.selectedOption.label : this.placeholder)), this.searchable && this.open && (h("div", { key: '25d58fdfddc45f7fde1a41defdbd50dbddd70ea5', class: "multiselect-search", slot: "header" }, h("le-string-input", { key: '81b290d28bed6190b9ec165897ec2e7d758575bf', mode: "default", inputRef: el => (this.inputEl = el), class: "search-input", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchInput })))), this.name && h("input", { key: '70e413d81035cdd61bfdaeae27ba3ced0a25f544', type: "hidden", name: this.name, value: this.value?.toString() ?? '' })));
+                : 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: '5eea76015ea63775315e5bf46e7b99c65cd5bc22', class: "trigger-label" }, hasValue ? this.selectedOption.label : this.placeholder)), this.searchable && this.open && (h("div", { key: 'c3cb84ae7d333ee84d40639fae5ebea7ba4eda36', class: "multiselect-search", slot: "header" }, h("le-string-input", { key: '1e887755cb1ec376f49d4bda1e86d5bb0709fbce', mode: "default", inputRef: el => (this.inputEl = el), class: "search-input", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchInput })))), this.name && h("input", { key: '1cbcbe00822aeda2ccfecedef506f0de01c1b010', type: "hidden", name: this.name, value: this.value?.toString() ?? '' })));
     }
     static get watchers() { return {
         "value": ["handleValueChange"],
@@ -2731,5 +3674,5 @@ const LeStringInput = class {
 };
 LeStringInput.style = leStringInputCss();
 
-export { 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, 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-button.le-checkbox.le-collapse.le-component.le-current-heading.le-dropdown-base.le-header.le-popover.le-popup.le-scroll-progress.le-select.le-slot.le-string-input.entry.js.map
+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