@substrate-system/tool-tip 0.0.0

package/dist/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts"],
+  "sourcesContent": ["// for document.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'tool-tip':ToolTip\n    }\n}\n\nexport type Placement =\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'\n\nexport type Trigger = 'hover'|'focus'|'click'|'manual'\n\nexport class ToolTip extends HTMLElement {\n    static observedAttributes = ['content', 'placement', 'disabled',\n        'open', 'distance', 'skidding']\n\n    private popup: HTMLDivElement | null = null\n    private arrow: HTMLDivElement | null = null\n    private target: HTMLElement | null = null\n\n    private _open = false\n    private _disabled = false\n\n    get content (): string {\n        return this.getAttribute('content') || ''\n    }\n\n    set content (value: string) {\n        this.setAttribute('content', value)\n    }\n\n    get placement (): Placement {\n        return (this.getAttribute('placement') as Placement) || 'top'\n    }\n\n    set placement (value: Placement) {\n        this.setAttribute('placement', value)\n    }\n\n    get trigger (): Trigger[] {\n        const attr = this.getAttribute('trigger') || 'hover focus'\n        return attr.split(' ').filter(Boolean) as Trigger[]\n    }\n\n    set trigger (value: Trigger[] | string) {\n        if (Array.isArray(value)) {\n            this.setAttribute('trigger', value.join(' '))\n        } else {\n            this.setAttribute('trigger', value)\n        }\n    }\n\n    get disabled (): boolean {\n        return this._disabled\n    }\n\n    set disabled (value: boolean) {\n        this._disabled = value\n        if (value) {\n            this.setAttribute('disabled', '')\n        } else {\n            this.removeAttribute('disabled')\n        }\n    }\n\n    get open (): boolean {\n        return this._open\n    }\n\n    set open (value: boolean) {\n        if (this._disabled) return\n        const wasOpen = this._open\n        this._open = value\n\n        if (value && !wasOpen) {\n            this.showTooltip()\n        } else if (!value && wasOpen) {\n            this.hideTooltip()\n        }\n    }\n\n    get distance (): number {\n        return parseInt(this.getAttribute('distance') || '8', 10)\n    }\n\n    set distance (value: number) {\n        this.setAttribute('distance', String(value))\n    }\n\n    get skidding (): number {\n        return parseInt(this.getAttribute('skidding') || '0', 10)\n    }\n\n    set skidding (value: number) {\n        this.setAttribute('skidding', String(value))\n    }\n\n    get hoist (): boolean {\n        return this.hasAttribute('hoist')\n    }\n\n    set hoist (value: boolean) {\n        if (value) {\n            this.setAttribute('hoist', '')\n        } else {\n            this.removeAttribute('hoist')\n        }\n    }\n\n    connectedCallback () {\n        // Use display: contents so the tooltip doesn't affect layout\n        this.style.display = 'contents'\n\n        // Find the target element (first child element)\n        this.target = this.firstElementChild as HTMLElement\n\n        if (!this.target) {\n            console.warn('tool-tip: No target element found. ' +\n                'Add a child element.')\n            return\n        }\n\n        // Create the popup element\n        this.createPopup()\n\n        // Bind event handlers\n        this.bindEvents()\n\n        // Check if open attribute is set\n        if (this.hasAttribute('open')) {\n            this._open = true\n            this.showTooltip()\n        }\n    }\n\n    disconnectedCallback () {\n        this.unbindEvents()\n        this.popup?.remove()\n    }\n\n    attributeChangedCallback (\n        name:string,\n        _oldValue:string|null,\n        newValue:string|null\n    ) {\n        if (name === 'content' && this.popup) {\n            const body = this.popup.querySelector('.tool-tip__body')\n            if (body) {\n                body.textContent = newValue || ''\n            }\n        }\n\n        if (name === 'placement' && this._open) {\n            this.positionPopup()\n        }\n\n        if (name === 'disabled') {\n            this._disabled = newValue !== null\n            if (this._disabled && this._open) {\n                this.hide()\n            }\n        }\n\n        if (name === 'open') {\n            this.open = newValue !== null\n        }\n\n        if ((name === 'distance' || name === 'skidding') && this._open) {\n            this.positionPopup()\n        }\n    }\n\n    private createPopup () {\n        this.popup = document.createElement('div')\n        this.popup.className = 'tool-tip__popup'\n        this.popup.setAttribute('role', 'tooltip')\n        this.popup.setAttribute('aria-hidden', 'true')\n        this.popup.innerHTML = `\n            <div class=\"tool-tip__body\">${this.content}</div>\n            <div class=\"tool-tip__arrow\"></div>\n        `\n\n        this.arrow = this.popup.querySelector('.tool-tip__arrow')\n\n        // Append to body if hoisted, otherwise to this element's parent\n        if (this.hoist) {\n            document.body.appendChild(this.popup)\n        } else {\n            this.appendChild(this.popup)\n        }\n    }\n\n    private bindEvents () {\n        if (!this.target) return\n\n        const triggers = this.trigger\n\n        if (triggers.includes('hover')) {\n            this.target.addEventListener('mouseenter', this.handleMouseEnter)\n            this.target.addEventListener('mouseleave', this.handleMouseLeave)\n        }\n\n        if (triggers.includes('focus')) {\n            this.target.addEventListener('focus', this.handleFocus)\n            this.target.addEventListener('blur', this.handleBlur)\n        }\n\n        if (triggers.includes('click')) {\n            this.target.addEventListener('click', this.handleClick)\n        }\n\n        // Add keyboard support\n        this.target.addEventListener('keydown', this.handleKeyDown)\n    }\n\n    private unbindEvents () {\n        if (!this.target) return\n\n        this.target.removeEventListener('mouseenter', this.handleMouseEnter)\n        this.target.removeEventListener('mouseleave', this.handleMouseLeave)\n        this.target.removeEventListener('focus', this.handleFocus)\n        this.target.removeEventListener('blur', this.handleBlur)\n        this.target.removeEventListener('click', this.handleClick)\n        this.target.removeEventListener('keydown', this.handleKeyDown)\n    }\n\n    private handleMouseEnter = () => {\n        this.show()\n    }\n\n    private handleMouseLeave = () => {\n        this.hide()\n    }\n\n    private handleFocus = () => {\n        this.show()\n    }\n\n    private handleBlur = () => {\n        this.hide()\n    }\n\n    private handleClick = () => {\n        if (this._open) {\n            this.hide()\n        } else {\n            this.show()\n        }\n    }\n\n    private handleKeyDown = (event: KeyboardEvent) => {\n        // Close tooltip on Escape\n        if (event.key === 'Escape' && this._open) {\n            this.hide()\n        }\n    }\n\n    private showTooltip () {\n        if (!this.popup || this._disabled) return\n\n        // Emit show event\n        const showEvent = new CustomEvent('tool-tip-show', {\n            bubbles: true,\n            cancelable: true,\n        })\n        if (!this.dispatchEvent(showEvent)) return\n\n        this.popup.classList.add('tool-tip__popup--visible')\n        this.popup.setAttribute('aria-hidden', 'false')\n\n        // Position the popup\n        this.positionPopup()\n\n        // Emit after-show event\n        this.dispatchEvent(new CustomEvent('tool-tip-after-show', {\n            bubbles: true\n        }))\n    }\n\n    private hideTooltip () {\n        if (!this.popup) return\n\n        // Emit hide event\n        const hideEvent = new CustomEvent('tool-tip-hide', {\n            bubbles: true,\n            cancelable: true,\n        })\n        if (!this.dispatchEvent(hideEvent)) return\n\n        this.popup.classList.remove('tool-tip__popup--visible')\n        this.popup.setAttribute('aria-hidden', 'true')\n\n        // Emit after-hide event\n        this.dispatchEvent(new CustomEvent('tool-tip-after-hide', {\n            bubbles: true\n        }))\n    }\n\n    private positionPopup () {\n        if (!this.popup || !this.target) return\n\n        const targetRect = this.target.getBoundingClientRect()\n        const popupRect = this.popup.getBoundingClientRect()\n        const arrowSize = 8\n\n        let top = 0\n        let left = 0\n        let arrowTop = ''\n        let arrowLeft = ''\n        let arrowTransform = ''\n\n        const distance = this.distance\n        const skidding = this.skidding\n        const placement = this.getOptimalPlacement(targetRect, popupRect)\n\n        // Set data attribute for CSS styling\n        this.popup.dataset.placement = placement\n\n        switch (placement) {\n            case 'top':\n                top = targetRect.top - popupRect.height - distance - arrowSize\n                left = targetRect.left + (targetRect.width / 2) -\n                    (popupRect.width / 2) + skidding\n                arrowTop = '100%'\n                arrowLeft = '50%'\n                arrowTransform = 'translateX(-50%)'\n                break\n            case 'top-start':\n                top = targetRect.top - popupRect.height - distance - arrowSize\n                left = targetRect.left + skidding\n                arrowTop = '100%'\n                arrowLeft = `${Math.min(24, popupRect.width / 2)}px`\n                arrowTransform = 'translateX(-50%)'\n                break\n            case 'top-end':\n                top = targetRect.top - popupRect.height - distance - arrowSize\n                left = targetRect.right - popupRect.width + skidding\n                arrowTop = '100%'\n                arrowLeft = `calc(100% - ${Math.min(24, popupRect.width / 2)}px)`\n                arrowTransform = 'translateX(-50%)'\n                break\n            case 'bottom':\n                top = targetRect.bottom + distance + arrowSize\n                left = targetRect.left + (targetRect.width / 2) -\n                    (popupRect.width / 2) + skidding\n                arrowTop = '0'\n                arrowLeft = '50%'\n                arrowTransform = 'translateX(-50%) translateY(-100%)'\n                break\n            case 'bottom-start':\n                top = targetRect.bottom + distance + arrowSize\n                left = targetRect.left + skidding\n                arrowTop = '0'\n                arrowLeft = `${Math.min(24, popupRect.width / 2)}px`\n                arrowTransform = 'translateX(-50%) translateY(-100%)'\n                break\n            case 'bottom-end':\n                top = targetRect.bottom + distance + arrowSize\n                left = targetRect.right - popupRect.width + skidding\n                arrowTop = '0'\n                arrowLeft = `calc(100% - ${Math.min(24, popupRect.width / 2)}px)`\n                arrowTransform = 'translateX(-50%) translateY(-100%)'\n                break\n            case 'left':\n                top = targetRect.top + (targetRect.height / 2) -\n                    (popupRect.height / 2) + skidding\n                left = targetRect.left - popupRect.width - distance - arrowSize\n                arrowTop = '50%'\n                arrowLeft = '100%'\n                arrowTransform = 'translateY(-50%)'\n                break\n            case 'left-start':\n                top = targetRect.top + skidding\n                left = targetRect.left - popupRect.width - distance - arrowSize\n                arrowTop = `${Math.min(16, popupRect.height / 2)}px`\n                arrowLeft = '100%'\n                arrowTransform = 'translateY(-50%)'\n                break\n            case 'left-end':\n                top = targetRect.bottom - popupRect.height + skidding\n                left = targetRect.left - popupRect.width - distance - arrowSize\n                arrowTop = `calc(100% - ${Math.min(16, popupRect.height / 2)}px)`\n                arrowLeft = '100%'\n                arrowTransform = 'translateY(-50%)'\n                break\n            case 'right':\n                top = targetRect.top + (targetRect.height / 2) -\n                    (popupRect.height / 2) + skidding\n                left = targetRect.right + distance + arrowSize\n                arrowTop = '50%'\n                arrowLeft = '0'\n                arrowTransform = 'translateY(-50%) translateX(-100%)'\n                break\n            case 'right-start':\n                top = targetRect.top + skidding\n                left = targetRect.right + distance + arrowSize\n                arrowTop = `${Math.min(16, popupRect.height / 2)}px`\n                arrowLeft = '0'\n                arrowTransform = 'translateY(-50%) translateX(-100%)'\n                break\n            case 'right-end':\n                top = targetRect.bottom - popupRect.height + skidding\n                left = targetRect.right + distance + arrowSize\n                arrowTop = `calc(100% - ${Math.min(16, popupRect.height / 2)}px)`\n                arrowLeft = '0'\n                arrowTransform = 'translateY(-50%) translateX(-100%)'\n                break\n        }\n\n        // Adjust for scroll position\n        if (this.hoist) {\n            top += window.scrollY\n            left += window.scrollX\n        }\n\n        // Apply position\n        this.popup.style.top = `${top}px`\n        this.popup.style.left = `${left}px`\n\n        // Position the arrow\n        if (this.arrow) {\n            this.arrow.style.top = arrowTop\n            this.arrow.style.left = arrowLeft\n            this.arrow.style.transform = arrowTransform\n        }\n    }\n\n    private getOptimalPlacement (targetRect:DOMRect, popupRect:DOMRect):Placement {\n        const placement = this.placement\n        const viewportWidth = window.innerWidth\n        const viewportHeight = window.innerHeight\n        const distance = this.distance\n        const arrowSize = 8\n\n        // Check if the preferred placement fits\n        const fits = {\n            top: targetRect.top - popupRect.height - distance - arrowSize > 0,\n            bottom: (targetRect.bottom + popupRect.height + distance +\n                arrowSize < viewportHeight),\n            left: targetRect.left - popupRect.width - distance - arrowSize > 0,\n            right: (targetRect.right + popupRect.width + distance +\n                arrowSize < viewportWidth),\n        }\n\n        // Get the base direction from the placement\n        const baseDirection = placement.split('-')[0] as 'top'|\n            'bottom'|\n            'left'|\n            'right'\n\n        // If preferred placement fits, use it\n        if (fits[baseDirection]) {\n            return placement\n        }\n\n        // Find the best alternative\n        const opposites: Record<string, string> = {\n            top: 'bottom',\n            bottom: 'top',\n            left: 'right',\n            right: 'left',\n        }\n\n        const opposite = opposites[baseDirection] as\n            'top'|'bottom'|'left'|'right'\n        if (fits[opposite]) {\n            // Return the opposite with the same alignment\n            const alignment = (placement.includes('-') ?\n                placement.split('-')[1] :\n                '')\n            return (alignment ?\n                `${opposite}-${alignment}` :\n                opposite) as Placement\n        }\n\n        // Fall back to a direction that fits\n        for (const dir of ['top', 'bottom', 'left', 'right'] as const) {\n            if (fits[dir]) {\n                return dir\n            }\n        }\n\n        // If nothing fits, return original placement\n        return placement\n    }\n\n    /**\n     * Programmatically show the tooltip\n     */\n    show () {\n        if (this._disabled) return\n        this.open = true\n    }\n\n    /**\n     * Programmatically hide the tooltip\n     */\n    hide () {\n        this.open = false\n    }\n}\n\nif ('customElements' in window) {\n    customElements.define('tool-tip', ToolTip)\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/index.css

@@ -0,0 +1,77 @@
+tool-tip:not(:defined) {
+  display: none;
+}
+
+tool-tip {
+  --tool-tip-max-width: 20rem;
+  --tool-tip-show-delay: .15s;
+  --tool-tip-hide-delay: 0s;
+  --tool-tip-background: #1e293b;
+  --tool-tip-color: #fff;
+  --tool-tip-border-radius: 4px;
+  --tool-tip-padding: .5rem .75rem;
+  --tool-tip-font-size: .875rem;
+  --tool-tip-line-height: 1.4;
+  --tool-tip-arrow-size: 8px;
+  --tool-tip-z-index: 1000;
+}
+
+.tool-tip__popup {
+  z-index: var(--tool-tip-z-index);
+  max-width: var(--tool-tip-max-width);
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--tool-tip-hide-delay) ease,
+        visibility var(--tool-tip-hide-delay) ease;
+  position: fixed;
+}
+
+.tool-tip__popup--visible {
+  opacity: 1;
+  visibility: visible;
+  transition: opacity var(--tool-tip-show-delay) ease,
+        visibility var(--tool-tip-show-delay) ease;
+}
+
+.tool-tip__body {
+  padding: var(--tool-tip-padding);
+  background: var(--tool-tip-background);
+  color: var(--tool-tip-color);
+  border-radius: var(--tool-tip-border-radius);
+  font-size: var(--tool-tip-font-size);
+  line-height: var(--tool-tip-line-height);
+  word-wrap: break-word;
+  box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
+}
+
+.tool-tip__arrow {
+  border: var(--tool-tip-arrow-size) solid transparent;
+  width: 0;
+  height: 0;
+  position: absolute;
+}
+
+.tool-tip__popup[data-placement^="top"] .tool-tip__arrow {
+  border-top-color: var(--tool-tip-background);
+  border-bottom: 0;
+}
+
+.tool-tip__popup[data-placement^="bottom"] .tool-tip__arrow {
+  border-bottom-color: var(--tool-tip-background);
+  border-top: 0;
+}
+
+.tool-tip__popup[data-placement^="left"] .tool-tip__arrow {
+  border-left-color: var(--tool-tip-background);
+  border-right: 0;
+}
+
+.tool-tip__popup[data-placement^="right"] .tool-tip__arrow {
+  border-right-color: var(--tool-tip-background);
+  border-left: 0;
+}
+
+tool-tip[disabled] .tool-tip__popup {
+  display: none;
+}

