@substrate-system/tool-tip 0.0.0 → 0.0.2

package/README.md

@@ -1,10 +1,9 @@
 # tool-tip
-![tests](https://github.com/substrate-system/tool-tip/actions/workflows/nodejs.yml/badge.svg)
+[![tests](https://img.shields.io/github/actions/workflow/status/substrate-system/tool-tip/nodejs.yml?style=flat-square)](https://github.com/substrate-system/tool-tip/actions/workflows/nodejs.yml)
 [![types](https://img.shields.io/npm/types/@substrate-system/tool-tip?style=flat-square)](README.md)
 [![module](https://img.shields.io/badge/module-ESM%2FCJS-blue?style=flat-square)](README.md)
 [![install size](https://flat.badgen.net/packagephobia/install/@bicycle-codes/keys?cache-control=no-cache)](https://packagephobia.com/result?p=@bicycle-codes/keys)
-[![GZip size](https://img.badgesize.io/https%3A%2F%2Fesm.sh%2F%40substrate-system%2Ftool-tip%2Fes2022%2Ffile.mjs?style=flat-square&compression=gzip)](https://esm.sh/@substrate-system/tool-tip/es2022/tool-tip.mjs)
-[![dependencies](https://img.shields.io/badge/dependencies-zero-brightgreen.svg?style=flat-square)](package.json)
+[![GZip size](https://img.badgesize.io/https%3A%2F%2Fesm.sh%2F%40substrate-system%2Ftool-tip%2Fes2022%2Findex.mjs?style=flat-square&compression=gzip)](https://esm.sh/@substrate-system/tool-tip/es2022/tool-tip.mjs)
 [![semantic versioning](https://img.shields.io/badge/semver-2.0.0-blue?logo=semver&style=flat-square)](https://semver.org/)
 [![Common Changelog](https://nichoth.github.io/badge/common-changelog.svg)](./CHANGELOG.md)
 [![license](https://img.shields.io/badge/license-Big_Time-blue?style=flat-square)](LICENSE)
@@ -16,7 +15,22 @@ Webcomponent for tooltips — text when you hover.
 [See a live demo](https://substrate-system.github.io/tool-tip/)
 
 <details><summary><h2>Contents</h2></summary>
+
 <!-- toc -->
+
+- [Install](#install)
+- [API](#api)
+  * [ESM](#esm)
+  * [Common JS](#common-js)
+- [CSS](#css)
+  * [Import CSS](#import-css)
+- [Use](#use)
+  * [JS](#js)
+  * [HTML](#html)
+  * [pre-built](#pre-built)
+
+<!-- tocstop -->
+
 </details>
 
 ## Install
@@ -58,16 +72,21 @@ import '@substrate-system/tool-tip/min/css'
 This calls the global function `customElements.define`. Just import, then use
 the tag in your HTML.
 
+The target, or the element with the tooltip, should be the child of a
+`tool-tip` element.
+
 ### JS
+
 ```js
 import '@substrate-system/tool-tip'
 ```
 
 ### HTML
 ```html
-<div>
-    <tool-tip></tool-tip>
-</div>
+<tool-tip content="This is a tooltip">
+    <!-- put the target as a child of tool-tip -->
+    <button>Hover me</button>
+</tool-tip>
 ```
 
 ### pre-built

package/dist/index.cjs

@@ -22,6 +22,7 @@ __export(index_exports, {
   ToolTip: () => ToolTip
 });
 module.exports = __toCommonJS(index_exports);
+var import_util = require("@substrate-system/web-component/util");
 class ToolTip extends HTMLElement {
   static {
     __name(this, "ToolTip");
@@ -128,7 +129,7 @@ class ToolTip extends HTMLElement {
   }
   attributeChangedCallback(name, _oldValue, newValue) {
     if (name === "content" && this.popup) {
-      const body = this.popup.querySelector(".tool-tip__body");
+      const body = this.popup.querySelector(".body");
       if (body) {
         body.textContent = newValue || "";
       }
@@ -151,14 +152,14 @@ class ToolTip extends HTMLElement {
   }
   createPopup() {
     this.popup = document.createElement("div");
-    this.popup.className = "tool-tip__popup";
+    this.popup.className = "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>
+            <div class="body">${this.content}</div>
+            <div class="arrow"></div>
         `;
-    this.arrow = this.popup.querySelector(".tool-tip__arrow");
+    this.arrow = this.popup.querySelector(".arrow");
     if (this.hoist) {
       document.body.appendChild(this.popup);
     } else {
@@ -185,7 +186,6 @@ class ToolTip extends HTMLElement {
     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);
@@ -221,7 +221,7 @@ class ToolTip extends HTMLElement {
       cancelable: true
     });
     if (!this.dispatchEvent(showEvent)) return;
-    this.popup.classList.add("tool-tip__popup--visible");
+    this.popup.classList.add("visible");
     this.popup.setAttribute("aria-hidden", "false");
     this.positionPopup();
     this.dispatchEvent(new CustomEvent("tool-tip-after-show", {
@@ -235,7 +235,7 @@ class ToolTip extends HTMLElement {
       cancelable: true
     });
     if (!this.dispatchEvent(hideEvent)) return;
-    this.popup.classList.remove("tool-tip__popup--visible");
+    this.popup.classList.remove("visible");
     this.popup.setAttribute("aria-hidden", "true");
     this.dispatchEvent(new CustomEvent("tool-tip-after-hide", {
       bubbles: true
@@ -401,7 +401,5 @@ class ToolTip extends HTMLElement {
     this.open = false;
   }
 }
-if ("customElements" in window) {
-  customElements.define("tool-tip", ToolTip);
-}
+(0, import_util.define)("tool-tip", ToolTip);
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1,7 +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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",
+  "sourcesContent": ["import { define } from '@substrate-system/web-component/util'\n\n// 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('.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 = 'popup'\n        this.popup.setAttribute('role', 'tooltip')\n        this.popup.setAttribute('aria-hidden', 'true')\n        this.popup.innerHTML = `\n            <div class=\"body\">${this.content}</div>\n            <div class=\"arrow\"></div>\n        `\n\n        this.arrow = this.popup.querySelector('.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('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('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('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\ndefine('tool-tip', ToolTip)\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/index.css

@@ -1,8 +1,8 @@
-tool-tip:not(:defined) {
-  display: none;
-}
-
 tool-tip {
+  &:not(:defined) {
+    display: none;
+  }
+
   --tool-tip-max-width: 20rem;
   --tool-tip-show-delay: .15s;
   --tool-tip-hide-delay: 0s;
@@ -14,64 +14,64 @@ tool-tip {
   --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;
-}
+  & .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;
-}
+    &.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;
-}
+  & .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);
+    overflow-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;
-}
+  & .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;
-}
+  & .popup[data-placement^="top"] .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;
-}
+  & .popup[data-placement^="bottom"] .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;
-}
+  & .popup[data-placement^="left"] .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;
-}
+  & .popup[data-placement^="right"] .arrow {
+    border-right-color: var(--tool-tip-background);
+    border-left: 0;
+  }
 
-tool-tip[disabled] .tool-tip__popup {
-  display: none;
+  &[disabled] .popup {
+    display: none;
+  }
 }

package/dist/index.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,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,CAA2B;IACxC,OAAO,CAAC,KAAK,CAA2B;IACxC,OAAO,CAAC,MAAM,CAAwB;IAEtC,OAAO,CAAC,KAAK,CAAQ;IACrB,OAAO,CAAC,SAAS,CAAQ;IAEzB,IAAI,OAAO,IAAI,MAAM,CAEpB;IAED,IAAI,OAAO,CAAE,KAAK,EAAC,MAAM,EAExB;IAED,IAAI,SAAS,IAAI,SAAS,CAEzB;IAED,IAAI,SAAS,CAAE,KAAK,EAAC,SAAS,EAE7B;IAED,IAAI,OAAO,IAAI,OAAO,EAAE,CAGvB;IAED,IAAI,OAAO,CAAE,KAAK,EAAC,OAAO,EAAE,GAAC,MAAM,EAMlC;IAED,IAAI,QAAQ,IAAK,OAAO,CAEvB;IAED,IAAI,QAAQ,CAAE,KAAK,EAAE,OAAO,EAO3B;IAED,IAAI,IAAI,IAAI,OAAO,CAElB;IAED,IAAI,IAAI,CAAE,KAAK,EAAC,OAAO,EAUtB;IAED,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,IAAI,QAAQ,CAAE,KAAK,EAAC,MAAM,EAEzB;IAED,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,IAAI,QAAQ,CAAE,KAAK,EAAC,MAAM,EAEzB;IAED,IAAI,KAAK,IAAI,OAAO,CAEnB;IAED,IAAI,KAAK,CAAE,KAAK,EAAC,OAAO,EAMvB;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;IAUpB,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

@@ -1,5 +1,6 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { define } from "@substrate-system/web-component/util";
 class ToolTip extends HTMLElement {
   static {
     __name(this, "ToolTip");
@@ -106,7 +107,7 @@ class ToolTip extends HTMLElement {
   }
   attributeChangedCallback(name, _oldValue, newValue) {
     if (name === "content" && this.popup) {
-      const body = this.popup.querySelector(".tool-tip__body");
+      const body = this.popup.querySelector(".body");
       if (body) {
         body.textContent = newValue || "";
       }
@@ -129,14 +130,14 @@ class ToolTip extends HTMLElement {
   }
   createPopup() {
     this.popup = document.createElement("div");
-    this.popup.className = "tool-tip__popup";
+    this.popup.className = "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>
+            <div class="body">${this.content}</div>
+            <div class="arrow"></div>
         `;
-    this.arrow = this.popup.querySelector(".tool-tip__arrow");
+    this.arrow = this.popup.querySelector(".arrow");
     if (this.hoist) {
       document.body.appendChild(this.popup);
     } else {
@@ -163,7 +164,6 @@ class ToolTip extends HTMLElement {
     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);
@@ -199,7 +199,7 @@ class ToolTip extends HTMLElement {
       cancelable: true
     });
     if (!this.dispatchEvent(showEvent)) return;
-    this.popup.classList.add("tool-tip__popup--visible");
+    this.popup.classList.add("visible");
     this.popup.setAttribute("aria-hidden", "false");
     this.positionPopup();
     this.dispatchEvent(new CustomEvent("tool-tip-after-show", {
@@ -213,7 +213,7 @@ class ToolTip extends HTMLElement {
       cancelable: true
     });
     if (!this.dispatchEvent(hideEvent)) return;
-    this.popup.classList.remove("tool-tip__popup--visible");
+    this.popup.classList.remove("visible");
     this.popup.setAttribute("aria-hidden", "true");
     this.dispatchEvent(new CustomEvent("tool-tip-after-hide", {
       bubbles: true
@@ -379,9 +379,7 @@ class ToolTip extends HTMLElement {
     this.open = false;
   }
 }
-if ("customElements" in window) {
-  customElements.define("tool-tip", ToolTip);
-}
+define("tool-tip", ToolTip);
 export {
   ToolTip
 };

package/dist/index.js.map

@@ -1,7 +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;",
+  "sourcesContent": ["import { define } from '@substrate-system/web-component/util'\n\n// 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('.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 = 'popup'\n        this.popup.setAttribute('role', 'tooltip')\n        this.popup.setAttribute('aria-hidden', 'true')\n        this.popup.innerHTML = `\n            <div class=\"body\">${this.content}</div>\n            <div class=\"arrow\"></div>\n        `\n\n        this.arrow = this.popup.querySelector('.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('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('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('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\ndefine('tool-tip', ToolTip)\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/index.min.css

@@ -1 +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}
+tool-tip{&:not(:defined){display:none}--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;& .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;&.visible{opacity:1;visibility:visible;transition:opacity var(--tool-tip-show-delay) ease, visibility var(--tool-tip-show-delay) ease}}& .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);overflow-wrap:break-word;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}& .arrow{border:var(--tool-tip-arrow-size) solid transparent;width:0;height:0;position:absolute}& .popup[data-placement^=top] .arrow{border-top-color:var(--tool-tip-background);border-bottom:0}& .popup[data-placement^=bottom] .arrow{border-bottom-color:var(--tool-tip-background);border-top:0}& .popup[data-placement^=left] .arrow{border-left-color:var(--tool-tip-background);border-right:0}& .popup[data-placement^=right] .arrow{border-right-color:var(--tool-tip-background);border-left:0}&[disabled] .popup{display:none}}