le-kit 0.3.5 → 0.4.0

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

@@ -0,0 +1,546 @@
+'use strict';
+
+var index = require('./index-BzadfLTc.js');
+
+const leSidePanelCss = () => `:host{display:block;height:100%;--le-side-panel-width:280px;--le-side-panel-margin:0px;--le-side-panel-backdrop:var(--le-color-backdrop);--le-side-panel-border-radius:var(--le-radius-lg)}.host{position:relative;height:100%;min-height:0}.layout{display:flex;align-items:stretch;min-width:0;height:100%;min-height:0}.layout.start{flex-direction:row}.layout.end{flex-direction:row-reverse}.inlinePanel{flex:0 0 auto;width:var(--le-side-panel-width);min-width:0;height:100%;overflow:hidden;transition:width var(--le-side-panel-transition, var(--le-transition-normal))}.inlinePanel.hidden{width:0}.inlinePanel .panel{transform:translateX(0);opacity:1;transition:transform var(--le-side-panel-transition, var(--le-transition-normal)),
+    opacity var(--le-side-panel-transition, var(--le-transition-normal))}.layout.start .inlinePanel.hidden .panel{transform:translateX(-100%);opacity:0;pointer-events:none}.layout.end .inlinePanel.hidden .panel{transform:translateX(100%);opacity:0;pointer-events:none}.content{flex:1 1 auto;min-width:0;height:100%;min-height:0}.panel{position:relative;height:100%;max-height:min(calc(100% - (var(--le-side-panel-margin) * 2)), calc(100vh - (var(--le-side-panel-margin) * 2)));margin:var(--le-side-panel-margin);border-radius:var(--le-side-panel-border-radius);background:var(--le-color-surface, #fff);color:var(--le-color-text, #000);border-right:1px solid var(--le-color-border, rgba(0, 0, 0, 0.12));box-sizing:border-box}.panel.end{border-right:0;border-left:1px solid var(--le-color-border, rgba(0, 0, 0, 0.12))}.panel-scroller{height:100%;overflow:auto}.close{position:absolute;top:4px;right:4px;z-index:1;border:0;border-radius:6px;background:transparent;color:inherit;cursor:pointer}.handle{position:absolute;top:0;bottom:0;width:10px;cursor:col-resize}.handle.start{right:-5px}.handle.end{left:-5px}.overlayRoot{position:absolute;inset:0;background:var(--le-side-panel-backdrop);z-index:var(--le-z-modal-backdrop, 1040);opacity:0;pointer-events:none;transition:opacity var(--le-side-panel-transition, var(--le-transition-normal));height:100%}.overlayRoot.visible{opacity:1;pointer-events:auto}.overlayPanelWrap{position:absolute;top:0;bottom:0;width:min(100%, var(--le-side-panel-width));height:100%;z-index:var(--le-z-modal, 1050);display:flex;align-items:stretch}.overlayPanelWrap.start{left:0;transform:translateX(-100%)}.overlayPanelWrap.end{right:0;transform:translateX(100%)}.overlayPanelWrap.visible.start,.overlayPanelWrap.visible.end{transform:translateX(0)}.overlayPanelWrap{transition:transform var(--le-side-panel-transition, var(--le-transition-normal))}.host[data-resizing='true'] .panel,.host[data-resizing='true'] .overlayPanelWrap,.host[data-resizing='true'] .inlinePanel{transition:none}@media (prefers-reduced-motion: reduce){.overlayPanelWrap,.overlayRoot,.inlinePanel{transition:none}}`;
+
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+function readCssVariablePixels(varName) {
+    const v = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
+    if (!v) {
+        return undefined;
+    }
+    const parsed = Number.parseFloat(v);
+    return Number.isFinite(parsed) ? parsed : undefined;
+}
+function parseCollapseAtPx(value) {
+    if (!value) {
+        return undefined;
+    }
+    const trimmed = value.trim();
+    if (!trimmed) {
+        return undefined;
+    }
+    if (trimmed.startsWith('--')) {
+        const fromVar = readCssVariablePixels(trimmed);
+        return fromVar;
+    }
+    const numeric = Number.parseFloat(trimmed);
+    return Number.isFinite(numeric) ? numeric : undefined;
+}
+const LeSidePanel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.leSidePanelOpenChange = index.createEvent(this, "leSidePanelOpenChange");
+        this.leSidePanelCollapsedChange = index.createEvent(this, "leSidePanelCollapsedChange");
+        this.leSidePanelWidthChange = index.createEvent(this, "leSidePanelWidthChange");
+    }
+    get el() { return index.getElement(this); }
+    /**
+     * Optional id used to match toggle requests.
+     * If set, the panel only responds to toggle events with the same `panelId`.
+     */
+    panelId;
+    /** Which side the panel is attached to. */
+    side = 'start';
+    /** Width breakpoint (in px or a CSS var like `--le-breakpoint-md`) below which the panel enters "narrow" mode. */
+    collapseAt;
+    /** Behavior when in narrow mode. */
+    narrowBehavior = 'overlay';
+    /**
+     * Panel open state for narrow mode.
+     * - overlay: controls modal drawer visibility
+     * - push: controls whether panel is shown (non-modal)
+     */
+    open = false;
+    /** Panel collapsed state for wide mode (fully hidden). */
+    collapsed = false;
+    /** Default panel width in pixels. */
+    panelWidth = 280;
+    /** Minimum allowed width when resizable. */
+    minPanelWidth = 220;
+    /** Maximum allowed width when resizable. */
+    maxPanelWidth = 420;
+    /** Allows users to resize the panel by dragging its edge. */
+    resizable = false;
+    /** When set, panel width + collapsed state are persisted in localStorage. */
+    persistKey;
+    /** Show a close button inside the panel (primarily used in narrow overlay mode). */
+    showCloseButton = true;
+    /** When crossing to wide mode, automatically show the panel (collapsed=false). */
+    autoShowOnWide = true;
+    /** When crossing to narrow mode, automatically hide the panel (open=false). */
+    autoHideOnNarrow = true;
+    /** Accessible label for the panel navigation region. */
+    panelLabel = 'Navigation';
+    leSidePanelOpenChange;
+    leSidePanelCollapsedChange;
+    leSidePanelWidthChange;
+    isNarrow = false;
+    responsiveReady = false;
+    overlayMounted = false;
+    overlayVisible = false;
+    currentWidthPx = this.panelWidth;
+    resizing = false;
+    resizeObserver;
+    panelEl;
+    overlayWrapEl;
+    focusedBeforeOpen;
+    dragPointerId;
+    dragStartX;
+    dragStartWidth;
+    connectedCallback() {
+        this.restorePersistedState();
+        this.currentWidthPx = clamp(this.currentWidthPx || this.panelWidth, this.minPanelWidth, this.maxPanelWidth);
+        if ('ResizeObserver' in window) {
+            this.resizeObserver = new ResizeObserver(() => {
+                this.recomputeNarrow();
+            });
+            this.resizeObserver.observe(this.el);
+        }
+        // Ensure we get at least one post-layout measurement.
+        {
+            requestAnimationFrame(() => this.recomputeNarrow());
+        }
+    }
+    componentWillLoad() {
+        this.recomputeNarrow();
+    }
+    disconnectedCallback() {
+        this.resizeObserver?.disconnect();
+        this.teardownDragListeners();
+    }
+    isModalOverlayActive() {
+        return this.isNarrow && this.narrowBehavior === 'overlay' && this.open;
+    }
+    syncOverlayToState() {
+        const shouldUseOverlay = this.isNarrow && this.narrowBehavior === 'overlay';
+        if (!shouldUseOverlay) {
+            this.overlayVisible = false;
+            this.overlayMounted = false;
+            return;
+        }
+        if (this.open) {
+            if (!this.overlayMounted) {
+                this.overlayMounted = true;
+                this.overlayVisible = false;
+                requestAnimationFrame(() => {
+                    if (this.isNarrow && this.narrowBehavior === 'overlay' && this.open) {
+                        this.overlayVisible = true;
+                        this.focusFirstInsidePanel();
+                    }
+                });
+            }
+            return;
+        }
+        // Closed: allow unmount to be handled by transition end / fallback timeout.
+        this.overlayVisible = false;
+    }
+    onPanelWidthChanged() {
+        if (!Number.isFinite(this.panelWidth)) {
+            return;
+        }
+        if (!this.resizing) {
+            this.currentWidthPx = clamp(this.panelWidth, this.minPanelWidth, this.maxPanelWidth);
+            this.persistState();
+        }
+    }
+    onCollapsedChanged() {
+        this.persistState();
+        this.leSidePanelCollapsedChange.emit({ collapsed: this.collapsed, panelId: this.panelId });
+    }
+    onOpenChanged(newValue) {
+        const shouldUseOverlay = this.isNarrow && this.narrowBehavior === 'overlay';
+        if (!shouldUseOverlay) {
+            this.persistState();
+            this.leSidePanelOpenChange.emit({ open: this.open, panelId: this.panelId });
+            return;
+        }
+        if (newValue) {
+            this.focusedBeforeOpen = document.activeElement || null;
+            this.overlayMounted = true;
+            this.overlayVisible = false;
+            requestAnimationFrame(() => {
+                this.overlayVisible = true;
+                this.focusFirstInsidePanel();
+            });
+        }
+        else {
+            this.overlayVisible = false;
+            this.persistState();
+            this.restoreFocusAfterClose();
+            // Fallback: if transitionend doesn't fire, ensure overlay unmounts.
+            // (e.g. interrupted transitions or unusual browser behavior)
+            window.setTimeout(() => {
+                const shouldUseOverlay = this.isNarrow && this.narrowBehavior === 'overlay';
+                if (shouldUseOverlay && !this.open && !this.overlayVisible) {
+                    this.overlayMounted = false;
+                }
+            }, 350);
+        }
+        this.leSidePanelOpenChange.emit({ open: this.open, panelId: this.panelId });
+    }
+    onResponsivePropChanged() {
+        this.recomputeNarrow();
+    }
+    onDocumentKeyDown(ev) {
+        if (!this.isModalOverlayActive()) {
+            return;
+        }
+        if (ev.key === 'Escape') {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.open = false;
+            return;
+        }
+        if (ev.key !== 'Tab') {
+            return;
+        }
+        const panel = this.panelEl;
+        if (!panel) {
+            return;
+        }
+        const focusables = this.getFocusableElements(panel);
+        if (focusables.length === 0) {
+            ev.preventDefault();
+            try {
+                panel.focus();
+            }
+            catch {
+                // ignore
+            }
+            return;
+        }
+        const first = focusables[0];
+        const last = focusables[focusables.length - 1];
+        const active = document.activeElement;
+        if (ev.shiftKey) {
+            if (!active || active === first || !panel.contains(active)) {
+                ev.preventDefault();
+                try {
+                    last.focus();
+                }
+                catch {
+                    // ignore
+                }
+            }
+        }
+        else {
+            if (active === last) {
+                ev.preventDefault();
+                try {
+                    first.focus();
+                }
+                catch {
+                    // ignore
+                }
+            }
+        }
+    }
+    onToggleRequest(ev) {
+        const detail = ev.detail;
+        if (!detail || !detail.action) {
+            return;
+        }
+        // panelId matching rules:
+        // - If this panel has panelId: respond only when detail.panelId matches.
+        // - If this panel has no panelId: respond only when detail.panelId is empty.
+        const requestedId = detail.panelId || '';
+        const myId = this.panelId || '';
+        if (myId !== requestedId) {
+            return;
+        }
+        if (this.isNarrow) {
+            this.applyActionToOpen(detail.action);
+        }
+        else {
+            this.applyActionToCollapsed(detail.action);
+        }
+    }
+    applyActionToOpen(action) {
+        if (action === 'open') {
+            this.open = true;
+            return;
+        }
+        if (action === 'close') {
+            this.open = false;
+            return;
+        }
+        this.open = !this.open;
+    }
+    applyActionToCollapsed(action) {
+        if (action === 'open') {
+            this.collapsed = false;
+            return;
+        }
+        if (action === 'close') {
+            this.collapsed = true;
+            return;
+        }
+        this.collapsed = !this.collapsed;
+    }
+    recomputeNarrow() {
+        const collapseAtPx = parseCollapseAtPx(this.collapseAt);
+        if (!collapseAtPx) {
+            this.isNarrow = false;
+            this.responsiveReady = true;
+            this.syncOverlayToState();
+            return;
+        }
+        const width = this.el.clientWidth;
+        // If we can't measure yet (common on first paint), don't guess a mode.
+        // This prevents a brief "wide" flash before ResizeObserver kicks in.
+        if (!(width > 0)) {
+            this.responsiveReady = false;
+            return;
+        }
+        this.responsiveReady = true;
+        const nextIsNarrow = width < collapseAtPx;
+        const prevIsNarrow = this.isNarrow;
+        this.isNarrow = nextIsNarrow;
+        if (prevIsNarrow !== nextIsNarrow) {
+            if (nextIsNarrow) {
+                if (this.autoHideOnNarrow) {
+                    this.open = false;
+                }
+            }
+            else {
+                // entering wide mode
+                this.open = false;
+                this.overlayVisible = false;
+                this.overlayMounted = false;
+                if (this.autoShowOnWide) {
+                    this.collapsed = false;
+                }
+            }
+        }
+        this.syncOverlayToState();
+    }
+    restorePersistedState() {
+        if (!this.persistKey) {
+            return;
+        }
+        try {
+            const raw = window.localStorage.getItem(this.persistKey);
+            if (!raw) {
+                return;
+            }
+            const parsed = JSON.parse(raw);
+            if (typeof parsed.width === 'number' && Number.isFinite(parsed.width)) {
+                this.currentWidthPx = parsed.width;
+            }
+            if (typeof parsed.collapsed === 'boolean') {
+                this.collapsed = parsed.collapsed;
+            }
+        }
+        catch {
+            // ignore
+        }
+    }
+    persistState() {
+        if (!this.persistKey) {
+            return;
+        }
+        const payload = {
+            width: this.currentWidthPx,
+            collapsed: this.collapsed,
+        };
+        try {
+            window.localStorage.setItem(this.persistKey, JSON.stringify(payload));
+        }
+        catch {
+            // ignore
+        }
+    }
+    focusFirstInsidePanel() {
+        const root = this.panelEl;
+        if (!root) {
+            return;
+        }
+        const candidates = this.getFocusableElements(root);
+        for (const el of candidates) {
+            if (el.hasAttribute('disabled')) {
+                continue;
+            }
+            const tabindex = el.getAttribute('tabindex');
+            if (tabindex === '-1') {
+                continue;
+            }
+            try {
+                el.focus();
+                return;
+            }
+            catch {
+                // ignore
+            }
+        }
+    }
+    getFocusableElements(root) {
+        const selector = 'button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])';
+        const all = Array.from(root.querySelectorAll(selector));
+        return all.filter(el => {
+            if (el.hasAttribute('disabled')) {
+                return false;
+            }
+            const tabindex = el.getAttribute('tabindex');
+            if (tabindex === '-1') {
+                return false;
+            }
+            return true;
+        });
+    }
+    restoreFocusAfterClose() {
+        const prev = this.focusedBeforeOpen;
+        this.focusedBeforeOpen = null;
+        if (prev && document.contains(prev)) {
+            try {
+                prev.focus();
+            }
+            catch {
+                // ignore
+            }
+        }
+    }
+    onOverlayTransitionEnd = (ev) => {
+        if (ev.target !== this.overlayWrapEl) {
+            return;
+        }
+        if (ev.propertyName !== 'transform') {
+            return;
+        }
+        const shouldUseOverlay = this.isNarrow && this.narrowBehavior === 'overlay';
+        if (!shouldUseOverlay) {
+            return;
+        }
+        if (!this.open && !this.overlayVisible) {
+            this.overlayMounted = false;
+        }
+    };
+    onOverlayPointerDown = (ev) => {
+        // Close on any click outside the panel.
+        const panel = this.panelEl;
+        if (!panel) {
+            return;
+        }
+        const path = ev.composedPath();
+        if (!path.includes(panel)) {
+            this.open = false;
+        }
+    };
+    startResizeDrag = (ev) => {
+        if (!this.resizable) {
+            return;
+        }
+        // No resizing if fully hidden.
+        if (!this.isNarrow && this.collapsed) {
+            return;
+        }
+        if (this.isNarrow && this.narrowBehavior === 'overlay' && !this.open) {
+            return;
+        }
+        if (this.isNarrow && this.narrowBehavior === 'push' && !this.open) {
+            return;
+        }
+        this.resizing = true;
+        this.dragPointerId = ev.pointerId;
+        this.dragStartX = ev.clientX;
+        this.dragStartWidth = this.currentWidthPx;
+        ev.currentTarget?.setPointerCapture?.(ev.pointerId);
+        window.addEventListener('pointermove', this.onResizeDragMove, { passive: false });
+        window.addEventListener('pointerup', this.onResizeDragEnd, { passive: true });
+        window.addEventListener('pointercancel', this.onResizeDragEnd, { passive: true });
+    };
+    onResizeDragMove = (ev) => {
+        if (!this.resizing || this.dragPointerId !== ev.pointerId) {
+            return;
+        }
+        ev.preventDefault();
+        const startX = this.dragStartX ?? ev.clientX;
+        const startWidth = this.dragStartWidth ?? this.currentWidthPx;
+        const delta = ev.clientX - startX;
+        const dir = this.side === 'start' ? 1 : -1;
+        const nextWidth = clamp(startWidth + delta * dir, this.minPanelWidth, this.maxPanelWidth);
+        this.currentWidthPx = nextWidth;
+        this.leSidePanelWidthChange.emit({ width: this.currentWidthPx, panelId: this.panelId });
+    };
+    onResizeDragEnd = (ev) => {
+        if (!this.resizing || this.dragPointerId !== ev.pointerId) {
+            return;
+        }
+        this.resizing = false;
+        this.dragPointerId = undefined;
+        this.dragStartX = undefined;
+        this.dragStartWidth = undefined;
+        this.teardownDragListeners();
+        this.persistState();
+        this.leSidePanelWidthChange.emit({ width: this.currentWidthPx, panelId: this.panelId });
+    };
+    teardownDragListeners() {
+        window.removeEventListener('pointermove', this.onResizeDragMove);
+        window.removeEventListener('pointerup', this.onResizeDragEnd);
+        window.removeEventListener('pointercancel', this.onResizeDragEnd);
+    }
+    renderPanelInner(opts) {
+        const renderPanelSlot = opts?.renderPanelSlot ?? true;
+        const showClose = this.showCloseButton && this.isNarrow && this.narrowBehavior === 'overlay';
+        const tabIndex = this.isNarrow && this.narrowBehavior === 'overlay' ? -1 : null;
+        return (index.h("div", { class: {
+                panel: true,
+                start: this.side === 'start',
+                end: this.side === 'end',
+                resizing: this.resizing,
+            }, part: "panel", ref: el => (this.panelEl = el), role: "navigation", "aria-label": this.panelLabel, tabindex: tabIndex }, showClose ? (index.h("le-side-panel-toggle", { "panel-id": "demo-side", action: "toggle", shortcut: "Mod+B", variant: "clear", class: "close", part: "close-button", "aria-label": "Close panel", "icon-only": "true", style: {
+                '--le-button-icon-only-padding': 'var(--le-space-sm)',
+            }, onClick: () => (this.open = false) }, index.h("slot", { name: "close-icon", slot: "icon-only" }, index.h("le-icon", { name: "side-panel" })))) : null, index.h("div", { class: "panel-scroller", part: "panel-scroller" }, renderPanelSlot ? index.h("slot", { name: "panel" }) : null), this.resizable ? (index.h("div", { class: {
+                handle: true,
+                start: this.side === 'start',
+                end: this.side === 'end',
+            }, part: "resize-handle", role: "separator", "aria-orientation": "vertical", tabindex: -1, onPointerDown: this.startResizeDrag })) : null));
+    }
+    render() {
+        const widthStyle = {
+            '--le-side-panel-width': `${this.currentWidthPx}px`,
+        };
+        const isOverlay = this.isNarrow && this.narrowBehavior === 'overlay';
+        const isModalOverlayOpen = isOverlay && this.open;
+        const allowPanel = this.responsiveReady;
+        const showWidePanel = allowPanel && !this.isNarrow && !this.collapsed;
+        const showNarrowPushPanel = allowPanel && this.isNarrow && this.narrowBehavior === 'push' && this.open;
+        const layoutHasInlinePanel = showWidePanel || showNarrowPushPanel;
+        return (index.h("div", { key: '5ced2e49e6f13628929c54ec931cd44b28908ffa', class: {
+                host: true,
+                narrow: this.isNarrow,
+                wide: !this.isNarrow,
+                overlay: isOverlay,
+                push: !isOverlay,
+                collapsed: !this.isNarrow && this.collapsed,
+            }, style: widthStyle, "data-resizing": this.resizing ? 'true' : null }, index.h("div", { key: '0fe007d5bfa12f1130f906195a664c8da719ed5e', class: {
+                'layout': true,
+                'has-panel': layoutHasInlinePanel,
+                'start': this.side === 'start',
+                'end': this.side === 'end',
+            } }, index.h("div", { key: 'a44957d185db52f78322216a4b3c8ddff95045d8', class: {
+                inlinePanel: true,
+                hidden: !layoutHasInlinePanel,
+            }, "aria-hidden": !layoutHasInlinePanel ? 'true' : null }, this.renderPanelInner({ renderPanelSlot: !isOverlay })), index.h("div", { key: 'd1d2f48f442a7394732adff1208636270e4e97e7', class: "content", part: "content", "aria-hidden": isModalOverlayOpen ? 'true' : null }, index.h("slot", { key: '5cc1bf9fb162cb84cf4a7897da83c3259fb8edba' }))), allowPanel && isOverlay && this.overlayMounted ? (index.h("div", { class: { overlayRoot: true, visible: this.overlayVisible }, part: "scrim", role: "presentation", onPointerDown: this.onOverlayPointerDown, "aria-hidden": isModalOverlayOpen ? null : 'true' }, index.h("div", { class: {
+                overlayPanelWrap: true,
+                visible: this.overlayVisible,
+                start: this.side === 'start',
+                end: this.side === 'end',
+            }, part: "overlay", ref: el => (this.overlayWrapEl = el), onTransitionEnd: this.onOverlayTransitionEnd, role: "dialog", "aria-modal": "true" }, this.renderPanelInner({ renderPanelSlot: true })))) : null));
+    }
+    static get watchers() { return {
+        "panelWidth": ["onPanelWidthChanged"],
+        "collapsed": ["onCollapsedChanged"],
+        "open": ["onOpenChanged"],
+        "collapseAt": ["onResponsivePropChanged"],
+        "narrowBehavior": ["onResponsivePropChanged"]
+    }; }
+};
+LeSidePanel.style = leSidePanelCss();
+
+exports.le_side_panel = LeSidePanel;
+//# sourceMappingURL=le-side-panel.entry.cjs.js.map

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-BPF04Jvb.js');
-var utils = require('./utils-BYsLPHN1.js');
+var index = require('./index-BzadfLTc.js');
+var utils = require('./utils-Dxx9WhWK.js');
 
 const leStackDefaultCss = () => `:host{display:block}:host([hidden]){display:none}.stack{gap:var(--le-stack-gap, var(--le-space-md))}:host(.full-width){width:100%}:host(.full-height){height:100%}:host(.direction-horizontal) .stack{min-height:0}:host(.direction-vertical) .stack{min-width:0}`;
 
