le-kit 0.5.2 → 0.5.3

package/dist/cjs/le-segmented-control.cjs.entry.js

@@ -8,52 +8,82 @@ const LeSegmentedControl = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.leChange = index.createEvent(this, "leChange");
+        /**
+         * Array of options for the segmented control.
+         */
+        this.options = [];
+        /**
+         * Size of the control.
+         * @allowedValues small | medium | large
+         */
+        this.size = 'medium';
+        /**
+         * Scroll behavior for overflowing tabs.
+         * @allowedValues auto | hidden | visible | scroll
+         */
+        this.overflow = 'auto';
+        /**
+         * Whether the control should take full width.
+         */
+        this.fullWidth = false;
+        /**
+         * Whether the control is disabled.
+         */
+        this.disabled = false;
+        /**
+         * Internal tab configurations (built from children or tabs prop)
+         */
+        this.segmentConfigs = [];
+        /**
+         * Internal state for focused index (keyboard navigation)
+         */
+        this.focusedIndex = 0;
+        /**
+         * Whether we're using declarative mode (le-tab children)
+         */
+        this.isDeclarativeMode = false;
+        this.handleClick = (option) => {
+            this.selectOption(option);
+        };
+        this.handleKeyDown = (event) => {
+            const { segmentConfigs } = this;
+            let newIndex = this.focusedIndex;
+            switch (event.key) {
+                case 'ArrowLeft':
+                    event.preventDefault();
+                    newIndex = this.findNextEnabled(-1);
+                    break;
+                case 'ArrowRight':
+                    event.preventDefault();
+                    newIndex = this.findNextEnabled(1);
+                    break;
+                case 'Home':
+                    event.preventDefault();
+                    newIndex = this.findFirstEnabled();
+                    break;
+                case 'End':
+                    event.preventDefault();
+                    newIndex = this.findLastEnabled();
+                    break;
+                case 'Enter':
+                case ' ':
+                    event.preventDefault();
+                    if (segmentConfigs[this.focusedIndex]) {
+                        this.selectOption(segmentConfigs[this.focusedIndex]);
+                    }
+                    return;
+                default:
+                    return;
+            }
+            if (newIndex !== this.focusedIndex) {
+                this.focusedIndex = newIndex;
+                this.focusSegment(newIndex);
+                if (segmentConfigs[newIndex]) {
+                    this.selectOption(segmentConfigs[newIndex]);
+                }
+            }
+        };
     }
