le-kit 0.2.5 → 0.3.0

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

@@ -0,0 +1,428 @@
+'use strict';
+
+var index = require('./index-CNRmviSz.js');
+var utils = require('./utils-CZG22_vQ.js');
+
+const leBarCss = () => `:host{display:block;--le-bar-gap:var(--le-spacing-2);--le-bar-padding:var(--le-spacing-2);--le-bar-min-height:2.5rem;--le-bar-background:transparent;--le-bar-border-color:var(--le-color-border);--le-bar-border-radius:var(--le-radius-md);--le-bar-button-size:2rem;--le-bar-button-color:var(--le-color-text-primary);--le-bar-button-hover-bg:var(--le-color-gray-100);--le-bar-button-border-radius:var(--le-radius-sm);--le-bar-arrow-size:1.5rem;--le-bar-popover-min-width:200px;--le-bar-popover-gap:var(--le-spacing-1)}.bar-container{display:flex;align-items:center;gap:var(--le-bar-gap);min-height:var(--le-bar-min-height);background:var(--le-bar-background);border-radius:var(--le-bar-border-radius);padding:var(--le-bar-padding)}.bar-container.align-start{justify-content:flex-start}.bar-container.align-end .bar-items{justify-content:flex-end}.bar-container.align-center .bar-items{justify-content:center}.bar-container.align-stretch .bar-items{justify-content:space-evenly}.bar-items{display:flex;flex-wrap:wrap;align-items:center;gap:var(--le-bar-gap);overflow:hidden;min-width:0;flex:1 1 0%;position:relative}.bar-items[style*="height"]{overflow:hidden}.bar-items.is-scrollable{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.bar-items.is-scrollable::-webkit-scrollbar{display:none}.bar-items.is-scrollable ::slotted(*){scroll-snap-align:start;flex-shrink:0}.bar-items.is-wrapping{flex-wrap:wrap;overflow:visible;height:auto !important}.bar-controls{display:flex;align-items:center;gap:var(--le-spacing-1);flex-shrink:0}.bar-controls-start{order:-1}.bar-controls-end{order:1}.bar-more-button,.bar-hamburger-button,.bar-all-menu-button{display:inline-flex;align-items:center;justify-content:center;width:var(--le-bar-button-size);height:var(--le-bar-button-size);padding:0;border:none;background:transparent;color:var(--le-bar-button-color);border-radius:var(--le-bar-button-border-radius);cursor:pointer;transition:background-color 0.15s ease}.bar-more-button:hover,.bar-hamburger-button:hover,.bar-all-menu-button:hover{background:var(--le-bar-button-hover-bg)}.bar-more-button:focus-visible,.bar-hamburger-button:focus-visible,.bar-all-menu-button:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px}.bar-arrow{display:inline-flex;align-items:center;justify-content:center;width:var(--le-bar-arrow-size);height:var(--le-bar-arrow-size);padding:0;border:none;background:transparent;color:var(--le-bar-button-color);border-radius:var(--le-bar-button-border-radius);cursor:pointer;transition:background-color 0.15s ease, opacity 0.15s ease}.bar-arrow:hover:not(:disabled){background:var(--le-bar-button-hover-bg)}.bar-arrow:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px}.bar-arrow:disabled,.bar-arrow.disabled{opacity:0.3;cursor:not-allowed}.arrow-icon-start{transform:rotate(90deg)}.arrow-icon-end{transform:rotate(-90deg)}.bar-overflow-trigger,.bar-all-menu-trigger{display:inline-flex}.bar-popover-content{display:flex;flex-direction:column;gap:var(--le-bar-popover-gap);min-width:var(--le-bar-popover-min-width);padding:var(--le-spacing-2)}.bar-popover-item{cursor:pointer}.bar-popover-item:hover{background:var(--le-bar-button-hover-bg);border-radius:var(--le-bar-button-border-radius)}:host(.hamburger-active) .bar-items{visibility:hidden;pointer-events:none}`;
+
+const LeBar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.leBarOverflowChange = index.createEvent(this, "leBarOverflowChange");
+    }
+    get el() { return index.getElement(this); }
+    /**
+     * Overflow behavior when items don't fit on one row.
+     * - `more`: Overflow items appear in a "more" dropdown
+     * - `scroll`: Items scroll horizontally with optional arrows
+     * - `hamburger`: All items go into a hamburger menu if any overflow
+     * - `wrap`: Items wrap to additional rows
+     */
+    overflow = 'more';
+    /**
+     * Alignment of items within the bar (maps to justify-content).
+     */
+    alignItems = 'start';
+    /**
+     * Show scroll arrows when overflow is "scroll".
+     */
+    arrows = false;
+    /**
+     * Disable the internal overflow popover.
+     * When true, the bar still detects overflow and hides items,
+     * but doesn't render its own popover. Use this when providing
+     * custom overflow handling via the leBarOverflowChange event.
+     */
+    disablePopover = false;
+    /**
+     * Show an "all items" menu button.
+     * - `false`: Don't show
+     * - `true` or `'end'`: Show at end
+     * - `'start'`: Show at start
+     */
+    showAllMenu = false;
+    /**
+     * Emitted when overflow state changes.
+     */
+    leBarOverflowChange;
+    /** Whether the hamburger/more popover is open */
+    popoverOpen = false;
+    /** Whether hamburger mode is active (for hamburger overflow) */
+    hamburgerActive = false;
+    /** IDs of items that are overflowing */
+    overflowingIds = new Set();
+    /** Whether we can scroll left */
+    canScrollStart = false;
+    /** Whether we can scroll right */
+    canScrollEnd = false;
+    /** Whether the all-menu popover is open */
+    allMenuOpen = false;
+    /** Current height of the items container (for overflow handling) */
+    containerHeight = null;
+    itemsContainerEl;
+    moreButtonEl;
+    resizeObserver;
+    mutationObserver;
+    instanceId = utils.generateId('le-bar');
+    // Map to track item elements and their IDs
+    itemMap = new Map();
+    // Prevent multiple recalculations in the same frame
+    pendingRecalc = null;
+    handleOverflowChange() {
+        this.resetOverflowState();
+        this.scheduleOverflowRecalc();
+    }
+    handleSlotChange() {
+        this.scheduleOverflowRecalc();
+    }
+    connectedCallback() {
+        this.setupObservers();
+    }
+    componentDidLoad() {
+        this.scheduleOverflowRecalc();
+    }
+    componentDidRender() {
+        // Recalculate after render in case children changed
+        this.scheduleOverflowRecalc();
+    }
+    disconnectedCallback() {
+        this.resizeObserver?.disconnect();
+        this.mutationObserver?.disconnect();
+    }
+    /**
+     * Force recalculation of overflow state.
+     */
+    async recalculate() {
+        this.computeOverflow();
+    }
+    setupObservers() {
+        // ResizeObserver for container size changes
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => {
+                this.computeOverflow();
+                this.updateScrollState();
+            });
+        }
+        // MutationObserver for child changes
+        this.mutationObserver = new MutationObserver(() => {
+            this.scheduleOverflowRecalc();
+        });
+        this.mutationObserver.observe(this.el, {
+            childList: true,
+            subtree: false,
+        });
+    }
+    observeContainer(el) {
+        if (!this.resizeObserver)
+            return;
+        this.resizeObserver.disconnect();
+        if (el)
+            this.resizeObserver.observe(el);
+    }
+    scheduleOverflowRecalc() {
+        // Debounce recalculations to prevent infinite loops
+        if (this.pendingRecalc !== null) {
+            cancelAnimationFrame(this.pendingRecalc);
+        }
+        this.pendingRecalc = requestAnimationFrame(() => {
+            this.pendingRecalc = null;
+            this.computeOverflow();
+        });
+    }
+    resetOverflowState() {
+        this.hamburgerActive = false;
+        this.overflowingIds = new Set();
+        this.containerHeight = null;
+        this.popoverOpen = false;
+    }
+    getSlottedItems() {
+        // Get direct children from the light DOM (excluding named slot elements)
+        return Array.from(this.el.children).filter((el) => el instanceof HTMLElement && !el.hasAttribute('slot'));
+    }
+    getItemId(el, index) {
+        return el.id || el.dataset.barId || `${this.instanceId}-item-${index}`;
+    }
+    computeOverflow() {
+        if (this.overflow === 'wrap' || this.overflow === 'scroll') {
+            // No overflow handling needed for wrap/scroll modes
+            this.resetOverflowState();
+            this.updateScrollState();
+            return;
+        }
+        const container = this.itemsContainerEl;
+        if (!container)
+            return;
+        const items = this.getSlottedItems();
+        if (items.length === 0) {
+            this.resetOverflowState();
+            return;
+        }
+        // Build item map
+        this.itemMap.clear();
+        items.forEach((item, index) => {
+            const id = this.getItemId(item, index);
+            this.itemMap.set(id, item);
+        });
+        // Get the position of items to determine which are on the first row
+        const itemRects = items.map((item, index) => ({
+            item,
+            id: this.getItemId(item, index),
+            rect: item.getBoundingClientRect(),
+        }));
+        if (itemRects.length === 0) {
+            return;
+        }
+        // Find the first row's top position (accounting for vertical alignment)
+        const containerRect = container.getBoundingClientRect();
+        const topValues = itemRects.map(i => i.rect.top - containerRect.top);
+        const minTop = Math.min(...topValues);
+        // Items are on the first row if their top is close to minTop
+        // Allow some tolerance for alignment differences
+        const tolerance = 15;
+        const firstRowItems = itemRects.filter(i => i.rect.top - containerRect.top <= minTop + tolerance);
+        const overflowItems = itemRects.filter(i => i.rect.top - containerRect.top > minTop + tolerance);
+        // Calculate the height of the first row
+        const firstRowBottom = firstRowItems.length > 0
+            ? Math.max(...firstRowItems.map(i => i.rect.bottom - containerRect.top))
+            : 0;
+        if (this.overflow === 'hamburger') {
+            // In hamburger mode, if ANY item overflows, all go into the menu
+            const shouldHamburger = overflowItems.length > 0;
+            if (shouldHamburger !== this.hamburgerActive) {
+                this.hamburgerActive = shouldHamburger;
+                this.emitOverflowChange();
+            }
+            // Set height to show only first row (or hide all if hamburger is active)
+            if (shouldHamburger && firstRowBottom > 0) {
+                this.containerHeight = firstRowBottom;
+            }
+            else {
+                this.containerHeight = null;
+            }
+        }
+        else {
+            // 'more' mode
+            const newOverflowingIds = new Set(overflowItems.map(i => i.id));
+            // Check if we need to make room for the "more" button
+            if (newOverflowingIds.size > 0 && this.moreButtonEl) {
+                const moreRect = this.moreButtonEl.getBoundingClientRect();
+                const moreTop = moreRect.top - containerRect.top;
+                // If "more" button is not on the first row, we need to hide one more item
+                if (moreTop > minTop + tolerance) {
+                    // Find the last visible item and move it to overflow
+                    const lastVisible = firstRowItems[firstRowItems.length - 1];
+                    if (lastVisible) {
+                        newOverflowingIds.add(lastVisible.id);
+                    }
+                }
+            }
+            // Check if overflow state changed
+            const hasChanged = newOverflowingIds.size !== this.overflowingIds.size ||
+                ![...newOverflowingIds].every(id => this.overflowingIds.has(id));
+            if (hasChanged) {
+                this.overflowingIds = newOverflowingIds;
+                this.emitOverflowChange();
+            }
+            // Set container height to show only first row
+            if (newOverflowingIds.size > 0 && firstRowBottom > 0) {
+                this.containerHeight = firstRowBottom;
+            }
+            else {
+                this.containerHeight = null;
+            }
+        }
+    }
+    emitOverflowChange() {
+        this.leBarOverflowChange.emit({
+            overflowingIds: [...this.overflowingIds],
+            hamburgerActive: this.hamburgerActive,
+        });
+    }
+    updateScrollState() {
+        if (this.overflow !== 'scroll' || !this.itemsContainerEl) {
+            this.canScrollStart = false;
+            this.canScrollEnd = false;
+            return;
+        }
+        const el = this.itemsContainerEl;
+        this.canScrollStart = el.scrollLeft > 0;
+        this.canScrollEnd = el.scrollLeft < el.scrollWidth - el.clientWidth - 1;
+    }
+    handleScroll = () => {
+        this.updateScrollState();
+    };
+    scrollToStart = () => {
+        if (!this.itemsContainerEl)
+            return;
+        const items = this.getSlottedItems();
+        const container = this.itemsContainerEl;
+        // Find the scroll position of the previous item
+        const currentScroll = container.scrollLeft;
+        let targetScroll = 0;
+        for (let i = items.length - 1; i >= 0; i--) {
+            const item = items[i];
+            // Calculate item's left edge relative to container's scroll position
+            const itemLeft = item.offsetLeft - container.offsetLeft;
+            // If this item starts before current scroll position, scroll to it
+            if (itemLeft < currentScroll - 1) {
+                targetScroll = itemLeft;
+                break;
+            }
+        }
+        container.scrollTo({ left: targetScroll, behavior: 'smooth' });
+        // Update scroll state after animation
+        setTimeout(() => this.updateScrollState(), 300);
+    };
+    scrollToEnd = () => {
+        if (!this.itemsContainerEl)
+            return;
+        const container = this.itemsContainerEl;
+        const items = this.getSlottedItems();
+        if (items.length === 0)
+            return;
+        const containerWidth = container.clientWidth;
+        const currentScroll = container.scrollLeft;
+        let targetScroll = container.scrollWidth - containerWidth;
+        for (const item of items) {
+            // Calculate item's right edge relative to container
+            const itemLeft = item.offsetLeft - container.offsetLeft;
+            // If this is the next item to scroll to from left to right then scroll to it
+            if (itemLeft > currentScroll + 1) {
+                targetScroll = itemLeft;
+                break;
+            }
+        }
+        container.scrollTo({ left: Math.max(0, targetScroll), behavior: 'smooth' });
+        // Update scroll state after animation
+        setTimeout(() => this.updateScrollState(), 300);
+    };
+    togglePopover = () => {
+        this.popoverOpen = !this.popoverOpen;
+    };
+    closePopover = () => {
+        this.popoverOpen = false;
+    };
+    toggleAllMenu = () => {
+        this.allMenuOpen = !this.allMenuOpen;
+    };
+    closeAllMenu = () => {
+        this.allMenuOpen = false;
+    };
+    handleItemClick = (_e, id) => {
+        // Close popover when an item inside is clicked
+        const originalItem = this.itemMap.get(id);
+        if (originalItem) {
+            // Clone the click to the original item
+            const cloneEvent = new MouseEvent('click', {
+                bubbles: true,
+                cancelable: true,
+                view: window,
+            });
+            originalItem.dispatchEvent(cloneEvent);
+        }
+        this.closePopover();
+        this.closeAllMenu();
+    };
+    renderMoreButton() {
+        const hasSlottedMore = this.el.querySelector('[slot="more"]');
+        return (index.h("button", { class: "bar-more-button", part: "more-button", ref: el => (this.moreButtonEl = el), onClick: this.togglePopover, "aria-expanded": String(this.popoverOpen), "aria-haspopup": "true" }, hasSlottedMore ? index.h("slot", { name: "more" }) : index.h("le-icon", { name: "ellipsis-horizontal" })));
+    }
+    renderHamburgerButton() {
+        const hasSlottedHamburger = this.el.querySelector('[slot="hamburger"]');
+        return (index.h("button", { class: "bar-hamburger-button", part: "hamburger-button", onClick: this.togglePopover, "aria-expanded": String(this.popoverOpen), "aria-haspopup": "true" }, hasSlottedHamburger ? index.h("slot", { name: "hamburger" }) : index.h("le-icon", { name: "hamburger" })));
+    }
+    renderScrollArrows() {
+        if (!this.arrows || this.overflow !== 'scroll')
+            return null;
+        const hasSlottedStartArrow = this.el.querySelector('[slot="start-arrow"]');
+        const hasSlottedEndArrow = this.el.querySelector('[slot="end-arrow"]');
+        return [
+            index.h("button", { class: utils.classnames('bar-arrow', 'bar-arrow-start', {
+                    disabled: !this.canScrollStart,
+                }), part: "arrow-start", onClick: this.scrollToStart, disabled: !this.canScrollStart, "aria-label": "Scroll to start" }, hasSlottedStartArrow ? (index.h("slot", { name: "start-arrow" })) : (index.h("le-icon", { name: "chevron-down", class: "arrow-icon-start" }))),
+            index.h("button", { class: utils.classnames('bar-arrow', 'bar-arrow-end', {
+                    disabled: !this.canScrollEnd,
+                }), part: "arrow-end", onClick: this.scrollToEnd, disabled: !this.canScrollEnd, "aria-label": "Scroll to end" }, hasSlottedEndArrow ? (index.h("slot", { name: "end-arrow" })) : (index.h("le-icon", { name: "chevron-down", class: "arrow-icon-end" }))),
+        ];
+    }
+    renderAllMenuButton() {
+        if (!this.showAllMenu)
+            return null;
+        const hasSlottedAllMenu = this.el.querySelector('[slot="all-menu"]');
+        return (index.h("button", { class: "bar-all-menu-button", part: "all-menu-button", onClick: this.toggleAllMenu, "aria-expanded": String(this.allMenuOpen), "aria-haspopup": "true" }, hasSlottedAllMenu ? index.h("slot", { name: "all-menu" }) : index.h("le-icon", { name: "hamburger" })));
+    }
+    renderPopoverContent(itemsToShow) {
+        return (index.h("div", { class: "bar-popover-content", part: "popover-content" }, itemsToShow.map(({ id, item }) => (index.h("div", { class: "bar-popover-item", key: id, onClick: (e) => this.handleItemClick(e, id), innerHTML: item.outerHTML })))));
+    }
+    renderOverflowPopover() {
+        if (this.overflow !== 'more' && this.overflow !== 'hamburger')
+            return null;
+        const items = this.getSlottedItems();
+        let itemsToShow = [];
+        if (this.overflow === 'hamburger' && this.hamburgerActive) {
+            // Show all items in hamburger mode
+            itemsToShow = items.map((item, index) => ({
+                id: this.getItemId(item, index),
+                item,
+            }));
+        }
+        else if (this.overflow === 'more' && this.overflowingIds.size > 0) {
+            // Show only overflowing items
+            itemsToShow = items
+                .map((item, index) => ({
+                id: this.getItemId(item, index),
+                item,
+            }))
+                .filter(({ id }) => this.overflowingIds.has(id));
+        }
+        if (itemsToShow.length === 0)
+            return null;
+        return (index.h("le-popover", { mode: "default", open: this.popoverOpen, position: "bottom", align: "end", showClose: false, closeOnClickOutside: true, closeOnEscape: true, onLePopoverClose: this.closePopover }, index.h("div", { slot: "trigger", class: "bar-overflow-trigger" }, this.overflow === 'hamburger' ? this.renderHamburgerButton() : this.renderMoreButton()), this.renderPopoverContent(itemsToShow)));
+    }
+    renderAllMenuPopover() {
+        if (!this.showAllMenu)
+            return null;
+        const items = this.getSlottedItems();
+        const itemsToShow = items.map((item, index) => ({
+            id: this.getItemId(item, index),
+            item,
+        }));
+        const position = this.showAllMenu === 'start' ? 'start' : 'end';
+        return (index.h("le-popover", { mode: "default", open: this.allMenuOpen, position: "bottom", align: position, showClose: false, closeOnClickOutside: true, closeOnEscape: true, onLePopoverClose: this.closeAllMenu }, index.h("div", { slot: "trigger", class: "bar-all-menu-trigger" }, this.renderAllMenuButton()), this.renderPopoverContent(itemsToShow)));
+    }
+    render() {
+        const showOverflowButton = !this.disablePopover &&
+            ((this.overflow === 'more' && this.overflowingIds.size > 0) ||
+                (this.overflow === 'hamburger' && this.hamburgerActive));
+        const containerStyle = {};
+        if (this.containerHeight !== null &&
+            (this.overflow === 'more' || this.overflow === 'hamburger')) {
+            containerStyle.height = `${this.containerHeight}px`;
+        }
+        const showAllMenuAtStart = this.showAllMenu === 'start';
+        const showAllMenuAtEnd = this.showAllMenu === true || this.showAllMenu === 'end';
+        return (index.h(index.Host, { key: 'ee31d28cdad15267c6a31503d1a102d050114af1', class: utils.classnames({
+                'overflow-more': this.overflow === 'more',
+                'overflow-scroll': this.overflow === 'scroll',
+                'overflow-hamburger': this.overflow === 'hamburger',
+                'overflow-wrap': this.overflow === 'wrap',
+                'hamburger-active': this.hamburgerActive,
+                'has-overflow': this.overflowingIds.size > 0 || this.hamburgerActive,
+            }) }, index.h("div", { key: 'd9dbc7ccd3256697362f701dcef24b26e6c36765', class: utils.classnames('bar-container', {
+                [`align-${this.alignItems}`]: true,
+            }), part: "container" }, this.overflow === 'scroll' && this.arrows && (index.h("div", { key: '08e73b775740388f2b6bdb5f85965870713d119c', class: "bar-controls bar-controls-start" }, this.renderScrollArrows()?.[0])), showAllMenuAtStart && (index.h("div", { key: '919e6491693afb2095c4100744f53aa266f142d1', class: "bar-controls bar-controls-start" }, this.renderAllMenuPopover())), index.h("div", { key: '9a8251f1a1fe359efc266fb4787010f140ab4f5a', class: utils.classnames('bar-items', {
+                'is-scrollable': this.overflow === 'scroll',
+                'is-wrapping': this.overflow === 'wrap',
+            }), style: containerStyle, ref: el => {
+                this.itemsContainerEl = el;
+                this.observeContainer(el);
+            }, onScroll: this.overflow === 'scroll' ? this.handleScroll : undefined }, index.h("slot", { key: '89f54e7a897583fec944db086958f5211df4e347' })), showOverflowButton && (index.h("div", { key: 'b7a2eab419de82a26d8af0a352706737c07f3d5e', class: "bar-controls bar-controls-end" }, this.renderOverflowPopover())), showAllMenuAtEnd && (index.h("div", { key: '1dd1b9d97f389f4668a69643f8ff4424c847e85f', class: "bar-controls bar-controls-end" }, this.renderAllMenuPopover())), this.overflow === 'scroll' && this.arrows && (index.h("div", { key: '5f0abf7e091380b5e6769127271c192b56e8f573', class: "bar-controls bar-controls-end" }, this.renderScrollArrows()?.[1])))));
+    }
+    static get watchers() { return {
+        "overflow": ["handleOverflowChange"]
+    }; }
+};
+LeBar.style = leBarCss();
+
+exports.le_bar = LeBar;
+//# sourceMappingURL=le-bar.entry.cjs.js.map

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