package/dist/index.d.ts

@@ -0,0 +1,56 @@
+declare global {
+    interface HTMLElementTagNameMap {
+        'tool-tip': ToolTip;
+    }
+}
+export type Placement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+export type Trigger = 'hover' | 'focus' | 'click' | 'manual';
+export declare class ToolTip extends HTMLElement {
+    static observedAttributes: string[];
+    private popup;
+    private arrow;
+    private target;
+    private _open;
+    private _disabled;
+    get content(): string;
+    set content(value: string);
+    get placement(): Placement;
+    set placement(value: Placement);
+    get trigger(): Trigger[];
+    set trigger(value: Trigger[] | string);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get open(): boolean;
+    set open(value: boolean);
+    get distance(): number;
+    set distance(value: number);
+    get skidding(): number;
+    set skidding(value: number);
+    get hoist(): boolean;
+    set hoist(value: boolean);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
+    private createPopup;
+    private bindEvents;
+    private unbindEvents;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private handleFocus;
+    private handleBlur;
+    private handleClick;
+    private handleKeyDown;
+    private showTooltip;
+    private hideTooltip;
+    private positionPopup;
+    private getOptimalPlacement;
+    /**
+     * Programmatically show the tooltip
+     */
+    show(): void;
+    /**
+     * Programmatically hide the tooltip
+     */
+    hide(): void;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,UAAU,EAAC,OAAO,CAAA;KACrB;CACJ;AAED,MAAM,MAAM,SAAS,GACf,KAAK,GACL,WAAW,GACX,SAAS,GACT,OAAO,GACP,aAAa,GACb,WAAW,GACX,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,MAAM,GACN,YAAY,GACZ,UAAU,CAAA;AAEhB,MAAM,MAAM,OAAO,GAAG,OAAO,GAAC,OAAO,GAAC,OAAO,GAAC,QAAQ,CAAA;AAEtD,qBAAa,OAAQ,SAAQ,WAAW;IACpC,MAAM,CAAC,kBAAkB,WACU;IAEnC,OAAO,CAAC,KAAK,CAA8B;IAC3C,OAAO,CAAC,KAAK,CAA8B;IAC3C,OAAO,CAAC,MAAM,CAA2B;IAEzC,OAAO,CAAC,KAAK,CAAQ;IACrB,OAAO,CAAC,SAAS,CAAQ;IAEzB,IAAI,OAAO,IAAK,MAAM,CAErB;IAED,IAAI,OAAO,CAAE,KAAK,EAAE,MAAM,EAEzB;IAED,IAAI,SAAS,IAAK,SAAS,CAE1B;IAED,IAAI,SAAS,CAAE,KAAK,EAAE,SAAS,EAE9B;IAED,IAAI,OAAO,IAAK,OAAO,EAAE,CAGxB;IAED,IAAI,OAAO,CAAE,KAAK,EAAE,OAAO,EAAE,GAAG,MAAM,EAMrC;IAED,IAAI,QAAQ,IAAK,OAAO,CAEvB;IAED,IAAI,QAAQ,CAAE,KAAK,EAAE,OAAO,EAO3B;IAED,IAAI,IAAI,IAAK,OAAO,CAEnB;IAED,IAAI,IAAI,CAAE,KAAK,EAAE,OAAO,EAUvB;IAED,IAAI,QAAQ,IAAK,MAAM,CAEtB;IAED,IAAI,QAAQ,CAAE,KAAK,EAAE,MAAM,EAE1B;IAED,IAAI,QAAQ,IAAK,MAAM,CAEtB;IAED,IAAI,QAAQ,CAAE,KAAK,EAAE,MAAM,EAE1B;IAED,IAAI,KAAK,IAAK,OAAO,CAEpB;IAED,IAAI,KAAK,CAAE,KAAK,EAAE,OAAO,EAMxB;IAED,iBAAiB;IA0BjB,oBAAoB;IAKpB,wBAAwB,CACpB,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,MAAM,GAAC,IAAI,EACrB,QAAQ,EAAC,MAAM,GAAC,IAAI;IA6BxB,OAAO,CAAC,WAAW;IAoBnB,OAAO,CAAC,UAAU;IAuBlB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,gBAAgB,CAEvB;IAED,OAAO,CAAC,gBAAgB,CAEvB;IAED,OAAO,CAAC,WAAW,CAElB;IAED,OAAO,CAAC,UAAU,CAEjB;IAED,OAAO,CAAC,WAAW,CAMlB;IAED,OAAO,CAAC,aAAa,CAKpB;IAED,OAAO,CAAC,WAAW;IAsBnB,OAAO,CAAC,WAAW;IAmBnB,OAAO,CAAC,aAAa;IAiIrB,OAAO,CAAC,mBAAmB;IA2D3B;;OAEG;IACH,IAAI;IAKJ;;OAEG;IACH,IAAI;CAGP"}

package/dist/index.js

@@ -0,0 +1,388 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+class ToolTip extends HTMLElement {
+  static {
+    __name(this, "ToolTip");
+  }
+  static observedAttributes = [
+    "content",
+    "placement",
+    "disabled",
+    "open",
+    "distance",
+    "skidding"
+  ];
+  popup = null;
+  arrow = null;
+  target = null;
+  _open = false;
+  _disabled = false;
+  get content() {
+    return this.getAttribute("content") || "";
+  }
+  set content(value) {
+    this.setAttribute("content", value);
+  }
+  get placement() {
+    return this.getAttribute("placement") || "top";
+  }
+  set placement(value) {
+    this.setAttribute("placement", value);
+  }
+  get trigger() {
+    const attr = this.getAttribute("trigger") || "hover focus";
+    return attr.split(" ").filter(Boolean);
+  }
+  set trigger(value) {
+    if (Array.isArray(value)) {
+      this.setAttribute("trigger", value.join(" "));
+    } else {
+      this.setAttribute("trigger", value);
+    }
+  }
+  get disabled() {
+    return this._disabled;
+  }
+  set disabled(value) {
+    this._disabled = value;
+    if (value) {
+      this.setAttribute("disabled", "");
+    } else {
+      this.removeAttribute("disabled");
+    }
+  }
+  get open() {
+    return this._open;
+  }
+  set open(value) {
+    if (this._disabled) return;
+    const wasOpen = this._open;
+    this._open = value;
+    if (value && !wasOpen) {
+      this.showTooltip();
+    } else if (!value && wasOpen) {
+      this.hideTooltip();
+    }
+  }
+  get distance() {
+    return parseInt(this.getAttribute("distance") || "8", 10);
+  }
+  set distance(value) {
+    this.setAttribute("distance", String(value));
+  }
+  get skidding() {
+    return parseInt(this.getAttribute("skidding") || "0", 10);
+  }
+  set skidding(value) {
+    this.setAttribute("skidding", String(value));
+  }
+  get hoist() {
+    return this.hasAttribute("hoist");
+  }
+  set hoist(value) {
+    if (value) {
+      this.setAttribute("hoist", "");
+    } else {
+      this.removeAttribute("hoist");
+    }
+  }
+  connectedCallback() {
+    this.style.display = "contents";
+    this.target = this.firstElementChild;
+    if (!this.target) {
+      console.warn("tool-tip: No target element found. Add a child element.");
+      return;
+    }
+    this.createPopup();
+    this.bindEvents();
+    if (this.hasAttribute("open")) {
+      this._open = true;
+      this.showTooltip();
+    }
+  }
+  disconnectedCallback() {
+    this.unbindEvents();
+    this.popup?.remove();
+  }
+  attributeChangedCallback(name, _oldValue, newValue) {
+    if (name === "content" && this.popup) {
+      const body = this.popup.querySelector(".tool-tip__body");
+      if (body) {
+        body.textContent = newValue || "";
+      }
+    }
+    if (name === "placement" && this._open) {
+      this.positionPopup();
+    }
+    if (name === "disabled") {
+      this._disabled = newValue !== null;
+      if (this._disabled && this._open) {
+        this.hide();
+      }
+    }
+    if (name === "open") {
+      this.open = newValue !== null;
+    }
+    if ((name === "distance" || name === "skidding") && this._open) {
+      this.positionPopup();
+    }
+  }
+  createPopup() {
+    this.popup = document.createElement("div");
+    this.popup.className = "tool-tip__popup";
+    this.popup.setAttribute("role", "tooltip");
+    this.popup.setAttribute("aria-hidden", "true");
+    this.popup.innerHTML = `
+            <div class="tool-tip__body">${this.content}</div>
+            <div class="tool-tip__arrow"></div>
+        `;
+    this.arrow = this.popup.querySelector(".tool-tip__arrow");
+    if (this.hoist) {
+      document.body.appendChild(this.popup);
+    } else {
+      this.appendChild(this.popup);
+    }
+  }
+  bindEvents() {
+    if (!this.target) return;
+    const triggers = this.trigger;
+    if (triggers.includes("hover")) {
+      this.target.addEventListener("mouseenter", this.handleMouseEnter);
+      this.target.addEventListener("mouseleave", this.handleMouseLeave);
+    }
+    if (triggers.includes("focus")) {
+      this.target.addEventListener("focus", this.handleFocus);
+      this.target.addEventListener("blur", this.handleBlur);
+    }
+    if (triggers.includes("click")) {
+      this.target.addEventListener("click", this.handleClick);
+    }
+    this.target.addEventListener("keydown", this.handleKeyDown);
+  }
+  unbindEvents() {
+    if (!this.target) return;
+    this.target.removeEventListener("mouseenter", this.handleMouseEnter);
+    this.target.removeEventListener("mouseleave", this.handleMouseLeave);
+    this.target.removeEventListener("focus", this.handleFocus);
+    this.target.removeEventListener("blur", this.handleBlur);
+    this.target.removeEventListener("click", this.handleClick);
+    this.target.removeEventListener("keydown", this.handleKeyDown);
+  }
+  handleMouseEnter = /* @__PURE__ */ __name(() => {
+    this.show();
+  }, "handleMouseEnter");
+  handleMouseLeave = /* @__PURE__ */ __name(() => {
+    this.hide();
+  }, "handleMouseLeave");
+  handleFocus = /* @__PURE__ */ __name(() => {
+    this.show();
+  }, "handleFocus");
+  handleBlur = /* @__PURE__ */ __name(() => {
+    this.hide();
+  }, "handleBlur");
+  handleClick = /* @__PURE__ */ __name(() => {
+    if (this._open) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }, "handleClick");
+  handleKeyDown = /* @__PURE__ */ __name((event) => {
+    if (event.key === "Escape" && this._open) {
+      this.hide();
+    }
+  }, "handleKeyDown");
+  showTooltip() {
+    if (!this.popup || this._disabled) return;
+    const showEvent = new CustomEvent("tool-tip-show", {
+      bubbles: true,
+      cancelable: true
+    });
+    if (!this.dispatchEvent(showEvent)) return;
+    this.popup.classList.add("tool-tip__popup--visible");
+    this.popup.setAttribute("aria-hidden", "false");
+    this.positionPopup();
+    this.dispatchEvent(new CustomEvent("tool-tip-after-show", {
+      bubbles: true
+    }));
+  }
+  hideTooltip() {
+    if (!this.popup) return;
+    const hideEvent = new CustomEvent("tool-tip-hide", {
+      bubbles: true,
+      cancelable: true
+    });
+    if (!this.dispatchEvent(hideEvent)) return;
+    this.popup.classList.remove("tool-tip__popup--visible");
+    this.popup.setAttribute("aria-hidden", "true");
+    this.dispatchEvent(new CustomEvent("tool-tip-after-hide", {
+      bubbles: true
+    }));
+  }
+  positionPopup() {
+    if (!this.popup || !this.target) return;
+    const targetRect = this.target.getBoundingClientRect();
+    const popupRect = this.popup.getBoundingClientRect();
+    const arrowSize = 8;
+    let top = 0;
+    let left = 0;
+    let arrowTop = "";
+    let arrowLeft = "";
+    let arrowTransform = "";
+    const distance = this.distance;
+    const skidding = this.skidding;
+    const placement = this.getOptimalPlacement(targetRect, popupRect);
+    this.popup.dataset.placement = placement;
+    switch (placement) {
+      case "top":
+        top = targetRect.top - popupRect.height - distance - arrowSize;
+        left = targetRect.left + targetRect.width / 2 - popupRect.width / 2 + skidding;
+        arrowTop = "100%";
+        arrowLeft = "50%";
+        arrowTransform = "translateX(-50%)";
+        break;
+      case "top-start":
+        top = targetRect.top - popupRect.height - distance - arrowSize;
+        left = targetRect.left + skidding;
+        arrowTop = "100%";
+        arrowLeft = `${Math.min(24, popupRect.width / 2)}px`;
+        arrowTransform = "translateX(-50%)";
+        break;
+      case "top-end":
+        top = targetRect.top - popupRect.height - distance - arrowSize;
+        left = targetRect.right - popupRect.width + skidding;
+        arrowTop = "100%";
+        arrowLeft = `calc(100% - ${Math.min(24, popupRect.width / 2)}px)`;
+        arrowTransform = "translateX(-50%)";
+        break;
+      case "bottom":
+        top = targetRect.bottom + distance + arrowSize;
+        left = targetRect.left + targetRect.width / 2 - popupRect.width / 2 + skidding;
+        arrowTop = "0";
+        arrowLeft = "50%";
+        arrowTransform = "translateX(-50%) translateY(-100%)";
+        break;
+      case "bottom-start":
+        top = targetRect.bottom + distance + arrowSize;
+        left = targetRect.left + skidding;
+        arrowTop = "0";
+        arrowLeft = `${Math.min(24, popupRect.width / 2)}px`;
+        arrowTransform = "translateX(-50%) translateY(-100%)";
+        break;
+      case "bottom-end":
+        top = targetRect.bottom + distance + arrowSize;
+        left = targetRect.right - popupRect.width + skidding;
+        arrowTop = "0";
+        arrowLeft = `calc(100% - ${Math.min(24, popupRect.width / 2)}px)`;
+        arrowTransform = "translateX(-50%) translateY(-100%)";
+        break;
+      case "left":
+        top = targetRect.top + targetRect.height / 2 - popupRect.height / 2 + skidding;
+        left = targetRect.left - popupRect.width - distance - arrowSize;
+        arrowTop = "50%";
+        arrowLeft = "100%";
+        arrowTransform = "translateY(-50%)";
+        break;
+      case "left-start":
+        top = targetRect.top + skidding;
+        left = targetRect.left - popupRect.width - distance - arrowSize;
+        arrowTop = `${Math.min(16, popupRect.height / 2)}px`;
+        arrowLeft = "100%";
+        arrowTransform = "translateY(-50%)";
+        break;
+      case "left-end":
+        top = targetRect.bottom - popupRect.height + skidding;
+        left = targetRect.left - popupRect.width - distance - arrowSize;
+        arrowTop = `calc(100% - ${Math.min(16, popupRect.height / 2)}px)`;
+        arrowLeft = "100%";
+        arrowTransform = "translateY(-50%)";
+        break;
+      case "right":
+        top = targetRect.top + targetRect.height / 2 - popupRect.height / 2 + skidding;
+        left = targetRect.right + distance + arrowSize;
+        arrowTop = "50%";
+        arrowLeft = "0";
+        arrowTransform = "translateY(-50%) translateX(-100%)";
+        break;
+      case "right-start":
+        top = targetRect.top + skidding;
+        left = targetRect.right + distance + arrowSize;
+        arrowTop = `${Math.min(16, popupRect.height / 2)}px`;
+        arrowLeft = "0";
+        arrowTransform = "translateY(-50%) translateX(-100%)";
+        break;
+      case "right-end":
+        top = targetRect.bottom - popupRect.height + skidding;
+        left = targetRect.right + distance + arrowSize;
+        arrowTop = `calc(100% - ${Math.min(16, popupRect.height / 2)}px)`;
+        arrowLeft = "0";
+        arrowTransform = "translateY(-50%) translateX(-100%)";
+        break;
+    }
+    if (this.hoist) {
+      top += window.scrollY;
+      left += window.scrollX;
+    }
+    this.popup.style.top = `${top}px`;
+    this.popup.style.left = `${left}px`;
+    if (this.arrow) {
+      this.arrow.style.top = arrowTop;
+      this.arrow.style.left = arrowLeft;
+      this.arrow.style.transform = arrowTransform;
+    }
+  }
+  getOptimalPlacement(targetRect, popupRect) {
+    const placement = this.placement;
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const distance = this.distance;
+    const arrowSize = 8;
+    const fits = {
+      top: targetRect.top - popupRect.height - distance - arrowSize > 0,
+      bottom: targetRect.bottom + popupRect.height + distance + arrowSize < viewportHeight,
+      left: targetRect.left - popupRect.width - distance - arrowSize > 0,
+      right: targetRect.right + popupRect.width + distance + arrowSize < viewportWidth
+    };
+    const baseDirection = placement.split("-")[0];
+    if (fits[baseDirection]) {
+      return placement;
+    }
+    const opposites = {
+      top: "bottom",
+      bottom: "top",
+      left: "right",
+      right: "left"
+    };
+    const opposite = opposites[baseDirection];
+    if (fits[opposite]) {
+      const alignment = placement.includes("-") ? placement.split("-")[1] : "";
+      return alignment ? `${opposite}-${alignment}` : opposite;
+    }
+    for (const dir of ["top", "bottom", "left", "right"]) {
+      if (fits[dir]) {
+        return dir;
+      }
+    }
+    return placement;
+  }
+  /**
+   * Programmatically show the tooltip
+   */
+  show() {
+    if (this._disabled) return;
+    this.open = true;
+  }
+  /**
+   * Programmatically hide the tooltip
+   */
+  hide() {
+    this.open = false;
+  }
+}
+if ("customElements" in window) {
+  customElements.define("tool-tip", ToolTip);
+}
+export {
+  ToolTip
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts"],
+  "sourcesContent": ["// for document.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'tool-tip':ToolTip\n    }\n}\n\nexport type Placement =\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'\n\nexport type Trigger = 'hover'|'focus'|'click'|'manual'\n\nexport class ToolTip extends HTMLElement {\n    static observedAttributes = ['content', 'placement', 'disabled',\n        'open', 'distance', 'skidding']\n\n    private popup: HTMLDivElement | null = null\n    private arrow: HTMLDivElement | null = null\n    private target: HTMLElement | null = null\n\n    private _open = false\n    private _disabled = false\n\n    get content (): string {\n        return this.getAttribute('content') || ''\n    }\n\n    set content (value: string) {\n        this.setAttribute('content', value)\n    }\n\n    get placement (): Placement {\n        return (this.getAttribute('placement') as Placement) || 'top'\n    }\n\n    set placement (value: Placement) {\n        this.setAttribute('placement', value)\n    }\n\n    get trigger (): Trigger[] {\n        const attr = this.getAttribute('trigger') || 'hover focus'\n        return attr.split(' ').filter(Boolean) as Trigger[]\n    }\n\n    set trigger (value: Trigger[] | string) {\n        if (Array.isArray(value)) {\n            this.setAttribute('trigger', value.join(' '))\n        } else {\n            this.setAttribute('trigger', value)\n        }\n    }\n\n    get disabled (): boolean {\n        return this._disabled\n    }\n\n    set disabled (value: boolean) {\n        this._disabled = value\n        if (value) {\n            this.setAttribute('disabled', '')\n        } else {\n            this.removeAttribute('disabled')\n        }\n    }\n\n    get open (): boolean {\n        return this._open\n    }\n\n    set open (value: boolean) {\n        if (this._disabled) return\n        const wasOpen = this._open\n        this._open = value\n\n        if (value && !wasOpen) {\n            this.showTooltip()\n        } else if (!value && wasOpen) {\n            this.hideTooltip()\n        }\n    }\n\n    get distance (): number {\n        return parseInt(this.getAttribute('distance') || '8', 10)\n    }\n\n    set distance (value: number) {\n        this.setAttribute('distance', String(value))\n    }\n\n    get skidding (): number {\n        return parseInt(this.getAttribute('skidding') || '0', 10)\n    }\n\n    set skidding (value: number) {\n        this.setAttribute('skidding', String(value))\n    }\n\n    get hoist (): boolean {\n        return this.hasAttribute('hoist')\n    }\n\n    set hoist (value: boolean) {\n        if (value) {\n            this.setAttribute('hoist', '')\n        } else {\n            this.removeAttribute('hoist')\n        }\n    }\n\n    connectedCallback () {\n        // Use display: contents so the tooltip doesn't affect layout\n        this.style.display = 'contents'\n\n        // Find the target element (first child element)\n        this.target = this.firstElementChild as HTMLElement\n\n        if (!this.target) {\n            console.warn('tool-tip: No target element found. ' +\n                'Add a child element.')\n            return\n        }\n\n        // Create the popup element\n        this.createPopup()\n\n        // Bind event handlers\n        this.bindEvents()\n\n        // Check if open attribute is set\n        if (this.hasAttribute('open')) {\n            this._open = true\n            this.showTooltip()\n        }\n    }\n\n    disconnectedCallback () {\n        this.unbindEvents()\n        this.popup?.remove()\n    }\n\n    attributeChangedCallback (\n        name:string,\n        _oldValue:string|null,\n        newValue:string|null\n    ) {\n        if (name === 'content' && this.popup) {\n            const body = this.popup.querySelector('.tool-tip__body')\n            if (body) {\n                body.textContent = newValue || ''\n            }\n        }\n\n        if (name === 'placement' && this._open) {\n            this.positionPopup()\n        }\n\n        if (name === 'disabled') {\n            this._disabled = newValue !== null\n            if (this._disabled && this._open) {\n                this.hide()\n            }\n        }\n\n        if (name === 'open') {\n            this.open = newValue !== null\n        }\n\n        if ((name === 'distance' || name === 'skidding') && this._open) {\n            this.positionPopup()\n        }\n    }\n\n    private createPopup () {\n        this.popup = document.createElement('div')\n        this.popup.className = 'tool-tip__popup'\n        this.popup.setAttribute('role', 'tooltip')\n        this.popup.setAttribute('aria-hidden', 'true')\n        this.popup.innerHTML = `\n            <div class=\"tool-tip__body\">${this.content}</div>\n            <div class=\"tool-tip__arrow\"></div>\n        `\n\n        this.arrow = this.popup.querySelector('.tool-tip__arrow')\n\n        // Append to body if hoisted, otherwise to this element's parent\n        if (this.hoist) {\n            document.body.appendChild(this.popup)\n        } else {\n            this.appendChild(this.popup)\n        }\n    }\n\n    private bindEvents () {\n        if (!this.target) return\n\n        const triggers = this.trigger\n\n        if (triggers.includes('hover')) {\n            this.target.addEventListener('mouseenter', this.handleMouseEnter)\n            this.target.addEventListener('mouseleave', this.handleMouseLeave)\n        }\n\n        if (triggers.includes('focus')) {\n            this.target.addEventListener('focus', this.handleFocus)\n            this.target.addEventListener('blur', this.handleBlur)\n        }\n\n        if (triggers.includes('click')) {\n            this.target.addEventListener('click', this.handleClick)\n        }\n\n        // Add keyboard support\n        this.target.addEventListener('keydown', this.handleKeyDown)\n    }\n\n    private unbindEvents () {\n        if (!this.target) return\n\n        this.target.removeEventListener('mouseenter', this.handleMouseEnter)\n        this.target.removeEventListener('mouseleave', this.handleMouseLeave)\n        this.target.removeEventListener('focus', this.handleFocus)\n        this.target.removeEventListener('blur', this.handleBlur)\n        this.target.removeEventListener('click', this.handleClick)\n        this.target.removeEventListener('keydown', this.handleKeyDown)\n    }\n\n    private handleMouseEnter = () => {\n        this.show()\n    }\n\n    private handleMouseLeave = () => {\n        this.hide()\n    }\n\n    private handleFocus = () => {\n        this.show()\n    }\n\n    private handleBlur = () => {\n        this.hide()\n    }\n\n    private handleClick = () => {\n        if (this._open) {\n            this.hide()\n        } else {\n            this.show()\n        }\n    }\n\n    private handleKeyDown = (event: KeyboardEvent) => {\n        // Close tooltip on Escape\n        if (event.key === 'Escape' && this._open) {\n            this.hide()\n        }\n    }\n\n    private showTooltip () {\n        if (!this.popup || this._disabled) return\n\n        // Emit show event\n        const showEvent = new CustomEvent('tool-tip-show', {\n            bubbles: true,\n            cancelable: true,\n        })\n        if (!this.dispatchEvent(showEvent)) return\n\n        this.popup.classList.add('tool-tip__popup--visible')\n        this.popup.setAttribute('aria-hidden', 'false')\n\n        // Position the popup\n        this.positionPopup()\n\n        // Emit after-show event\n        this.dispatchEvent(new CustomEvent('tool-tip-after-show', {\n            bubbles: true\n        }))\n    }\n\n    private hideTooltip () {\n        if (!this.popup) return\n\n        // Emit hide event\n        const hideEvent = new CustomEvent('tool-tip-hide', {\n            bubbles: true,\n            cancelable: true,\n        })\n        if (!this.dispatchEvent(hideEvent)) return\n\n        this.popup.classList.remove('tool-tip__popup--visible')\n        this.popup.setAttribute('aria-hidden', 'true')\n\n        // Emit after-hide event\n        this.dispatchEvent(new CustomEvent('tool-tip-after-hide', {\n            bubbles: true\n        }))\n    }\n\n    private positionPopup () {\n        if (!this.popup || !this.target) return\n\n        const targetRect = this.target.getBoundingClientRect()\n        const popupRect = this.popup.getBoundingClientRect()\n        const arrowSize = 8\n\n        let top = 0\n        let left = 0\n        let arrowTop = ''\n        let arrowLeft = ''\n        let arrowTransform = ''\n\n        const distance = this.distance\n        const skidding = this.skidding\n        const placement = this.getOptimalPlacement(targetRect, popupRect)\n\n        // Set data attribute for CSS styling\n        this.popup.dataset.placement = placement\n\n        switch (placement) {\n            case 'top':\n                top = targetRect.top - popupRect.height - distance - arrowSize\n                left = targetRect.left + (targetRect.width / 2) -\n                    (popupRect.width / 2) + skidding\n                arrowTop = '100%'\n                arrowLeft = '50%'\n                arrowTransform = 'translateX(-50%)'\n                break\n            case 'top-start':\n                top = targetRect.top - popupRect.height - distance - arrowSize\n                left = targetRect.left + skidding\n                arrowTop = '100%'\n                arrowLeft = `${Math.min(24, popupRect.width / 2)}px`\n                arrowTransform = 'translateX(-50%)'\n                break\n            case 'top-end':\n                top = targetRect.top - popupRect.height - distance - arrowSize\n                left = targetRect.right - popupRect.width + skidding\n                arrowTop = '100%'\n                arrowLeft = `calc(100% - ${Math.min(24, popupRect.width / 2)}px)`\n                arrowTransform = 'translateX(-50%)'\n                break\n            case 'bottom':\n                top = targetRect.bottom + distance + arrowSize\n                left = targetRect.left + (targetRect.width / 2) -\n                    (popupRect.width / 2) + skidding\n                arrowTop = '0'\n                arrowLeft = '50%'\n                arrowTransform = 'translateX(-50%) translateY(-100%)'\n                break\n            case 'bottom-start':\n                top = targetRect.bottom + distance + arrowSize\n                left = targetRect.left + skidding\n                arrowTop = '0'\n                arrowLeft = `${Math.min(24, popupRect.width / 2)}px`\n                arrowTransform = 'translateX(-50%) translateY(-100%)'\n                break\n            case 'bottom-end':\n                top = targetRect.bottom + distance + arrowSize\n                left = targetRect.right - popupRect.width + skidding\n                arrowTop = '0'\n                arrowLeft = `calc(100% - ${Math.min(24, popupRect.width / 2)}px)`\n                arrowTransform = 'translateX(-50%) translateY(-100%)'\n                break\n            case 'left':\n                top = targetRect.top + (targetRect.height / 2) -\n                    (popupRect.height / 2) + skidding\n                left = targetRect.left - popupRect.width - distance - arrowSize\n                arrowTop = '50%'\n                arrowLeft = '100%'\n                arrowTransform = 'translateY(-50%)'\n                break\n            case 'left-start':\n                top = targetRect.top + skidding\n                left = targetRect.left - popupRect.width - distance - arrowSize\n                arrowTop = `${Math.min(16, popupRect.height / 2)}px`\n                arrowLeft = '100%'\n                arrowTransform = 'translateY(-50%)'\n                break\n            case 'left-end':\n                top = targetRect.bottom - popupRect.height + skidding\n                left = targetRect.left - popupRect.width - distance - arrowSize\n                arrowTop = `calc(100% - ${Math.min(16, popupRect.height / 2)}px)`\n                arrowLeft = '100%'\n                arrowTransform = 'translateY(-50%)'\n                break\n            case 'right':\n                top = targetRect.top + (targetRect.height / 2) -\n                    (popupRect.height / 2) + skidding\n                left = targetRect.right + distance + arrowSize\n                arrowTop = '50%'\n                arrowLeft = '0'\n                arrowTransform = 'translateY(-50%) translateX(-100%)'\n                break\n            case 'right-start':\n                top = targetRect.top + skidding\n                left = targetRect.right + distance + arrowSize\n                arrowTop = `${Math.min(16, popupRect.height / 2)}px`\n                arrowLeft = '0'\n                arrowTransform = 'translateY(-50%) translateX(-100%)'\n                break\n            case 'right-end':\n                top = targetRect.bottom - popupRect.height + skidding\n                left = targetRect.right + distance + arrowSize\n                arrowTop = `calc(100% - ${Math.min(16, popupRect.height / 2)}px)`\n                arrowLeft = '0'\n                arrowTransform = 'translateY(-50%) translateX(-100%)'\n                break\n        }\n\n        // Adjust for scroll position\n        if (this.hoist) {\n            top += window.scrollY\n            left += window.scrollX\n        }\n\n        // Apply position\n        this.popup.style.top = `${top}px`\n        this.popup.style.left = `${left}px`\n\n        // Position the arrow\n        if (this.arrow) {\n            this.arrow.style.top = arrowTop\n            this.arrow.style.left = arrowLeft\n            this.arrow.style.transform = arrowTransform\n        }\n    }\n\n    private getOptimalPlacement (targetRect:DOMRect, popupRect:DOMRect):Placement {\n        const placement = this.placement\n        const viewportWidth = window.innerWidth\n        const viewportHeight = window.innerHeight\n        const distance = this.distance\n        const arrowSize = 8\n\n        // Check if the preferred placement fits\n        const fits = {\n            top: targetRect.top - popupRect.height - distance - arrowSize > 0,\n            bottom: (targetRect.bottom + popupRect.height + distance +\n                arrowSize < viewportHeight),\n            left: targetRect.left - popupRect.width - distance - arrowSize > 0,\n            right: (targetRect.right + popupRect.width + distance +\n                arrowSize < viewportWidth),\n        }\n\n        // Get the base direction from the placement\n        const baseDirection = placement.split('-')[0] as 'top'|\n            'bottom'|\n            'left'|\n            'right'\n\n        // If preferred placement fits, use it\n        if (fits[baseDirection]) {\n            return placement\n        }\n\n        // Find the best alternative\n        const opposites: Record<string, string> = {\n            top: 'bottom',\n            bottom: 'top',\n            left: 'right',\n            right: 'left',\n        }\n\n        const opposite = opposites[baseDirection] as\n            'top'|'bottom'|'left'|'right'\n        if (fits[opposite]) {\n            // Return the opposite with the same alignment\n            const alignment = (placement.includes('-') ?\n                placement.split('-')[1] :\n                '')\n            return (alignment ?\n                `${opposite}-${alignment}` :\n                opposite) as Placement\n        }\n\n        // Fall back to a direction that fits\n        for (const dir of ['top', 'bottom', 'left', 'right'] as const) {\n            if (fits[dir]) {\n                return dir\n            }\n        }\n\n        // If nothing fits, return original placement\n        return placement\n    }\n\n    /**\n     * Programmatically show the tooltip\n     */\n    show () {\n        if (this._disabled) return\n        this.open = true\n    }\n\n    /**\n     * Programmatically hide the tooltip\n     */\n    hide () {\n        this.open = false\n    }\n}\n\nif ('customElements' in window) {\n    customElements.define('tool-tip', ToolTip)\n}\n"],
+  "mappings": ";;AAuBO,MAAM,gBAAgB,YAAY;AAAA,EAvBzC,OAuByC;AAAA;AAAA;AAAA,EACrC,OAAO,qBAAqB;AAAA,IAAC;AAAA,IAAW;AAAA,IAAa;AAAA,IACjD;AAAA,IAAQ;AAAA,IAAY;AAAA,EAAU;AAAA,EAE1B,QAA+B;AAAA,EAC/B,QAA+B;AAAA,EAC/B,SAA6B;AAAA,EAE7B,QAAQ;AAAA,EACR,YAAY;AAAA,EAEpB,IAAI,UAAmB;AACnB,WAAO,KAAK,aAAa,SAAS,KAAK;AAAA,EAC3C;AAAA,EAEA,IAAI,QAAS,OAAe;AACxB,SAAK,aAAa,WAAW,KAAK;AAAA,EACtC;AAAA,EAEA,IAAI,YAAwB;AACxB,WAAQ,KAAK,aAAa,WAAW,KAAmB;AAAA,EAC5D;AAAA,EAEA,IAAI,UAAW,OAAkB;AAC7B,SAAK,aAAa,aAAa,KAAK;AAAA,EACxC;AAAA,EAEA,IAAI,UAAsB;AACtB,UAAM,OAAO,KAAK,aAAa,SAAS,KAAK;AAC7C,WAAO,KAAK,MAAM,GAAG,EAAE,OAAO,OAAO;AAAA,EACzC;AAAA,EAEA,IAAI,QAAS,OAA2B;AACpC,QAAI,MAAM,QAAQ,KAAK,GAAG;AACtB,WAAK,aAAa,WAAW,MAAM,KAAK,GAAG,CAAC;AAAA,IAChD,OAAO;AACH,WAAK,aAAa,WAAW,KAAK;AAAA,IACtC;AAAA,EACJ;AAAA,EAEA,IAAI,WAAqB;AACrB,WAAO,KAAK;AAAA,EAChB;AAAA,EAEA,IAAI,SAAU,OAAgB;AAC1B,SAAK,YAAY;AACjB,QAAI,OAAO;AACP,WAAK,aAAa,YAAY,EAAE;AAAA,IACpC,OAAO;AACH,WAAK,gBAAgB,UAAU;AAAA,IACnC;AAAA,EACJ;AAAA,EAEA,IAAI,OAAiB;AACjB,WAAO,KAAK;AAAA,EAChB;AAAA,EAEA,IAAI,KAAM,OAAgB;AACtB,QAAI,KAAK,UAAW;AACpB,UAAM,UAAU,KAAK;AACrB,SAAK,QAAQ;AAEb,QAAI,SAAS,CAAC,SAAS;AACnB,WAAK,YAAY;AAAA,IACrB,WAAW,CAAC,SAAS,SAAS;AAC1B,WAAK,YAAY;AAAA,IACrB;AAAA,EACJ;AAAA,EAEA,IAAI,WAAoB;AACpB,WAAO,SAAS,KAAK,aAAa,UAAU,KAAK,KAAK,EAAE;AAAA,EAC5D;AAAA,EAEA,IAAI,SAAU,OAAe;AACzB,SAAK,aAAa,YAAY,OAAO,KAAK,CAAC;AAAA,EAC/C;AAAA,EAEA,IAAI,WAAoB;AACpB,WAAO,SAAS,KAAK,aAAa,UAAU,KAAK,KAAK,EAAE;AAAA,EAC5D;AAAA,EAEA,IAAI,SAAU,OAAe;AACzB,SAAK,aAAa,YAAY,OAAO,KAAK,CAAC;AAAA,EAC/C;AAAA,EAEA,IAAI,QAAkB;AAClB,WAAO,KAAK,aAAa,OAAO;AAAA,EACpC;AAAA,EAEA,IAAI,MAAO,OAAgB;AACvB,QAAI,OAAO;AACP,WAAK,aAAa,SAAS,EAAE;AAAA,IACjC,OAAO;AACH,WAAK,gBAAgB,OAAO;AAAA,IAChC;AAAA,EACJ;AAAA,EAEA,oBAAqB;AAEjB,SAAK,MAAM,UAAU;AAGrB,SAAK,SAAS,KAAK;AAEnB,QAAI,CAAC,KAAK,QAAQ;AACd,cAAQ,KAAK,yDACa;AAC1B;AAAA,IACJ;AAGA,SAAK,YAAY;AAGjB,SAAK,WAAW;AAGhB,QAAI,KAAK,aAAa,MAAM,GAAG;AAC3B,WAAK,QAAQ;AACb,WAAK,YAAY;AAAA,IACrB;AAAA,EACJ;AAAA,EAEA,uBAAwB;AACpB,SAAK,aAAa;AAClB,SAAK,OAAO,OAAO;AAAA,EACvB;AAAA,EAEA,yBACI,MACA,WACA,UACF;AACE,QAAI,SAAS,aAAa,KAAK,OAAO;AAClC,YAAM,OAAO,KAAK,MAAM,cAAc,iBAAiB;AACvD,UAAI,MAAM;AACN,aAAK,cAAc,YAAY;AAAA,MACnC;AAAA,IACJ;AAEA,QAAI,SAAS,eAAe,KAAK,OAAO;AACpC,WAAK,cAAc;AAAA,IACvB;AAEA,QAAI,SAAS,YAAY;AACrB,WAAK,YAAY,aAAa;AAC9B,UAAI,KAAK,aAAa,KAAK,OAAO;AAC9B,aAAK,KAAK;AAAA,MACd;AAAA,IACJ;AAEA,QAAI,SAAS,QAAQ;AACjB,WAAK,OAAO,aAAa;AAAA,IAC7B;AAEA,SAAK,SAAS,cAAc,SAAS,eAAe,KAAK,OAAO;AAC5D,WAAK,cAAc;AAAA,IACvB;AAAA,EACJ;AAAA,EAEQ,cAAe;AACnB,SAAK,QAAQ,SAAS,cAAc,KAAK;AACzC,SAAK,MAAM,YAAY;AACvB,SAAK,MAAM,aAAa,QAAQ,SAAS;AACzC,SAAK,MAAM,aAAa,eAAe,MAAM;AAC7C,SAAK,MAAM,YAAY;AAAA,0CACW,KAAK,OAAO;AAAA;AAAA;AAI9C,SAAK,QAAQ,KAAK,MAAM,cAAc,kBAAkB;AAGxD,QAAI,KAAK,OAAO;AACZ,eAAS,KAAK,YAAY,KAAK,KAAK;AAAA,IACxC,OAAO;AACH,WAAK,YAAY,KAAK,KAAK;AAAA,IAC/B;AAAA,EACJ;AAAA,EAEQ,aAAc;AAClB,QAAI,CAAC,KAAK,OAAQ;AAElB,UAAM,WAAW,KAAK;AAEtB,QAAI,SAAS,SAAS,OAAO,GAAG;AAC5B,WAAK,OAAO,iBAAiB,cAAc,KAAK,gBAAgB;AAChE,WAAK,OAAO,iBAAiB,cAAc,KAAK,gBAAgB;AAAA,IACpE;AAEA,QAAI,SAAS,SAAS,OAAO,GAAG;AAC5B,WAAK,OAAO,iBAAiB,SAAS,KAAK,WAAW;AACtD,WAAK,OAAO,iBAAiB,QAAQ,KAAK,UAAU;AAAA,IACxD;AAEA,QAAI,SAAS,SAAS,OAAO,GAAG;AAC5B,WAAK,OAAO,iBAAiB,SAAS,KAAK,WAAW;AAAA,IAC1D;AAGA,SAAK,OAAO,iBAAiB,WAAW,KAAK,aAAa;AAAA,EAC9D;AAAA,EAEQ,eAAgB;AACpB,QAAI,CAAC,KAAK,OAAQ;AAElB,SAAK,OAAO,oBAAoB,cAAc,KAAK,gBAAgB;AACnE,SAAK,OAAO,oBAAoB,cAAc,KAAK,gBAAgB;AACnE,SAAK,OAAO,oBAAoB,SAAS,KAAK,WAAW;AACzD,SAAK,OAAO,oBAAoB,QAAQ,KAAK,UAAU;AACvD,SAAK,OAAO,oBAAoB,SAAS,KAAK,WAAW;AACzD,SAAK,OAAO,oBAAoB,WAAW,KAAK,aAAa;AAAA,EACjE;AAAA,EAEQ,mBAAmB,6BAAM;AAC7B,SAAK,KAAK;AAAA,EACd,GAF2B;AAAA,EAInB,mBAAmB,6BAAM;AAC7B,SAAK,KAAK;AAAA,EACd,GAF2B;AAAA,EAInB,cAAc,6BAAM;AACxB,SAAK,KAAK;AAAA,EACd,GAFsB;AAAA,EAId,aAAa,6BAAM;AACvB,SAAK,KAAK;AAAA,EACd,GAFqB;AAAA,EAIb,cAAc,6BAAM;AACxB,QAAI,KAAK,OAAO;AACZ,WAAK,KAAK;AAAA,IACd,OAAO;AACH,WAAK,KAAK;AAAA,IACd;AAAA,EACJ,GANsB;AAAA,EAQd,gBAAgB,wBAAC,UAAyB;AAE9C,QAAI,MAAM,QAAQ,YAAY,KAAK,OAAO;AACtC,WAAK,KAAK;AAAA,IACd;AAAA,EACJ,GALwB;AAAA,EAOhB,cAAe;AACnB,QAAI,CAAC,KAAK,SAAS,KAAK,UAAW;AAGnC,UAAM,YAAY,IAAI,YAAY,iBAAiB;AAAA,MAC/C,SAAS;AAAA,MACT,YAAY;AAAA,IAChB,CAAC;AACD,QAAI,CAAC,KAAK,cAAc,SAAS,EAAG;AAEpC,SAAK,MAAM,UAAU,IAAI,0BAA0B;AACnD,SAAK,MAAM,aAAa,eAAe,OAAO;AAG9C,SAAK,cAAc;AAGnB,SAAK,cAAc,IAAI,YAAY,uBAAuB;AAAA,MACtD,SAAS;AAAA,IACb,CAAC,CAAC;AAAA,EACN;AAAA,EAEQ,cAAe;AACnB,QAAI,CAAC,KAAK,MAAO;AAGjB,UAAM,YAAY,IAAI,YAAY,iBAAiB;AAAA,MAC/C,SAAS;AAAA,MACT,YAAY;AAAA,IAChB,CAAC;AACD,QAAI,CAAC,KAAK,cAAc,SAAS,EAAG;AAEpC,SAAK,MAAM,UAAU,OAAO,0BAA0B;AACtD,SAAK,MAAM,aAAa,eAAe,MAAM;AAG7C,SAAK,cAAc,IAAI,YAAY,uBAAuB;AAAA,MACtD,SAAS;AAAA,IACb,CAAC,CAAC;AAAA,EACN;AAAA,EAEQ,gBAAiB;AACrB,QAAI,CAAC,KAAK,SAAS,CAAC,KAAK,OAAQ;AAEjC,UAAM,aAAa,KAAK,OAAO,sBAAsB;AACrD,UAAM,YAAY,KAAK,MAAM,sBAAsB;AACnD,UAAM,YAAY;AAElB,QAAI,MAAM;AACV,QAAI,OAAO;AACX,QAAI,WAAW;AACf,QAAI,YAAY;AAChB,QAAI,iBAAiB;AAErB,UAAM,WAAW,KAAK;AACtB,UAAM,WAAW,KAAK;AACtB,UAAM,YAAY,KAAK,oBAAoB,YAAY,SAAS;AAGhE,SAAK,MAAM,QAAQ,YAAY;AAE/B,YAAQ,WAAW;AAAA,MACf,KAAK;AACD,cAAM,WAAW,MAAM,UAAU,SAAS,WAAW;AACrD,eAAO,WAAW,OAAQ,WAAW,QAAQ,IACxC,UAAU,QAAQ,IAAK;AAC5B,mBAAW;AACX,oBAAY;AACZ,yBAAiB;AACjB;AAAA,MACJ,KAAK;AACD,cAAM,WAAW,MAAM,UAAU,SAAS,WAAW;AACrD,eAAO,WAAW,OAAO;AACzB,mBAAW;AACX,oBAAY,GAAG,KAAK,IAAI,IAAI,UAAU,QAAQ,CAAC,CAAC;AAChD,yBAAiB;AACjB;AAAA,MACJ,KAAK;AACD,cAAM,WAAW,MAAM,UAAU,SAAS,WAAW;AACrD,eAAO,WAAW,QAAQ,UAAU,QAAQ;AAC5C,mBAAW;AACX,oBAAY,eAAe,KAAK,IAAI,IAAI,UAAU,QAAQ,CAAC,CAAC;AAC5D,yBAAiB;AACjB;AAAA,MACJ,KAAK;AACD,cAAM,WAAW,SAAS,WAAW;AACrC,eAAO,WAAW,OAAQ,WAAW,QAAQ,IACxC,UAAU,QAAQ,IAAK;AAC5B,mBAAW;AACX,oBAAY;AACZ,yBAAiB;AACjB;AAAA,MACJ,KAAK;AACD,cAAM,WAAW,SAAS,WAAW;AACrC,eAAO,WAAW,OAAO;AACzB,mBAAW;AACX,oBAAY,GAAG,KAAK,IAAI,IAAI,UAAU,QAAQ,CAAC,CAAC;AAChD,yBAAiB;AACjB;AAAA,MACJ,KAAK;AACD,cAAM,WAAW,SAAS,WAAW;AACrC,eAAO,WAAW,QAAQ,UAAU,QAAQ;AAC5C,mBAAW;AACX,oBAAY,eAAe,KAAK,IAAI,IAAI,UAAU,QAAQ,CAAC,CAAC;AAC5D,yBAAiB;AACjB;AAAA,MACJ,KAAK;AACD,cAAM,WAAW,MAAO,WAAW,SAAS,IACvC,UAAU,SAAS,IAAK;AAC7B,eAAO,WAAW,OAAO,UAAU,QAAQ,WAAW;AACtD,mBAAW;AACX,oBAAY;AACZ,yBAAiB;AACjB;AAAA,MACJ,KAAK;AACD,cAAM,WAAW,MAAM;AACvB,eAAO,WAAW,OAAO,UAAU,QAAQ,WAAW;AACtD,mBAAW,GAAG,KAAK,IAAI,IAAI,UAAU,SAAS,CAAC,CAAC;AAChD,oBAAY;AACZ,yBAAiB;AACjB;AAAA,MACJ,KAAK;AACD,cAAM,WAAW,SAAS,UAAU,SAAS;AAC7C,eAAO,WAAW,OAAO,UAAU,QAAQ,WAAW;AACtD,mBAAW,eAAe,KAAK,IAAI,IAAI,UAAU,SAAS,CAAC,CAAC;AAC5D,oBAAY;AACZ,yBAAiB;AACjB;AAAA,MACJ,KAAK;AACD,cAAM,WAAW,MAAO,WAAW,SAAS,IACvC,UAAU,SAAS,IAAK;AAC7B,eAAO,WAAW,QAAQ,WAAW;AACrC,mBAAW;AACX,oBAAY;AACZ,yBAAiB;AACjB;AAAA,MACJ,KAAK;AACD,cAAM,WAAW,MAAM;AACvB,eAAO,WAAW,QAAQ,WAAW;AACrC,mBAAW,GAAG,KAAK,IAAI,IAAI,UAAU,SAAS,CAAC,CAAC;AAChD,oBAAY;AACZ,yBAAiB;AACjB;AAAA,MACJ,KAAK;AACD,cAAM,WAAW,SAAS,UAAU,SAAS;AAC7C,eAAO,WAAW,QAAQ,WAAW;AACrC,mBAAW,eAAe,KAAK,IAAI,IAAI,UAAU,SAAS,CAAC,CAAC;AAC5D,oBAAY;AACZ,yBAAiB;AACjB;AAAA,IACR;AAGA,QAAI,KAAK,OAAO;AACZ,aAAO,OAAO;AACd,cAAQ,OAAO;AAAA,IACnB;AAGA,SAAK,MAAM,MAAM,MAAM,GAAG,GAAG;AAC7B,SAAK,MAAM,MAAM,OAAO,GAAG,IAAI;AAG/B,QAAI,KAAK,OAAO;AACZ,WAAK,MAAM,MAAM,MAAM;AACvB,WAAK,MAAM,MAAM,OAAO;AACxB,WAAK,MAAM,MAAM,YAAY;AAAA,IACjC;AAAA,EACJ;AAAA,EAEQ,oBAAqB,YAAoB,WAA6B;AAC1E,UAAM,YAAY,KAAK;AACvB,UAAM,gBAAgB,OAAO;AAC7B,UAAM,iBAAiB,OAAO;AAC9B,UAAM,WAAW,KAAK;AACtB,UAAM,YAAY;AAGlB,UAAM,OAAO;AAAA,MACT,KAAK,WAAW,MAAM,UAAU,SAAS,WAAW,YAAY;AAAA,MAChE,QAAS,WAAW,SAAS,UAAU,SAAS,WAC5C,YAAY;AAAA,MAChB,MAAM,WAAW,OAAO,UAAU,QAAQ,WAAW,YAAY;AAAA,MACjE,OAAQ,WAAW,QAAQ,UAAU,QAAQ,WACzC,YAAY;AAAA,IACpB;AAGA,UAAM,gBAAgB,UAAU,MAAM,GAAG,EAAE,CAAC;AAM5C,QAAI,KAAK,aAAa,GAAG;AACrB,aAAO;AAAA,IACX;AAGA,UAAM,YAAoC;AAAA,MACtC,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAEA,UAAM,WAAW,UAAU,aAAa;AAExC,QAAI,KAAK,QAAQ,GAAG;AAEhB,YAAM,YAAa,UAAU,SAAS,GAAG,IACrC,UAAU,MAAM,GAAG,EAAE,CAAC,IACtB;AACJ,aAAQ,YACJ,GAAG,QAAQ,IAAI,SAAS,KACxB;AAAA,IACR;AAGA,eAAW,OAAO,CAAC,OAAO,UAAU,QAAQ,OAAO,GAAY;AAC3D,UAAI,KAAK,GAAG,GAAG;AACX,eAAO;AAAA,MACX;AAAA,IACJ;AAGA,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,OAAQ;AACJ,QAAI,KAAK,UAAW;AACpB,SAAK,OAAO;AAAA,EAChB;AAAA;AAAA;AAAA;AAAA,EAKA,OAAQ;AACJ,SAAK,OAAO;AAAA,EAChB;AACJ;AAEA,IAAI,oBAAoB,QAAQ;AAC5B,iBAAe,OAAO,YAAY,OAAO;AAC7C;",
+  "names": []
+}

package/dist/index.min.css

@@ -0,0 +1 @@
+tool-tip:not(:defined){display:none}tool-tip{--tool-tip-max-width:20rem;--tool-tip-show-delay:.15s;--tool-tip-hide-delay:0s;--tool-tip-background:#1e293b;--tool-tip-color:#fff;--tool-tip-border-radius:4px;--tool-tip-padding:.5rem .75rem;--tool-tip-font-size:.875rem;--tool-tip-line-height:1.4;--tool-tip-arrow-size:8px;--tool-tip-z-index:1000}.tool-tip__popup{z-index:var(--tool-tip-z-index);max-width:var(--tool-tip-max-width);pointer-events:none;opacity:0;visibility:hidden;transition:opacity var(--tool-tip-hide-delay) ease, visibility var(--tool-tip-hide-delay) ease;position:fixed}.tool-tip__popup--visible{opacity:1;visibility:visible;transition:opacity var(--tool-tip-show-delay) ease, visibility var(--tool-tip-show-delay) ease}.tool-tip__body{padding:var(--tool-tip-padding);background:var(--tool-tip-background);color:var(--tool-tip-color);border-radius:var(--tool-tip-border-radius);font-size:var(--tool-tip-font-size);line-height:var(--tool-tip-line-height);word-wrap:break-word;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.tool-tip__arrow{border:var(--tool-tip-arrow-size) solid transparent;width:0;height:0;position:absolute}.tool-tip__popup[data-placement^=top] .tool-tip__arrow{border-top-color:var(--tool-tip-background);border-bottom:0}.tool-tip__popup[data-placement^=bottom] .tool-tip__arrow{border-bottom-color:var(--tool-tip-background);border-top:0}.tool-tip__popup[data-placement^=left] .tool-tip__arrow{border-left-color:var(--tool-tip-background);border-right:0}.tool-tip__popup[data-placement^=right] .tool-tip__arrow{border-right-color:var(--tool-tip-background);border-left:0}tool-tip[disabled] .tool-tip__popup{display:none}