le-kit 0.5.2 → 0.5.4

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

@@ -1,544 +0,0 @@
-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;
-    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: '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 }, h("div", { key: 'a01741c802b6eaa8f70bd9265e0b2a19e5cf29cf', class: {
-                'layout': true,
-                'has-panel': layoutHasInlinePanel,
-                'start': this.side === 'start',
-                'end': this.side === 'end',
-            } }, h("div", { key: '8795da430749e8af45175166a51848ca9c673f06', class: {
-                inlinePanel: true,
-                hidden: !layoutHasInlinePanel,
-            }, "aria-hidden": !layoutHasInlinePanel ? 'true' : null }, this.renderPanelInner({ renderPanelSlot: !isOverlay })), h("div", { key: '16ed86717a59b27b2bc96ee703b53a74a9963595', class: "content", part: "content", "aria-hidden": isModalOverlayOpen ? 'true' : null }, h("slot", { key: '445b23491194a96bbca4f7c7dc869dc0ba327daa' }))), 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

@@ -1 +0,0 @@
-{"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;\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":";;AAAA,MAAM,cAAc,GAAG,MAAM,CAAC;AAC9B,kkEAAkkE,CAAC;;AC0BnkE,SAAS,KAAK,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW,EAAA;AACpD,IAAA,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;AAC5C;AAEA,SAAS,qBAAqB,CAAC,OAAe,EAAA;AAI5C,IAAA,MAAM,CAAC,GAAG,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE;IACrF,IAAI,CAAC,CAAC,EAAE;AACN,QAAA,OAAO,SAAS;;IAElB,MAAM,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;AACnC,IAAA,OAAO,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,GAAG,MAAM,GAAG,SAAS;AACrD;AAEA,SAAS,iBAAiB,CAAC,KAAc,EAAA;IACvC,IAAI,CAAC,KAAK,EAAE;AACV,QAAA,OAAO,SAAS;;AAElB,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,EAAE;IAC5B,IAAI,CAAC,OAAO,EAAE;AACZ,QAAA,OAAO,SAAS;;AAGlB,IAAA,IAAI,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE;AAC5B,QAAA,MAAM,OAAO,GAAG,qBAAqB,CAAC,OAAO,CAAC;AAC9C,QAAA,OAAO,OAAO;;IAGhB,MAAM,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,OAAO,CAAC;AAC1C,IAAA,OAAO,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,GAAG,OAAO,GAAG,SAAS;AACvD;MAOa,WAAW,GAAA,MAAA;;;;;;;;AAGtB;;;AAGG;AACK,IAAA,OAAO;;IAGP,IAAI,GAAoB,OAAO;;AAG/B,IAAA,UAAU;;IAGV,cAAc,GAA8B,SAAS;AAE7D;;;;AAIG;IACqC,IAAI,GAAY,KAAK;;IAGrB,SAAS,GAAY,KAAK;;IAG1D,UAAU,GAAW,GAAG;;IAGxB,aAAa,GAAW,GAAG;;IAG3B,aAAa,GAAW,GAAG;;IAG3B,SAAS,GAAY,KAAK;;AAG1B,IAAA,UAAU;;IAGV,eAAe,GAAY,IAAI;;IAG/B,cAAc,GAAY,IAAI;;IAG9B,gBAAgB,GAAY,IAAI;;IAGhC,UAAU,GAAW,YAAY;AAGzC,IAAA,qBAAqB;AAGrB,IAAA,0BAA0B;AAG1B,IAAA,sBAAsB;IAEL,QAAQ,GAAY,KAAK;IACzB,eAAe,GAAY,KAAK;IAChC,cAAc,GAAY,KAAK;IAC/B,cAAc,GAAY,KAAK;AAC/B,IAAA,cAAc;IACd,QAAQ,GAAY,KAAK;AAElC,IAAA,cAAc;AACd,IAAA,OAAO;AACP,IAAA,aAAa;AACb,IAAA,iBAAiB;AAEjB,IAAA,aAAa;AACb,IAAA,UAAU;AACV,IAAA,cAAc;IAEtB,iBAAiB,GAAA;QACf,IAAI,CAAC,qBAAqB,EAAE;QAC5B,IAAI,CAAC,cAAc,GAAG,KAAK,CACzB,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,UAAU,EACtC,IAAI,CAAC,aAAa,EAClB,IAAI,CAAC,aAAa,CACnB;QAED,IAAuB,gBAAgB,IAAI,MAAM,EAAE;AACjD,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,MAAK;gBAC5C,IAAI,CAAC,eAAe,EAAE;AACxB,aAAC,CAAC;YACF,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;;;AAItC,QAAqB;YACnB,qBAAqB,CAAC,MAAM,IAAI,CAAC,eAAe,EAAE,CAAC;;;IAIvD,iBAAiB,GAAA;QACf,IAAI,CAAC,eAAe,EAAE;;IAGxB,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,cAAc,EAAE,UAAU,EAAE;QACjC,IAAI,CAAC,qBAAqB,EAAE;;IAGtB,oBAAoB,GAAA;AAC1B,QAAA,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI;;IAGhE,kBAAkB,GAAA;QACxB,MAAM,gBAAgB,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,KAAK,SAAS;QAC3E,IAAI,CAAC,gBAAgB,EAAE;AACrB,YAAA,IAAI,CAAC,cAAc,GAAG,KAAK;AAC3B,YAAA,IAAI,CAAC,cAAc,GAAG,KAAK;YAC3B;;AAGF,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACb,YAAA,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;AACxB,gBAAA,IAAI,CAAC,cAAc,GAAG,IAAI;AAC1B,gBAAA,IAAI,CAAC,cAAc,GAAG,KAAK;gBAC3B,qBAAqB,CAAC,MAAK;AACzB,oBAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,EAAE;AACnE,wBAAA,IAAI,CAAC,cAAc,GAAG,IAAI;wBAC1B,IAAI,CAAC,qBAAqB,EAAE;;AAEhC,iBAAC,CAAC;;YAEJ;;;AAIF,QAAA,IAAI,CAAC,cAAc,GAAG,KAAK;;IAInB,mBAAmB,GAAA;QAC3B,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE;YACrC;;AAEF,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAClB,YAAA,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC;YACpF,IAAI,CAAC,YAAY,EAAE;;;IAKb,kBAAkB,GAAA;QAC1B,IAAI,CAAC,YAAY,EAAE;AACnB,QAAA,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC;;AAIlF,IAAA,aAAa,CAAC,QAAiB,EAAA;QACvC,MAAM,gBAAgB,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,KAAK,SAAS;QAE3E,IAAI,CAAC,gBAAgB,EAAE;YACrB,IAAI,CAAC,YAAY,EAAE;AACnB,YAAA,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC;YAC3E;;QAGF,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,iBAAiB,GAAI,QAAQ,CAAC,aAA6B,IAAI,IAAI;AACxE,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI;AAC1B,YAAA,IAAI,CAAC,cAAc,GAAG,KAAK;YAC3B,qBAAqB,CAAC,MAAK;AACzB,gBAAA,IAAI,CAAC,cAAc,GAAG,IAAI;gBAC1B,IAAI,CAAC,qBAAqB,EAAE;AAC9B,aAAC,CAAC;;aACG;AACL,YAAA,IAAI,CAAC,cAAc,GAAG,KAAK;YAC3B,IAAI,CAAC,YAAY,EAAE;YACnB,IAAI,CAAC,sBAAsB,EAAE;;;AAI7B,YAAA,MAAM,CAAC,UAAU,CAAC,MAAK;gBACrB,MAAM,gBAAgB,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,KAAK,SAAS;AAC3E,gBAAA,IAAI,gBAAgB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;AAC1D,oBAAA,IAAI,CAAC,cAAc,GAAG,KAAK;;aAE9B,EAAE,GAAG,CAAC;;AAGT,QAAA,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC;;IAKnE,uBAAuB,GAAA;QAC/B,IAAI,CAAC,eAAe,EAAE;;AAId,IAAA,iBAAiB,CAAC,EAAiB,EAAA;AAI3C,QAAA,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE,EAAE;YAChC;;AAGF,QAAA,IAAI,EAAE,CAAC,GAAG,KAAK,QAAQ,EAAE;YACvB,EAAE,CAAC,cAAc,EAAE;YACnB,EAAE,CAAC,eAAe,EAAE;AACpB,YAAA,IAAI,CAAC,IAAI,GAAG,KAAK;YACjB;;AAGF,QAAA,IAAI,EAAE,CAAC,GAAG,KAAK,KAAK,EAAE;YACpB;;AAGF,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO;QAC1B,IAAI,CAAC,KAAK,EAAE;YACV;;QAGF,MAAM,UAAU,GAAG,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC;AACnD,QAAA,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC,EAAE;YAC3B,EAAE,CAAC,cAAc,EAAE;AACnB,YAAA,IAAI;gBACF,KAAK,CAAC,KAAK,EAAE;;AACb,YAAA,MAAM;;;YAGR;;AAGF,QAAA,MAAM,KAAK,GAAG,UAAU,CAAC,CAAC,CAAC;QAC3B,MAAM,IAAI,GAAG,UAAU,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;AAC9C,QAAA,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAmC;AAE3D,QAAA,IAAI,EAAE,CAAC,QAAQ,EAAE;AACf,YAAA,IAAI,CAAC,MAAM,IAAI,MAAM,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;gBAC1D,EAAE,CAAC,cAAc,EAAE;AACnB,gBAAA,IAAI;oBACF,IAAI,CAAC,KAAK,EAAE;;AACZ,gBAAA,MAAM;;;;;aAIL;AACL,YAAA,IAAI,MAAM,KAAK,IAAI,EAAE;gBACnB,EAAE,CAAC,cAAc,EAAE;AACnB,gBAAA,IAAI;oBACF,KAAK,CAAC,KAAK,EAAE;;AACb,gBAAA,MAAM;;;;;;AAQJ,IAAA,eAAe,CAAC,EAA+C,EAAA;AACvE,QAAA,MAAM,MAAM,GAAG,EAAE,CAAC,MAAM;QACxB,IAAI,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE;YAC7B;;;;;AAMF,QAAA,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE;AACxC,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE;AAC/B,QAAA,IAAI,IAAI,KAAK,WAAW,EAAE;YACxB;;AAGF,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,MAAM,CAAC;;aAChC;AACL,YAAA,IAAI,CAAC,sBAAsB,CAAC,MAAM,CAAC,MAAM,CAAC;;;AAItC,IAAA,iBAAiB,CAAC,MAA+B,EAAA;AACvD,QAAA,IAAI,MAAM,KAAK,MAAM,EAAE;AACrB,YAAA,IAAI,CAAC,IAAI,GAAG,IAAI;YAChB;;AAEF,QAAA,IAAI,MAAM,KAAK,OAAO,EAAE;AACtB,YAAA,IAAI,CAAC,IAAI,GAAG,KAAK;YACjB;;AAEF,QAAA,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI;;AAGhB,IAAA,sBAAsB,CAAC,MAA+B,EAAA;AAC5D,QAAA,IAAI,MAAM,KAAK,MAAM,EAAE;AACrB,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;YACtB;;AAEF,QAAA,IAAI,MAAM,KAAK,OAAO,EAAE;AACtB,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;YACrB;;AAEF,QAAA,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS;;IAG1B,eAAe,GAAA;QACrB,MAAM,YAAY,GAAG,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC;QACvD,IAAI,CAAC,YAAY,EAAE;AACjB,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;AACrB,YAAA,IAAI,CAAC,eAAe,GAAG,IAAI;YAC3B,IAAI,CAAC,kBAAkB,EAAE;YACzB;;AAGF,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,WAAW;;;AAIjC,QAAA,IAAI,EAAE,KAAK,GAAG,CAAC,CAAC,EAAE;AAChB,YAAA,IAAI,CAAC,eAAe,GAAG,KAAK;YAC5B;;AAGF,QAAA,IAAI,CAAC,eAAe,GAAG,IAAI;AAC3B,QAAA,MAAM,YAAY,GAAG,KAAK,GAAG,YAAY;AAEzC,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ;AAClC,QAAA,IAAI,CAAC,QAAQ,GAAG,YAAY;AAE5B,QAAA,IAAI,YAAY,KAAK,YAAY,EAAE;YACjC,IAAI,YAAY,EAAE;AAChB,gBAAA,IAAI,IAAI,CAAC,gBAAgB,EAAE;AACzB,oBAAA,IAAI,CAAC,IAAI,GAAG,KAAK;;;iBAEd;;AAEL,gBAAA,IAAI,CAAC,IAAI,GAAG,KAAK;AACjB,gBAAA,IAAI,CAAC,cAAc,GAAG,KAAK;AAC3B,gBAAA,IAAI,CAAC,cAAc,GAAG,KAAK;AAE3B,gBAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACvB,oBAAA,IAAI,CAAC,SAAS,GAAG,KAAK;;;;QAK5B,IAAI,CAAC,kBAAkB,EAAE;;IAGnB,qBAAqB,GAAA;QAC3B,IAAwB,CAAC,IAAI,CAAC,UAAU,EAAE;YACxC;;AAEF,QAAA,IAAI;AACF,YAAA,MAAM,GAAG,GAAG,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC;YACxD,IAAI,CAAC,GAAG,EAAE;gBACR;;YAEF,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAA4B;AACzD,YAAA,IAAI,OAAO,MAAM,CAAC,KAAK,KAAK,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE;AACrE,gBAAA,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC,KAAK;;AAEpC,YAAA,IAAI,OAAO,MAAM,CAAC,SAAS,KAAK,SAAS,EAAE;AACzC,gBAAA,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS;;;AAEnC,QAAA,MAAM;;;;IAKF,YAAY,GAAA;QAClB,IAAwB,CAAC,IAAI,CAAC,UAAU,EAAE;YACxC;;AAEF,QAAA,MAAM,OAAO,GAA4B;YACvC,KAAK,EAAE,IAAI,CAAC,cAAc;YAC1B,SAAS,EAAE,IAAI,CAAC,SAAS;SAC1B;AACD,QAAA,IAAI;AACF,YAAA,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;;AACrE,QAAA,MAAM;;;;IAKF,qBAAqB,GAAA;AAK3B,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO;QACzB,IAAI,CAAC,IAAI,EAAE;YACT;;QAGF,MAAM,UAAU,GAAG,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC;AAClD,QAAA,KAAK,MAAM,EAAE,IAAI,UAAU,EAAE;AAC3B,YAAA,IAAI,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;gBAC/B;;YAEF,MAAM,QAAQ,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC;AAC5C,YAAA,IAAI,QAAQ,KAAK,IAAI,EAAE;gBACrB;;AAEF,YAAA,IAAI;gBACF,EAAE,CAAC,KAAK,EAAE;gBACV;;AACA,YAAA,MAAM;;;;;AAMJ,IAAA,oBAAoB,CAAC,IAAiB,EAAA;QAC5C,MAAM,QAAQ,GAAG,qEAAqE;AACtF,QAAA,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAc,QAAQ,CAAC,CAAC;AACpE,QAAA,OAAO,GAAG,CAAC,MAAM,CAAC,EAAE,IAAG;AACrB,YAAA,IAAI,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;AAC/B,gBAAA,OAAO,KAAK;;YAEd,MAAM,QAAQ,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC;AAC5C,YAAA,IAAI,QAAQ,KAAK,IAAI,EAAE;AACrB,gBAAA,OAAO,KAAK;;AAEd,YAAA,OAAO,IAAI;AACb,SAAC,CAAC;;IAGI,sBAAsB,GAAA;AAI5B,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,iBAAiB;AACnC,QAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI;QAC7B,IAAI,IAAI,IAAI,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;AACnC,YAAA,IAAI;gBACF,IAAI,CAAC,KAAK,EAAE;;AACZ,YAAA,MAAM;;;;;AAMJ,IAAA,sBAAsB,GAAG,CAAC,EAAmB,KAAI;QACvD,IAAI,EAAE,CAAC,MAAM,KAAK,IAAI,CAAC,aAAa,EAAE;YACpC;;AAEF,QAAA,IAAI,EAAE,CAAC,YAAY,KAAK,WAAW,EAAE;YACnC;;QAGF,MAAM,gBAAgB,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,KAAK,SAAS;QAC3E,IAAI,CAAC,gBAAgB,EAAE;YACrB;;QAGF,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;AACtC,YAAA,IAAI,CAAC,cAAc,GAAG,KAAK;;AAE/B,KAAC;AAEO,IAAA,oBAAoB,GAAG,CAAC,EAAgB,KAAI;;AAElD,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO;QAC1B,IAAI,CAAC,KAAK,EAAE;YACV;;AAEF,QAAA,MAAM,IAAI,GAAG,EAAE,CAAC,YAAY,EAAE;QAC9B,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;AACzB,YAAA,IAAI,CAAC,IAAI,GAAG,KAAK;;AAErB,KAAC;AAEO,IAAA,eAAe,GAAG,CAAC,EAAgB,KAAI;AAC7C,QAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACnB;;;QAGF,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,EAAE;YACpC;;AAEF,QAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACpE;;AAEF,QAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,KAAK,MAAM,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACjE;;AAGF,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACpB,QAAA,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC,SAAS;AACjC,QAAA,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,OAAO;AAC5B,QAAA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc;QAExC,EAAE,CAAC,aAA6B,EAAE,iBAAiB,GAAG,EAAE,CAAC,SAAS,CAAC;AAEpE,QAAA,MAAM,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,gBAAgB,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;AACjF,QAAA,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC7E,QAAA,MAAM,CAAC,gBAAgB,CAAC,eAAe,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACnF,KAAC;AAEO,IAAA,gBAAgB,GAAG,CAAC,EAAgB,KAAI;AAC9C,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa,KAAK,EAAE,CAAC,SAAS,EAAE;YACzD;;QAEF,EAAE,CAAC,cAAc,EAAE;QAEnB,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,IAAI,EAAE,CAAC,OAAO;QAC5C,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc;AAE7D,QAAA,MAAM,KAAK,GAAG,EAAE,CAAC,OAAO,GAAG,MAAM;AACjC,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,CAAC,GAAG,EAAE;AAC1C,QAAA,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,GAAG,KAAK,GAAG,GAAG,EAAE,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC;AACzF,QAAA,IAAI,CAAC,cAAc,GAAG,SAAS;AAC/B,QAAA,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC;AACzF,KAAC;AAEO,IAAA,eAAe,GAAG,CAAC,EAAgB,KAAI;AAC7C,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa,KAAK,EAAE,CAAC,SAAS,EAAE;YACzD;;AAGF,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;AACrB,QAAA,IAAI,CAAC,aAAa,GAAG,SAAS;AAC9B,QAAA,IAAI,CAAC,UAAU,GAAG,SAAS;AAC3B,QAAA,IAAI,CAAC,cAAc,GAAG,SAAS;QAE/B,IAAI,CAAC,qBAAqB,EAAE;QAC5B,IAAI,CAAC,YAAY,EAAE;AACnB,QAAA,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC;AACzF,KAAC;IAEO,qBAAqB,GAAA;QAC3B,MAAM,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,gBAAuB,CAAC;QACvE,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAsB,CAAC;QACpE,MAAM,CAAC,mBAAmB,CAAC,eAAe,EAAE,IAAI,CAAC,eAAsB,CAAC;;AAGlE,IAAA,gBAAgB,CAAC,IAAoC,EAAA;AAC3D,QAAA,MAAM,eAAe,GAAG,IAAI,EAAE,eAAe,IAAI,IAAI;AACrD,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,KAAK,SAAS;QAC5F,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,KAAK,SAAS,GAAG,EAAE,GAAG,IAAI;AAE/E,QAAA,QACE,CACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,IAAI;AACX,gBAAA,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;AAC5B,gBAAA,GAAG,EAAE,IAAI,CAAC,IAAI,KAAK,KAAK;gBACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACxB,aAAA,EACD,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAiB,CAAC,EAC7C,IAAI,EAAC,YAAY,EAAA,YAAA,EACL,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,QAAe,EAAA,EAExB,SAAS,IACR,wCACW,WAAW,EACpB,MAAM,EAAC,QAAQ,EACf,QAAQ,EAAC,OAAO,EAChB,OAAO,EAAC,OAAO,EACf,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,cAAc,EAAA,YAAA,EACR,aAAa,EAAA,WAAA,EACd,MAAM,EAChB,KAAK,EAAE;AACL,gBAAA,+BAA+B,EAAE,oBAAoB;aACtD,EACD,OAAO,EAAE,OAAO,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,EAAA,EAElC,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,WAAW,EAAA,EACtC,CAAS,CAAA,SAAA,EAAA,EAAA,IAAI,EAAC,YAAY,EAAG,CAAA,CACxB,CACc,IACrB,IAAI,EAER,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,gBAAgB,IAC9C,eAAe,GAAG,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,OAAO,GAAG,GAAG,IAAI,CAC3C,EAEL,IAAI,CAAC,SAAS,IACb,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE;AACL,gBAAA,MAAM,EAAE,IAAI;AACZ,gBAAA,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;AAC5B,gBAAA,GAAG,EAAE,IAAI,CAAC,IAAI,KAAK,KAAK;AACzB,aAAA,EACD,IAAI,EAAC,eAAe,EACpB,IAAI,EAAC,WAAW,EAAA,kBAAA,EACC,UAAU,EAC3B,QAAQ,EAAE,EAAE,EACZ,aAAa,EAAE,IAAI,CAAC,eAAe,EACnC,CAAA,IACA,IAAI,CACJ;;IAIV,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG;AACjB,YAAA,uBAAuB,EAAE,CAAA,EAAG,IAAI,CAAC,cAAc,CAAI,EAAA,CAAA;SACpD;QAED,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,KAAK,SAAS;AACpE,QAAA,MAAM,kBAAkB,GAAG,SAAS,IAAI,IAAI,CAAC,IAAI;AAEjD,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe;AAEvC,QAAA,MAAM,aAAa,GAAG,UAAU,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,SAAS;AACrE,QAAA,MAAM,mBAAmB,GACvB,UAAU,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,KAAK,MAAM,IAAI,IAAI,CAAC,IAAI;AAE5E,QAAA,MAAM,oBAAoB,GAAG,aAAa,IAAI,mBAAmB;QAEjE,QACE,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,IAAI,EAAE,IAAI;gBACV,MAAM,EAAE,IAAI,CAAC,QAAQ;AACrB,gBAAA,IAAI,EAAE,CAAC,IAAI,CAAC,QAAQ;AACpB,gBAAA,OAAO,EAAE,SAAS;gBAClB,IAAI,EAAE,CAAC,SAAS;gBAChB,SAAS,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS;AAC5C,aAAA,EACD,KAAK,EAAE,UAAiB,EAAA,eAAA,EACT,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,EAAA,EAG5C,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,QAAQ,EAAE,IAAI;AACd,gBAAA,WAAW,EAAE,oBAAoB;AACjC,gBAAA,OAAO,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;AAC9B,gBAAA,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,KAAK;aAC3B,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,WAAW,EAAE,IAAI;gBACjB,MAAM,EAAE,CAAC,oBAAoB;AAC9B,aAAA,EACY,aAAA,EAAA,CAAC,oBAAoB,GAAG,MAAM,GAAG,IAAI,EAAA,EAGjD,IAAI,CAAC,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC,SAAS,EAAE,CAAC,CACnD,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,aAAA,EAAc,kBAAkB,GAAG,MAAM,GAAG,IAAI,EAAA,EACjF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACF,EAGL,UAAU,IAAI,SAAS,IAAI,IAAI,CAAC,cAAc,IAC7C,WACE,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,cAAc,EAAE,EAC1D,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,cAAc,EACnB,aAAa,EAAE,IAAI,CAAC,oBAAoB,EAAA,aAAA,EAC3B,kBAAkB,GAAG,IAAI,GAAG,MAAM,EAAA,EAE/C,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE;AACL,gBAAA,gBAAgB,EAAE,IAAI;gBACtB,OAAO,EAAE,IAAI,CAAC,cAAc;AAC5B,gBAAA,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;AAC5B,gBAAA,GAAG,EAAE,IAAI,CAAC,IAAI,KAAK,KAAK;aACzB,EACD,IAAI,EAAC,SAAS,EACd,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,aAAa,GAAG,EAAiB,CAAC,EACnD,eAAe,EAAE,IAAI,CAAC,sBAAsB,EAC5C,IAAI,EAAC,QAAQ,gBACF,MAAM,EAAA,EAEhB,IAAI,CAAC,gBAAgB,CAAC,EAAE,eAAe,EAAE,IAAI,EAAE,CAAC,CAC7C,CACF,IACJ,IAAI,CACJ;;;;;;;;;;;;;;"}