@@ -175,7 +175,7 @@ const LeBox = class {
             'display-flex': this.displayFlex,
             [`inner-${this.innerDirection}`]: this.displayFlex,
         });
-        return (index.h(index.Host, { key: '8d71daaa3a1f34cf1b5fa3afe4f788d974d14dde', style: hostStyle, class: hostClass }, index.h("le-component", { key: '350393fef2159c40de43792502545ba93e0ec84c', component: "le-box" }, index.h("div", { key: '425be85bce62b600a383e164a847a2f0622496bd', class: "box", part: "box" }, index.h("div", { key: '104275e435d64a76428b5934aa0ece7ae3284cd8', class: "content", part: "content", style: contentStyle }, index.h("le-slot", { key: '7655d6bd5140ffcac514b266b4ca2f790a44e8ae', name: "", description: "Content inside this flex item", type: "slot", "allowed-components": "le-text,le-card,le-button,le-stack,le-box" }, index.h("slot", { key: '47efcfcc9b9efe5283fa8f558026b3b13ea5b959' })))))));
+        return (index.h(index.Host, { key: '2d64b5a59e9eb12701ffd68ee2db293868b232a1', style: hostStyle, class: hostClass }, index.h("le-component", { key: '3b4c73ad636e9a884a212d6ca06ffbe55b3c438f', component: "le-box" }, index.h("div", { key: '00f1a922ba7d8c2c070d8254da9d4b9335e82bff', class: "box", part: "box" }, index.h("div", { key: 'bd974a033501e5b99d56892329017b95c95e753c', class: "content", part: "content", style: contentStyle }, index.h("le-slot", { key: '62ddce60dc17d6da11c033b2b94f1a3ce69f69da', name: "", description: "Content inside this flex item", type: "slot", "allowed-components": "le-text,le-card,le-button,le-stack,le-box" }, index.h("slot", { key: '780fdfd1873ad3a629d1afbfcd0d5ca60cd4c679' })))))));
     }
 };
 LeBox.style = leBoxDefaultCss();

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