-    get el() { return index.getElement(this); }
-    containerRef;
-    /**
-     * Array of options for the segmented control.
-     */
-    options = [];
-    /**
-     * The value of the currently selected option.
-     */
-    value;
-    /**
-     * Size of the control.
-     * @allowedValues small | medium | large
-     */
-    size = 'medium';
-    /**
-     * Scroll behavior for overflowing tabs.
-     * @allowedValues auto | hidden | visible | scroll
-     */
-    overflow = 'auto';
-    /**
-     * Whether the control should take full width.
-     */
-    fullWidth = false;
-    /**
-     * Whether the control is disabled.
-     */
-    disabled = false;
-    /**
-     * Internal tab configurations (built from children or tabs prop)
-     */
-    segmentConfigs = [];
-    /**
-     * Internal state for focused index (keyboard navigation)
-     */
-    focusedIndex = 0;
-    /**
-     * Whether we're using declarative mode (le-tab children)
-     */
-    isDeclarativeMode = false;
-    /**
-     * Emitted when the selection changes.
-     */
-    leChange;
-    mutationObserver;
     tabsChanged() {
         if (!this.isDeclarativeMode) {
             this.buildSegmentsConfigs();
@@ -151,47 +181,6 @@ const LeSegmentedControl = class {
         }
         this.leChange.emit({ value, option });
     }
-    handleClick = (option) => {
-        this.selectOption(option);
-    };
-    handleKeyDown = (event) => {
-        const { segmentConfigs } = this;
-        let newIndex = this.focusedIndex;
-        switch (event.key) {
-            case 'ArrowLeft':
-                event.preventDefault();
-                newIndex = this.findNextEnabled(-1);
-                break;
-            case 'ArrowRight':
-                event.preventDefault();
-                newIndex = this.findNextEnabled(1);
-                break;
-            case 'Home':
-                event.preventDefault();
-                newIndex = this.findFirstEnabled();
-                break;
-            case 'End':
-                event.preventDefault();
-                newIndex = this.findLastEnabled();
-                break;
-            case 'Enter':
-            case ' ':
-                event.preventDefault();
-                if (segmentConfigs[this.focusedIndex]) {
-                    this.selectOption(segmentConfigs[this.focusedIndex]);
-                }
-                return;
-            default:
-                return;
-        }
-        if (newIndex !== this.focusedIndex) {
-            this.focusedIndex = newIndex;
-            this.focusSegment(newIndex);
-            if (segmentConfigs[newIndex]) {
-                this.selectOption(segmentConfigs[newIndex]);
-            }
-        }
-    };
     findNextEnabled(direction) {
         const { segmentConfigs } = this;
         let index = this.focusedIndex;
@@ -228,13 +217,14 @@ const LeSegmentedControl = class {
             'full-width': fullWidth,
             'disabled': disabled,
         };
-        return (index.h(index.Host, { key: 'dfe7d637e07af470756a57e8878e455c472a2790', class: `overflow-${this.overflow}` }, index.h("le-component", { key: '5ffa309951b8f509fe0b0db09a9273256ec5a1b5', component: "le-segmented-control" }, index.h("div", { key: 'a448e9be4011230c689a4bab5963f1588496c1ba', class: classes, ref: el => (this.containerRef = el), role: "radiogroup", part: "container", onKeyDown: this.handleKeyDown, tabIndex: 0 }, segmentConfigs.map(option => {
+        return (index.h(index.Host, { key: 'dd580b3e3f6ca9fc5d8316978f0fcd77832d562f', class: `overflow-${this.overflow}` }, index.h("le-component", { key: 'baf3bf0005cdb4678eac78b73f3c7140ba631159', component: "le-segmented-control" }, index.h("div", { key: 'bc78e64043731781fddb107321c22187314f20c0', class: classes, ref: el => (this.containerRef = el), role: "radiogroup", part: "container", onKeyDown: this.handleKeyDown, tabIndex: 0 }, segmentConfigs.map(option => {
             const optValue = this.getOptionValue(option);
             const isSelected = optValue === value;
             const isDisabled = option.disabled || disabled;
             return (index.h("le-tab", { key: optValue, class: "segment", role: "radio", variant: "enclosed", selected: isSelected, disabled: isDisabled, focusable: false, size: size, part: isSelected ? 'segment segment-active' : 'segment', "aria-checked": isSelected ? 'true' : 'false', "aria-disabled": isDisabled ? 'true' : undefined, onClick: () => this.handleClick(option), iconStart: option.iconStart, iconEnd: option.iconEnd }, index.h("span", { class: "segment-label" }, option.label)));
         })))));
     }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "options": ["tabsChanged"]
     }; }

package/dist/cjs/le-side-panel-toggle.cjs.entry.js

@@ -52,35 +52,64 @@ const LeSidePanelToggle = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.leSidePanelRequestToggle = index.createEvent(this, "leSidePanelRequestToggle");
+        /** Action to emit. Default toggles the panel. */
+        this.action = 'toggle';
+        /** Disables the toggle. */
+        this.disabled = false;
+        this.variant = 'solid';
+        this.color = 'primary';
+        this.size = 'medium';
+        this.selected = false;
+        this.fullWidth = false;
+        this.type = 'button';
+        this.align = 'center';
+        this.onDocumentKeyDown = (ev) => {
+            if (this.disabled) {
+                return;
+            }
+            const spec = this.shortcutSpec;
+            if (!spec) {
+                return;
+            }
+            if (isEditableTarget(ev.target)) {
+                return;
+            }
+            const key = (ev.key || '').toLowerCase();
+            if (key !== spec.key) {
+                return;
+            }
+            if (!!ev.altKey !== spec.alt) {
+                return;
+            }
+            if (!!ev.ctrlKey !== spec.ctrl) {
+                return;
+            }
+            if (!!ev.metaKey !== spec.meta) {
+                return;
+            }
+            if (!!ev.shiftKey !== spec.shift) {
+                return;
+            }
+            ev.preventDefault();
+            this.emitRequest();
+        };
+        this.onPanelStateChange = (ev) => {
+            const detail = ev.detail || {};
+            const requestedId = this.getResolvedPanelId() || '';
+            const eventId = detail.panelId || '';
+            if (requestedId !== eventId) {
+                return;
+            }
+            if (typeof detail.open === 'boolean') {
+                this.expanded = detail.open;
+                this.syncAriaExpanded();
+            }
+            if (typeof detail.collapsed === 'boolean') {
+                this.expanded = !detail.collapsed;
+                this.syncAriaExpanded();
+            }
+        };
     }
-    get el() { return index.getElement(this); }
-    /** Optional id used to target a specific panel. */
-    panelId;
-    /** Action to emit. Default toggles the panel. */
-    action = 'toggle';
-    /** Optional keyboard shortcut like `Mod+B` or `Alt+N`. */
-    shortcut;
-    /** Disables the toggle. */
-    disabled = false;
-    // Pass-through props for le-button
-    mode;
-    variant = 'solid';
-    color = 'primary';
-    size = 'medium';
-    selected = false;
-    fullWidth = false;
-    iconOnly;
-    iconStart;
-    iconEnd;
-    type = 'button';
-    href;
-    target;
-    align = 'center';
-    leSidePanelRequestToggle;
-    shortcutSpec;
-    expanded;
-    buttonEl;
-    forwardedNodes;
     onShortcutChanged() {
         this.shortcutSpec = parseShortcut(this.shortcut);
         this.syncShortcutListener();
@@ -136,52 +165,6 @@ const LeSidePanelToggle = class {
             action: this.action,
         });
     }
-    onDocumentKeyDown = (ev) => {
-        if (this.disabled) {
-            return;
-        }
-        const spec = this.shortcutSpec;
-        if (!spec) {
-            return;
-        }
-        if (isEditableTarget(ev.target)) {
-            return;
-        }
-        const key = (ev.key || '').toLowerCase();
-        if (key !== spec.key) {
-            return;
-        }
-        if (!!ev.altKey !== spec.alt) {
-            return;
-        }
-        if (!!ev.ctrlKey !== spec.ctrl) {
-            return;
-        }
-        if (!!ev.metaKey !== spec.meta) {
-            return;
-        }
-        if (!!ev.shiftKey !== spec.shift) {
-            return;
-        }
-        ev.preventDefault();
-        this.emitRequest();
-    };
-    onPanelStateChange = (ev) => {
-        const detail = ev.detail || {};
-        const requestedId = this.getResolvedPanelId() || '';
-        const eventId = detail.panelId || '';
-        if (requestedId !== eventId) {
-            return;
-        }
-        if (typeof detail.open === 'boolean') {
-            this.expanded = detail.open;
-            this.syncAriaExpanded();
-        }
-        if (typeof detail.collapsed === 'boolean') {
-            this.expanded = !detail.collapsed;
-            this.syncAriaExpanded();
-        }
-    };
     syncForwardedNodesIntoButton() {
         const btn = this.buttonEl;
         if (!btn || !this.forwardedNodes || this.forwardedNodes.length === 0) {
@@ -218,8 +201,9 @@ const LeSidePanelToggle = class {
         }
     }
     render() {
-        return (index.h("le-button", { key: '382be5b4b8c301dc1d5b8c2d8709bd83cfc08409', ref: el => (this.buttonEl = el), mode: this.mode, variant: this.variant, color: this.color, size: this.size, selected: this.selected, fullWidth: this.fullWidth, iconOnly: this.iconOnly, iconStart: this.iconStart, iconEnd: this.iconEnd, disabled: this.disabled, type: this.type, href: this.href, target: this.target, align: this.align, onClick: () => this.emitRequest() }));
+        return (index.h("le-button", { key: '172c8abec7d24a91974626d9bd083c7227400a2a', ref: el => (this.buttonEl = el), mode: this.mode, variant: this.variant, color: this.color, size: this.size, selected: this.selected, fullWidth: this.fullWidth, iconOnly: this.iconOnly, iconStart: this.iconStart, iconEnd: this.iconEnd, disabled: this.disabled, type: this.type, href: this.href, target: this.target, align: this.align, onClick: () => this.emitRequest() }));
     }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "shortcut": ["onShortcutChanged"]
     }; }

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

@@ -2,8 +2,8 @@
 
 var index = require('./index-BzadfLTc.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}}`;
+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));
@@ -37,61 +37,116 @@ const LeSidePanel = class {
         this.leSidePanelOpenChange = index.createEvent(this, "leSidePanelOpenChange");
         this.leSidePanelCollapsedChange = index.createEvent(this, "leSidePanelCollapsedChange");
         this.leSidePanelWidthChange = index.createEvent(this, "leSidePanelWidthChange");
+        /** 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 });
+        };
     }
-    get el() { return index.getElement(this); }
-    /**
-     * Optional id used to match toggle requests.
-     * If set, the panel only responds to toggle events with the same `panelId`.
-     */
-    panelId;
-    /** Which side the panel is attached to. */
-    side = 'start';
-    /** Width breakpoint (in px or a CSS var like `--le-breakpoint-md`) below which the panel enters "narrow" mode. */
-    collapseAt;
-    /** Behavior when in narrow mode. */
-    narrowBehavior = 'overlay';
-    /**
-     * Panel open state for narrow mode.
-     * - overlay: controls modal drawer visibility
-     * - push: controls whether panel is shown (non-modal)
-     */
-    open = false;
-    /** Panel collapsed state for wide mode (fully hidden). */
-    collapsed = false;
-    /** Default panel width in pixels. */
-    panelWidth = 280;
-    /** Minimum allowed width when resizable. */
-    minPanelWidth = 220;
-    /** Maximum allowed width when resizable. */
-    maxPanelWidth = 420;
-    /** Allows users to resize the panel by dragging its edge. */
-    resizable = false;
-    /** When set, panel width + collapsed state are persisted in localStorage. */
-    persistKey;
-    /** Show a close button inside the panel (primarily used in narrow overlay mode). */
-    showCloseButton = true;
-    /** When crossing to wide mode, automatically show the panel (collapsed=false). */
-    autoShowOnWide = true;
-    /** When crossing to narrow mode, automatically hide the panel (open=false). */
-    autoHideOnNarrow = true;
-    /** Accessible label for the panel navigation region. */
-    panelLabel = 'Navigation';
-    leSidePanelOpenChange;
-    leSidePanelCollapsedChange;
-    leSidePanelWidthChange;
-    isNarrow = false;
-    responsiveReady = false;
-    overlayMounted = false;
-    overlayVisible = false;
-    currentWidthPx;
-    resizing = false;
-    resizeObserver;
-    panelEl;
-    overlayWrapEl;
-    focusedBeforeOpen;
-    dragPointerId;
-    dragStartX;
-    dragStartWidth;
     connectedCallback() {
         this.restorePersistedState();
         this.currentWidthPx = clamp(this.currentWidthPx || this.panelWidth, this.minPanelWidth, this.maxPanelWidth);
@@ -144,7 +199,7 @@ const LeSidePanel = class {
             return;
         }
         if (!this.resizing) {
-            this.currentWidthPx = clamp(this.panelWidth, this.minPanelWidth, this.maxPanelWidth);
+            this.currentWidthPx = clamp(this.panelWidth || 280, this.minPanelWidth || 220, this.maxPanelWidth || 800);
             this.persistState();
         }
     }
@@ -298,6 +353,16 @@ const LeSidePanel = class {
             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;
@@ -404,80 +469,6 @@ const LeSidePanel = class {
             }
         }
     }
-    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);
@@ -510,28 +501,30 @@ const LeSidePanel = class {
         const showWidePanel = allowPanel && !this.isNarrow && !this.collapsed;
         const showNarrowPushPanel = allowPanel && this.isNarrow && this.narrowBehavior === 'push' && this.open;
         const layoutHasInlinePanel = showWidePanel || showNarrowPushPanel;
-        return (index.h("div", { key: '692aa465f1a1b8c40ec21d0780eb61d9cebdc6bf', class: {
+        return (index.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 }, index.h("div", { key: 'a01741c802b6eaa8f70bd9265e0b2a19e5cf29cf', class: {
+            }, style: widthStyle, "data-resizing": this.resizing ? 'true' : null }, index.h("div", { key: 'f3c174390306054397a9627cad446d99c183251b', class: {
                 'layout': true,
                 'has-panel': layoutHasInlinePanel,
                 'start': this.side === 'start',
                 'end': this.side === 'end',
-            } }, index.h("div", { key: '8795da430749e8af45175166a51848ca9c673f06', class: {
-                inlinePanel: true,
-                hidden: !layoutHasInlinePanel,
-            }, "aria-hidden": !layoutHasInlinePanel ? 'true' : null }, this.renderPanelInner({ renderPanelSlot: !isOverlay })), index.h("div", { key: '16ed86717a59b27b2bc96ee703b53a74a9963595', class: "content", part: "content", "aria-hidden": isModalOverlayOpen ? 'true' : null }, index.h("slot", { key: '445b23491194a96bbca4f7c7dc869dc0ba327daa' }))), allowPanel && isOverlay && this.overlayMounted ? (index.h("div", { class: { overlayRoot: true, visible: this.overlayVisible }, part: "scrim", role: "presentation", onPointerDown: this.onOverlayPointerDown, "aria-hidden": isModalOverlayOpen ? null : 'true' }, index.h("div", { class: {
+            } }, index.h("div", { key: 'b679883619cbe69bac251cd5f246634f48ddffdf', class: {
+                'inlinePanel': true,
+                'hidden': !layoutHasInlinePanel,
+                'no-transition': this.suppressAnimation,
+            }, "aria-hidden": !layoutHasInlinePanel ? 'true' : null }, this.renderPanelInner({ renderPanelSlot: !isOverlay })), index.h("div", { key: 'a7a3b2ee5001c5cf550becd872dc621095fff877', class: "content", part: "content", "aria-hidden": isModalOverlayOpen ? 'true' : null }, index.h("slot", { key: '60ea6042d270ae9dd887034fc44da4fb91e394ec' }))), allowPanel && isOverlay && this.overlayMounted ? (index.h("div", { class: { overlayRoot: true, visible: this.overlayVisible }, part: "scrim", role: "presentation", onPointerDown: this.onOverlayPointerDown, "aria-hidden": isModalOverlayOpen ? null : 'true' }, index.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 index.getElement(this); }
     static get watchers() { return {
         "panelWidth": ["onPanelWidthChanged"],
         "collapsed": ["onCollapsedChanged"],