le-kit 0.1.19 → 0.2.0

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

@@ -0,0 +1,499 @@
+'use strict';
+
+var index = require('./index-pT2cVC5w.js');
+var utils = require('./utils-ByTskwtC.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 = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.leNavItemSelect = index.createEvent(this, "leNavItemSelect");
+        this.leNavItemToggle = index.createEvent(this, "leNavItemToggle");
+    }
+    get el() { return index.getElement(this); }
+    /**
+     * Navigation items.
+     * Can be passed as an array or JSON string (same pattern as le-select).
+     */
+    items = [];
+    /**
+     * Layout orientation.
+     */
+    orientation = '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 = utils.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$1) {
+        const id = this.getItemId(item, String(index$1));
+        const children = this.getChildItems(item);
+        const hasChildren = children.length > 0;
+        const setRef = (el) => {
+            if (el)
+                this.topItemEls.set(id, el);
+        };
+        if (!hasChildren) {
+            return (index.h("div", { class: "h-item", ref: setRef, "data-nav-id": id }, index.h("span", { class: "h-link" }, item.iconStart && (index.h("span", { class: "nav-icon", "aria-hidden": "true" }, item.iconStart)), index.h("span", { class: "h-label" }, item.label), item.iconEnd && (index.h("span", { class: "nav-icon nav-icon-end", "aria-hidden": "true" }, item.iconEnd)))));
+        }
+        return (index.h("div", { class: "h-item", ref: setRef, "data-nav-id": id }, index.h("span", { class: "h-trigger" }, index.h("span", { class: "h-link" }, item.iconStart && (index.h("span", { class: "nav-icon", "aria-hidden": "true" }, item.iconStart)), index.h("span", { class: "h-label" }, item.label)), index.h("span", { class: "h-submenu-toggle", "aria-hidden": "true" }, index.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 (index.h("div", { class: utils.classnames('nav-vertical', { 'is-submenu': !!submenuId }) }, searchable && (index.h("div", { class: "nav-search" }, index.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 ? (index.h("div", { class: "nav-empty" }, emptyText ?? this.emptyText)) : (index.h("ul", { class: "nav-list", role: "tree" }, filtered.map((item, index$1) => {
+            const path = pathPrefix ? `${pathPrefix}.${index$1}` : String(index$1);
+            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 (index.h("li", { class: utils.classnames('nav-node', {
+                    'disabled': item.disabled,
+                    'selected': item.selected,
+                    open,
+                    'has-children': hasChildren,
+                }), key: id, role: "none" }, index.h("div", { class: "nav-row", style: { paddingLeft } }, hasChildren ? (index.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 }, index.h("le-icon", { name: "chevron-down", class: "nav-chevron", "aria-hidden": "true" }))) : (index.h("span", { class: "nav-toggle-spacer", "aria-hidden": "true" })), index.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 && (index.h("span", { class: "nav-icon", "aria-hidden": "true" }, item.iconStart)), index.h("span", { class: "nav-text" }, index.h("span", { class: "nav-label" }, item.label), item.description && (index.h("span", { class: "nav-description" }, item.description))), item.iconEnd && (index.h("span", { class: "nav-icon nav-icon-end", "aria-hidden": "true" }, item.iconEnd)))), hasChildren && (index.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$1) {
+        const id = this.getItemId(item, String(index$1));
+        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 (index.h("div", { class: "h-item" }, index.h(TagType, { class: utils.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 && (index.h("span", { class: "nav-icon", "aria-hidden": "true" }, item.iconStart)), index.h("span", { class: "h-label" }, item.label), item.iconEnd && (index.h("span", { class: "nav-icon nav-icon-end", "aria-hidden": "true" }, item.iconEnd)))));
+        }
+        const submenuId = id;
+        return (index.h("div", { class: "h-item" }, index.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" }, index.h("div", { slot: "trigger", class: utils.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 ? (index.h("a", { class: "h-link", href: item.href, onClick: (e) => {
+                e.stopPropagation();
+                this.handleItemSelect(e, item, id);
+            } }, item.iconStart && (index.h("span", { class: "nav-icon", "aria-hidden": "true" }, item.iconStart)), index.h("span", { class: "h-label" }, item.label))) : (index.h("button", { type: "button", class: "h-link", onClick: (e) => {
+                e.stopPropagation();
+                if (item.disabled)
+                    return;
+                this.popoverRefs.get(submenuId)?.toggle();
+            } }, item.iconStart && (index.h("span", { class: "nav-icon", "aria-hidden": "true" }, item.iconStart)), index.h("span", { class: "h-label" }, item.label))), index.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();
+            } }, index.h("span", { class: "nav-chevron", "aria-hidden": "true" }, index.h("le-icon", { name: "chevron-down" })))), index.h("div", { class: "popover-menu" }, this.renderVerticalList(children, {
+            depth: 0,
+            pathPrefix: String(index$1),
+            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 (index.h("div", { class: "nav-horizontal-shell" }, index.h("div", { class: "nav-horizontal-measure", "aria-hidden": "true", ref: el => {
+                    this.measureEl = el;
+                } }, items.map((item, index) => this.renderHorizontalMeasureItem(item, index)), index.h("div", { class: "h-item", ref: el => {
+                    this.measureMoreEl = el;
+                } }, index.h("button", { type: "button", class: "overflow-trigger" }, "More"))), index.h("div", { class: "nav-horizontal", ref: el => {
+                    this.navContainerEl = el;
+                    this.setupResizeObserver();
+                    this.observeContainer(this.navContainerEl);
+                } }, index.h("le-popover", { mode: "default", showClose: false, closeOnClickOutside: true, closeOnEscape: true, position: "bottom", align: "end", minWidth: "260px" }, index.h("button", { slot: "trigger", type: "button", class: "overflow-trigger", "aria-label": "Open menu" }, "\u2630"), index.h("div", { class: "popover-menu" }, this.renderVerticalList(items, { depth: 0, pathPrefix: '' }))))));
+        }
+        const showMore = !this.wrap && this.overflowMode === 'more' && overflowItems.length > 0;
+        return (index.h("div", { class: "nav-horizontal-shell", role: "menubar" }, index.h("div", { class: "nav-horizontal-measure", "aria-hidden": "true", ref: el => {
+                this.measureEl = el;
+            } }, items.map((item, index) => this.renderHorizontalMeasureItem(item, index)), index.h("div", { class: "h-item", ref: el => {
+                this.measureMoreEl = el;
+            } }, index.h("button", { type: "button", class: "overflow-trigger" }, "More"))), index.h("div", { class: utils.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);
+        }), index.h("div", { class: utils.classnames('more-trigger-wrap', {
+                'is-visible': showMore,
+                'is-measure': !showMore,
+            }) }, index.h("le-popover", { mode: "default", position: "bottom", align: "end", minWidth: "260px", showClose: false }, index.h("button", { slot: "trigger", type: "button", class: "overflow-trigger", "aria-label": "More" }, "More"), index.h("div", { class: "popover-menu" }, this.renderVerticalList(overflowItems, { depth: 0, pathPrefix: '' })))))));
+    }
+    render() {
+        const items = this.parsedItems;
+        if (this.orientation === 'horizontal') {
+            return (index.h(index.Host, null, index.h("le-component", { component: "le-navigation" }, this.renderHorizontal())));
+        }
+        return (index.h(index.Host, null, index.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();
+
+exports.le_navigation = LeNavigation;
+//# sourceMappingURL=le-navigation.entry.cjs.js.map

package/dist/cjs/le-number-input.cjs.entry.js

@@ -190,7 +190,7 @@ const LeNumberInput = class {
         this.emitChange();
     };
     render() {
-        return (index.h("le-component", { key: '5403532693c953ecb18a4eed385e51e65b85b25f', component: "le-number-input", hostClass: utils.classnames({ 'disabled': this.disabled }) }, index.h("div", { key: '805a34c835e525c3b2058b1ed857c902820a8161', class: "le-input-wrapper" }, this.label && (index.h("label", { key: '65e7e6aa6f668407ca64be9e6aa6a1756ac379c3', class: "le-input-label", htmlFor: this.name }, this.label)), index.h("div", { key: '9128a87c28796276b7b40c88a6a95a22fe7aea86', class: utils.classnames('le-input-container', { 'has-error': !this.isValid }) }, this.iconStart && (index.h("span", { key: '2d6a2026db781100de617c6150e7e790f07cb778', class: "icon-start" }, this.iconStart)), index.h("input", { key: '5a17f9fca5f5e2706e34c0dfc3e5f74730c631b2', id: this.name, type: "number", name: this.name, placeholder: this.placeholder, min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onKeyDown: this.handleKeyDown, onWheel: this.handleWheel }), this.showSpinners && (index.h("div", { key: '4e075f49e495e320dfd3ec63936ea57a1798b5ab', class: "le-input-controls" }, index.h("le-button", { key: 'b3e4895ec49aa3a8579bf348c97f84e6e5667e5c', mode: "default", variant: "clear", size: "small", "icon-only": true, class: "le-input-control-btn", onClick: this.increment, disabled: this.disabled || this.readonly || (this.max !== undefined && this.value >= this.max), tabindex: "-1" }, index.h("span", { key: '436704faafdea57baa4df0d298ed1700cec81df8', slot: "icon-only" }, "\u2191")), index.h("le-button", { key: '154ddac168a71bde52370a389e8f1bfc46dd46eb', mode: "default", variant: "clear", size: "small", "icon-only": true, class: "le-input-control-btn", onClick: this.decrement, disabled: this.disabled || this.readonly || (this.min !== undefined && this.value <= this.min), tabindex: "-1" }, index.h("span", { key: '4575bc557baad459ff91ec97a6384f766c1d01b2', slot: "icon-only" }, "\u2193"))))), !this.isValid && index.h("div", { key: '4b5d085fa37c799d594fccdb629f6c1cba80255e', class: "le-input-error" }, this.validationMessage), index.h("div", { key: 'd0d1486e6243e4ef2fbb462b41853b942c8789cb', class: "le-input-description" }, index.h("le-slot", { key: 'c841fb065ed38fe88d2b165d8cd8fde7e483920d', name: "description", type: "text", tag: "p", label: "Description" }, index.h("slot", { key: 'e5a3be8caf94d69cd8a105c64dfa5e473c00ab5d', name: "description" }))))));
+        return (index.h("le-component", { key: '5ca731314dea05358c17f1d1341f60c092f7f3cf', component: "le-number-input", hostClass: utils.classnames({ 'disabled': this.disabled }) }, index.h("div", { key: '59d4e240934731b055ac907ae2834e0b298cfa43', class: "le-input-wrapper" }, this.label && (index.h("label", { key: 'c69754d91ce30e387336e79cb964d2b3811b6143', class: "le-input-label", htmlFor: this.name }, this.label)), index.h("div", { key: '87b8fd88f702752b78e392b668081dcabc3ee818', class: utils.classnames('le-input-container', { 'has-error': !this.isValid }) }, this.iconStart && (index.h("span", { key: 'df1ae914d42940d08378af548b3f75a61da4221d', class: "icon-start" }, this.iconStart)), index.h("input", { key: '65cf776d7ed9ba024cb74b0b28340e4122789f1d', id: this.name, type: "number", name: this.name, placeholder: this.placeholder, min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onKeyDown: this.handleKeyDown, onWheel: this.handleWheel }), this.showSpinners && (index.h("div", { key: '2011b1d921ce59471f73e0e8ee71c31009cd6ccd', class: "le-input-controls" }, index.h("le-button", { key: '19d8bfdda57d33770d577477abc065b1f3c9f8bd', mode: "default", variant: "clear", size: "small", "icon-only": true, class: "le-input-control-btn", onClick: this.increment, disabled: this.disabled || this.readonly || (this.max !== undefined && this.value >= this.max), tabindex: "-1" }, index.h("span", { key: 'b9e929938c42d29d3d8f52547dbb2ea0d6660f59', slot: "icon-only" }, "\u2191")), index.h("le-button", { key: '0ac2bc5438d684deb4b29e229b7a7b1db09578e7', mode: "default", variant: "clear", size: "small", "icon-only": true, class: "le-input-control-btn", onClick: this.decrement, disabled: this.disabled || this.readonly || (this.min !== undefined && this.value <= this.min), tabindex: "-1" }, index.h("span", { key: 'ec2933d49fbff75b14c2c7a3ff994f15ab22b08f', slot: "icon-only" }, "\u2193"))))), !this.isValid && index.h("div", { key: '7dc47495f4c2aaf3f91efaad08f56fae47de3d05', class: "le-input-error" }, this.validationMessage), index.h("div", { key: '165415790fab9e911ab236570e2f2723043deebb', class: "le-input-description" }, index.h("le-slot", { key: 'bc6401930e0546dfae4bba8436ae56392fef3c1b', name: "description", type: "text", tag: "p", label: "Description" }, index.h("slot", { key: '0f39013377f404bfd78a4f19318a76e20d66f99a', name: "description" }))))));
     }
     static get watchers() { return {
         "value": ["valueChanged"]

package/dist/cjs/le-round-progress.cjs.entry.js

@@ -92,7 +92,7 @@ const LeRoundProgress = class {
         return (index.h("svg", { viewBox: this.getViewBox(), class: "round-progress" }, paths));
     }
     render() {
-        return (index.h("div", { key: 'ffb8f83f99c183fd82969cf6ec7822ccf4aa9af8', class: "round-progress--container" }, this.getPaths(), index.h("svg", { key: '29aa0e60c26968564b1e930a3b1b9d32460721dd', viewBox: this.getViewBox(), class: "round-progress round-progress--progress" }, index.h("path", { key: '7a5cd37e96a65fa6397704d88a4add6e2a1ec1e9', class: "round-progress--circle", "stroke-dasharray": this.getStrokeDashArray(), d: this.getPath() })), index.h("slot", { key: 'eb135e9bad29d96cba229c5a5e61e74d4e6392ec' })));
+        return (index.h("div", { key: '3ffd4b3088bb03af650e413b3c24b5c8206abe7b', class: "round-progress--container" }, this.getPaths(), index.h("svg", { key: 'd5b1a23bc9bf3092fa1e97857dcd1cb3d690d39d', viewBox: this.getViewBox(), class: "round-progress round-progress--progress" }, index.h("path", { key: 'a3ded815f03c77fbb693822223e10979ae0db760', class: "round-progress--circle", "stroke-dasharray": this.getStrokeDashArray(), d: this.getPath() })), index.h("slot", { key: '3d54c7c12e5930d51bc4dfcdcf1b82829eea8ad9' })));
     }
     static get watchers() { return {
         "value": ["updateValue"],

package/dist/cjs/le-segmented-control.cjs.entry.js

@@ -228,7 +228,7 @@ const LeSegmentedControl = class {
             'full-width': fullWidth,
             'disabled': disabled,
         };
-        return (index.h(index.Host, { key: '567a033dd9fbb023d599b918bdc9f6505a98b4be', class: `overflow-${this.overflow}` }, index.h("le-component", { key: '0f60a5e7985740f9309c1fbc98df297149a2988c', component: "le-segmented-control" }, index.h("div", { key: '6c5e3f60ed1ed2bace109750ab79a4a36edaf60b', class: classes, ref: el => (this.containerRef = el), role: "radiogroup", part: "container", onKeyDown: this.handleKeyDown, tabIndex: 0 }, segmentConfigs.map(option => {
+        return (index.h(index.Host, { key: '559bbf293fcd9108dfc04025562cee8d87fe87ba', class: `overflow-${this.overflow}` }, index.h("le-component", { key: '12cb853ddae94c506c5788882fb3336301e283c6', component: "le-segmented-control" }, index.h("div", { key: 'bedce1c124e8ab3daa089a74915afa8f6ed62f3d', class: classes, ref: el => (this.containerRef = el), role: "radiogroup", part: "container", onKeyDown: this.handleKeyDown, tabIndex: 0 }, segmentConfigs.map(option => {
             const optValue = this.getOptionValue(option);
             const isSelected = optValue === value;
             const isDisabled = option.disabled || disabled;

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

@@ -126,7 +126,7 @@ const LeStack = class {
         });
         // Slot style for admin mode - make items display in the same direction
         const slotStyle = `display: flex; flex-direction: ${this.getFlexDirection()}; gap: ${this.gap || 'var(--le-space-md)'}; flex-wrap: ${this.wrap ? 'wrap' : 'nowrap'}; justify-content: ${this.getJustifyContent()}; align-items: ${this.getAlignItems()};`;
-        return (index.h("le-component", { key: '39228201dedcc0975488238fbe18411cd48a6ad3', component: "le-stack", hostClass: hostClass }, index.h("div", { key: 'b091295bebfdbc4d7a650d592e9d9de826730a2d', class: "stack", part: "stack", style: style }, index.h("le-slot", { key: '32c1c13d8a818613c07aa7ba56505c65194755bb', name: "", description: `Items arranged ${this.direction}ly${this.maxItems ? ` (max ${this.maxItems})` : ''}`, type: "slot", "allowed-components": "le-text,le-box,le-card,le-button,le-stack", slotStyle: slotStyle }, index.h("slot", { key: '05110d4ab7abfc4fa1687ec110de0c482ad3588e' })))));
+        return (index.h("le-component", { key: '5f01f4afc716be565227e396952da314182de505', component: "le-stack", hostClass: hostClass }, index.h("div", { key: '1eef9ac4318f39038282c3574d0019c4d904b421', class: "stack", part: "stack", style: style }, index.h("le-slot", { key: 'f4445ca2070d685a3621df06dffe02b40cbb2db3', name: "", description: `Items arranged ${this.direction}ly${this.maxItems ? ` (max ${this.maxItems})` : ''}`, type: "slot", "allowed-components": "le-text,le-box,le-card,le-button,le-stack", slotStyle: slotStyle }, index.h("slot", { key: '90d40bfa5c766d6161614e90ab8f8cec8a0a6dc3' })))));
     }
 };
 LeStack.style = leStackDefaultCss();

package/dist/cjs/le-tab-bar.cjs.entry.js

@@ -225,7 +225,7 @@ const LeTabBar = class {
             'position-top': this.position === 'top',
             'position-bottom': this.position === 'bottom',
         };
-        return (index.h(index.Host, { key: '03f3a22715a909d668ff293a92a91f7120983ecd', class: classes }, index.h("le-component", { key: '86da25b4d88d889523e5b19206cd336e98fc32e7', component: "le-tab-bar" }, index.h("div", { key: 'f34a6496e03b15380b9839ec2104e2a19a62b685', class: "tablist", role: "tablist", "aria-orientation": "horizontal", part: "tablist", onKeyDown: this.handleKeyDown }, index.h("le-slot", { key: '35b09441b75eb660350bb0d636660249ba156195', name: "", type: "slot", allowedComponents: "le-tab" }, tabConfigs.map(tab => {
+        return (index.h(index.Host, { key: '99ecfa8de9c894f913ab1ea2a2293c4fe863a6e9', class: classes }, index.h("le-component", { key: '59de2d9ffe9710d9480b6666a539039b0a38675e', component: "le-tab-bar" }, index.h("div", { key: '13b4037e84ee994d924bd08dc6305f1ad7bab3bd', class: "tablist", role: "tablist", "aria-orientation": "horizontal", part: "tablist", onKeyDown: this.handleKeyDown }, index.h("le-slot", { key: 'cab80272032e911ce09549fbdc18c2eb9df1de74', name: "", type: "slot", allowedComponents: "le-tab" }, tabConfigs.map(tab => {
             const value = this.getTabValue(tab);
             const isSelected = value === selected;
             return (index.h("le-tab", { key: value, class: "tab", role: "tab", variant: "icon-only", label: tab.label, value: tab.value, icon: tab.icon, href: tab.href, selected: isSelected, disabled: tab.disabled, showLabel: this.showLabels, size: size, part: isSelected ? 'tab tab-active' : 'tab', "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : undefined, tabIndex: -1, onClick: () => this.handleTabClick(tab) }, index.h("span", { class: "tab-label" }, tab.label)));

package/dist/cjs/le-tab-panel.cjs.entry.js

@@ -84,11 +84,11 @@ const LeTabPanel = class {
     }
     render() {
         const shouldRender = this.shouldRenderContent();
-        return (index.h("le-component", { key: '8ae45da7951a15dd1178264f0fcd61f446b7f50c', component: "le-tab-panel" }, index.h("div", { key: 'cda465344d5c9d79945b924fca39f469c4535157', class: {
+        return (index.h("le-component", { key: '19aab1adeb6de102df6c92d84df1ea65b4143912', component: "le-tab-panel" }, index.h("div", { key: 'e7c75b5a093da0cf0563b4e374c98c2fba2e8cb1', class: {
                 'tab-panel': true,
                 'active': this.active,
                 'lazy-hidden': this.lazy && !this.active,
-            }, role: "tabpanel", "aria-hidden": !this.active ? 'true' : undefined, tabIndex: this.active ? 0 : -1 }, index.h("le-slot", { key: 'c7107b12b375e614b523b6ad4d3f1afb81e93bd6', name: "", description: "Tab panel content", type: "slot" }, shouldRender && index.h("slot", { key: '48580ffcedff46a2f9351e3790c257062b64d101' })))));
+            }, role: "tabpanel", "aria-hidden": !this.active ? 'true' : undefined, tabIndex: this.active ? 0 : -1 }, index.h("le-slot", { key: '0847f8b0cb41f5fbc131839160eadb51e9d5f5a4', name: "", description: "Tab panel content", type: "slot" }, shouldRender && index.h("slot", { key: 'c52b444823c3e981a3e832c16fa1cd5db53d6d33' })))));
     }
     static get watchers() { return {
         "active": ["activeChanged"]

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

@@ -127,7 +127,7 @@ const LeTab = class {
         const attrs = this.href
             ? { href: this.href, target: this.target, role: 'button' }
             : { disabled: this.disabled };
-        return (index.h(index.Host, { key: '3f96ce4f479bcd0ddd35f07dd488e9584484b464' }, index.h("le-component", { key: '33bacc8d4b513904d366570c250e1e2ddbc7c210', component: "le-tab" }, index.h(TagType, { key: '5addc8519aee06d8c3406dd8684e4b8d2cd86caa', class: utils.classnames('le-tab-container', `le-tab-align-${this.align}`, classes), part: "button", ...attrs, onClick: this.handleClick, tabIndex: this.focusable ? 0 : -1 }, this.icon !== undefined ? (index.h("div", { class: "icon-only" }, index.h("div", { class: "icon" }, this.icon), this.showLabel && index.h("span", { class: "icon-label" }, this.label))) : (index.h(index.Fragment, null, index.h("span", { class: "le-tab-label" }, this.iconStart && (index.h("span", { class: "icon-start", part: "icon-start" }, this.iconStart)), index.h("le-slot", { name: "", description: "Tab text", type: "text", class: "content", part: "content" }, index.h("slot", null, this.label))), this.iconEnd && (index.h("span", { class: "icon-end", part: "icon-end" }, this.iconEnd))))))));
+        return (index.h(index.Host, { key: '7e073b5ca3bba044c2325571ca9aed94b0be66de' }, index.h("le-component", { key: 'b6c6952c9f8b48b5f4f7851d1216de160dd16c45', component: "le-tab" }, index.h(TagType, { key: 'e1c901c60e75ff9104420c28452964d090f67365', class: utils.classnames('le-tab-container', `le-tab-align-${this.align}`, classes), part: "button", ...attrs, onClick: this.handleClick, tabIndex: this.focusable ? 0 : -1 }, this.icon !== undefined ? (index.h("div", { class: "icon-only" }, index.h("div", { class: "icon" }, this.icon), this.showLabel && index.h("span", { class: "icon-label" }, this.label))) : (index.h(index.Fragment, null, index.h("span", { class: "le-tab-label" }, this.iconStart && (index.h("span", { class: "icon-start", part: "icon-start" }, this.iconStart)), index.h("le-slot", { name: "", description: "Tab text", type: "text", class: "content", part: "content" }, index.h("slot", null, this.label))), this.iconEnd && (index.h("span", { class: "icon-end", part: "icon-end" }, this.iconEnd))))))));
     }
 };
 LeTab.style = leTabCss();

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

@@ -273,7 +273,7 @@ const LeTabs = class {
             : this.position === 'start'
                 ? 'top'
                 : 'bottom';
-        return (index.h("le-component", { key: 'f3f3847f64cc12236d84bcd2027bb42bd8af3756', component: "le-tabs", hostClass: utils.classnames(classes) }, index.h("div", { key: '204e8cc3a6890496f6f8e0c9791b472c0a28585a', class: classes }, index.h("div", { key: '3d87b1ebfb432154ab415e5e69ee5485ef546429', class: {
+        return (index.h("le-component", { key: '6882b32d3be8f1686c1f367bdcd9fc54ee92a8ee', component: "le-tabs", hostClass: utils.classnames(classes) }, index.h("div", { key: 'd50731bf95b4898dec01f1a003f6b8e1f694ef87', class: classes }, index.h("div", { key: '1e07303c43016d13dedff719b6efc5374f97d7db', class: {
                 'tablist': true,
                 'wrap-tabs': this.wrap,
                 [`overflow-${this.overflow}`]: true,
@@ -282,7 +282,7 @@ const LeTabs = class {
             const tabId = `tab-${config.value}`;
             const panelId = `panel-${config.value}`;
             return (index.h("le-tab", { key: config.value, id: tabId, class: "tab", mode: "default", variant: this.variant, selected: isSelected, disabled: config.disabled, size: this.size, position: tabPosition, align: this.orientation === 'vertical' ? 'start' : 'center', role: "tab", part: isSelected ? 'tab tab-active' : 'tab', "aria-selected": isSelected ? 'true' : 'false', "aria-controls": panelId, "aria-disabled": config.disabled ? 'true' : undefined, focusable: false, onClick: () => this.handleTabClick(config), iconStart: config.iconStart, iconEnd: config.iconEnd }, index.h("span", { class: "tab-label" }, config.label)));
-        })), index.h("div", { key: 'c09c5228a9e3fd9e091ece0974d159ff05195907', class: "panels", part: "panels" }, isDeclarativeMode ? (
+        })), index.h("div", { key: 'dcd32445495900eda29cc610c30261da6262c3c4', class: "panels", part: "panels" }, isDeclarativeMode ? (
         // Declarative mode - render slot for le-tab-panel children
         index.h("le-slot", { name: "", description: "Tab panels", type: "slot", allowedComponents: "le-tab-panel" }, index.h("slot", null))) : (
         // Programmatic mode - render named slots

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

@@ -59,7 +59,7 @@ const LeTag = class {
         return index.h("span", { class: "tag-icon" }, this.icon);
     }
     render() {
-        return (index.h("le-component", { key: '1b899660574d9ca3c513a394c3f979de2221e5b9', component: "le-tag" }, index.h("span", { key: 'f41bf783b0409d68f3975ea9d8c7443f591f9d6b', class: "tag" }, this.renderIcon(), index.h("span", { key: 'b873ada5b9d1904ed90b614b26a4ac5655ffed97', class: "tag-label" }, index.h("le-slot", { key: '2f1ee302a3a7ce2b06c436e5dd52c03c3a30f0de', name: "", tag: "span", type: "text" }, index.h("slot", { key: '7d349e9859e6d586ddd1b2a6c990a41b04cba00c' }, this.label))), this.dismissible && (index.h("button", { key: '140aee44497f7a883ac983634a74032043f8429e', type: "button", class: "tag-dismiss", onClick: this.handleDismiss, disabled: this.disabled, "aria-label": "Remove" }, index.h("svg", { key: '14dd70b058b110d2753c1014bef241d7782d5f9e', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("path", { key: 'b1ce480cd49e5b7f543aa7747f215e1b0435b0a4', d: "M4 4l8 8M12 4l-8 8" })))))));
+        return (index.h("le-component", { key: '0cae0957e69fe0a1304f81e69d12d31c18ba9d19', component: "le-tag" }, index.h("span", { key: 'b9d141aa16c0d8a22f2a0ee274feae4af3f330a4', class: "tag" }, this.renderIcon(), index.h("span", { key: '721836b45727b79547f4207a59c0a42266f3b24a', class: "tag-label" }, index.h("le-slot", { key: '48be93bc17af5fa8fd8de18f6c53b81b26dee01b', name: "", tag: "span", type: "text" }, index.h("slot", { key: '482d37fe79b37fade8460a8abde4813e3ececa99' }, this.label))), this.dismissible && (index.h("button", { key: 'a0de79ab2ea5ce3e6f37b255028096a31ca06a33', type: "button", class: "tag-dismiss", onClick: this.handleDismiss, disabled: this.disabled, "aria-label": "Remove" }, index.h("svg", { key: 'ff30daa4aaffa92e7fc7d29b66c0ee401c9541ac', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("path", { key: '3f7d739758c3213847f0214cb6377c4e5c48abab', d: "M4 4l8 8M12 4l-8 8" })))))));
     }
 };
 LeTag.style = leTagCss();