@@ -103,7 +103,7 @@ const LeButton = class {
         const attrs = this.href
             ? { href: this.href, target: this.target, role: 'button' }
             : { type: this.type, disabled: this.disabled };
-        return (index.h(index.Host, { key: 'bc9515b65357611b9a29f8c4f89edfdfb1535bf0', class: classes }, index.h("le-component", { key: 'bb5367d16d781e6af44f709d5f132faa3b0fc88e', component: "le-button" }, index.h(TagType, { key: '09118bccd54456ee8dadaaff92d9fedfa91831ec', class: utils.classnames('le-button-container', `le-button-align-${this.align}`), part: "button", ...attrs, onClick: this.handleClick }, this.iconOnly !== undefined ? (index.h("slot", { name: "icon-only" }, typeof this.iconOnly === 'string' ? this.iconOnly : null)) : (index.h(index.Fragment, null, index.h("span", { class: "le-button-label" }, this.iconStart && (index.h("span", { class: "icon-start", part: "icon-start" }, this.iconStart)), index.h("le-slot", { name: "", description: "Button text", type: "text", class: "content", part: "content" }, index.h("slot", null))), this.iconEnd && (index.h("span", { class: "icon-end", part: "icon-end" }, this.iconEnd))))))));
+        return (index.h(index.Host, { key: '44fc577066f362e17d74b9a426caf98c5c146203', class: classes }, index.h("le-component", { key: '7fcb11591ecaf0dc69510a6e5fa1a481dc822bb1', component: "le-button" }, index.h(TagType, { key: '9065b7f4df2dffa763f0e2c8ad64fda4af80d4a6', class: utils.classnames('le-button-container', `le-button-align-${this.align}`), part: "button", ...attrs, onClick: this.handleClick }, this.iconOnly !== undefined ? (index.h("slot", { name: "icon-only" }, typeof this.iconOnly === 'string' ? this.iconOnly : null)) : (index.h(index.Fragment, null, index.h("span", { class: "le-button-label" }, this.iconStart && (index.h("span", { class: "icon-start", part: "icon-start" }, this.iconStart)), index.h("le-slot", { name: "", description: "Button text", type: "text", class: "content", part: "content" }, index.h("slot", null))), this.iconEnd && (index.h("span", { class: "icon-end", part: "icon-end" }, this.iconEnd))))))));
     }
 };
 LeButton.style = leButtonCss();