@@ -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: 'b9fa5837421caadf0bf79a9303a2b279f9efa92c', component: "le-stack", hostClass: hostClass }, index.h("div", { key: 'a7d39ec296b741f608832d619639e340c42bc652', class: "stack", part: "stack", style: style }, index.h("le-slot", { key: 'd0a4643dcb137eefc57629ac78579e51e3530fd1', 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: '70a847ebeebc868a204b9121f922ad70f34186a4' })))));
+        return (index.h("le-component", { key: 'b9b70eea315cf0f3bfb21e4895ee55d8ea29e699', component: "le-stack", hostClass: hostClass }, index.h("div", { key: 'b4f44316ffffb7237743d208fdce5ac0b8641229', class: "stack", part: "stack", style: style }, index.h("le-slot", { key: 'c7ea0239e08d93f109a4e5a22c0424bd85fec678', 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: '2dfcdc5bd6219c681245ab0293faa78b51aec0db' })))));
     }
 };
 LeStack.style = leStackDefaultCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BPF04Jvb.js');
+var index = require('./index-BzadfLTc.js');
 
 const leTabBarCss = () => `:host{display:block;--le-tab-bar-background:var(--le-color-surface);--le-tab-bar-border-color:var(--le-color-border);--le-tab-bar-gap:var(--le-spacing-2);--le-tab-bar-padding-y:var(--le-spacing-2);--le-tab-bar-padding-x:var(--le-spacing-1);background:var(--le-tab-bar-background);padding:var(--le-tab-bar-padding-y) var(--le-tab-bar-padding-x)}:host([full-width]){width:100%}:host(.bordered.position-top){border-bottom:1px solid var(--le-tab-bar-border-color)}:host(.bordered.position-bottom){border-top:1px solid var(--le-tab-bar-border-color)}.tablist{display:flex;flex-direction:row;align-items:flex-end;justify-content:space-around;gap:var(--le-tab-bar-gap, var(--le-spacing-1));width:100%}.tab{display:inline-flex;align-items:flex-start;justify-content:space-around;gap:var(--le-spacing-2);position:relative;background:transparent;border:none;cursor:pointer}.tab-disabled{opacity:0.5;cursor:not-allowed}.tab-icon{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;font-size:1.1em}.tab-icon img{width:100%;height:100%;object-fit:contain}.tab-description{font-size:var(--le-font-size-xs);font-weight:var(--le-font-weight-normal);color:var(--le-text-tertiary);margin-left:var(--le-spacing-1)}`;
 
