le-kit 0.5.2 → 0.5.4

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

@@ -1,546 +0,0 @@
-'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;
-    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: '692aa465f1a1b8c40ec21d0780eb61d9cebdc6bf', 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: 'a01741c802b6eaa8f70bd9265e0b2a19e5cf29cf', class: {
-                'layout': true,
-                'has-panel': layoutHasInlinePanel,
-                'start': this.side === 'start',
-                'end': this.side === 'end',
-            } }, index.h("div", { key: '8795da430749e8af45175166a51848ca9c673f06', class: {
-                inlinePanel: true,
-                hidden: !layoutHasInlinePanel,
-            }, "aria-hidden": !layoutHasInlinePanel ? 'true' : null }, this.renderPanelInner({ renderPanelSlot: !isOverlay })), index.h("div", { key: '16ed86717a59b27b2bc96ee703b53a74a9963595', class: "content", part: "content", "aria-hidden": isModalOverlayOpen ? 'true' : null }, index.h("slot", { key: '445b23491194a96bbca4f7c7dc869dc0ba327daa' }))), 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,135 +0,0 @@
-'use strict';
-
-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}`;
-
-const LeStack = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    get el() { return index.getElement(this); }
-    /**
-     * Direction of the stack layout
-     * @allowedValues horizontal | vertical
-     */
-    direction = 'horizontal';
-    /**
-     * Gap between items (CSS value like '8px', '1rem', 'var(--le-space-md)')
-     */
-    gap;
-    /**
-     * Alignment of items on the cross axis
-     * @allowedValues start | center | end | stretch | baseline
-     */
-    align = 'stretch';
-    /**
-     * Distribution of items on the main axis
-     * @allowedValues start | center | end | space-between | space-around | space-evenly
-     */
-    justify = 'start';
-    /**
-     * Whether items should wrap to multiple lines
-     */
-    wrap = false;
-    /**
-     * Alignment of wrapped lines (only applies when wrap is true)
-     * @allowedValues start | center | end | stretch | space-between | space-around
-     */
-    alignContent = 'stretch';
-    /**
-     * Whether to reverse the order of items
-     */
-    reverse = false;
-    /**
-     * Maximum number of items allowed in the stack (for CMS validation)
-     * @min 1
-     */
-    maxItems;
-    /**
-     * Whether the stack should take full width of its container
-     */
-    fullWidth = false;
-    /**
-     * Whether the stack should take full height of its container
-     */
-    fullHeight = false;
-    /**
-     * Padding inside the stack container (CSS value)
-     */
-    padding;
-    getFlexDirection() {
-        const base = this.direction === 'vertical' ? 'column' : 'row';
-        return this.reverse ? `${base}-reverse` : base;
-    }
-    getAlignItems() {
-        const alignMap = {
-            start: 'flex-start',
-            center: 'center',
-            end: 'flex-end',
-            stretch: 'stretch',
-            baseline: 'baseline',
-        };
-        return alignMap[this.align] || 'stretch';
-    }
-    getJustifyContent() {
-        const justifyMap = {
-            start: 'flex-start',
-            center: 'center',
-            end: 'flex-end',
-            'space-between': 'space-between',
-            'space-around': 'space-around',
-            'space-evenly': 'space-evenly',
-        };
-        return justifyMap[this.justify] || 'flex-start';
-    }
-    getAlignContent() {
-        const alignContentMap = {
-            start: 'flex-start',
-            center: 'center',
-            end: 'flex-end',
-            stretch: 'stretch',
-            'space-between': 'space-between',
-            'space-around': 'space-around',
-        };
-        return alignContentMap[this.alignContent] || 'stretch';
-    }
-    render() {
-        const style = {
-            display: 'flex',
-            flexDirection: this.getFlexDirection(),
-            alignItems: this.getAlignItems(),
-            justifyContent: this.getJustifyContent(),
-            flexWrap: this.wrap ? 'wrap' : 'nowrap',
-        };
-        if (this.wrap) {
-            style.alignContent = this.getAlignContent();
-        }
-        if (this.gap) {
-            style.gap = this.gap;
-        }
-        if (this.padding) {
-            style.padding = this.padding;
-        }
-        // if (this.fullWidth) {
-        //   style.width = '100%';
-        // }
-        // if (this.fullHeight) {
-        //   style.height = '100%';
-        // }
-        const hostClass = utils.classnames(`direction-${this.direction}`, {
-            'wrap': this.wrap,
-            'reverse': this.reverse,
-            'full-width': this.fullWidth,
-            'full-height': this.fullHeight,
-        });
-        // 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: '465b00b5165b3c19f0043f5ffaab5081464692dc', component: "le-stack", hostClass: hostClass }, index.h("div", { key: '1787122eea7ee7f2986581ef8ab3c65068ef799f', class: "stack", part: "stack", style: style }, index.h("le-slot", { key: '5be191bf1ea7d4edc2f27a6f97e57a038dc8cc94', 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: '9b11206293f60733a0c59de456513088373ce245' })))));
-    }
-};
-LeStack.style = leStackDefaultCss();
-
-exports.le_stack = LeStack;
-//# sourceMappingURL=le-stack.entry.cjs.js.map