le-kit 0.0.3 → 0.1.1

package/dist/components/le-popover2.js

@@ -0,0 +1,382 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+
+const lePopoverCss = "/* ============================================\n   le-popover.css\n   Popover using native HTML Popover API\n   ============================================ */\n\n:host {\n  display: inline-block;\n  position: relative;\n}\n\n/* ============================================\n   Trigger\n   ============================================ */\n\n.le-popover-trigger {\n  display: inline-flex;\n  cursor: pointer;\n}\n\n.le-popover-default-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  border: 1px solid var(--le-color-border, #e0e0e0);\n  border-radius: var(--le-radius-md, 6px);\n  background: var(--le-color-surface, #fff);\n  color: var(--le-color-text-secondary, #666);\n  font-size: 16px;\n  cursor: pointer;\n  transition: all var(--le-transition-fast, 0.15s ease);\n}\n\n.le-popover-default-trigger:hover {\n  border-color: var(--le-color-primary, #2196f3);\n  color: var(--le-color-primary, #2196f3);\n  background: var(--le-color-primary-light, rgba(33, 150, 243, 0.1));\n}\n\n/* ============================================\n   Popover Content (native popover)\n   ============================================ */\n\n.le-popover-content {\n  /* Reset native popover defaults */\n  margin: 0;\n  padding: 0;\n  border: none;\n  background: transparent;\n  \n  /* Positioning - will be set via JS */\n  position: fixed;\n  inset: unset;\n  \n  /* Styling */\n  background: var(--le-color-surface, #ffffff);\n  border: 1px solid var(--le-color-border, #e0e0e0);\n  border-radius: var(--le-radius-lg, 8px);\n  box-shadow: var(--le-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.15));\n  overflow: hidden;\n  font-family: var(--le-font-family, system-ui, -apple-system, sans-serif);\n  font-size: var(--le-font-size-sm, 0.875rem);\n  color: var(--le-color-text, #333);\n  \n  /* Animation */\n  opacity: 0;\n  transform: scale(0.95);\n  transition: opacity 0.15s ease, transform 0.15s ease, display 0.15s ease allow-discrete;\n}\n\n/* When popover is open */\n.le-popover-content:popover-open {\n  opacity: 1;\n  transform: scale(1);\n}\n\n/* Starting style for animation (CSS Anchor Positioning spec) */\n@starting-style {\n  .le-popover-content:popover-open {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n}\n\n/* ============================================\n   Header\n   ============================================ */\n\n.le-popover-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--le-space-xs, 4px) var(--le-space-xs, 4px) var(--le-space-xs, 4px) var(--le-space-sm, 8px);\n  border-bottom: 1px solid var(--le-color-border, #e0e0e0);\n  background: var(--le-color-surface-alt, #f9f9f9);\n  min-height: 32px;\n}\n\n.le-popover-title {\n  font-weight: var(--le-font-weight-semibold, 600);\n  font-size: var(--le-font-size-sm, 0.875rem);\n  color: var(--le-color-text, #333);\n}\n\n.le-popover-close {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: var(--le-color-text-secondary, #666);\n  font-size: 18px;\n  line-height: 1;\n  cursor: pointer;\n  border-radius: var(--le-radius-sm, 4px);\n  transition: background-color 0.15s, color 0.15s;\n}\n\n.le-popover-close:hover {\n  background: var(--le-color-surface-hover, rgba(0, 0, 0, 0.05));\n  color: var(--le-color-text, #333);\n}\n\n/* ============================================\n   Body\n   ============================================ */\n\n.le-popover-body {\n  padding: var(--le-space-md, 12px);\n}\n\n/* ============================================\n   Scrollable content\n   ============================================ */\n\n.le-popover-content[style*=\"overflow-y: auto\"] .le-popover-body {\n  overflow-y: auto;\n}\n";
+
+const LePopover = /*@__PURE__*/ proxyCustomElement(class LePopover extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.lePopoverOpen = createEvent(this, "lePopoverOpen", 7);
+        this.lePopoverClose = createEvent(this, "lePopoverClose", 7);
+    }
+    get el() { return this; }
+    /**
+     * Mode of the popover should be 'default' for internal use
+     */
+    mode;
+    /**
+     * Whether the popover is currently open
+     */
+    open = false;
+    /**
+     * Position of the popover relative to its trigger
+     */
+    position = 'bottom';
+    /**
+     * Alignment of the popover
+     */
+    align = 'start';
+    /**
+     * Optional title for the popover header
+     */
+    popoverTitle;
+    /**
+     * Whether to show a close button in the header
+     */
+    showClose = true;
+    /**
+     * Whether clicking outside closes the popover
+     */
+    closeOnClickOutside = true;
+    /**
+     * Whether pressing Escape closes the popover
+     */
+    closeOnEscape = true;
+    /**
+     * Offset from the trigger element (in pixels)
+     */
+    offset = 8;
+    /**
+     * Fixed width for the popover (e.g., '300px', '20rem')
+     */
+    width;
+    /**
+     * Minimum width for the popover (e.g., '200px', '15rem')
+     */
+    minWidth = '200px';
+    /**
+     * Maximum width for the popover (e.g., '400px', '25rem')
+     */
+    maxWidth;
+    /**
+     * Emitted when the popover opens
+     */
+    lePopoverOpen;
+    /**
+     * Emitted when the popover closes
+     */
+    lePopoverClose;
+    isPositioned = false;
+    triggerEl;
+    popoverEl;
+    uniqueId = `le-popover-${Math.random().toString(36).substr(2, 9)}`;
+    scrollParents = [];
+    componentDidLoad() {
+        // Listen for toggle events from the native popover API
+        this.popoverEl?.addEventListener('toggle', this.handlePopoverToggle);
+        // Listen for other popovers opening to close this one
+        document.addEventListener('le-popover-will-open', this.handleOtherPopoverOpen);
+    }
+    disconnectedCallback() {
+        this.popoverEl?.removeEventListener('toggle', this.handlePopoverToggle);
+        document.removeEventListener('le-popover-will-open', this.handleOtherPopoverOpen);
+        this.removeScrollListeners();
+    }
+    /**
+     * Find all scrollable parent elements
+     */
+    getScrollParents(element) {
+        const scrollParents = [];
+        let parent = element.parentElement;
+        while (parent) {
+            const style = getComputedStyle(parent);
+            const overflow = style.overflow + style.overflowY + style.overflowX;
+            if (/(auto|scroll)/.test(overflow)) {
+                scrollParents.push(parent);
+            }
+            parent = parent.parentElement;
+        }
+        // Always include window for page scroll
+        return scrollParents;
+    }
+    /**
+     * Add scroll listeners to all scrollable parents
+     */
+    addScrollListeners() {
+        if (!this.triggerEl)
+            return;
+        this.scrollParents = this.getScrollParents(this.triggerEl);
+        // Listen to each scroll parent
+        this.scrollParents.forEach(parent => {
+            parent.addEventListener('scroll', this.handleScroll, { passive: true });
+        });
+        // Also listen to window scroll and resize
+        window.addEventListener('scroll', this.handleScroll, { passive: true });
+        window.addEventListener('resize', this.handleScroll, { passive: true });
+    }
+    /**
+     * Remove scroll listeners
+     */
+    removeScrollListeners() {
+        this.scrollParents.forEach(parent => {
+            parent.removeEventListener('scroll', this.handleScroll);
+        });
+        window.removeEventListener('scroll', this.handleScroll);
+        window.removeEventListener('resize', this.handleScroll);
+        this.scrollParents = [];
+    }
+    handleScroll = () => {
+        if (this.open) {
+            this.updatePosition();
+        }
+    };
+    handlePopoverToggle = (event) => {
+        if (event.newState === 'open') {
+            this.open = true;
+            this.addScrollListeners();
+            this.updatePosition();
+            this.lePopoverOpen.emit();
+        }
+        else {
+            this.open = false;
+            this.isPositioned = false;
+            this.removeScrollListeners();
+            this.lePopoverClose.emit();
+        }
+    };
+    handleOtherPopoverOpen = (event) => {
+        const customEvent = event;
+        if (customEvent.detail?.popover === this.el)
+            return;
+        if (this.open) {
+            this.hide();
+        }
+    };
+    /**
+     * Opens the popover
+     */
+    async show() {
+        document.dispatchEvent(new CustomEvent('le-popover-will-open', {
+            detail: { popover: this.el }
+        }));
+        this.popoverEl?.showPopover();
+    }
+    /**
+     * Closes the popover
+     */
+    async hide() {
+        this.popoverEl?.hidePopover();
+    }
+    /**
+     * Toggles the popover
+     */
+    async toggle() {
+        if (this.open) {
+            await this.hide();
+        }
+        else {
+            await this.show();
+        }
+    }
+    handleTriggerClick = (event) => {
+        event.stopPropagation();
+        this.toggle();
+    };
+    updatePosition() {
+        if (!this.triggerEl || !this.popoverEl)
+            return;
+        const triggerRect = this.triggerEl.getBoundingClientRect();
+        const popoverRect = this.popoverEl.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const viewportPadding = 8;
+        let position = this.position;
+        let align = this.align;
+        // Auto-position logic
+        const spaceBelow = viewportHeight - triggerRect.bottom - viewportPadding;
+        const spaceAbove = triggerRect.top - viewportPadding;
+        const spaceRight = viewportWidth - triggerRect.right - viewportPadding;
+        const spaceLeft = triggerRect.left - viewportPadding;
+        if (position === 'auto') {
+            if (spaceBelow >= popoverRect.height + this.offset) {
+                position = 'bottom';
+            }
+            else if (spaceAbove >= popoverRect.height + this.offset) {
+                position = 'top';
+            }
+            else if (spaceRight >= popoverRect.width + this.offset) {
+                position = 'right';
+            }
+            else if (spaceLeft >= popoverRect.width + this.offset) {
+                position = 'left';
+            }
+            else {
+                const maxSpace = Math.max(spaceBelow, spaceAbove, spaceRight, spaceLeft);
+                if (maxSpace === spaceBelow)
+                    position = 'bottom';
+                else if (maxSpace === spaceAbove)
+                    position = 'top';
+                else if (maxSpace === spaceRight)
+                    position = 'right';
+                else
+                    position = 'left';
+            }
+        }
+        // Adjust alignment for horizontal overflow
+        if (position === 'top' || position === 'bottom') {
+            if (align === 'start' && triggerRect.left + popoverRect.width > viewportWidth - viewportPadding) {
+                align = 'end';
+            }
+            else if (align === 'end' && triggerRect.right - popoverRect.width < viewportPadding) {
+                align = 'start';
+            }
+            else if (align === 'center') {
+                const triggerCenter = triggerRect.left + triggerRect.width / 2;
+                if (triggerCenter - popoverRect.width / 2 < viewportPadding) {
+                    align = 'start';
+                }
+                else if (triggerCenter + popoverRect.width / 2 > viewportWidth - viewportPadding) {
+                    align = 'end';
+                }
+            }
+        }
+        // Calculate position
+        let top = 0;
+        let left = 0;
+        let maxHeight = null;
+        switch (position) {
+            case 'top':
+                top = triggerRect.top - popoverRect.height - this.offset;
+                if (top < viewportPadding) {
+                    maxHeight = triggerRect.top - this.offset - viewportPadding * 2;
+                    top = viewportPadding;
+                }
+                break;
+            case 'bottom':
+                top = triggerRect.bottom + this.offset;
+                if (top + popoverRect.height > viewportHeight - viewportPadding) {
+                    maxHeight = viewportHeight - top - viewportPadding;
+                }
+                break;
+            case 'left':
+                left = triggerRect.left - popoverRect.width - this.offset;
+                top = triggerRect.top;
+                if (left < viewportPadding)
+                    left = viewportPadding;
+                break;
+            case 'right':
+                left = triggerRect.right + this.offset;
+                top = triggerRect.top;
+                if (left + popoverRect.width > viewportWidth - viewportPadding) {
+                    left = viewportWidth - popoverRect.width - viewportPadding;
+                }
+                break;
+        }
+        // Calculate horizontal alignment for top/bottom
+        if (position === 'top' || position === 'bottom') {
+            switch (align) {
+                case 'start':
+                    left = triggerRect.left;
+                    break;
+                case 'center':
+                    left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2;
+                    break;
+                case 'end':
+                    left = triggerRect.right - popoverRect.width;
+                    break;
+            }
+            // Constrain to viewport
+            if (left < viewportPadding) {
+                left = viewportPadding;
+            }
+            else if (left + popoverRect.width > viewportWidth - viewportPadding) {
+                left = viewportWidth - popoverRect.width - viewportPadding;
+            }
+        }
+        // Calculate vertical alignment for left/right
+        if (position === 'left' || position === 'right') {
+            switch (align) {
+                case 'start':
+                    top = triggerRect.top;
+                    break;
+                case 'center':
+                    top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2;
+                    break;
+                case 'end':
+                    top = triggerRect.bottom - popoverRect.height;
+                    break;
+            }
+            if (top < viewportPadding)
+                top = viewportPadding;
+            if (top + popoverRect.height > viewportHeight - viewportPadding) {
+                maxHeight = viewportHeight - top - viewportPadding;
+            }
+        }
+        // Apply styles
+        this.popoverEl.style.top = `${top}px`;
+        this.popoverEl.style.left = `${left}px`;
+        if (maxHeight !== null && maxHeight > 100) {
+            this.popoverEl.style.maxHeight = `${maxHeight}px`;
+            this.popoverEl.style.overflowY = 'auto';
+        }
+        else {
+            this.popoverEl.style.maxHeight = '';
+            this.popoverEl.style.overflowY = '';
+        }
+        this.isPositioned = true;
+    }
+    render() {
+        const popoverStyles = {
+            visibility: this.isPositioned ? 'visible' : 'hidden',
+        };
+        if (this.width)
+            popoverStyles.width = this.width;
+        if (this.minWidth)
+            popoverStyles.minWidth = this.minWidth;
+        if (this.maxWidth)
+            popoverStyles.maxWidth = this.maxWidth;
+        return [
+            h("div", { key: '3d2a3b86ddb3be577bd0e976a5a00f25396a97fb', class: "le-popover-trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick }, h("slot", { key: '9db2e9e2b0bdb25c5a2361115d2094292fe692ec', name: "trigger" }, h("button", { key: '88d78b192f72731f00d6131b92b8d6a4b445d7f9', type: "button", class: "le-popover-default-trigger" }, h("span", { key: '0f2913f160cda5dcbeb20c714219d587196e230b' }, "\u2295")))),
+            h("div", { key: 'b65d2de900ff6e67a62d92d7452db34afde9f257', id: this.uniqueId, class: "le-popover-content", popover: this.closeOnClickOutside ? 'auto' : 'manual', ref: (el) => (this.popoverEl = el), style: popoverStyles }, (this.popoverTitle || this.showClose) && (h("div", { key: '323061fc49c8e0fc9ae541dfc576e551b0a83818', class: "le-popover-header" }, this.popoverTitle && h("span", { key: 'b1d9f4203966ae6a0bb14186824596643954d6f8', class: "le-popover-title" }, this.popoverTitle), this.showClose && (h("button", { key: 'd0d335d8c9897ed9ba7bd0370572a8cafa72b044', type: "button", class: "le-popover-close", onClick: () => this.hide(), "aria-label": "Close" }, "\u00D7")))), h("div", { key: '52d3294394b0e1fd49f8c361414e228feed68ea9', class: "le-popover-body" }, h("slot", { key: '16d8691545f2eaa44f136bfea33a1f1d71d18cd7' })))
+        ];
+    }
+    static get style() { return lePopoverCss; }
+}, [769, "le-popover", {
+        "mode": [1537],
+        "open": [1540],
+        "position": [1],
+        "align": [1],
+        "popoverTitle": [1, "popover-title"],
+        "showClose": [4, "show-close"],
+        "closeOnClickOutside": [4, "close-on-click-outside"],
+        "closeOnEscape": [4, "close-on-escape"],
+        "offset": [2],
+        "width": [1],
+        "minWidth": [1, "min-width"],
+        "maxWidth": [1, "max-width"],
+        "isPositioned": [32],
+        "show": [64],
+        "hide": [64],
+        "toggle": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["le-popover"];
+    components.forEach(tagName => { switch (tagName) {
+        case "le-popover":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LePopover);
+            }
+            break;
+    } });
+}
+
+export { LePopover as L, defineCustomElement as d };
+//# sourceMappingURL=le-popover2.js.map
+
+//# sourceMappingURL=le-popover2.js.map

