atomicuilibrary 0.0.1

package/dist/collection/components/tooltip/tooltip.js

@@ -0,0 +1,1882 @@
+import { Host, h } from "@stencil/core";
+import { sanitizeHTML } from "../../utils/security";
+export class Tooltip {
+    el;
+    /** Tooltip content text */
+    content = '';
+    /** Tooltip position relative to target */
+    position = 'top';
+    /** Trigger type for showing tooltip */
+    trigger = 'hover';
+    /** Visual variant/theme */
+    variant = 'dark';
+    /** Animation type */
+    animation = 'fade-in';
+    /** Show arrow pointer */
+    arrow = true;
+    /** Delay before showing (ms) */
+    showDelay = 0;
+    /** Delay before hiding (ms) */
+    hideDelay = 0;
+    /** Maximum width in pixels */
+    maxWidth = 300;
+    /** Offset from target (px) */
+    offset = 8;
+    /** Enable HTML content */
+    html = false;
+    /** Allow tooltip to be interactive (hoverable) */
+    interactive = false;
+    /** Disable the tooltip */
+    disabled = false;
+    /** Custom CSS class */
+    customClass = '';
+    /** z-index value */
+    zIndex = 9999;
+    /** Follow mouse cursor (only works with hover trigger) */
+    followCursor = false;
+    /** Auto-flip when out of viewport */
+    autoFlip = true;
+    /** Show tooltip immediately on load */
+    visible = false;
+    /** Custom background color (overrides variant) */
+    customColor = '';
+    /** Custom text color */
+    textColor = '';
+    /** Transition duration in milliseconds */
+    transitionDuration = 200;
+    /** Transition timing function */
+    transitionTiming = 'ease';
+    /** Arrow size in pixels */
+    arrowSize = 8;
+    /** Open tooltip at mouse click position (click trigger only) */
+    openAtMousePosition = false;
+    /** Track mouse movement and update tooltip position */
+    trackMouse = false;
+    /** Mouse tracking update interval in ms (for performance) */
+    trackInterval = 16;
+    /** Auto-shift tooltip to stay in viewport */
+    autoShift = true;
+    /** Show close button */
+    closable = false;
+    /** Enable keyboard shortcuts (ESC to close, Tab navigation) */
+    keyboard = true;
+    /** Render tooltip in portal (document.body) */
+    portal = true;
+    /** Allow nested tooltips */
+    allowNested = false;
+    /** Loading state */
+    loading = false;
+    /** Size variant */
+    size = 'md';
+    /** Long press duration for touch devices (ms) */
+    longPressDuration = 500;
+    /** Boundary element selector to constrain tooltip */
+    boundary = '';
+    /** Group ID for shared tooltips */
+    groupId = '';
+    /** Sticky tooltip (requires manual close) */
+    sticky = false;
+    /** Show header slot */
+    showHeader = false;
+    /** Show footer slot */
+    showFooter = false;
+    /** Close on click outside */
+    closeOnClickOutside = true;
+    /** Elevation level (0-5) */
+    elevation = 0;
+    /** Tooltip shape */
+    shape = 'rounded';
+    /** Show premium glow effect */
+    showGlow = false;
+    isVisible = false;
+    isPositioned = false;
+    currentPosition = 'top';
+    cursorX = 0;
+    cursorY = 0;
+    mouseClickX = 0;
+    mouseClickY = 0;
+    touchStartTime = 0;
+    isTouchDevice = false;
+    tooltipShow;
+    tooltipHide;
+    tooltipClick;
+    tooltipMouseEnter;
+    tooltipMouseLeave;
+    tooltipMouseMove;
+    tooltipClose;
+    tooltipKeydown;
+    tooltipTouchStart;
+    tooltipTouchEnd;
+    targetElement;
+    tooltipElement;
+    defaultSlotSource;
+    headerSlotSource;
+    footerSlotSource;
+    defaultSlotTarget;
+    headerSlotTarget;
+    footerSlotTarget;
+    showTimeout;
+    hideTimeout;
+    observer;
+    trackIntervalId = 0;
+    lastTrackTime = 0;
+    resizeObserver;
+    updateRetries = 0;
+    // Static group management
+    static groupListeners = new Map();
+    notifyGroupChange() {
+        if (!this.groupId)
+            return;
+        const listeners = Tooltip.groupListeners.get(this.groupId) || [];
+        listeners.forEach(cb => cb(this.isVisible ? this.groupId : ''));
+    }
+    handleGroupChange = (activeGroupId) => {
+        if (this.groupId && this.groupId === activeGroupId && !this.isVisible) {
+            // Logic for group behavior can go here
+        }
+    };
+    watchVisible(newValue) {
+        if (this.trigger === 'manual') {
+            if (newValue) {
+                this.show();
+            }
+            else {
+                this.hide();
+            }
+        }
+    }
+    componentDidLoad() {
+        this.targetElement = this.el.querySelector('[slot="target"]');
+        if (!this.targetElement) {
+            console.warn('tooltip: No element with slot="target" found');
+            return;
+        }
+        // Detect touch device
+        this.isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+        this.setupEventListeners();
+        // Setup keyboard listener
+        if (this.keyboard) {
+            document.addEventListener('keydown', this.handleKeyDown);
+        }
+        // Show immediately if visible prop is true
+        if (this.visible && this.trigger === 'manual') {
+            this.show();
+        }
+        if (this.observer && this.el) {
+            this.observer.observe(this.el, { childList: true, subtree: true });
+        }
+        // Setup ResizeObserver for the target element to handle layout shifts
+        if (this.targetElement && 'ResizeObserver' in window) {
+            this.resizeObserver = new ResizeObserver(() => {
+                if (this.isVisible) {
+                    this.updatePosition();
+                }
+            });
+            if (this.resizeObserver && this.targetElement) {
+                this.resizeObserver.observe(this.targetElement);
+            }
+        }
+        if (this.groupId) {
+            if (!Tooltip.groupListeners.has(this.groupId)) {
+                Tooltip.groupListeners.set(this.groupId, []);
+            }
+            Tooltip.groupListeners.get(this.groupId).push(this.handleGroupChange);
+        }
+    }
+    disconnectedCallback() {
+        this.removeEventListeners();
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+        this.clearTimeouts();
+        this.removeWindowListeners();
+        if (this.keyboard) {
+            document.removeEventListener('keydown', this.handleKeyDown);
+        }
+        // Remove portal element if exists
+        if (this.portal && this.tooltipElement && this.tooltipElement.parentNode) {
+            this.tooltipElement.parentNode.removeChild(this.tooltipElement);
+        }
+        if (this.groupId) {
+            const listeners = Tooltip.groupListeners.get(this.groupId) || [];
+            const idx = listeners.indexOf(this.handleGroupChange);
+            if (idx !== -1)
+                listeners.splice(idx, 1);
+        }
+    }
+    setupEventListeners() {
+        if (this.disabled)
+            return;
+        switch (this.trigger) {
+            case 'hover':
+                this.targetElement.addEventListener('mouseenter', this.handleMouseEnter);
+                this.targetElement.addEventListener('mouseleave', this.handleMouseLeave);
+                if (this.followCursor) {
+                    this.targetElement.addEventListener('mousemove', this.handleMouseMove);
+                }
+                break;
+            case 'click':
+                this.targetElement.addEventListener('click', this.handleClick);
+                if (this.closeOnClickOutside) {
+                    document.addEventListener('click', this.handleDocumentClick);
+                }
+                break;
+            case 'focus':
+                this.targetElement.addEventListener('focus', this.handleFocus);
+                this.targetElement.addEventListener('blur', this.handleBlur);
+                break;
+        }
+        // Add touch support
+        if (this.isTouchDevice) {
+            this.targetElement.addEventListener('touchstart', this.handleTouchStart);
+            this.targetElement.addEventListener('touchend', this.handleTouchEnd);
+            this.targetElement.addEventListener('touchcancel', this.handleTouchCancel);
+        }
+    }
+    removeEventListeners() {
+        if (this.targetElement) {
+            this.targetElement.removeEventListener('mouseenter', this.handleMouseEnter);
+            this.targetElement.removeEventListener('mouseleave', this.handleMouseLeave);
+            this.targetElement.removeEventListener('mousemove', this.handleMouseMove);
+            this.targetElement.removeEventListener('click', this.handleClick);
+            this.targetElement.removeEventListener('focus', this.handleFocus);
+            this.targetElement.removeEventListener('blur', this.handleBlur);
+            this.targetElement.removeEventListener('touchstart', this.handleTouchStart);
+            this.targetElement.removeEventListener('touchend', this.handleTouchEnd);
+            this.targetElement.removeEventListener('touchcancel', this.handleTouchCancel);
+        }
+        document.removeEventListener('click', this.handleDocumentClick);
+    }
+    clearTimeouts() {
+        if (this.showTimeout)
+            clearTimeout(this.showTimeout);
+        if (this.hideTimeout)
+            clearTimeout(this.hideTimeout);
+        if (this.trackIntervalId) {
+            cancelAnimationFrame(this.trackIntervalId);
+            this.trackIntervalId = 0;
+        }
+    }
+    handleMouseEnter = (e) => {
+        if (this.trackMouse) {
+            this.cursorX = e.clientX;
+            this.cursorY = e.clientY;
+            this.tooltipMouseEnter.emit(e);
+        }
+        this.clearTimeouts();
+        this.showTimeout = window.setTimeout(() => {
+            this.show();
+        }, this.showDelay);
+    };
+    handleMouseLeave = (e) => {
+        this.tooltipMouseLeave.emit(e);
+        this.clearTimeouts();
+        if (this.trackIntervalId) {
+            cancelAnimationFrame(this.trackIntervalId);
+        }
+        if (!this.interactive) {
+            this.hideTimeout = window.setTimeout(() => {
+                this.hide();
+            }, this.hideDelay);
+        }
+        else {
+            // For interactive tooltips, check if mouse enters tooltip
+            this.hideTimeout = window.setTimeout(() => {
+                if (this.tooltipElement && !this.tooltipElement.matches(':hover')) {
+                    this.hide();
+                }
+            }, this.hideDelay + 100);
+        }
+    };
+    handleMouseMove = (e) => {
+        if (this.followCursor || this.trackMouse) {
+            const now = performance.now();
+            if (now - this.lastTrackTime >= this.trackInterval) {
+                this.cursorX = e.clientX;
+                this.cursorY = e.clientY;
+                this.tooltipMouseMove.emit({ x: this.cursorX, y: this.cursorY });
+                this.lastTrackTime = now;
+                if (this.isVisible && (this.followCursor || this.trackMouse)) {
+                    this.updatePosition();
+                }
+            }
+        }
+    };
+    handleClick = (e) => {
+        e.stopPropagation();
+        if (this.openAtMousePosition) {
+            this.mouseClickX = e.clientX;
+            this.mouseClickY = e.clientY;
+        }
+        this.tooltipClick.emit(e);
+        if (this.isVisible) {
+            this.forceHide();
+        }
+        else {
+            this.show();
+        }
+    };
+    handleDocumentClick = (e) => {
+        if (this.isVisible && this.trigger === 'click') {
+            const target = e.target;
+            if (!this.el.contains(target) && this.tooltipElement && !this.tooltipElement.contains(target)) {
+                this.hide();
+            }
+        }
+    };
+    handleFocus = () => {
+        this.show();
+    };
+    handleBlur = () => {
+        this.hide();
+    };
+    handleKeyDown = (e) => {
+        if (!this.keyboard || !this.isVisible)
+            return;
+        this.tooltipKeydown.emit(e);
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            this.handleClose();
+        }
+    };
+    handleTouchStart = (e) => {
+        this.touchStartTime = Date.now();
+        this.tooltipTouchStart.emit(e);
+    };
+    handleTouchEnd = (e) => {
+        const touchDuration = Date.now() - this.touchStartTime;
+        this.tooltipTouchEnd.emit(e);
+        if (touchDuration >= this.longPressDuration) {
+            e.preventDefault();
+            if (this.isVisible) {
+                this.hide();
+            }
+            else {
+                this.show();
+            }
+        }
+    };
+    handleTouchCancel = () => {
+        this.touchStartTime = 0;
+    };
+    handleClose = () => {
+        this.tooltipClose.emit();
+        this.forceHide();
+    };
+    handleWindowEvents = () => {
+        if (this.isVisible) {
+            this.updatePosition();
+        }
+    };
+    addWindowListeners() {
+        window.addEventListener('resize', this.handleWindowEvents);
+        window.addEventListener('scroll', this.handleWindowEvents, true);
+    }
+    removeWindowListeners() {
+        window.removeEventListener('resize', this.handleWindowEvents);
+        window.removeEventListener('scroll', this.handleWindowEvents, true);
+    }
+    handleTooltipMouseEnter = () => {
+        if (this.interactive) {
+            this.clearTimeouts();
+        }
+    };
+    handleTooltipMouseLeave = () => {
+        if (this.interactive) {
+            this.hideTimeout = window.setTimeout(() => {
+                this.hide();
+            }, this.hideDelay);
+        }
+    };
+    migrateSlotsToTooltip() {
+        if (!this.tooltipElement)
+            return;
+        // Helper to move nodes from source to target
+        const move = (source, target) => {
+            if (!source || !target)
+                return;
+            while (source.firstChild) {
+                target.appendChild(source.firstChild);
+            }
+        };
+        if (this.headerSlotSource && this.headerSlotTarget) {
+            move(this.headerSlotSource, this.headerSlotTarget);
+        }
+        if (this.defaultSlotSource && this.defaultSlotTarget) {
+            move(this.defaultSlotSource, this.defaultSlotTarget);
+        }
+        if (this.footerSlotSource && this.footerSlotTarget) {
+            move(this.footerSlotSource, this.footerSlotTarget);
+        }
+    }
+    restoreSlotsToHost() {
+        if (!this.tooltipElement)
+            return;
+        // Helper to move nodes from target back to source
+        const move = (target, source) => {
+            if (!source || !target)
+                return;
+            while (target.firstChild) {
+                // Skip internal elements like spinners
+                const node = target.firstChild;
+                if (node instanceof HTMLElement && node.classList.contains('tooltip-loading-spinner')) {
+                    target.removeChild(node);
+                    continue;
+                }
+                source.appendChild(node);
+            }
+        };
+        if (this.headerSlotTarget && this.headerSlotSource) {
+            move(this.headerSlotTarget, this.headerSlotSource);
+        }
+        if (this.defaultSlotTarget && this.defaultSlotSource) {
+            move(this.defaultSlotTarget, this.defaultSlotSource);
+        }
+        if (this.footerSlotTarget && this.footerSlotSource) {
+            move(this.footerSlotTarget, this.footerSlotSource);
+        }
+    }
+    async show() {
+        if (this.disabled || this.isVisible)
+            return;
+        this.isVisible = true;
+        this.isPositioned = false;
+        // Wait for render then position; track the RAF so disconnectedCallback can cancel it.
+        this.trackIntervalId = requestAnimationFrame(() => {
+            this.trackIntervalId = requestAnimationFrame(() => {
+                this.trackIntervalId = 0;
+                // Guard: skip if component was disconnected before this RAF fired.
+                if (!this.el.isConnected)
+                    return;
+                if (this.portal && this.tooltipElement && this.tooltipElement.parentElement !== document.body) {
+                    document.body.appendChild(this.tooltipElement);
+                }
+                this.addWindowListeners();
+                this.migrateSlotsToTooltip();
+                this.updatePosition();
+                this.isPositioned = true;
+                this.tooltipShow.emit({ position: this.currentPosition });
+                this.notifyGroupChange();
+            });
+        });
+    }
+    async hide() {
+        if (!this.isVisible)
+            return;
+        this.isPositioned = false;
+        // Don't hide sticky tooltips unless explicitly closed
+        if (this.sticky)
+            return;
+        // Move back to host if portaled so Stencil can unmount it correctly
+        if (this.portal && this.tooltipElement && this.tooltipElement.parentElement === document.body) {
+            this.restoreSlotsToHost();
+            this.el.appendChild(this.tooltipElement);
+        }
+        else {
+            this.restoreSlotsToHost();
+        }
+        this.removeWindowListeners();
+        this.isVisible = false;
+        this.tooltipHide.emit();
+        this.notifyGroupChange();
+    }
+    async forceHide() {
+        if (!this.isVisible)
+            return;
+        this.isPositioned = false;
+        // Move back to host if portaled so Stencil can unmount it correctly
+        if (this.portal && this.tooltipElement && this.tooltipElement.parentElement === document.body) {
+            this.restoreSlotsToHost();
+            this.el.appendChild(this.tooltipElement);
+        }
+        else {
+            this.restoreSlotsToHost();
+        }
+        this.removeWindowListeners();
+        this.isVisible = false;
+        this.tooltipHide.emit();
+    }
+    async toggle() {
+        if (this.isVisible) {
+            this.hide();
+        }
+        else {
+            this.show();
+        }
+    }
+    updatePosition() {
+        if (!this.tooltipElement || !this.targetElement)
+            return;
+        const targetRect = this.targetElement.getBoundingClientRect();
+        // Force a reflow to ensure we get accurate dimensions
+        void this.tooltipElement.offsetHeight;
+        const tooltipRect = this.tooltipElement.getBoundingClientRect();
+        const offset = this.offset;
+        // If tooltip hasn't rendered yet, try again (up to 5 times)
+        if (tooltipRect.width === 0 || tooltipRect.height === 0) {
+            if (this.updateRetries < 5) {
+                this.updateRetries++;
+                this.trackIntervalId = requestAnimationFrame(() => this.updatePosition());
+            }
+            return;
+        }
+        this.updateRetries = 0;
+        let position = this.position === 'auto' ? 'top' : this.position;
+        // Calculate positions
+        const positions = {
+            'top': {
+                top: targetRect.top - tooltipRect.height - offset,
+                left: targetRect.left + (targetRect.width - tooltipRect.width) / 2,
+            },
+            'bottom': {
+                top: targetRect.bottom + offset,
+                left: targetRect.left + (targetRect.width - tooltipRect.width) / 2,
+            },
+            'left': {
+                top: targetRect.top + (targetRect.height - tooltipRect.height) / 2,
+                left: targetRect.left - tooltipRect.width - offset,
+            },
+            'right': {
+                top: targetRect.top + (targetRect.height - tooltipRect.height) / 2,
+                left: targetRect.right + offset,
+            },
+            'top-left': {
+                top: targetRect.top - tooltipRect.height - offset,
+                left: targetRect.left,
+            },
+            'top-right': {
+                top: targetRect.top - tooltipRect.height - offset,
+                left: targetRect.right - tooltipRect.width,
+            },
+            'bottom-left': {
+                top: targetRect.bottom + offset,
+                left: targetRect.left,
+            },
+            'bottom-right': {
+                top: targetRect.bottom + offset,
+                left: targetRect.right - tooltipRect.width,
+            },
+        };
+        // Open at mouse click position if enabled (click trigger)
+        if (this.openAtMousePosition && this.trigger === 'click' && this.mouseClickX && this.mouseClickY) {
+            positions[position] = {
+                top: this.mouseClickY + offset,
+                left: this.mouseClickX + offset,
+            };
+        }
+        // Follow cursor if enabled
+        else if ((this.followCursor || this.trackMouse) && this.trigger === 'hover') {
+            positions[position] = {
+                top: this.cursorY + offset,
+                left: this.cursorX + offset,
+            };
+        }
+        let finalPosition = position;
+        let coords = positions[position];
+        // Auto-flip if out of viewport
+        if (this.autoFlip && !this.followCursor && !this.trackMouse && !this.openAtMousePosition) {
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            // Check if tooltip goes outside viewport
+            if (coords.top < 0 && (position.includes('top'))) {
+                finalPosition = position.replace('top', 'bottom');
+                coords = positions[finalPosition] || positions['bottom'];
+            }
+            else if (coords.top + tooltipRect.height > viewportHeight && position.includes('bottom')) {
+                finalPosition = position.replace('bottom', 'top');
+                coords = positions[finalPosition] || positions['top'];
+            }
+            if (coords.left < 0 && position.includes('left')) {
+                finalPosition = position.replace('left', 'right');
+                coords = positions[finalPosition] || positions['right'];
+            }
+            else if (coords.left + tooltipRect.width > viewportWidth && position.includes('right')) {
+                finalPosition = position.replace('right', 'left');
+                coords = positions[finalPosition] || positions['left'];
+            }
+        }
+        // Auto-shift to keep tooltip in viewport or boundary
+        if (this.autoShift) {
+            let boundaryRect = {
+                top: 0,
+                left: 0,
+                width: window.innerWidth,
+                height: window.innerHeight,
+            };
+            // Use custom boundary if specified
+            if (this.boundary) {
+                const boundaryEl = document.querySelector(this.boundary);
+                if (boundaryEl) {
+                    const rect = boundaryEl.getBoundingClientRect();
+                    boundaryRect = {
+                        top: rect.top,
+                        left: rect.left,
+                        width: rect.width,
+                        height: rect.height,
+                    };
+                }
+            }
+            const padding = 8;
+            // Shift horizontally
+            if (coords.left < boundaryRect.left + padding) {
+                coords.left = boundaryRect.left + padding;
+            }
+            else if (coords.left + tooltipRect.width > boundaryRect.left + boundaryRect.width - padding) {
+                coords.left = boundaryRect.left + boundaryRect.width - tooltipRect.width - padding;
+            }
+            // Shift vertically
+            if (coords.top < boundaryRect.top + padding) {
+                coords.top = boundaryRect.top + padding;
+            }
+            else if (coords.top + tooltipRect.height > boundaryRect.top + boundaryRect.height - padding) {
+                coords.top = boundaryRect.top + boundaryRect.height - tooltipRect.height - padding;
+            }
+        }
+        this.currentPosition = finalPosition;
+        // Apply position (using fixed positioning, no need for scroll offset)
+        // Ensure coordinates are valid numbers
+        const finalTop = Math.max(0, Math.round(coords.top));
+        const finalLeft = Math.max(0, Math.round(coords.left));
+        this.tooltipElement.style.top = `${finalTop}px`;
+        this.tooltipElement.style.left = `${finalLeft}px`;
+    }
+    render() {
+        const tooltipClasses = {
+            'tooltip': true,
+            'tooltip-visible': this.isVisible && this.isPositioned,
+            [`tooltip-${this.variant}`]: !this.customColor && !this.textColor,
+            [`tooltip-${this.currentPosition}`]: true,
+            [`tooltip-${this.size}`]: true,
+            [`tooltip-animation-${this.animation}`]: true,
+            'tooltip-interactive': this.interactive,
+            'tooltip-follow-cursor': this.followCursor || this.trackMouse,
+            'tooltip-custom-color': !!this.customColor || !!this.textColor,
+            'tooltip-loading': this.loading,
+            'tooltip-sticky': this.sticky,
+            'tooltip-closable': this.closable,
+            'tooltip-glow': this.showGlow,
+            [`tooltip-elevation-${this.elevation}`]: this.elevation > 0,
+            [`tooltip-shape-${this.shape}`]: true,
+            ...(this.customClass ? { [this.customClass]: true } : {}),
+        };
+        const tooltipContent = (h("div", { key: 'd08971e832d6bb9f6975de4162afaee0025d6d98', class: tooltipClasses, style: {
+                '--tooltip-max-width': `${this.maxWidth}px`,
+                '--tooltip-z-index': this.zIndex.toString(),
+                '--tooltip-transition-duration': `${this.transitionDuration}ms`,
+                '--tooltip-transition-timing': this.transitionTiming,
+                '--tooltip-arrow-size': `${this.arrowSize}px`,
+                ...(this.customColor ? { '--tooltip-bg-color': this.customColor } : {}),
+                ...(this.textColor ? { '--tooltip-text-color': this.textColor } : {}),
+            }, ref: el => this.tooltipElement = el, onMouseEnter: this.handleTooltipMouseEnter, onMouseLeave: this.handleTooltipMouseLeave, role: "tooltip", "aria-live": "polite" }, this.closable && (h("ui-button", { key: '8744809203573938ea08f72665c75e63a9c37e79', variant: "ghost", class: "tooltip-close", onClick: this.handleClose, ariaLabel: "Close tooltip", icon: "x", iconLibrary: "lucide", iconOnly: true, size: "sm" })), this.showHeader && (h("div", { key: 'f5675e917f299a2b2d9279ef6b4d06c21696e32a', class: "tooltip-header" }, h("div", { key: 'f2317e5f214ca6bcf92ad314840013e2f298c203', ref: el => this.headerSlotTarget = el }))), h("div", { key: 'e4e5a79aeddaa5e00d60f3b12e96c169f147dae8', class: "tooltip-content" }, this.loading ? (h("div", { class: "tooltip-loading-spinner" }, h("ui-icon", { name: "loader", library: "lucide", spin: true }), h("span", null, "Loading..."))) : (this.html ? (h("div", { innerHTML: sanitizeHTML(this.content) })) : (h("span", null, this.content))), h("div", { key: '87c26e2908df6ee6652d22e219dddc6c6f8ad36e', class: "tooltip-slot-content", ref: el => this.defaultSlotTarget = el })), this.showFooter && (h("div", { key: '9fe03747ba4fe5f3fcccede2c49540a9a7c9d696', class: "tooltip-footer" }, h("div", { key: 'f55cc3ddbfbcaf0e45e03dcb1971b696cd566150', ref: el => this.footerSlotTarget = el }))), this.arrow && h("div", { key: '30d603a7d56a57fca73c3cb9a6420cdabde31ead', class: "tooltip-arrow" })));
+        return (h(Host, { key: '51577771914e7712be4e008b3cfa79683b06e3c2' }, h("div", { key: 'a5240a2c60d7dc9e2207d9c95fc8b860ab67efa1', class: "tooltip-wrapper" }, h("slot", { key: 'ce3a6106b2e281774e0281a5f72aeaa9fd84a37a', name: "target" })), this.isVisible && tooltipContent, h("div", { key: '91c1f89da5c9e24779a874d61862d02fa332749b', class: "tooltip-slot-source", style: { display: 'none' }, "aria-hidden": "true" }, h("div", { key: '2ed6c8792820b8306ba30083dc62528cf935092b', ref: el => this.defaultSlotSource = el }, h("slot", { key: 'd7b2237ccecaa53b6f3bf2afb87763abcec4fb20' })), h("div", { key: '9844aa3ec9a673f9ff2fc3fe20f350d3c3163f30', ref: el => this.headerSlotSource = el }, h("slot", { key: '538fdd565105d73df273bcdcc4e4d147b333deed', name: "header" })), h("div", { key: '2f6a44286d07483e4698b140fb22fa0c2c5d1b3b', ref: el => this.footerSlotSource = el }, h("slot", { key: '07c51076ab6df9792bdb737976f8b052908c5cfb', name: "footer" })))));
+    }
+    static get is() { return "ui-tooltip"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tooltip.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tooltip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "content": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip content text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "content",
+                "defaultValue": "''"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FourSidePosition|FourCornerPosition | 'auto'",
+                    "resolved": "\"auto\" | \"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"right\" | \"top\" | \"top-left\" | \"top-right\"",
+                    "references": {
+                        "FourSidePosition": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::FourSidePosition",
+                            "referenceLocation": "FourSidePosition"
+                        },
+                        "FourCornerPosition": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::FourCornerPosition",
+                            "referenceLocation": "FourCornerPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip position relative to target"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "position",
+                "defaultValue": "'top'"
+            },
+            "trigger": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TriggerType",
+                    "resolved": "\"click\" | \"focus\" | \"hover\" | \"manual\"",
+                    "references": {
+                        "TriggerType": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::TriggerType",
+                            "referenceLocation": "TriggerType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Trigger type for showing tooltip"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trigger",
+                "defaultValue": "'hover'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TooltipVariant",
+                    "resolved": "\"borderless\" | \"danger\" | \"dark\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"light\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\"",
+                    "references": {
+                        "TooltipVariant": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/tooltip/types.ts::TooltipVariant",
+                            "referenceLocation": "TooltipVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant/theme"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'dark'"
+            },
+            "animation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AnimationEffect",
+                    "resolved": "\"bounce\" | \"expand\" | \"fade\" | \"fade-down\" | \"fade-in\" | \"fade-in-out\" | \"fade-left\" | \"fade-out\" | \"fade-right\" | \"fade-up\" | \"flip\" | \"flip-x\" | \"flip-y\" | \"float\" | \"none\" | \"pulse\" | \"ripple\" | \"rotate\" | \"scale\" | \"shake\" | \"shimmer\" | \"slide\" | \"slide-down\" | \"slide-in\" | \"slide-in-out\" | \"slide-left\" | \"slide-left-right\" | \"slide-out\" | \"slide-right\" | \"slide-up\" | \"slide-up-down\" | \"spin\" | \"spring\" | \"swing\" | \"wave\" | \"wobble\" | \"zoom\" | \"zoom-in\" | \"zoom-out\"",
+                    "references": {
+                        "AnimationEffect": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::AnimationEffect",
+                            "referenceLocation": "AnimationEffect"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Animation type"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animation",
+                "defaultValue": "'fade-in'"
+            },
+            "arrow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show arrow pointer"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "arrow",
+                "defaultValue": "true"
+            },
+            "showDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Delay before showing (ms)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-delay",
+                "defaultValue": "0"
+            },
+            "hideDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Delay before hiding (ms)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-delay",
+                "defaultValue": "0"
+            },
+            "maxWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum width in pixels"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-width",
+                "defaultValue": "300"
+            },
+            "offset": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Offset from target (px)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "offset",
+                "defaultValue": "8"
+            },
+            "html": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable HTML content"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "html",
+                "defaultValue": "false"
+            },
+            "interactive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow tooltip to be interactive (hoverable)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "interactive",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable the tooltip"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "customClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom CSS class"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-class",
+                "defaultValue": "''"
+            },
+            "zIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "z-index value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "z-index",
+                "defaultValue": "9999"
+            },
+            "followCursor": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Follow mouse cursor (only works with hover trigger)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "follow-cursor",
+                "defaultValue": "false"
+            },
+            "autoFlip": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Auto-flip when out of viewport"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-flip",
+                "defaultValue": "true"
+            },
+            "visible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show tooltip immediately on load"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "visible",
+                "defaultValue": "false"
+            },
+            "customColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom background color (overrides variant)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-color",
+                "defaultValue": "''"
+            },
+            "textColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom text color"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-color",
+                "defaultValue": "''"
+            },
+            "transitionDuration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Transition duration in milliseconds"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "transition-duration",
+                "defaultValue": "200"
+            },
+            "transitionTiming": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AnimationEasing",
+                    "resolved": "string",
+                    "references": {
+                        "AnimationEasing": {
+                            "location": "import",
+                            "path": "../../types/animation.type",
+                            "id": "src/types/animation.type.d.ts::AnimationEasing",
+                            "referenceLocation": "AnimationEasing"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Transition timing function"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "transition-timing",
+                "defaultValue": "'ease'"
+            },
+            "arrowSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Arrow size in pixels"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "arrow-size",
+                "defaultValue": "8"
+            },
+            "openAtMousePosition": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Open tooltip at mouse click position (click trigger only)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open-at-mouse-position",
+                "defaultValue": "false"
+            },
+            "trackMouse": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Track mouse movement and update tooltip position"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "track-mouse",
+                "defaultValue": "false"
+            },
+            "trackInterval": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mouse tracking update interval in ms (for performance)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "track-interval",
+                "defaultValue": "16"
+            },
+            "autoShift": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Auto-shift tooltip to stay in viewport"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-shift",
+                "defaultValue": "true"
+            },
+            "closable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show close button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "closable",
+                "defaultValue": "false"
+            },
+            "keyboard": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable keyboard shortcuts (ESC to close, Tab navigation)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "keyboard",
+                "defaultValue": "true"
+            },
+            "portal": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Render tooltip in portal (document.body)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "portal",
+                "defaultValue": "true"
+            },
+            "allowNested": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow nested tooltips"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "allow-nested",
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Loading state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BasicSize",
+                    "resolved": "\"default\" | \"large\" | \"lg\" | \"md\" | \"medium\" | \"sm\" | \"small\"",
+                    "references": {
+                        "BasicSize": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::BasicSize",
+                            "referenceLocation": "BasicSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "longPressDuration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Long press duration for touch devices (ms)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "long-press-duration",
+                "defaultValue": "500"
+            },
+            "boundary": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Boundary element selector to constrain tooltip"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "boundary",
+                "defaultValue": "''"
+            },
+            "groupId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Group ID for shared tooltips"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "group-id",
+                "defaultValue": "''"
+            },
+            "sticky": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sticky tooltip (requires manual close)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sticky",
+                "defaultValue": "false"
+            },
+            "showHeader": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show header slot"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-header",
+                "defaultValue": "false"
+            },
+            "showFooter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show footer slot"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-footer",
+                "defaultValue": "false"
+            },
+            "closeOnClickOutside": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Close on click outside"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-on-click-outside",
+                "defaultValue": "true"
+            },
+            "elevation": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Elevation level (0-5)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "elevation",
+                "defaultValue": "0"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TooltipShape",
+                    "resolved": "\"pill\" | \"rounded\" | \"square\"",
+                    "references": {
+                        "TooltipShape": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::TooltipShape",
+                            "referenceLocation": "TooltipShape"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip shape"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shape",
+                "defaultValue": "'rounded'"
+            },
+            "showGlow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show premium glow effect"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-glow",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isVisible": {},
+            "isPositioned": {},
+            "currentPosition": {},
+            "cursorX": {},
+            "cursorY": {},
+            "mouseClickX": {},
+            "mouseClickY": {},
+            "touchStartTime": {},
+            "isTouchDevice": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tooltipShow",
+                "name": "tooltipShow",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ position: string }",
+                    "resolved": "{ position: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "tooltipHide",
+                "name": "tooltipHide",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "tooltipClick",
+                "name": "tooltipClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "tooltipMouseEnter",
+                "name": "tooltipMouseEnter",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "tooltipMouseLeave",
+                "name": "tooltipMouseLeave",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "tooltipMouseMove",
+                "name": "tooltipMouseMove",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ x: number; y: number }",
+                    "resolved": "{ x: number; y: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "tooltipClose",
+                "name": "tooltipClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "tooltipKeydown",
+                "name": "tooltipKeydown",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "KeyboardEvent",
+                    "resolved": "KeyboardEvent",
+                    "references": {
+                        "KeyboardEvent": {
+                            "location": "global",
+                            "id": "global::KeyboardEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "tooltipTouchStart",
+                "name": "tooltipTouchStart",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "TouchEvent",
+                    "resolved": "TouchEvent",
+                    "references": {
+                        "TouchEvent": {
+                            "location": "global",
+                            "id": "global::TouchEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "tooltipTouchEnd",
+                "name": "tooltipTouchEnd",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "TouchEvent",
+                    "resolved": "TouchEvent",
+                    "references": {
+                        "TouchEvent": {
+                            "location": "global",
+                            "id": "global::TouchEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "forceHide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "visible",
+                "methodName": "watchVisible"
+            }];
+    }
+}