le-kit 0.5.3 → 0.6.0

package/dist/components/le-side-panel.js

@@ -1,654 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, Build, h, transformTag } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2, a as defineCustomElement$3, b as defineCustomElement$5, c as defineCustomElement$6, e as defineCustomElement$9, f as defineCustomElement$a, g as defineCustomElement$b } from './le-button2.js';
-import { d as defineCustomElement$8 } from './le-icon2.js';
-import { d as defineCustomElement$7 } from './le-popover2.js';
-import { d as defineCustomElement$4 } from './le-side-panel-toggle2.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.no-transition{transition:none !important}.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))}.inlinePanel.no-transition .panel{transition:none !important}.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;margin:var(--le-side-panel-margin);height:100%;max-height:min(calc(100% - (var(--le-side-panel-margin) * 2)), calc(100vh - (var(--le-side-panel-margin) * 2)));width:calc(100% - (var(--le-side-panel-margin) * 2));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) {
-    if (!Build.isBrowser) {
-        return undefined;
-    }
-    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$1 = /*@__PURE__*/ proxyCustomElement(class LeSidePanel extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.leSidePanelOpenChange = createEvent(this, "leSidePanelOpenChange", 7);
-        this.leSidePanelCollapsedChange = createEvent(this, "leSidePanelCollapsedChange", 7);
-        this.leSidePanelWidthChange = createEvent(this, "leSidePanelWidthChange", 7);
-        /** Which side the panel is attached to. */
-        this.side = 'start';
-        /** Behavior when in narrow mode. */
-        this.narrowBehavior = 'overlay';
-        /**
-         * Panel open state for narrow mode.
-         * - overlay: controls modal drawer visibility
-         * - push: controls whether panel is shown (non-modal)
-         */
-        this.open = false;
-        /** Panel collapsed state for wide mode (fully hidden). */
-        this.collapsed = false;
-        /** Default panel width in pixels. */
-        this.panelWidth = 280;
-        /** Minimum allowed width when resizable. */
-        this.minPanelWidth = 220;
-        /** Maximum allowed width when resizable. */
-        this.maxPanelWidth = 420;
-        /** Allows users to resize the panel by dragging its edge. */
-        this.resizable = false;
-        /** Show a close button inside the panel (primarily used in narrow overlay mode). */
-        this.showCloseButton = true;
-        /** When crossing to wide mode, automatically show the panel (collapsed=false). */
-        this.autoShowOnWide = true;
-        /** When crossing to narrow mode, automatically hide the panel (open=false). */
-        this.autoHideOnNarrow = true;
-        /** Accessible label for the panel navigation region. */
-        this.panelLabel = 'Navigation';
-        this.isNarrow = false;
-        this.responsiveReady = false;
-        this.overlayMounted = false;
-        this.overlayVisible = false;
-        this.resizing = false;
-        this.suppressAnimation = false;
-        this.firstLayoutComplete = false;
-        this.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;
-            }
-        };
-        this.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;
-            }
-        };
-        this.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 });
-        };
-        this.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 });
-        };
-        this.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 });
-        };
-    }
-    connectedCallback() {
-        this.restorePersistedState();
-        this.currentWidthPx = clamp(this.currentWidthPx || this.panelWidth, this.minPanelWidth, this.maxPanelWidth);
-        if (Build.isBrowser && 'ResizeObserver' in window) {
-            this.resizeObserver = new ResizeObserver(() => {
-                this.recomputeNarrow();
-            });
-            this.resizeObserver.observe(this.el);
-        }
-        // Ensure we get at least one post-layout measurement.
-        if (Build.isBrowser) {
-            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 || 280, this.minPanelWidth || 220, this.maxPanelWidth || 800);
-            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 (!Build.isBrowser) {
-            return;
-        }
-        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;
-        // Suppress animation on the very first successful layout
-        if (!this.firstLayoutComplete) {
-            this.suppressAnimation = true;
-            this.firstLayoutComplete = true;
-            setTimeout(() => {
-                // We need a timeout to ensure the paint
-                // has happened without transition
-                this.suppressAnimation = false;
-            }, 1000);
-        }
-        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 (!Build.isBrowser || !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 (!Build.isBrowser || !this.persistKey) {
-            return;
-        }
-        const payload = {
-            width: this.currentWidthPx,
-            collapsed: this.collapsed,
-        };
-        try {
-            window.localStorage.setItem(this.persistKey, JSON.stringify(payload));
-        }
-        catch {
-            // ignore
-        }
-    }
-    focusFirstInsidePanel() {
-        if (!Build.isBrowser) {
-            return;
-        }
-        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() {
-        if (!Build.isBrowser) {
-            return;
-        }
-        const prev = this.focusedBeforeOpen;
-        this.focusedBeforeOpen = null;
-        if (prev && document.contains(prev)) {
-            try {
-                prev.focus();
-            }
-            catch {
-                // ignore
-            }
-        }
-    }
-    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: 'd4524327e7e13541b27c0fd13a5ec4c4605a4796', 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: 'f3c174390306054397a9627cad446d99c183251b', class: {
-                'layout': true,
-                'has-panel': layoutHasInlinePanel,
-                'start': this.side === 'start',
-                'end': this.side === 'end',
-            } }, h("div", { key: 'b679883619cbe69bac251cd5f246634f48ddffdf', class: {
-                'inlinePanel': true,
-                'hidden': !layoutHasInlinePanel,
-                'no-transition': this.suppressAnimation,
-            }, "aria-hidden": !layoutHasInlinePanel ? 'true' : null }, this.renderPanelInner({ renderPanelSlot: !isOverlay })), h("div", { key: 'a7a3b2ee5001c5cf550becd872dc621095fff877', class: "content", part: "content", "aria-hidden": isModalOverlayOpen ? 'true' : null }, h("slot", { key: '60ea6042d270ae9dd887034fc44da4fb91e394ec' }))), 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));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "panelWidth": ["onPanelWidthChanged"],
-        "collapsed": ["onCollapsedChanged"],
-        "open": ["onOpenChanged"],
-        "collapseAt": ["onResponsivePropChanged"],
-        "narrowBehavior": ["onResponsivePropChanged"]
-    }; }
-    static get style() { return leSidePanelCss(); }
-}, [257, "le-side-panel", {
-        "panelId": [1, "panel-id"],
-        "side": [1],
-        "collapseAt": [1, "collapse-at"],
-        "narrowBehavior": [1, "narrow-behavior"],
-        "open": [1540],
-        "collapsed": [1540],
-        "panelWidth": [2, "panel-width"],
-        "minPanelWidth": [2, "min-panel-width"],
-        "maxPanelWidth": [2, "max-panel-width"],
-        "resizable": [4],
-        "persistKey": [1, "persist-key"],
-        "showCloseButton": [4, "show-close-button"],
-        "autoShowOnWide": [4, "auto-show-on-wide"],
-        "autoHideOnNarrow": [4, "auto-hide-on-narrow"],
-        "panelLabel": [1, "panel-label"],
-        "isNarrow": [32],
-        "responsiveReady": [32],
-        "overlayMounted": [32],
-        "overlayVisible": [32],
-        "currentWidthPx": [32],
-        "resizing": [32],
-        "suppressAnimation": [32]
-    }, [[6, "keydown", "onDocumentKeyDown"], [4, "leSidePanelRequestToggle", "onToggleRequest"]], {
-        "panelWidth": ["onPanelWidthChanged"],
-        "collapsed": ["onCollapsedChanged"],
-        "open": ["onOpenChanged"],
-        "collapseAt": ["onResponsivePropChanged"],
-        "narrowBehavior": ["onResponsivePropChanged"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["le-side-panel", "le-button", "le-checkbox", "le-component", "le-icon", "le-popover", "le-popup", "le-select", "le-side-panel-toggle", "le-slot", "le-string-input"];
-    components.forEach(tagName => { switch (tagName) {
-        case "le-side-panel":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), LeSidePanel$1);
-            }
-            break;
-        case "le-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$b();
-            }
-            break;
-        case "le-checkbox":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$a();
-            }
-            break;
-        case "le-component":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$9();
-            }
-            break;
-        case "le-icon":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$8();
-            }
-            break;
-        case "le-popover":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$7();
-            }
-            break;
-        case "le-popup":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$6();
-            }
-            break;
-        case "le-select":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$5();
-            }
-            break;
-        case "le-side-panel-toggle":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
-            }
-            break;
-        case "le-slot":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
-            }
-            break;
-        case "le-string-input":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const LeSidePanel = LeSidePanel$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { LeSidePanel, defineCustomElement };
-//# sourceMappingURL=le-side-panel.js.map
-
-//# sourceMappingURL=le-side-panel.js.map