package/dist/components/le-popover2.js.map

@@ -0,0 +1 @@
+{"file":"le-popover2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/le-popover/le-popover.css?tag=le-popover&encapsulation=shadow","src/components/le-popover/le-popover.tsx"],"sourcesContent":["/* ============================================\n   le-popover.css\n   Popover using native HTML Popover API\n   ============================================ */\n\n:host {\n  display: inline-block;\n  position: relative;\n}\n\n/* ============================================\n   Trigger\n   ============================================ */\n\n.le-popover-trigger {\n  display: inline-flex;\n  cursor: pointer;\n}\n\n.le-popover-default-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  border: 1px solid var(--le-color-border, #e0e0e0);\n  border-radius: var(--le-radius-md, 6px);\n  background: var(--le-color-surface, #fff);\n  color: var(--le-color-text-secondary, #666);\n  font-size: 16px;\n  cursor: pointer;\n  transition: all var(--le-transition-fast, 0.15s ease);\n}\n\n.le-popover-default-trigger:hover {\n  border-color: var(--le-color-primary, #2196f3);\n  color: var(--le-color-primary, #2196f3);\n  background: var(--le-color-primary-light, rgba(33, 150, 243, 0.1));\n}\n\n/* ============================================\n   Popover Content (native popover)\n   ============================================ */\n\n.le-popover-content {\n  /* Reset native popover defaults */\n  margin: 0;\n  padding: 0;\n  border: none;\n  background: transparent;\n  \n  /* Positioning - will be set via JS */\n  position: fixed;\n  inset: unset;\n  \n  /* Styling */\n  background: var(--le-color-surface, #ffffff);\n  border: 1px solid var(--le-color-border, #e0e0e0);\n  border-radius: var(--le-radius-lg, 8px);\n  box-shadow: var(--le-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.15));\n  overflow: hidden;\n  font-family: var(--le-font-family, system-ui, -apple-system, sans-serif);\n  font-size: var(--le-font-size-sm, 0.875rem);\n  color: var(--le-color-text, #333);\n  \n  /* Animation */\n  opacity: 0;\n  transform: scale(0.95);\n  transition: opacity 0.15s ease, transform 0.15s ease, display 0.15s ease allow-discrete;\n}\n\n/* When popover is open */\n.le-popover-content:popover-open {\n  opacity: 1;\n  transform: scale(1);\n}\n\n/* Starting style for animation (CSS Anchor Positioning spec) */\n@starting-style {\n  .le-popover-content:popover-open {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n}\n\n/* ============================================\n   Header\n   ============================================ */\n\n.le-popover-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--le-space-xs, 4px) var(--le-space-xs, 4px) var(--le-space-xs, 4px) var(--le-space-sm, 8px);\n  border-bottom: 1px solid var(--le-color-border, #e0e0e0);\n  background: var(--le-color-surface-alt, #f9f9f9);\n  min-height: 32px;\n}\n\n.le-popover-title {\n  font-weight: var(--le-font-weight-semibold, 600);\n  font-size: var(--le-font-size-sm, 0.875rem);\n  color: var(--le-color-text, #333);\n}\n\n.le-popover-close {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: var(--le-color-text-secondary, #666);\n  font-size: 18px;\n  line-height: 1;\n  cursor: pointer;\n  border-radius: var(--le-radius-sm, 4px);\n  transition: background-color 0.15s, color 0.15s;\n}\n\n.le-popover-close:hover {\n  background: var(--le-color-surface-hover, rgba(0, 0, 0, 0.05));\n  color: var(--le-color-text, #333);\n}\n\n/* ============================================\n   Body\n   ============================================ */\n\n.le-popover-body {\n  padding: var(--le-space-md, 12px);\n}\n\n/* ============================================\n   Scrollable content\n   ============================================ */\n\n.le-popover-content[style*=\"overflow-y: auto\"] .le-popover-body {\n  overflow-y: auto;\n}\n","import { Component, Prop, Method, Event, EventEmitter, State, h, Element } from '@stencil/core';\n\n/**\n * A popover component for displaying floating content.\n * \n * Uses the native HTML Popover API for proper layering with dialogs\n * and other top-layer elements. Falls back gracefully in older browsers.\n *\n * @slot - Content to display inside the popover\n * @slot trigger - Element that triggers the popover (optional)\n * \n * @cmsInternal true\n * @cmsCategory System\n */\n@Component({\n  tag: 'le-popover',\n  styleUrl: 'le-popover.css',\n  shadow: true,\n})\nexport class LePopover {\n  @Element() el: HTMLElement;\n\n  /**\n   * Mode of the popover should be 'default' for internal use\n   */\n  @Prop({ mutable: true, reflect: true }) mode: 'default' | 'admin';\n\n  /**\n   * Whether the popover is currently open\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * Position of the popover relative to its trigger\n   */\n  @Prop() position: 'top' | 'bottom' | 'left' | 'right' | 'auto' = 'bottom';\n\n  /**\n   * Alignment of the popover\n   */\n  @Prop() align: 'start' | 'center' | 'end' = 'start';\n\n  /**\n   * Optional title for the popover header\n   */\n  @Prop() popoverTitle?: string;\n\n  /**\n   * Whether to show a close button in the header\n   */\n  @Prop() showClose: boolean = true;\n\n  /**\n   * Whether clicking outside closes the popover\n   */\n  @Prop() closeOnClickOutside: boolean = true;\n\n  /**\n   * Whether pressing Escape closes the popover\n   */\n  @Prop() closeOnEscape: boolean = true;\n\n  /**\n   * Offset from the trigger element (in pixels)\n   */\n  @Prop() offset: number = 8;\n\n  /**\n   * Fixed width for the popover (e.g., '300px', '20rem')\n   */\n  @Prop() width?: string;\n\n  /**\n   * Minimum width for the popover (e.g., '200px', '15rem')\n   */\n  @Prop() minWidth?: string = '200px';\n\n  /**\n   * Maximum width for the popover (e.g., '400px', '25rem')\n   */\n  @Prop() maxWidth?: string;\n\n  /**\n   * Emitted when the popover opens\n   */\n  @Event() lePopoverOpen: EventEmitter<void>;\n\n  /**\n   * Emitted when the popover closes\n   */\n  @Event() lePopoverClose: EventEmitter<void>;\n\n  @State() private isPositioned: boolean = false;\n\n  private triggerEl?: HTMLElement;\n  private popoverEl?: HTMLElement;\n  private uniqueId: string = `le-popover-${Math.random().toString(36).substr(2, 9)}`;\n  private scrollParents: Element[] = [];\n\n  componentDidLoad() {\n    // Listen for toggle events from the native popover API\n    this.popoverEl?.addEventListener('toggle', this.handlePopoverToggle as EventListener);\n    \n    // Listen for other popovers opening to close this one\n    document.addEventListener('le-popover-will-open', this.handleOtherPopoverOpen);\n  }\n\n  disconnectedCallback() {\n    this.popoverEl?.removeEventListener('toggle', this.handlePopoverToggle as EventListener);\n    document.removeEventListener('le-popover-will-open', this.handleOtherPopoverOpen);\n    this.removeScrollListeners();\n  }\n\n  /**\n   * Find all scrollable parent elements\n   */\n  private getScrollParents(element: Element): Element[] {\n    const scrollParents: Element[] = [];\n    let parent = element.parentElement;\n    \n    while (parent) {\n      const style = getComputedStyle(parent);\n      const overflow = style.overflow + style.overflowY + style.overflowX;\n      if (/(auto|scroll)/.test(overflow)) {\n        scrollParents.push(parent);\n      }\n      parent = parent.parentElement;\n    }\n    \n    // Always include window for page scroll\n    return scrollParents;\n  }\n\n  /**\n   * Add scroll listeners to all scrollable parents\n   */\n  private addScrollListeners() {\n    if (!this.triggerEl) return;\n    \n    this.scrollParents = this.getScrollParents(this.triggerEl);\n    \n    // Listen to each scroll parent\n    this.scrollParents.forEach(parent => {\n      parent.addEventListener('scroll', this.handleScroll, { passive: true });\n    });\n    \n    // Also listen to window scroll and resize\n    window.addEventListener('scroll', this.handleScroll, { passive: true });\n    window.addEventListener('resize', this.handleScroll, { passive: true });\n  }\n\n  /**\n   * Remove scroll listeners\n   */\n  private removeScrollListeners() {\n    this.scrollParents.forEach(parent => {\n      parent.removeEventListener('scroll', this.handleScroll);\n    });\n    window.removeEventListener('scroll', this.handleScroll);\n    window.removeEventListener('resize', this.handleScroll);\n    this.scrollParents = [];\n  }\n\n  private handleScroll = () => {\n    if (this.open) {\n      this.updatePosition();\n    }\n  };\n\n  private handlePopoverToggle = (event: ToggleEvent) => {\n    if (event.newState === 'open') {\n      this.open = true;\n      this.addScrollListeners();\n      this.updatePosition();\n      this.lePopoverOpen.emit();\n    } else {\n      this.open = false;\n      this.isPositioned = false;\n      this.removeScrollListeners();\n      this.lePopoverClose.emit();\n    }\n  };\n\n  private handleOtherPopoverOpen = (event: Event) => {\n    const customEvent = event as CustomEvent;\n    if (customEvent.detail?.popover === this.el) return;\n    \n    if (this.open) {\n      this.hide();\n    }\n  };\n\n  /**\n   * Opens the popover\n   */\n  @Method()\n  async show() {\n    document.dispatchEvent(new CustomEvent('le-popover-will-open', {\n      detail: { popover: this.el }\n    }));\n    \n    this.popoverEl?.showPopover();\n  }\n\n  /**\n   * Closes the popover\n   */\n  @Method()\n  async hide() {\n    this.popoverEl?.hidePopover();\n  }\n\n  /**\n   * Toggles the popover\n   */\n  @Method()\n  async toggle() {\n    if (this.open) {\n      await this.hide();\n    } else {\n      await this.show();\n    }\n  }\n\n  private handleTriggerClick = (event: MouseEvent) => {\n    event.stopPropagation();\n    this.toggle();\n  };\n\n  private updatePosition() {\n    if (!this.triggerEl || !this.popoverEl) return;\n\n    const triggerRect = this.triggerEl.getBoundingClientRect();\n    const popoverRect = this.popoverEl.getBoundingClientRect();\n    const viewportWidth = window.innerWidth;\n    const viewportHeight = window.innerHeight;\n    const viewportPadding = 8;\n\n    let position = this.position;\n    let align = this.align;\n\n    // Auto-position logic\n    const spaceBelow = viewportHeight - triggerRect.bottom - viewportPadding;\n    const spaceAbove = triggerRect.top - viewportPadding;\n    const spaceRight = viewportWidth - triggerRect.right - viewportPadding;\n    const spaceLeft = triggerRect.left - viewportPadding;\n\n    if (position === 'auto') {\n      if (spaceBelow >= popoverRect.height + this.offset) {\n        position = 'bottom';\n      } else if (spaceAbove >= popoverRect.height + this.offset) {\n        position = 'top';\n      } else if (spaceRight >= popoverRect.width + this.offset) {\n        position = 'right';\n      } else if (spaceLeft >= popoverRect.width + this.offset) {\n        position = 'left';\n      } else {\n        const maxSpace = Math.max(spaceBelow, spaceAbove, spaceRight, spaceLeft);\n        if (maxSpace === spaceBelow) position = 'bottom';\n        else if (maxSpace === spaceAbove) position = 'top';\n        else if (maxSpace === spaceRight) position = 'right';\n        else position = 'left';\n      }\n    }\n\n    // Adjust alignment for horizontal overflow\n    if (position === 'top' || position === 'bottom') {\n      if (align === 'start' && triggerRect.left + popoverRect.width > viewportWidth - viewportPadding) {\n        align = 'end';\n      } else if (align === 'end' && triggerRect.right - popoverRect.width < viewportPadding) {\n        align = 'start';\n      } else if (align === 'center') {\n        const triggerCenter = triggerRect.left + triggerRect.width / 2;\n        if (triggerCenter - popoverRect.width / 2 < viewportPadding) {\n          align = 'start';\n        } else if (triggerCenter + popoverRect.width / 2 > viewportWidth - viewportPadding) {\n          align = 'end';\n        }\n      }\n    }\n\n    // Calculate position\n    let top: number = 0;\n    let left: number = 0;\n    let maxHeight: number | null = null;\n\n    switch (position) {\n      case 'top':\n        top = triggerRect.top - popoverRect.height - this.offset;\n        if (top < viewportPadding) {\n          maxHeight = triggerRect.top - this.offset - viewportPadding * 2;\n          top = viewportPadding;\n        }\n        break;\n      case 'bottom':\n        top = triggerRect.bottom + this.offset;\n        if (top + popoverRect.height > viewportHeight - viewportPadding) {\n          maxHeight = viewportHeight - top - viewportPadding;\n        }\n        break;\n      case 'left':\n        left = triggerRect.left - popoverRect.width - this.offset;\n        top = triggerRect.top;\n        if (left < viewportPadding) left = viewportPadding;\n        break;\n      case 'right':\n        left = triggerRect.right + this.offset;\n        top = triggerRect.top;\n        if (left + popoverRect.width > viewportWidth - viewportPadding) {\n          left = viewportWidth - popoverRect.width - viewportPadding;\n        }\n        break;\n    }\n\n    // Calculate horizontal alignment for top/bottom\n    if (position === 'top' || position === 'bottom') {\n      switch (align) {\n        case 'start':\n          left = triggerRect.left;\n          break;\n        case 'center':\n          left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2;\n          break;\n        case 'end':\n          left = triggerRect.right - popoverRect.width;\n          break;\n      }\n      \n      // Constrain to viewport\n      if (left < viewportPadding) {\n        left = viewportPadding;\n      } else if (left + popoverRect.width > viewportWidth - viewportPadding) {\n        left = viewportWidth - popoverRect.width - viewportPadding;\n      }\n    }\n\n    // Calculate vertical alignment for left/right\n    if (position === 'left' || position === 'right') {\n      switch (align) {\n        case 'start':\n          top = triggerRect.top;\n          break;\n        case 'center':\n          top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2;\n          break;\n        case 'end':\n          top = triggerRect.bottom - popoverRect.height;\n          break;\n      }\n      \n      if (top < viewportPadding) top = viewportPadding;\n      if (top + popoverRect.height > viewportHeight - viewportPadding) {\n        maxHeight = viewportHeight - top - viewportPadding;\n      }\n    }\n\n    // Apply styles\n    this.popoverEl.style.top = `${top}px`;\n    this.popoverEl.style.left = `${left}px`;\n    \n    if (maxHeight !== null && maxHeight > 100) {\n      this.popoverEl.style.maxHeight = `${maxHeight}px`;\n      this.popoverEl.style.overflowY = 'auto';\n    } else {\n      this.popoverEl.style.maxHeight = '';\n      this.popoverEl.style.overflowY = '';\n    }\n\n    this.isPositioned = true;\n  }\n\n  render() {\n    const popoverStyles: Record<string, string> = {\n      visibility: this.isPositioned ? 'visible' : 'hidden',\n    };\n    \n    if (this.width) popoverStyles.width = this.width;\n    if (this.minWidth) popoverStyles.minWidth = this.minWidth;\n    if (this.maxWidth) popoverStyles.maxWidth = this.maxWidth;\n\n    return [\n      <div \n        class=\"le-popover-trigger\" \n        ref={(el) => (this.triggerEl = el)}\n        onClick={this.handleTriggerClick}\n      >\n        <slot name=\"trigger\">\n          <button type=\"button\" class=\"le-popover-default-trigger\">\n            <span>⊕</span>\n          </button>\n        </slot>\n      </div>,\n      \n      <div\n        id={this.uniqueId}\n        class=\"le-popover-content\"\n        popover={this.closeOnClickOutside ? 'auto' : 'manual'}\n        ref={(el) => (this.popoverEl = el)}\n        style={popoverStyles}\n      >\n        {(this.popoverTitle || this.showClose) && (\n          <div class=\"le-popover-header\">\n            {this.popoverTitle && <span class=\"le-popover-title\">{this.popoverTitle}</span>}\n            {this.showClose && (\n              <button \n                type=\"button\" \n                class=\"le-popover-close\"\n                onClick={() => this.hide()}\n                aria-label=\"Close\"\n              >\n                ×\n              </button>\n            )}\n          </div>\n        )}\n        <div class=\"le-popover-body\">\n          <slot></slot>\n        </div>\n      </div>\n    ];\n  }\n}\n"],"version":3}

package/dist/components/le-popup.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface LePopup extends Components.LePopup, HTMLElement {}
+export const LePopup: {
+    prototype: LePopup;
+    new (): LePopup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;