le-kit 0.3.5 → 0.5.0

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

@@ -0,0 +1,544 @@
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-DFTm5BqT.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) {
+        registerInstance(this, hostRef);
+        this.leSidePanelOpenChange = createEvent(this, "leSidePanelOpenChange");
+        this.leSidePanelCollapsedChange = createEvent(this, "leSidePanelCollapsedChange");
+        this.leSidePanelWidthChange = createEvent(this, "leSidePanelWidthChange");
+    }
+    get el() { return 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 (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 ? (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) }, h("slot", { name: "close-icon", slot: "icon-only" }, h("le-icon", { name: "side-panel" })))) : null, h("div", { class: "panel-scroller", part: "panel-scroller" }, renderPanelSlot ? h("slot", { name: "panel" }) : null), this.resizable ? (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 (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 }, h("div", { key: '0fe007d5bfa12f1130f906195a664c8da719ed5e', class: {
+                'layout': true,
+                'has-panel': layoutHasInlinePanel,
+                'start': this.side === 'start',
+                'end': this.side === 'end',
+            } }, h("div", { key: 'a44957d185db52f78322216a4b3c8ddff95045d8', class: {
+                inlinePanel: true,
+                hidden: !layoutHasInlinePanel,
+            }, "aria-hidden": !layoutHasInlinePanel ? 'true' : null }, this.renderPanelInner({ renderPanelSlot: !isOverlay })), h("div", { key: 'd1d2f48f442a7394732adff1208636270e4e97e7', class: "content", part: "content", "aria-hidden": isModalOverlayOpen ? 'true' : null }, h("slot", { key: '5cc1bf9fb162cb84cf4a7897da83c3259fb8edba' }))), allowPanel && isOverlay && this.overlayMounted ? (h("div", { class: { overlayRoot: true, visible: this.overlayVisible }, part: "scrim", role: "presentation", onPointerDown: this.onOverlayPointerDown, "aria-hidden": isModalOverlayOpen ? null : 'true' }, 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();
+
+export { LeSidePanel as le_side_panel };
+//# sourceMappingURL=le-side-panel.entry.js.map

package/dist/esm/le-side-panel.entry.js.map

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

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as getElement, h } from './index-C-Chwj1b.js';
-import { c as classnames } from './utils-B3alHV04.js';
+import { r as registerInstance, a as getElement, h } from './index-DFTm5BqT.js';
+import { c as classnames } from './utils-DZYCZLrF.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}`;
 
@@ -124,7 +124,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 (h("le-component", { key: 'b9fa5837421caadf0bf79a9303a2b279f9efa92c', component: "le-stack", hostClass: hostClass }, h("div", { key: 'a7d39ec296b741f608832d619639e340c42bc652', class: "stack", part: "stack", style: style }, 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 }, h("slot", { key: '70a847ebeebc868a204b9121f922ad70f34186a4' })))));
+        return (h("le-component", { key: '465b00b5165b3c19f0043f5ffaab5081464692dc', component: "le-stack", hostClass: hostClass }, h("div", { key: '1787122eea7ee7f2986581ef8ab3c65068ef799f', class: "stack", part: "stack", style: style }, 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 }, h("slot", { key: '9b11206293f60733a0c59de456513088373ce245' })))));
     }
 };
 LeStack.style = leStackDefaultCss();