le-kit 0.3.5 → 0.4.0

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

@@ -0,0 +1,660 @@
+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 .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) {
+    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);
+    }
+    get el() { return this; }
+    /**
+     * Optional id used to match toggle requests.
+     * If set, the panel only responds to toggle events with the same `panelId`.
+     */
+    panelId;
+    /** Which side the panel is attached to. */
+    side = 'start';
+    /** Width breakpoint (in px or a CSS var like `--le-breakpoint-md`) below which the panel enters "narrow" mode. */
+    collapseAt;
+    /** Behavior when in narrow mode. */
+    narrowBehavior = 'overlay';
+    /**
+     * Panel open state for narrow mode.
+     * - overlay: controls modal drawer visibility
+     * - push: controls whether panel is shown (non-modal)
+     */
+    open = false;
+    /** Panel collapsed state for wide mode (fully hidden). */
+    collapsed = false;
+    /** Default panel width in pixels. */
+    panelWidth = 280;
+    /** Minimum allowed width when resizable. */
+    minPanelWidth = 220;
+    /** Maximum allowed width when resizable. */
+    maxPanelWidth = 420;
+    /** Allows users to resize the panel by dragging its edge. */
+    resizable = false;
+    /** When set, panel width + collapsed state are persisted in localStorage. */
+    persistKey;
+    /** Show a close button inside the panel (primarily used in narrow overlay mode). */
+    showCloseButton = true;
+    /** When crossing to wide mode, automatically show the panel (collapsed=false). */
+    autoShowOnWide = true;
+    /** When crossing to narrow mode, automatically hide the panel (open=false). */
+    autoHideOnNarrow = true;
+    /** Accessible label for the panel navigation region. */
+    panelLabel = 'Navigation';
+    leSidePanelOpenChange;
+    leSidePanelCollapsedChange;
+    leSidePanelWidthChange;
+    isNarrow = false;
+    responsiveReady = false;
+    overlayMounted = false;
+    overlayVisible = false;
+    currentWidthPx = this.panelWidth;
+    resizing = false;
+    resizeObserver;
+    panelEl;
+    overlayWrapEl;
+    focusedBeforeOpen;
+    dragPointerId;
+    dragStartX;
+    dragStartWidth;
+    connectedCallback() {
+        this.restorePersistedState();
+        this.currentWidthPx = clamp(this.currentWidthPx || this.panelWidth, this.minPanelWidth, this.maxPanelWidth);
+        if (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, 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 (!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;
+        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
+            }
+        }
+    }
+    onOverlayTransitionEnd = (ev) => {
+        if (ev.target !== this.overlayWrapEl) {
+            return;
+        }
+        if (ev.propertyName !== 'transform') {
+            return;
+        }
+        const shouldUseOverlay = this.isNarrow && this.narrowBehavior === 'overlay';
+        if (!shouldUseOverlay) {
+            return;
+        }
+        if (!this.open && !this.overlayVisible) {
+            this.overlayMounted = false;
+        }
+    };
+    onOverlayPointerDown = (ev) => {
+        // Close on any click outside the panel.
+        const panel = this.panelEl;
+        if (!panel) {
+            return;
+        }
+        const path = ev.composedPath();
+        if (!path.includes(panel)) {
+            this.open = false;
+        }
+    };
+    startResizeDrag = (ev) => {
+        if (!this.resizable) {
+            return;
+        }
+        // No resizing if fully hidden.
+        if (!this.isNarrow && this.collapsed) {
+            return;
+        }
+        if (this.isNarrow && this.narrowBehavior === 'overlay' && !this.open) {
+            return;
+        }
+        if (this.isNarrow && this.narrowBehavior === 'push' && !this.open) {
+            return;
+        }
+        this.resizing = true;
+        this.dragPointerId = ev.pointerId;
+        this.dragStartX = ev.clientX;
+        this.dragStartWidth = this.currentWidthPx;
+        ev.currentTarget?.setPointerCapture?.(ev.pointerId);
+        window.addEventListener('pointermove', this.onResizeDragMove, { passive: false });
+        window.addEventListener('pointerup', this.onResizeDragEnd, { passive: true });
+        window.addEventListener('pointercancel', this.onResizeDragEnd, { passive: true });
+    };
+    onResizeDragMove = (ev) => {
+        if (!this.resizing || this.dragPointerId !== ev.pointerId) {
+            return;
+        }
+        ev.preventDefault();
+        const startX = this.dragStartX ?? ev.clientX;
+        const startWidth = this.dragStartWidth ?? this.currentWidthPx;
+        const delta = ev.clientX - startX;
+        const dir = this.side === 'start' ? 1 : -1;
+        const nextWidth = clamp(startWidth + delta * dir, this.minPanelWidth, this.maxPanelWidth);
+        this.currentWidthPx = nextWidth;
+        this.leSidePanelWidthChange.emit({ width: this.currentWidthPx, panelId: this.panelId });
+    };
+    onResizeDragEnd = (ev) => {
+        if (!this.resizing || this.dragPointerId !== ev.pointerId) {
+            return;
+        }
+        this.resizing = false;
+        this.dragPointerId = undefined;
+        this.dragStartX = undefined;
+        this.dragStartWidth = undefined;
+        this.teardownDragListeners();
+        this.persistState();
+        this.leSidePanelWidthChange.emit({ width: this.currentWidthPx, panelId: this.panelId });
+    };
+    teardownDragListeners() {
+        window.removeEventListener('pointermove', this.onResizeDragMove);
+        window.removeEventListener('pointerup', this.onResizeDragEnd);
+        window.removeEventListener('pointercancel', this.onResizeDragEnd);
+    }
+    renderPanelInner(opts) {
+        const renderPanelSlot = opts?.renderPanelSlot ?? true;
+        const showClose = this.showCloseButton && this.isNarrow && this.narrowBehavior === 'overlay';
+        const tabIndex = this.isNarrow && this.narrowBehavior === 'overlay' ? -1 : null;
+        return (h("div", { class: {
+                panel: true,
+                start: this.side === 'start',
+                end: this.side === 'end',
+                resizing: this.resizing,
+            }, part: "panel", ref: el => (this.panelEl = el), role: "navigation", "aria-label": this.panelLabel, tabindex: tabIndex }, showClose ? (h("le-side-panel-toggle", { "panel-id": "demo-side", action: "toggle", shortcut: "Mod+B", variant: "clear", class: "close", part: "close-button", "aria-label": "Close panel", "icon-only": "true", style: {
+                '--le-button-icon-only-padding': 'var(--le-space-sm)',
+            }, onClick: () => (this.open = false) }, h("slot", { name: "close-icon", slot: "icon-only" }, h("le-icon", { name: "side-panel" })))) : null, h("div", { class: "panel-scroller", part: "panel-scroller" }, renderPanelSlot ? h("slot", { name: "panel" }) : null), this.resizable ? (h("div", { class: {
+                handle: true,
+                start: this.side === 'start',
+                end: this.side === 'end',
+            }, part: "resize-handle", role: "separator", "aria-orientation": "vertical", tabindex: -1, onPointerDown: this.startResizeDrag })) : null));
+    }
+    render() {
+        const widthStyle = {
+            '--le-side-panel-width': `${this.currentWidthPx}px`,
+        };
+        const isOverlay = this.isNarrow && this.narrowBehavior === 'overlay';
+        const isModalOverlayOpen = isOverlay && this.open;
+        const allowPanel = this.responsiveReady;
+        const showWidePanel = allowPanel && !this.isNarrow && !this.collapsed;
+        const showNarrowPushPanel = allowPanel && this.isNarrow && this.narrowBehavior === 'push' && this.open;
+        const layoutHasInlinePanel = showWidePanel || showNarrowPushPanel;
+        return (h("div", { key: '5ced2e49e6f13628929c54ec931cd44b28908ffa', class: {
+                host: true,
+                narrow: this.isNarrow,
+                wide: !this.isNarrow,
+                overlay: isOverlay,
+                push: !isOverlay,
+                collapsed: !this.isNarrow && this.collapsed,
+            }, style: widthStyle, "data-resizing": this.resizing ? 'true' : null }, h("div", { key: '0fe007d5bfa12f1130f906195a664c8da719ed5e', class: {
+                'layout': true,
+                'has-panel': layoutHasInlinePanel,
+                'start': this.side === 'start',
+                'end': this.side === 'end',
+            } }, h("div", { key: 'a44957d185db52f78322216a4b3c8ddff95045d8', class: {
+                inlinePanel: true,
+                hidden: !layoutHasInlinePanel,
+            }, "aria-hidden": !layoutHasInlinePanel ? 'true' : null }, this.renderPanelInner({ renderPanelSlot: !isOverlay })), h("div", { key: 'd1d2f48f442a7394732adff1208636270e4e97e7', class: "content", part: "content", "aria-hidden": isModalOverlayOpen ? 'true' : null }, h("slot", { key: '5cc1bf9fb162cb84cf4a7897da83c3259fb8edba' }))), allowPanel && isOverlay && this.overlayMounted ? (h("div", { class: { overlayRoot: true, visible: this.overlayVisible }, part: "scrim", role: "presentation", onPointerDown: this.onOverlayPointerDown, "aria-hidden": isModalOverlayOpen ? null : 'true' }, h("div", { class: {
+                overlayPanelWrap: true,
+                visible: this.overlayVisible,
+                start: this.side === 'start',
+                end: this.side === 'end',
+            }, part: "overlay", ref: el => (this.overlayWrapEl = el), onTransitionEnd: this.onOverlayTransitionEnd, role: "dialog", "aria-modal": "true" }, this.renderPanelInner({ renderPanelSlot: true })))) : null));
+    }
+    static get watchers() { return {
+        "panelWidth": ["onPanelWidthChanged"],
+        "collapsed": ["onCollapsedChanged"],
+        "open": ["onOpenChanged"],
+        "collapseAt": ["onResponsivePropChanged"],
+        "narrowBehavior": ["onResponsivePropChanged"]
+    }; }
+    static get style() { return leSidePanelCss(); }
+}, [769, "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]
+    }, [[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