@@ -157,7 +157,7 @@ const LeCheckbox = class {
         });
     };
     render() {
-        return (index.h("le-component", { key: '15e49aa77c2d904b1610f68802428e9dd86b3631', component: "le-checkbox", hostClass: utils.classnames({ 'disabled': this.disabled }) }, index.h("div", { key: '50691376a207f004112820742df46ef9ff8016e0', class: "le-checkbox-wrapper" }, index.h("label", { key: '339a209a9a649ff491dd1867e617f71e4bca7365', class: "le-checkbox-label" }, index.h("span", { key: '1086e8989abe5a23ac01bd2323a8ae2454c4acb6', class: "le-checkbox-input" }, index.h("input", { key: '90126054fb3aa8ed58d043694275cac416d06578', type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.handleChange })), index.h("span", { key: '8b47592103fbd4f7e3b7b1b01f27d42bf6dccbc7', class: "le-checkbox-text" }, index.h("le-slot", { key: 'c5f5aaff0b69bcf7d993ea84181a63d30b794774', name: "", type: "text", tag: "span" }, index.h("slot", { key: 'bc615ec211b6db8f5f22760ae5298560384a1b84' })))), index.h("div", { key: '0c6037f4d7948b262beb4a5b969018fb6b0cad4a', class: "le-checkbox-description" }, index.h("le-slot", { key: '17631ed776592063601dd37052f43d7e4732af21', name: "description", type: "text", tag: "div", label: "Description" }, index.h("slot", { key: '13a3138cd0101fc1f9175a89ed933a2f2d4df79f', name: "description" }))))));
+        return (index.h("le-component", { key: '31d975847b6d3bd137a6436d5f91f0af2c035576', component: "le-checkbox", hostClass: utils.classnames({ 'disabled': this.disabled }) }, index.h("div", { key: '64d079beaf930bf4ebb244cc6511c1ed048b4699', class: "le-checkbox-wrapper" }, index.h("label", { key: '4ba352ae7cf709afd25d1ff5cc93fe87ff305920', class: "le-checkbox-label" }, index.h("span", { key: 'ee33b972a07d2a46f3beff8ba19a3902891f21d1', class: "le-checkbox-input" }, index.h("input", { key: '74825406b4b16e4fc0d351ec8266c2a14776fc3d', type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.handleChange })), index.h("span", { key: 'c6badbadb976ddaeeade6b75a6ac0f547c95cffb', class: "le-checkbox-text" }, index.h("le-slot", { key: '6cf2e6c835838db1a0a9ed8398b9b3e638ea640b', name: "", type: "text", tag: "span" }, index.h("slot", { key: 'a587324c7e8e91a1c3ab9bafad7d0030510e5272' })))), index.h("div", { key: '0a8aff276f51027e25b9367d6e50b2eefc1a9148', class: "le-checkbox-description" }, index.h("le-slot", { key: '33b411d6b69cba44d3821b4bb6ab3a5c72e4e517', name: "description", type: "text", tag: "div", label: "Description" }, index.h("slot", { key: '266af814c2a16aa1cd3a51db8dabb1bf952cf7a7', name: "description" }))))));
     }
 };
 LeCheckbox.style = leCheckboxCss();