@@ -225,7 +225,7 @@ const LeTabBar = class {
             'position-top': this.position === 'top',
             'position-bottom': this.position === 'bottom',
         };
-        return (index.h(index.Host, { key: '45acb7c7c2c2676f1b7040d59dc56e3ef762a5fb', class: classes }, index.h("le-component", { key: 'ed3b7eaf5163ebe676b3c830039f689782d6c58b', component: "le-tab-bar" }, index.h("div", { key: 'ba0d8f8a6adb511671ab540e7c1f3cdcda86dc05', class: "tablist", role: "tablist", "aria-orientation": "horizontal", part: "tablist", onKeyDown: this.handleKeyDown }, index.h("le-slot", { key: '11e4cb848cfb6ede8f65d2d35732f9d7702def26', name: "", type: "slot", allowedComponents: "le-tab" }, tabConfigs.map(tab => {
+        return (index.h(index.Host, { key: 'd8a7700cb1c84cb2d8039cd819f14205fb7dc416', class: classes }, index.h("le-component", { key: '9c25d330964d24fc535dc7ec137e703c2a673857', component: "le-tab-bar" }, index.h("div", { key: '38f6cf8830098ae6dfb3a4a3c4beb88757f4e19d', class: "tablist", role: "tablist", "aria-orientation": "horizontal", part: "tablist", onKeyDown: this.handleKeyDown }, index.h("le-slot", { key: 'f255d56190da910945689a12d9ac72ff2fe06610', 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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BPF04Jvb.js');
+var index = require('./index-BzadfLTc.js');
 
 const leTabPanelCss = () => `:host{display:contents;--le-tab-panel-radius:var(--le-radius-md);--le-tab-panel-padding:var(--le-spacing-4)}.tab-panel{margin-top:4px;display:none;border-radius:var(--le-tab-panel-radius);padding:var(--le-tab-panel-padding)}.tab-panel.active{display:block}.tab-panel:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px}.tab-panel.lazy-hidden{display:none}`;
 
@@ -84,11 +84,11 @@ const LeTabPanel = class {
     }
     render() {
         const shouldRender = this.shouldRenderContent();
-        return (index.h("le-component", { key: '0e3a7a052446c3643c09b24ef00f75e8510a5222', component: "le-tab-panel" }, index.h("div", { key: '4ee30fa55177f3957195b403ad764808a5df5cf0', class: {
+        return (index.h("le-component", { key: '7bd53e4c03fa27d38af46341efaae3caa81f4c47', component: "le-tab-panel" }, index.h("div", { key: '78ccf5767b8b8c17ab4fbbe27133877c9381f3c3', 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: '825f30d9cf743243ace0555d48f634feafaefe6a', name: "", description: "Tab panel content", type: "slot" }, shouldRender && index.h("slot", { key: '92e6ade3fa4c97ac0579cba0f78f55ddf00f0fba' })))));
+            }, role: "tabpanel", "aria-hidden": !this.active ? 'true' : undefined, tabIndex: this.active ? 0 : -1 }, index.h("le-slot", { key: '8cfa03227fe15b93baba9bf98f86009a19a54643', name: "", description: "Tab panel content", type: "slot" }, shouldRender && index.h("slot", { key: 'f7471b33893cb11f47400642d01031c973a160f8' })))));
     }
     static get watchers() { return {
         "active": ["activeChanged"]

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-BPF04Jvb.js');
-var utils = require('./utils-BYsLPHN1.js');
+var index = require('./index-BzadfLTc.js');
+var utils = require('./utils-Dxx9WhWK.js');
 
 const leTabCss = () => `:host{display:inline-block;--le-tab-border-radius:var(--le-radius-md);--le-tab-padding-x:var(--le-spacing-4);--le-tab-padding-y:var(--le-spacing-2);--le-tab-padding:var(--le-tab-padding-y) var(--le-tab-padding-x);--le-tab-small-padding:0.25rem;--le-tab-font-size:var(--le-font-size-md);--le-tab-font-weight:var(--le-font-weight-medium);--le-tab-transition:var(--le-transition-fast);--le-transition-easing:ease-in-out;--le-tab-icon-aspect-ratio:1;--le-tab-icon-only-aspect-ratio:2.5;--le-tab-color:var(--le-color-text-primary);--le-selected-tab-color:var(--le-color-primary);--le-selected-icon-only-tab-background:color-mix(in srgb, var(--_tab-bg) 10%, transparent);--_tab-bg:var(--le-color-primary);--_tab-bg-hover:var(--le-color-primary-dark);--_tab-bg-system:var(--le-color-black);--_tab-color:var(--le-tab-color);--_tab-border-color:var(--le-color-primary)}:host([full-width]){display:block;width:100%}.le-tab-container{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--le-spacing-3);width:100%;padding:var(--le-tab-padding);color:var(--_tab-color);font-family:var(--le-font-family-base);font-size:var(--le-tab-font-size);font-weight:var(--le-tab-font-weight);line-height:var(--le-line-height-tight);text-decoration:none;cursor:pointer;transition:background-color var(--le-tab-transition) var(--le-transition-easing),
     border-color var(--le-tab-transition) var(--le-transition-easing),
@@ -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: 'a1139b9b387444dd8e8e387f9ef8a85417163141' }, index.h("le-component", { key: '85bcbfa03d837920a4a180f0a09678a1ceac1c60', component: "le-tab" }, index.h(TagType, { key: '789494d523473b9cc72d190904e08f588a43e955', 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: '445ba2e3c0ccfdb9f4a1930f249279710ce50ccb' }, index.h("le-component", { key: '2ad92c02000e552743c69fc93604a046dcc5650e', component: "le-tab" }, index.h(TagType, { key: '5c88dbe7d8add672aa68bd84cfb828647ee17235', 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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-BPF04Jvb.js');
-var utils = require('./utils-BYsLPHN1.js');
+var index = require('./index-BzadfLTc.js');
+var utils = require('./utils-Dxx9WhWK.js');
 
 const leTabsCss = () => `:host{display:block;--le-tabs-gap:var(--le-spacing-1);--le-tabs-border-color:var(--le-border-color);--le-tabs-padding-y:var(--le-spacing-2);--le-tabs-padding-x:var(--le-spacing-4);--le-tabs-enclosed-bg:var(--le-color-background-secondary)}.le-tabs{display:flex;flex-direction:column}.le-tabs.orientation-vertical{flex-direction:row}.tablist{display:flex;position:relative;border-radius:var(--le-radius-md);gap:var(--le-tabs-gap)}.tablist.wrap-tabs{flex-wrap:wrap}.tablist.overflow-auto{overflow:auto}.tablist.overflow-hidden{overflow:hidden}.tablist.overflow-visible{overflow:visible}.tablist.overflow-scroll{overflow:scroll}.tablist:focus{outline:2px solid var(--le-color-focus);outline-offset:2px}.orientation-horizontal .tablist{flex-direction:row;border-bottom:1px solid var(--le-tabs-border-color)}.orientation-vertical .tablist{flex-direction:column;border-right:1px solid var(--le-tabs-border-color);min-width:150px}.full-width .tablist{width:100%}.full-width.orientation-horizontal .tab{flex:1}.variant-underlined .tablist{padding-inline:4px}.variant-pills .tablist{border-radius:calc(1.12rem)}.variant-enclosed .tablist{border:none;gap:0;background-color:var(--le-tabs-enclosed-bg);border-radius:calc(var(--le-radius-md) + var(--le-spacing-1));padding:var(--le-spacing-1)}.tab-icon{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;font-size:1.1em}.tab-icon img{width:100%;height:100%;object-fit:contain}.panels{flex:1;min-height:0}.panel{padding:var(--le-tabs-panel-padding, var(--le-spacing-4))}.panel[hidden]{display:none}.orientation-vertical .panels{padding-left:var(--le-spacing-4)}.position-end .panels{order:1}.position-end .tablist{order:2}`;
 
@@ -273,7 +273,7 @@ const LeTabs = class {
             : this.position === 'start'
                 ? 'top'
                 : 'bottom';
-        return (index.h("le-component", { key: 'a19d36c9613b49aac936f8015e6b5527d3673e55', component: "le-tabs", hostClass: utils.classnames(classes) }, index.h("div", { key: 'd7fa47c769880d2741a88997a1dd3bbf8eedec81', class: classes }, index.h("div", { key: '4d34d50afeef2ae01a4e8fe0ba0b34fdf9239bbd', class: {
+        return (index.h("le-component", { key: '564debce4ffeb0124883647ec953982d450d73f9', component: "le-tabs", hostClass: utils.classnames(classes) }, index.h("div", { key: '99dadc1e28db67dad1e6f4e9fdb817a2ed3fc26a', class: classes }, index.h("div", { key: '2138321100dccf61fe39bc3717920f832a6b4175', 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: '81a0a74054e983642c5eb6d274d5563a5c91c06b', class: "panels", part: "panels" }, isDeclarativeMode ? (
+        })), index.h("div", { key: 'b7c1fb07a0828e390e7b4be43e5ce294ee18f7e1', 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