le-kit 0.3.5 → 0.5.0

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

@@ -0,0 +1,953 @@
+import { Build, h, } from "@stencil/core";
+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;
+}
+export class LeSidePanel {
+    el;
+    /**
+     * 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 is() { return "le-side-panel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["le-side-panel.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["le-side-panel.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "panelId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional id used to match toggle requests.\nIf set, the panel only responds to toggle events with the same `panelId`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "panel-id"
+            },
+            "side": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LeSidePanelSide",
+                    "resolved": "\"end\" | \"start\"",
+                    "references": {
+                        "LeSidePanelSide": {
+                            "location": "local",
+                            "path": "/home/runner/work/le-kit/le-kit/src/components/le-side-panel/le-side-panel.tsx",
+                            "id": "src/components/le-side-panel/le-side-panel.tsx::LeSidePanelSide"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which side the panel is attached to."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "side",
+                "defaultValue": "'start'"
+            },
+            "collapseAt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Width breakpoint (in px or a CSS var like `--le-breakpoint-md`) below which the panel enters \"narrow\" mode."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "collapse-at"
+            },
+            "narrowBehavior": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LeSidePanelNarrowBehavior",
+                    "resolved": "\"overlay\" | \"push\"",
+                    "references": {
+                        "LeSidePanelNarrowBehavior": {
+                            "location": "local",
+                            "path": "/home/runner/work/le-kit/le-kit/src/components/le-side-panel/le-side-panel.tsx",
+                            "id": "src/components/le-side-panel/le-side-panel.tsx::LeSidePanelNarrowBehavior"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Behavior when in narrow mode."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "narrow-behavior",
+                "defaultValue": "'overlay'"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Panel open state for narrow mode.\n- overlay: controls modal drawer visibility\n- push: controls whether panel is shown (non-modal)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "collapsed": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Panel collapsed state for wide mode (fully hidden)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "collapsed",
+                "defaultValue": "false"
+            },
+            "panelWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default panel width in pixels."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "panel-width",
+                "defaultValue": "280"
+            },
+            "minPanelWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum allowed width when resizable."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-panel-width",
+                "defaultValue": "220"
+            },
+            "maxPanelWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum allowed width when resizable."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-panel-width",
+                "defaultValue": "420"
+            },
+            "resizable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows users to resize the panel by dragging its edge."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "resizable",
+                "defaultValue": "false"
+            },
+            "persistKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "When set, panel width + collapsed state are persisted in localStorage."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "persist-key"
+            },
+            "showCloseButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show a close button inside the panel (primarily used in narrow overlay mode)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-close-button",
+                "defaultValue": "true"
+            },
+            "autoShowOnWide": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When crossing to wide mode, automatically show the panel (collapsed=false)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-show-on-wide",
+                "defaultValue": "true"
+            },
+            "autoHideOnNarrow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When crossing to narrow mode, automatically hide the panel (open=false)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-hide-on-narrow",
+                "defaultValue": "true"
+            },
+            "panelLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the panel navigation region."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "panel-label",
+                "defaultValue": "'Navigation'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isNarrow": {},
+            "responsiveReady": {},
+            "overlayMounted": {},
+            "overlayVisible": {},
+            "currentWidthPx": {},
+            "resizing": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "leSidePanelOpenChange",
+                "name": "leSidePanelOpenChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ open: boolean; panelId?: string }",
+                    "resolved": "{ open: boolean; panelId?: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "leSidePanelCollapsedChange",
+                "name": "leSidePanelCollapsedChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ collapsed: boolean; panelId?: string }",
+                    "resolved": "{ collapsed: boolean; panelId?: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "leSidePanelWidthChange",
+                "name": "leSidePanelWidthChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ width: number; panelId?: string }",
+                    "resolved": "{ width: number; panelId?: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "panelWidth",
+                "methodName": "onPanelWidthChanged"
+            }, {
+                "propName": "collapsed",
+                "methodName": "onCollapsedChanged"
+            }, {
+                "propName": "open",
+                "methodName": "onOpenChanged"
+            }, {
+                "propName": "collapseAt",
+                "methodName": "onResponsivePropChanged"
+            }, {
+                "propName": "narrowBehavior",
+                "methodName": "onResponsivePropChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "onDocumentKeyDown",
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "leSidePanelRequestToggle",
+                "method": "onToggleRequest",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=le-side-panel.js.map