@@ -211,7 +211,7 @@ const LeCollapse = class {
         this.el.toggleAttribute('data-open', nextOpen);
     }
     render() {
-        return (index.h(index.Host, { key: '946501d440fa391cfea13283072c387fd1e98b65', "data-open": this.shouldBeOpen() ? 'true' : 'false' }, index.h("le-component", { key: 'fb5c7e9f9e15dc3ef440f9703977ee7f09ffe676', component: "le-collapse" }, index.h("div", { key: '83ec865adb8a11cc9de7a6a173b85245414360e8', class: { 'region': true, 'scroll-down': this.scrollDown }, part: "region" }, index.h("slot", { key: '6b402e2beac8bde188da48719f47e5f9fc12581d' })))));
+        return (index.h(index.Host, { key: '19e96b22f47116cb9f5dc6ca9fc4ba8de2cb4299', "data-open": this.shouldBeOpen() ? 'true' : 'false' }, index.h("le-component", { key: '0c16c094b155580849f59553c3e2ecb359f99816', component: "le-collapse" }, index.h("div", { key: '28448db4a519e558ac9c40dccddf123a462899b0', class: { 'region': true, 'scroll-down': this.scrollDown }, part: "region" }, index.h("slot", { key: 'd14269819d746b985cf3b87052c9efdea08271d1' })))));
     }
     static get watchers() { return {
         "open": ["onOpenChange"],
@@ -517,7 +517,7 @@ const LeCurrentHeading = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'd6773c072799d0337b7d2bade9de2c169e35d3c8' }, this.activeText ? (index.h("span", { class: "title", part: "title" }, this.activeText)) : (index.h("slot", null))));
+        return (index.h(index.Host, { key: '684d2369883e7810ef0966f08f8ef835b8cf9343' }, this.activeText ? (index.h("span", { class: "title", part: "title" }, this.activeText)) : (index.h("slot", null))));
     }
     static get watchers() { return {
         "selector": ["onSelectorChange"]
@@ -857,7 +857,7 @@ const LeDropdownBase = class {
     }
     render() {
         const dropdownWidth = this.width || (this.triggerWidth ? `${this.triggerWidth}px` : undefined);
-        return (index.h(index.Host, { key: 'eeb6316ffb006adb8d53f3c2f81cadde32d261ae' }, index.h("le-popover", { key: '703c57bf2185590df226787778ad67cd423ce943', ref: el => (this.popoverEl = el), position: "bottom", align: "start", showClose: false, closeOnClickOutside: this.closeOnClickOutside, closeOnEscape: true, offset: 4, width: dropdownWidth, minWidth: "150px", "trigger-full-width": this.fullWidth, onLePopoverOpen: this.handlePopoverOpen, onLePopoverClose: this.handlePopoverClose }, index.h("slot", { key: 'bc401b4af80c9e6d15c4f5fe2a5ff2687b9ae582', name: "trigger", slot: "trigger" }), index.h("slot", { key: '3414d6eb1d4fecfe642b31e2a1abd271c83ab2df', name: "header" }), index.h("div", { key: '685d0aa6e15b6a191d517e194ae96302cfb4a191', class: "dropdown-list", role: "listbox", "aria-multiselectable": this.multiple ? 'true' : undefined, ref: el => (this.listEl = el), style: { maxHeight: this.maxHeight } }, this.renderOptions()))));
+        return (index.h(index.Host, { key: 'b8eb1155a22937ab148b5d3b91ec9ab688257dd9' }, index.h("le-popover", { key: '2dc509b3ef0f72b34d4e1d8d7556ded7569dc256', ref: el => (this.popoverEl = el), position: "bottom", align: "start", showClose: false, closeOnClickOutside: this.closeOnClickOutside, closeOnEscape: true, offset: 4, width: dropdownWidth, minWidth: "150px", "trigger-full-width": this.fullWidth, onLePopoverOpen: this.handlePopoverOpen, onLePopoverClose: this.handlePopoverClose }, index.h("slot", { key: '516aac3b9b267298e01dc38ab3f779015e3c1c37', name: "trigger", slot: "trigger" }), index.h("slot", { key: '38866292e03c304a2f7f4026bbc99972cd2b07c6', name: "header" }), index.h("div", { key: '9fa533a22f3235100150c24a4a95a51d9bad99a7', class: "dropdown-list", role: "listbox", "aria-multiselectable": this.multiple ? 'true' : undefined, ref: el => (this.listEl = el), style: { maxHeight: this.maxHeight } }, this.renderOptions()))));
     }
     static get watchers() { return {
         "options": ["handleOptionsChange"],
@@ -1101,7 +1101,7 @@ const LeHeader = class {
             'is-hidden': !this.revealed,
             'is-shrunk': this.shrunk,
         });
-        return (index.h(index.Host, { key: '564328055a69a1646c7f9030ac274a30c3baad0a', class: hostClass, onMouseEnter: () => {
+        return (index.h(index.Host, { key: '8226ce910c1f3538c9f753ae966555843e9de0ae', class: hostClass, onMouseEnter: () => {
                 if (!this.expandOnHover)
                     return;
                 this.hoverActive = true;
@@ -1111,7 +1111,7 @@ const LeHeader = class {
                     return;
                 this.hoverActive = false;
                 this.scheduleUpdate(true);
-            } }, index.h("le-component", { key: 'a9feac7b7229ed250b4c2cade7e5dce8bb79e634', component: "le-header" }, index.h("header", { key: 'acebe4ea5222593e65190a35515c60ee7e15549a', class: "header", part: "header", role: "banner", ref: el => (this.headerEl = el) }, index.h("div", { key: 'bf37e677a5058e4e9bf74a4f6a3c62112daaea20', class: "inner", part: "inner" }, index.h("div", { key: 'd6886dba1b0e8003a2080f03f6bfe3fa0ffdca18', class: "row", part: "row" }, index.h("div", { key: 'd4c328bb74c955fa377a06f1a33783750bd83237', class: "start", part: "start" }, index.h("le-slot", { key: '1b9d58c81f8a498637eefd7a1310c961b014d1a5', name: "start", label: "Start", description: "Logo / back button / nav", "allowed-components": "le-button,le-text,le-tag,le-box,le-stack" }, index.h("slot", { key: 'd5c2727c4f427b60cad9575c0e74a18e7b229462', name: "start" }))), index.h("div", { key: '35831f9dfb3ff584cdc573081ebdeef1968f06c7', class: "title", part: "title" }, index.h("le-slot", { key: 'bed684a7880dfa79b4b7585dcb3c2bd024e0cc93', name: "title", label: "Title", description: "Header title", type: "text", tag: "span" }, index.h("span", { key: 'f523ee36ff1f0c6a2793e5d813d6b9a9c632f2bf', class: "title-slot", part: "title" }, index.h("slot", { key: '39e750e3f4231406552187e961ae7e9a206d240b', name: "title" })))), index.h("div", { key: 'c99435b41a905b6780c07e7103125d7c439af7cb', class: "end", part: "end" }, index.h("le-slot", { key: 'efca1aadcf9108add84dbb5a2ea539fb95e795c6', name: "end", label: "End", description: "Actions", "allowed-components": "le-button,le-text,le-tag,le-box,le-stack" }, index.h("slot", { key: 'd04b78ca1eeb1cbae4b3575f03231b93ed4d9692', name: "end" })))), index.h("div", { key: 'd83bda303c5fcd63da3e0419bd9276677d8f5cc7', class: "secondary", part: "secondary" }, index.h("le-slot", { key: '1f5f6d317e969c54d87a6ad516fed071e72f342c', name: "", label: "Secondary", description: "Secondary row content", "allowed-components": "le-tabs,le-tab-bar,le-select,le-combobox,le-text,le-stack,le-box" }, index.h("slot", { key: 'fb5a6a434190658f8fb55e3bc21d5f952a559ad5' }))))))));
+            } }, index.h("le-component", { key: '4ab9f55d577bbe626743d98ecceff43421297e04', component: "le-header" }, index.h("header", { key: '324780d62bce16b6b5031f99f60e77040b303536', class: "header", part: "header", role: "banner", ref: el => (this.headerEl = el) }, index.h("div", { key: 'b85650426cf45c1e33e34472a44dc2153817cd19', class: "inner", part: "inner" }, index.h("div", { key: 'e5480cb4eeb609671b3a54e0e62078249024dd19', class: "row", part: "row" }, index.h("div", { key: '659abffd71c2316aa61bfd3c678faf8bd3b60e5c', class: "start", part: "start" }, index.h("le-slot", { key: '31e3c153875787983c4a0e40bd8cd7fcf1766972', name: "start", label: "Start", description: "Logo / back button / nav", "allowed-components": "le-button,le-text,le-tag,le-box,le-stack" }, index.h("slot", { key: '770f771ccb01d471a4f2042e90b18b4e8f9aaea8', name: "start" }))), index.h("div", { key: 'db5e4915c79b33fd839b91d2172d2ebd4ceb47fd', class: "title", part: "title" }, index.h("le-slot", { key: '038f08471fbfca1c923cd0f3e7985b9edfba1895', name: "title", label: "Title", description: "Header title", type: "text", tag: "span" }, index.h("span", { key: 'fbb502918f0fd021ba8fd75ee9f36116fa0c77d2', class: "title-slot", part: "title" }, index.h("slot", { key: '99c46d12df0e52ac659af0fb2db0e7051cb2cc35', name: "title" })))), index.h("div", { key: 'c1b43c42fbe2858c3144dd4388da21a0fcf9d9dc', class: "end", part: "end" }, index.h("le-slot", { key: '13d1e92425997130378c80ac0eff7974a5ad5a97', name: "end", label: "End", description: "Actions", "allowed-components": "le-button,le-text,le-tag,le-box,le-stack" }, index.h("slot", { key: 'ac1902fe3c990a358f6dbf64b7215eeb2bfd9cd4', name: "end" })))), index.h("div", { key: '07ede1a18c5400d68ea32cef965e7b2534db9d47', class: "secondary", part: "secondary" }, index.h("le-slot", { key: '4eede5a0616d82da0996878b41cea2000b1030e7', name: "", label: "Secondary", description: "Secondary row content", "allowed-components": "le-tabs,le-tab-bar,le-select,le-combobox,le-text,le-stack,le-box" }, index.h("slot", { key: 'c6b287cd00c3f5fc95931078307e5d0b007ec53b' }))))))));
     }
     static get watchers() { return {
         "revealOnScroll": ["onBehaviorPropsChange"],
@@ -1737,12 +1737,12 @@ const LePopover = class {
             popoverStyles.minWidth = this.minWidth;
         if (this.maxWidth)
             popoverStyles.maxWidth = this.maxWidth;
-        return (index.h(index.Host, { key: 'ab4a38788350cd0571637978291dc3cacf128290', "trigger-full-width": this.triggerFullWidth }, index.h("div", { key: 'aeae05965add2ef93145fecfc444124ef998e868', class: utils.classnames('le-popover-trigger', {
+        return (index.h(index.Host, { key: '16aec5e624881b728716d00fc6827b5b9c4049b1', "trigger-full-width": this.triggerFullWidth }, index.h("div", { key: 'f4171fc444414c68d43b4a081b574fb6ccbc3dfe', class: utils.classnames('le-popover-trigger', {
                 'le-popover-trigger-full-width': this.triggerFullWidth,
-            }), ref: el => (this.triggerEl = el), onClick: this.handleTriggerClick, part: "trigger" }, index.h("slot", { key: 'db68f48f01d2d729e46a8fe46e7a10f3c28cecd6', name: "trigger" }, index.h("button", { key: 'e2ab0f5516d18b8cb209c3172c84d46041089c39', type: "button", class: "le-popover-default-trigger" }, index.h("span", { key: '1a8062028340b3696fbce2f2911b7cecba947841' }, "\u2295")))), index.h("div", { key: '19ff2c84398d3851c51f64f3369017790e9a6ab2', id: this.uniqueId, class: "le-popover-content",
+            }), ref: el => (this.triggerEl = el), onClick: this.handleTriggerClick, part: "trigger" }, index.h("slot", { key: '039a6b55fc666443605178c6f86ecd0155bfab1f', name: "trigger" }, index.h("button", { key: 'f7140509d06b764d3da9086a895036bccb72b939', type: "button", class: "le-popover-default-trigger" }, index.h("span", { key: 'd618acd932b9489020373820a81bde4bc8ec01e6' }, "\u2295")))), index.h("div", { key: '678d09edfa103eecd3fe04b03933d8c4c7c7f847', id: this.uniqueId, class: "le-popover-content",
             // Always use manual mode so nested popovers can be open together.
             // We implement click-outside and Escape handling ourselves.
-            popover: "manual", ref: el => (this.popoverEl = el), style: popoverStyles, "data-fallback-open": this.supportsPopoverApi ? undefined : String(this.open) }, (this.popoverTitle || this.showClose) && (index.h("div", { key: 'fba07fb0c59685f51dd0952560d47abbce7b7424', class: "le-popover-header" }, this.popoverTitle && index.h("span", { key: '064851cf48684a1bb9e2a27c8d415bcf449fc871', class: "le-popover-title" }, this.popoverTitle), this.showClose && (index.h("button", { key: '281803ab3f5aeab0f0ed842dba513ef5991f6619', type: "button", class: "le-popover-close", onClick: () => this.hide(), "aria-label": "Close" }, "\u00D7")))), index.h("div", { key: '4aea10af963421a60145b6ed0913f1447b8f0599', class: "le-popover-body", part: "content" }, index.h("slot", { key: 'e4310d522411a43164d08eb74a935777782e6bac' })))));
+            popover: "manual", ref: el => (this.popoverEl = el), style: popoverStyles, "data-fallback-open": this.supportsPopoverApi ? undefined : String(this.open) }, (this.popoverTitle || this.showClose) && (index.h("div", { key: '98404abda58b31d5a405be271180924bc140cb45', class: "le-popover-header" }, this.popoverTitle && index.h("span", { key: '43b1559400087ea256485c4755bf2db61feff3de', class: "le-popover-title" }, this.popoverTitle), this.showClose && (index.h("button", { key: '99ef18a9f3b0268b0010bc3cb1637a9409a47888', type: "button", class: "le-popover-close", onClick: () => this.hide(), "aria-label": "Close" }, "\u00D7")))), index.h("div", { key: '1631159f18e60932960449f86da91cd00f859fac', class: "le-popover-body", part: "content" }, index.h("slot", { key: '87a4a321122749546b18d1706dd39911eab3b843' })))));
     }
 };
 LePopover.style = lePopoverCss();
@@ -1953,7 +1953,7 @@ const LePopup = class {
     }
     render() {
         const positionClass = `le-popup-position-${this.position}`;
-        return (index.h("dialog", { key: '20ac8e086b2999191c769a0ee03b1c1182103809', class: `le-popup-dialog ${positionClass}`, part: "dialog", ref: el => (this.dialogEl = el), onClick: this.handleBackdropClick }, index.h("le-component", { key: '468b1d737c2301b041c2a7a13afc658505f74c5b', component: "le-popup" }, index.h("div", { key: '829cad08439dc5d0b3f9c78092a46faa016bbec2', class: "le-popup-container", part: "container" }, this.renderHeader(), this.renderBody(), this.renderFooter()))));
+        return (index.h("dialog", { key: '75ff06ac2532818f2951283fb455d165d1b13e89', class: `le-popup-dialog ${positionClass}`, part: "dialog", ref: el => (this.dialogEl = el), onClick: this.handleBackdropClick }, index.h("le-component", { key: '0fea1c4ea66d8457c66bf5e14b08b7ac3251a9cc', component: "le-popup" }, index.h("div", { key: 'eb95845004b27cdba2e817b2f296a59ae1d62552', class: "le-popup-container", part: "container" }, this.renderHeader(), this.renderBody(), this.renderFooter()))));
     }
 };
 LePopup.style = lePopupCss();
@@ -2061,7 +2061,7 @@ const LeScrollProgress = class {
     }
     render() {
         const width = `${this.progress * 100}%`;
-        return (index.h(index.Host, { key: 'bbbf42c0402c2b565d6d6b740e0863ed9543cc43' }, index.h("div", { key: '085ca4aad35549d49ef1553d2eb0fd805df2af4a', class: "track", part: "track", "aria-hidden": "true" }, index.h("div", { key: '12dc1e4bc87afa64e47d75d3c3c097af82b74b94', class: "fill", part: "fill", style: { width } }))));
+        return (index.h(index.Host, { key: '5aa4fc59f57bbb1de387debf27b4a39c073c85bf' }, index.h("div", { key: '7bce9ba58ce43340c6e1c56afe7cb50eb0117079', class: "track", part: "track", "aria-hidden": "true" }, index.h("div", { key: 'adc0c2fe77b49d9496c67d05ce2b1a38dcafef05', class: "fill", part: "fill", style: { width } }))));
     }
     static get watchers() { return {
         "trackScrollProgress": ["onTrackChange"]
@@ -2236,13 +2236,13 @@ const LeSelect = class {
     }
     render() {
         const hasValue = this.selectedOption !== undefined;
-        return (index.h("le-component", { key: '6f2eebab3f0afcef9d1801812ad0cc4cfb4456b6', component: "le-select" }, index.h("le-dropdown-base", { key: 'eb34e28681f84fbd5a75d415facd9f1f79012010', ref: el => (this.dropdownEl = el), options: this.parsedOptions, value: this.value, disabled: this.disabled, filterFn: this.searchable ? this.filterOption : undefined, filterQuery: this.searchQuery, onLeOptionSelect: this.handleOptionSelect, onLeDropdownOpen: this.handleDropdownOpen, onLeDropdownClose: this.handleDropdownClose, fullWidth: this.fullWidth }, index.h("le-button", { key: 'e8507bfd78aa3267fb2513810599361cd223f8eb', variant: this.variant && this.variant !== 'default' ? this.variant : 'outlined', slot: "trigger", align: "space-between", class: {
+        return (index.h("le-component", { key: '1659550d258d0d647cefa5715cc9cbcf5ac3b6c7', component: "le-select" }, index.h("le-dropdown-base", { key: '4210afe927afaf35adeb25794d684d8bf6265604', ref: el => (this.dropdownEl = el), options: this.parsedOptions, value: this.value, disabled: this.disabled, filterFn: this.searchable ? this.filterOption : undefined, filterQuery: this.searchQuery, onLeOptionSelect: this.handleOptionSelect, onLeDropdownOpen: this.handleDropdownOpen, onLeDropdownClose: this.handleDropdownClose, fullWidth: this.fullWidth }, index.h("le-button", { key: '204b62bae909fb979f84f79ab64a7405f44df0a7', variant: this.variant && this.variant !== 'default' ? this.variant : 'outlined', slot: "trigger", align: "space-between", class: {
                 'select-trigger': true,
                 'has-value': hasValue,
                 'is-open': this.open,
             }, mode: "default", size: this.size, disabled: this.disabled, "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown, fullWidth: this.fullWidth, iconStart: hasValue && this.selectedOption?.iconStart
                 ? this.renderIcon(this.selectedOption.iconStart)
-                : null, iconEnd: index.h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("path", { d: "M4 6l4 4 4-4" })) }, index.h("span", { key: 'afd07c274a9b340ed16d89844495fdf588e7ebfe', class: "trigger-label" }, hasValue ? this.selectedOption.label : this.placeholder)), this.searchable && this.open && (index.h("div", { key: 'baeaf8eb5ad2083d3860d9e02991d32144e23038', class: "multiselect-search", slot: "header" }, index.h("le-string-input", { key: '4d3a7d002fb4476db71f2e37ce44dc62cc89f2fc', mode: "default", inputRef: el => (this.inputEl = el), class: "search-input", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchInput })))), this.name && index.h("input", { key: '37e3432981fda47a0bbf09bcb56851bd5dab4ca4', type: "hidden", name: this.name, value: this.value?.toString() ?? '' })));
+                : null, iconEnd: index.h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("path", { d: "M4 6l4 4 4-4" })) }, index.h("span", { key: 'abb56957a4ddf6b39c3554b26e46c0ad51e022be', class: "trigger-label" }, hasValue ? this.selectedOption.label : this.placeholder)), this.searchable && this.open && (index.h("div", { key: '25d58fdfddc45f7fde1a41defdbd50dbddd70ea5', class: "multiselect-search", slot: "header" }, index.h("le-string-input", { key: '81b290d28bed6190b9ec165897ec2e7d758575bf', mode: "default", inputRef: el => (this.inputEl = el), class: "search-input", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchInput })))), this.name && index.h("input", { key: '70e413d81035cdd61bfdaeae27ba3ced0a25f544', type: "hidden", name: this.name, value: this.value?.toString() ?? '' })));
     }
     static get watchers() { return {
         "value": ["handleValueChange"],
@@ -2586,7 +2586,7 @@ const LeSlot = class {
     render() {
         const displayLabel = this.label || this.name;
         // Always render the same structure, CSS handles visibility via .admin-mode class
-        return (index.h(index.Host, { key: '0b2b3edf3690ed9769438ef019111638e5de0276', class: {
+        return (index.h(index.Host, { key: '02bfcbc32ff96bcbdcb531430283b67a257a8333', class: {
                 'admin-mode': this.adminMode,
                 'invalid-html': !this.isValidHtml,
             }, role: this.adminMode ? 'region' : undefined, "aria-label": this.adminMode ? `Slot: ${displayLabel}` : undefined, "data-slot-name": this.name, "data-slot-type": this.type, "data-allowed": this.allowedComponents, "data-multiple": this.multiple, "data-required": this.required }, this.adminMode ? (index.h("div", { class: "le-slot-container" }, index.h("div", { class: utils.classnames('le-slot-header', {
@@ -2724,11 +2724,11 @@ const LeStringInput = class {
         ev.stopPropagation();
     };
     render() {
-        return (index.h("le-component", { key: 'c28242025bd09955e03d3aa7e5f7d1fd0693817f', component: "le-string-input", hostClass: utils.classnames({ disabled: this.disabled }) }, index.h("div", { key: 'e995b83c1668d4818c634f39acb16683baef844c', class: "le-input-wrapper" }, this.label && (index.h("label", { key: 'cb0a17558b2a07bf211bdb5ecd7d4e8aec9554cc', class: "le-input-label", htmlFor: this.name }, this.label)), index.h("div", { key: 'c50a27c4e0732c05b37d6ff6ea77e74f05e942d6', class: "le-input-container", part: "container" }, this.iconStart && index.h("span", { key: 'f9e01713742664671938e66498a407fd0d408b5f', class: "icon-start" }, this.iconStart), index.h("input", { key: '2357145ebdb43bc6eb52450508f707699253da91', ref: el => {
+        return (index.h("le-component", { key: 'd77913214c129e32a8707b984d2a32cc9daa27b0', component: "le-string-input", hostClass: utils.classnames({ disabled: this.disabled }) }, index.h("div", { key: '0059b3a7b915096469c0c9ad4f24f431cff96d30', class: "le-input-wrapper" }, this.label && (index.h("label", { key: '20cac379c5a5a3ff6554997fb8a1504b5fdbac02', class: "le-input-label", htmlFor: this.name }, this.label)), index.h("div", { key: '7a5460949f07c16e333fe4fd641e5d003aeddeaf', class: "le-input-container", part: "container" }, this.iconStart && index.h("span", { key: 'bd1996639dfafab0f77149f5a66debcbf9d229f7', class: "icon-start" }, this.iconStart), index.h("input", { key: 'e768f8af9b47ce493dd8d0aee01655ee48521f15', ref: el => {
                 if (this.inputRef) {
                     this.inputRef(el);
                 }
-            }, id: this.name, type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onChange: this.handleChange, onClick: this.handleClick }), this.iconEnd && index.h("span", { key: '22ea7682c0e74910905d08fceeab2b4d0270af60', class: "icon-end" }, this.iconEnd)), !this.hideDescription && (index.h("div", { key: 'e281b9cc97935296dda68bf52fa3318997a6c39d', class: "le-input-description" }, index.h("le-slot", { key: '438f02f1a197968f9d5aa751214a680fc17eb2ba', name: "description", type: "text", tag: "p", label: "Description" }, index.h("slot", { key: '3e52eb43aede04916d0004449fc03c4987d62715', name: "description" })))))));
+            }, id: this.name, type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onChange: this.handleChange, onClick: this.handleClick }), this.iconEnd && index.h("span", { key: 'afe7c876edccbf0fa15f838ef3ccf8a0cbb51fca', class: "icon-end" }, this.iconEnd)), !this.hideDescription && (index.h("div", { key: '9a4d068a1b3fffd9b5beae410382631ec0c4f737', class: "le-input-description" }, index.h("le-slot", { key: 'bc738beb28f7d7c6890f09a4a5b2a59cd328a625', name: "description", type: "text", tag: "p", label: "Description" }, index.h("slot", { key: '716953e93011f8b2d323f19b0c21a30997ea566e', name: "description" })))))));
     }
 };
 LeStringInput.style = leStringInputCss();

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

@@ -20,7 +20,7 @@ const LeCard = class {
      */
     interactive = false;
     render() {
-        return (index.h("le-component", { key: 'b7eb138d4df55f27716d53c41ff7e1035e058cbe', component: "le-card", hostClass: utils.classnames(`variant-${this.variant}`, { 'interactive': this.interactive }) }, index.h("div", { key: 'db58aceaf332727671c73f121bd7c7b7c00c798e', class: "card", part: "card" }, index.h("div", { key: '1eb45033cee8e18dc9edfaba3341b1c8df8c737c', class: "card-header", part: "header" }, index.h("le-slot", { key: 'e77e29b0cf5965063554a50936fa0e9026fbc73a', name: "header", label: "Header", description: "Card title", type: "text", tag: "h3" }, index.h("slot", { key: 'b67e02c52fbfa2a7b1ed58e0c1537355af9a125e', name: "header" }))), index.h("div", { key: 'bcdbdc7c2e7addaaa4892d41cf5af2e43260c876', class: "card-content", part: "content" }, index.h("le-slot", { key: 'e4dc82322cbcb0ca884ac55c7805fa860fdaf588', name: "", label: "Content", description: "Card content", type: "textarea", tag: "p", required: true }, index.h("slot", { key: 'e9576903dfc9c04c01614207078ee02a03d9f4b8' }))), index.h("div", { key: '6f684335dfc5acd55cbd832e2cd6f8a468df7a9a', class: "card-footer", part: "footer" }, index.h("le-slot", { key: 'b4013edc8431ba54f44cabd4763916c6e83bc6a8', name: "footer", label: "Footer", description: "Card footer with actions", "allowed-components": "le-button,le-link" }, index.h("slot", { key: '9e9d1c9d99beb2d877a9b8d59b13659e0c9c6459', name: "footer" }))))));
+        return (index.h("le-component", { key: '3b9b4c5f234bb3ac5d479a777c8069428baa4d8c', component: "le-card", hostClass: utils.classnames(`variant-${this.variant}`, { 'interactive': this.interactive }) }, index.h("div", { key: '7cad2dc42768d03b8d9af5dc52a8acc0d79027c0', class: "card", part: "card" }, index.h("div", { key: 'd00e14de2a216afd1362605849c387e8fa7cc522', class: "card-header", part: "header" }, index.h("le-slot", { key: 'a09922eae71962506351a6b3ddc4b2253573fa6d', name: "header", label: "Header", description: "Card title", type: "text", tag: "h3" }, index.h("slot", { key: '624efcc1f6e06e2876fb00d0b4efa10fdfd9083b', name: "header" }))), index.h("div", { key: '9aba5630de5d4fe24dbc59b5607fbb530ebd41e8', class: "card-content", part: "content" }, index.h("le-slot", { key: 'a6de438f65b747e6ecf8b7c573168c99cde3eb62', name: "", label: "Content", description: "Card content", type: "textarea", tag: "p", required: true }, index.h("slot", { key: 'bca044329a0b88ad3f041aab94b702434124179c' }))), index.h("div", { key: '1c08846aa15cd44f71f6d79968412634009eea03', class: "card-footer", part: "footer" }, index.h("le-slot", { key: '4b65f8c6dd68e5995b42ed4ef18fa504d3b4f182', name: "footer", label: "Footer", description: "Card footer with actions", "allowed-components": "le-button,le-link" }, index.h("slot", { key: 'db199113de94b26bf19d0665938f5048a3587134', name: "footer" }))))));
     }
 };
 LeCard.style = leCardDefaultCss();