le-kit 0.2.4 → 0.2.6

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, d as createEvent, c as getElement, h, H as Host } from './index-BqH-zsXr.js';
 import { g as generateId, c as classnames } from './utils-CdBk0DdF.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.align-end{justify-content:flex-end}.nav-horizontal.align-center{justify-content:center}.nav-horizontal.align-space-between{justify-content:space-between}.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 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) {
@@ -72,19 +72,14 @@ const LeNavigation = class {
     leNavItemToggle;
     searchQuery = '';
     openState = {};
+    /** IDs of items currently in overflow (from le-bar) */
     overflowIds = [];
+    /** Whether hamburger mode is active (from le-bar) */
     hamburgerActive = false;
-    fallbackHamburger = false;
     submenuQueries = {};
-    navContainerEl;
-    measureEl;
-    measureMoreEl;
-    topItemEls = new Map();
+    /** Whether the overflow popover is open */
+    overflowPopoverOpen = false;
     popoverRefs = new Map();
-    moreTriggerEl;
-    hamburgerPopoverEl;
-    morePopoverEl;
-    resizeObserver;
     instanceId = generateId('le-nav');
     partFromOptionPart(base, part) {
         const raw = (part ?? '').trim();
@@ -99,40 +94,12 @@ const LeNavigation = class {
         return [base, ...tokens.map(t => `${base}-${t}`)].join(' ');
     }
     handleLayoutInputsChange() {
-        this.scheduleOverflowRecalc();
-    }
-    componentDidLoad() {
-        this.setupResizeObserver();
-        this.scheduleOverflowRecalc();
+        // Reset overflow state when layout inputs change
+        this.overflowIds = [];
+        this.hamburgerActive = false;
     }
     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());
+        // Cleanup if needed
     }
     get parsedItems() {
         if (typeof this.items === 'string') {
@@ -246,149 +213,16 @@ const LeNavigation = class {
         // 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 || this.overflowIds.length)
-                this.overflowIds = [];
-            if (this.hamburgerActive)
-                this.hamburgerActive = false;
-            if (this.fallbackHamburger)
-                this.fallbackHamburger = 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 || this.overflowIds.length)
-                this.overflowIds = [];
-            if (this.fallbackHamburger)
-                this.fallbackHamburger = false;
-            return;
-        }
-        // overflowMode === 'more'
-        if (this.hamburgerActive)
-            this.hamburgerActive = false;
-        const computedOverflow = this.computeOverflowMoreByWrap(availableWidth);
-        if (!computedOverflow)
-            return;
-        // Fallback to hamburger when "More" would leave too few items visible
-        // or when the trigger itself cannot fit the row.
-        const visibleCount = this.parsedItems.length - computedOverflow.length;
-        const moreWidth = this.moreTriggerEl?.getBoundingClientRect().width ?? 0;
-        const minVisible = Math.max(0, Number(this.minVisibleItemsForMore) || 0);
-        const shouldFallback = (computedOverflow.length > 0 && visibleCount < minVisible) ||
-            (moreWidth > 0 && moreWidth > availableWidth);
-        if (shouldFallback !== this.fallbackHamburger) {
-            this.fallbackHamburger = shouldFallback;
-        }
-        const nextOverflow = shouldFallback ? [] : computedOverflow;
-        const same = nextOverflow.length === this.overflowIds?.length &&
-            nextOverflow.every((v, i) => v === this.overflowIds[i]);
-        if (!same) {
-            this.overflowIds = nextOverflow;
-        }
-    }
-    computeOverflowMoreByWrap(availableWidth) {
-        const container = this.navContainerEl;
-        const measure = this.measureEl;
-        const measureMore = this.measureMoreEl;
-        const items = this.parsedItems;
-        if (!container || !measure)
-            return null;
-        // Ensure measurement container matches visible container width.
-        measure.style.width = `${availableWidth}px`;
-        // Keep the measured "More" width aligned with the real trigger width (supports slotted content).
-        const realMoreWidth = this.moreTriggerEl?.getBoundingClientRect().width;
-        if (measureMore && realMoreWidth && realMoreWidth > 0) {
-            const btn = measureMore.querySelector('button');
-            if (btn) {
-                btn.style.width = `${realMoreWidth}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) {
-            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) {
-            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));
-        return 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("le-icon", { name: "chevron-down" })))));
-    }
+    handleBarOverflowChange = (e) => {
+        this.overflowIds = e.detail.overflowingIds;
+        this.hamburgerActive = e.detail.hamburgerActive;
+    };
+    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();
@@ -439,14 +273,14 @@ const LeNavigation = class {
                 ? { href: item.href, role: 'menuitem' }
                 : { type: 'button', role: 'menuitem' };
             const itemPart = this.partFromOptionPart('item', item.part);
-            return (h("div", { class: "h-item" }, h(TagType, { class: classnames('h-link', {
+            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" }, h("le-popover", { ref: el => {
+        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', {
@@ -483,75 +317,52 @@ const LeNavigation = class {
             closePopover: () => this.popoverRefs.get(submenuId)?.hide(),
         })))));
     }
-    renderHorizontal() {
+    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);
-        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);
-            }
-        });
-        const showHamburger = !this.wrap &&
-            ((this.overflowMode === 'hamburger' && this.hamburgerActive) ||
-                (this.overflowMode === 'more' && this.fallbackHamburger));
-        // Hamburger mode: show a single trigger if anything overflows (or when forced for "more").
-        if (showHamburger) {
-            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: classnames('nav-horizontal', {
-                    'align-end': this.align === 'end',
-                    'align-center': this.align === 'center',
-                    'align-space-between': this.align === 'space-between',
-                }), ref: el => {
-                    this.navContainerEl = el;
-                    this.setupResizeObserver();
-                    this.observeContainer(this.navContainerEl);
-                } }, h("le-popover", { ref: el => {
-                    this.hamburgerPopoverEl = el;
-                }, mode: "default", showClose: false, closeOnClickOutside: true, closeOnEscape: true, position: "bottom", align: "end", minWidth: "260px" }, h("button", { slot: "trigger", type: "button", class: "overflow-trigger", part: "hamburger-trigger", "aria-label": "Open menu" }, h("slot", { name: "hamburger-trigger" }, h("le-icon", { name: "hamburger" }))), h("div", { class: "popover-menu" }, this.renderVerticalList(items, {
-                depth: 0,
-                pathPrefix: '',
-                closePopover: () => this.hamburgerPopoverEl?.hide(),
-            }))))));
+        // 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);
+            });
         }
-        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" }, h("le-icon", { name: "ellipsis-horizontal" })))), h("div", { class: classnames('nav-horizontal', {
-                'wrap': this.wrap,
-                'nowrap': !this.wrap,
+        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 || 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',
-            }), 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", { ref: el => {
-                this.morePopoverEl = el;
-            }, mode: "default", position: "bottom", align: "end", minWidth: "260px", showClose: false }, h("button", { slot: "trigger", type: "button", class: "overflow-trigger", part: "more-trigger", "aria-label": "More", ref: el => {
-                if (el)
-                    this.moreTriggerEl = el;
-            } }, h("slot", { name: "more-trigger" }, h("le-icon", { name: "ellipsis-horizontal" }))), h("div", { class: "popover-menu" }, this.renderVerticalList(overflowItems, {
-            depth: 0,
-            pathPrefix: '',
-            closePopover: () => this.morePopoverEl?.hide(),
-        })))))));
+            }), overflow: overflowMode, alignItems: this.getBarAlignment(), disablePopover: true, onLeBarOverflowChange: this.handleBarOverflowChange }, items.map((item, index) => this.renderHorizontalItem(item, index))), showOverflowButton && this.renderOverflowPopover()));
     }
     render() {
         const items = this.parsedItems;