le-kit 0.1.18 → 0.2.0

package/dist/components/le-navigation.js

@@ -0,0 +1,598 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host, transformTag } from '@stencil/core/internal/client';
+import { g as generateId, h as classnames } from './utils.js';
+import { d as defineCustomElement$2, a as defineCustomElement$3, b as defineCustomElement$4, c as defineCustomElement$5, e as defineCustomElement$9, f as defineCustomElement$b, g as defineCustomElement$c } from './le-button2.js';
+import { d as defineCustomElement$a } from './le-collapse2.js';
+import { d as defineCustomElement$8 } from './le-dropdown-base2.js';
+import { d as defineCustomElement$7 } from './le-icon2.js';
+import { d as defineCustomElement$6 } from './le-popover2.js';
+
+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)}.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{display:flex;align-items:center;gap:var(--le-spacing-2)}.nav-horizontal-shell{position:relative}.nav-horizontal-measure{position:absolute;left:-10000px;top:-10000px;visibility:hidden;pointer-events:none;display:flex;align-items:center;gap:var(--le-spacing-2);flex-wrap:wrap}.nav-horizontal.wrap{flex-wrap:wrap}.nav-horizontal.nowrap{flex-wrap:nowrap;overflow:hidden}.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)}.more-trigger-wrap{display:flex;align-items:center}.more-trigger-wrap.is-measure{position:absolute;visibility:hidden;pointer-events:none}.more-trigger-wrap.is-visible{position:static;visibility:visible}.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}le-popover::part(content){padding:var(--le-spacing-1)}`;
+
+const LeNavigation$1 = /*@__PURE__*/ proxyCustomElement(class LeNavigation extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.leNavItemSelect = createEvent(this, "leNavItemSelect", 7);
+        this.leNavItemToggle = createEvent(this, "leNavItemToggle", 7);
+    }
+    get el() { return this; }
+    /**
+     * Navigation items.
+     * Can be passed as an array or JSON string (same pattern as le-select).
+     */
+    items = [];
+    /**
+     * Layout orientation.
+     */
+    orientation = 'vertical';
+    /**
+     * Horizontal wrapping behavior.
+     * If false, overflow behavior depends on `overflowMode`.
+     */
+    wrap = true;
+    /**
+     * 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';
+    /**
+     * 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 = {};
+    overflowIds = [];
+    hamburgerActive = false;
+    submenuQueries = {};
+    navContainerEl;
+    measureEl;
+    measureMoreEl;
+    topItemEls = new Map();
+    popoverRefs = new Map();
+    resizeObserver;
+    instanceId = generateId('le-nav');
+    handleLayoutInputsChange() {
+        this.scheduleOverflowRecalc();
+    }
+    componentDidLoad() {
+        this.setupResizeObserver();
+        this.scheduleOverflowRecalc();
+    }
+    disconnectedCallback() {
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = undefined;
+    }
+    componentDidRender() {
+        // In case refs change after render.
+        this.scheduleOverflowRecalc();
+    }
+    setupResizeObserver() {
+        this.resizeObserver?.disconnect();
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        this.resizeObserver = new ResizeObserver(() => this.computeOverflow());
+        this.observeContainer(this.navContainerEl);
+    }
+    observeContainer(el) {
+        if (!this.resizeObserver)
+            return;
+        this.resizeObserver.disconnect();
+        if (el)
+            this.resizeObserver.observe(el);
+    }
+    scheduleOverflowRecalc() {
+        // Avoid work for vertical layout.
+        if (this.orientation !== 'horizontal')
+            return;
+        // Ensure it runs after layout.
+        requestAnimationFrame(() => this.computeOverflow());
+    }
+    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());
+    };
+    getTopLevelIds(items) {
+        return items.map((item, index) => this.getItemId(item, String(index)));
+    }
+    computeOverflow() {
+        // Only applies to horizontal, non-wrapping navs.
+        if (this.orientation !== 'horizontal' || this.wrap) {
+            if (this.overflowIds.length)
+                this.overflowIds = [];
+            if (this.hamburgerActive)
+                this.hamburgerActive = false;
+            return;
+        }
+        const container = this.navContainerEl;
+        if (!container)
+            return;
+        const topIds = this.getTopLevelIds(this.parsedItems);
+        const widths = topIds.map(id => this.topItemEls.get(id)?.getBoundingClientRect().width ?? 0);
+        const totalWidth = widths.reduce((a, b) => a + b, 0);
+        const availableWidth = container.getBoundingClientRect().width;
+        if (this.overflowMode === 'hamburger') {
+            const shouldHamburger = totalWidth > availableWidth;
+            if (shouldHamburger !== this.hamburgerActive) {
+                this.hamburgerActive = shouldHamburger;
+            }
+            if (this.overflowIds.length)
+                this.overflowIds = [];
+            return;
+        }
+        // overflowMode === 'more'
+        this.computeOverflowMoreByWrap(availableWidth);
+    }
+    computeOverflowMoreByWrap(availableWidth) {
+        const container = this.navContainerEl;
+        const measure = this.measureEl;
+        const measureMore = this.measureMoreEl;
+        const items = this.parsedItems;
+        if (!container || !measure)
+            return;
+        // Ensure measurement container matches visible container width.
+        measure.style.width = `${availableWidth}px`;
+        const allIds = this.getTopLevelIds(items);
+        const itemEls = allIds
+            .map(id => measure.querySelector(`[data-nav-id="${CSS.escape(id)}"]`))
+            .filter((el) => !!el);
+        // Reset measurement visibility.
+        itemEls.forEach(el => {
+            el.style.display = '';
+        });
+        if (measureMore) {
+            measureMore.style.display = 'none';
+        }
+        if (itemEls.length === 0) {
+            if (this.overflowIds.length)
+                this.overflowIds = [];
+            return;
+        }
+        const firstRowTop = Math.min(...itemEls.map(el => el.offsetTop));
+        const overflowSet = new Set();
+        // Pass 1: detect which items fall onto rows > 1 (without "More" in flow).
+        itemEls.forEach(el => {
+            const id = el.getAttribute('data-nav-id');
+            if (!id)
+                return;
+            if (el.offsetTop > firstRowTop)
+                overflowSet.add(id);
+        });
+        if (overflowSet.size === 0) {
+            if (this.overflowIds.length)
+                this.overflowIds = [];
+            return;
+        }
+        // Pass 2: show "More" and iteratively move items into overflow until "More" fits on row 1.
+        if (measureMore) {
+            measureMore.style.display = '';
+        }
+        // Hide currently overflowing items.
+        itemEls.forEach(el => {
+            const id = el.getAttribute('data-nav-id');
+            if (!id)
+                return;
+            if (overflowSet.has(id))
+                el.style.display = 'none';
+        });
+        const getVisibleItemEls = () => itemEls.filter(el => el.style.display !== 'none');
+        while (measureMore) {
+            const visible = getVisibleItemEls();
+            const rowTop = visible.length ? Math.min(...visible.map(el => el.offsetTop)) : 0;
+            if (measureMore.offsetTop <= rowTop)
+                break;
+            if (visible.length === 0)
+                break;
+            // Remove one last visible item and retry.
+            const last = visible[visible.length - 1];
+            const lastId = last.getAttribute('data-nav-id');
+            if (!lastId)
+                break;
+            last.style.display = 'none';
+            overflowSet.add(lastId);
+        }
+        const overflowIds = allIds.filter(id => overflowSet.has(id));
+        const same = overflowIds.length === this.overflowIds.length &&
+            overflowIds.every((v, i) => v === this.overflowIds[i]);
+        if (!same) {
+            this.overflowIds = overflowIds;
+        }
+    }
+    renderHorizontalMeasureItem(item, index) {
+        const id = this.getItemId(item, String(index));
+        const children = this.getChildItems(item);
+        const hasChildren = children.length > 0;
+        const setRef = (el) => {
+            if (el)
+                this.topItemEls.set(id, el);
+        };
+        if (!hasChildren) {
+            return (h("div", { class: "h-item", ref: setRef, "data-nav-id": id }, h("span", { class: "h-link" }, 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)))));
+        }
+        return (h("div", { class: "h-item", ref: setRef, "data-nav-id": id }, h("span", { class: "h-trigger" }, h("span", { class: "h-link" }, item.iconStart && (h("span", { class: "nav-icon", "aria-hidden": "true" }, item.iconStart)), h("span", { class: "h-label" }, item.label)), h("span", { class: "h-submenu-toggle", "aria-hidden": "true" }, h("span", { class: "nav-chevron" }, "\u25BC")))));
+    }
+    renderVerticalList(items, { depth, pathPrefix, autoOpenIds, searchable, searchQuery, searchPlaceholder, emptyText, submenuId, }) {
+        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' };
+            return (h("li", { class: classnames('nav-node', {
+                    'disabled': item.disabled,
+                    'selected': item.selected,
+                    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", ...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);
+                    }
+                } }, 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,
+            })))));
+        })))));
+    }
+    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' };
+            return (h("div", { class: "h-item" }, h(TagType, { class: classnames('h-link', {
+                    disabled: item.disabled,
+                    selected: item.selected,
+                }), ...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;
+        return (h("div", { class: "h-item" }, 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,
+            }), 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);
+                }
+                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("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("button", { type: "button", class: "h-submenu-toggle", "aria-label": "Open submenu", onClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (item.disabled)
+                    return;
+                this.popoverRefs.get(submenuId)?.toggle();
+            } }, 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,
+        })))));
+    }
+    renderHorizontal() {
+        const items = this.parsedItems;
+        const overflowSet = new Set(this.overflowIds);
+        const overflowItems = [];
+        items.forEach((item, index) => {
+            const id = this.getItemId(item, String(index));
+            if (!this.wrap && this.overflowMode === 'more' && overflowSet.has(id)) {
+                overflowItems.push(item);
+            }
+        });
+        // Hamburger mode: show a single trigger if anything overflows.
+        if (!this.wrap && this.overflowMode === 'hamburger' && this.hamburgerActive) {
+            return (h("div", { class: "nav-horizontal-shell" }, h("div", { class: "nav-horizontal-measure", "aria-hidden": "true", ref: el => {
+                    this.measureEl = el;
+                } }, items.map((item, index) => this.renderHorizontalMeasureItem(item, index)), h("div", { class: "h-item", ref: el => {
+                    this.measureMoreEl = el;
+                } }, h("button", { type: "button", class: "overflow-trigger" }, "More"))), h("div", { class: "nav-horizontal", ref: el => {
+                    this.navContainerEl = el;
+                    this.setupResizeObserver();
+                    this.observeContainer(this.navContainerEl);
+                } }, h("le-popover", { mode: "default", showClose: false, closeOnClickOutside: true, closeOnEscape: true, position: "bottom", align: "end", minWidth: "260px" }, h("button", { slot: "trigger", type: "button", class: "overflow-trigger", "aria-label": "Open menu" }, "\u2630"), h("div", { class: "popover-menu" }, this.renderVerticalList(items, { depth: 0, pathPrefix: '' }))))));
+        }
+        const showMore = !this.wrap && this.overflowMode === 'more' && overflowItems.length > 0;
+        return (h("div", { class: "nav-horizontal-shell", role: "menubar" }, h("div", { class: "nav-horizontal-measure", "aria-hidden": "true", ref: el => {
+                this.measureEl = el;
+            } }, items.map((item, index) => this.renderHorizontalMeasureItem(item, index)), h("div", { class: "h-item", ref: el => {
+                this.measureMoreEl = el;
+            } }, h("button", { type: "button", class: "overflow-trigger" }, "More"))), h("div", { class: classnames('nav-horizontal', {
+                wrap: this.wrap,
+                nowrap: !this.wrap,
+            }), ref: el => {
+                this.navContainerEl = el;
+                this.setupResizeObserver();
+                this.observeContainer(this.navContainerEl);
+            } }, items.map((item, index) => {
+            const id = this.getItemId(item, String(index));
+            const isOverflow = !this.wrap && this.overflowMode === 'more' && overflowSet.has(id);
+            if (isOverflow)
+                return null;
+            return this.renderHorizontalItem(item, index);
+        }), h("div", { class: classnames('more-trigger-wrap', {
+                'is-visible': showMore,
+                'is-measure': !showMore,
+            }) }, h("le-popover", { mode: "default", position: "bottom", align: "end", minWidth: "260px", showClose: false }, h("button", { slot: "trigger", type: "button", class: "overflow-trigger", "aria-label": "More" }, "More"), h("div", { class: "popover-menu" }, this.renderVerticalList(overflowItems, { depth: 0, pathPrefix: '' })))))));
+    }
+    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"]
+    }; }
+    static get style() { return leNavigationCss(); }
+}, [769, "le-navigation", {
+        "items": [1],
+        "orientation": [513],
+        "wrap": [516],
+        "overflowMode": [513, "overflow-mode"],
+        "searchable": [4],
+        "searchPlaceholder": [1, "search-placeholder"],
+        "emptyText": [1, "empty-text"],
+        "submenuSearchable": [4, "submenu-searchable"],
+        "searchQuery": [32],
+        "openState": [32],
+        "overflowIds": [32],
+        "hamburgerActive": [32],
+        "submenuQueries": [32]
+    }, undefined, {
+        "items": ["handleLayoutInputsChange"],
+        "orientation": ["handleLayoutInputsChange"],
+        "wrap": ["handleLayoutInputsChange"],
+        "overflowMode": ["handleLayoutInputsChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["le-navigation", "le-button", "le-checkbox", "le-collapse", "le-component", "le-dropdown-base", "le-icon", "le-popover", "le-popup", "le-select", "le-slot", "le-string-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "le-navigation":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), LeNavigation$1);
+            }
+            break;
+        case "le-button":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$c();
+            }
+            break;
+        case "le-checkbox":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$b();
+            }
+            break;
+        case "le-collapse":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$a();
+            }
+            break;
+        case "le-component":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$9();
+            }
+            break;
+        case "le-dropdown-base":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$8();
+            }
+            break;
+        case "le-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$7();
+            }
+            break;
+        case "le-popover":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$6();
+            }
+            break;
+        case "le-popup":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$5();
+            }
+            break;
+        case "le-select":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$4();
+            }
+            break;
+        case "le-slot":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "le-string-input":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const LeNavigation = LeNavigation$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LeNavigation, defineCustomElement };
+//# sourceMappingURL=le-navigation.js.map
+
+//# sourceMappingURL=le-navigation.js.map