@substrate-system/tool-tip 0.0.2 → 0.0.5

package/README.md

@@ -19,9 +19,11 @@ Webcomponent for tooltips — text when you hover.
 <!-- toc -->
 
 - [Install](#install)
+- [Example](#example)
 - [API](#api)
   * [ESM](#esm)
   * [Common JS](#common-js)
+- [Attributes](#attributes)
 - [CSS](#css)
   * [Import CSS](#import-css)
 - [Use](#use)
@@ -39,6 +41,15 @@ Webcomponent for tooltips &mdash; text when you hover.
 npm i -S @substrate-system/tool-tip
 ```
 
+## Example
+
+```html
+<tool-tip content="This is a tooltip">
+    <!-- put the target as a child of tool-tip -->
+    <button>Hover me</button>
+</tool-tip>
+```
+
 ## API
 
 This exposes ESM and common JS via
@@ -54,6 +65,19 @@ import { ToolTip } from '@substrate-system/tool-tip'
 require('@substrate-system/tool-tip')
 ```
 
+## Attributes
+
+| Attribute | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `content` | `string` | `""` | The text content of the tooltip. |
+| `placement` | `Placement` | `"top"` | Where to place the tooltip relative to the target. |
+| `trigger` | `string` | `"hover focus"` | Space-separated list of triggers: `hover`, `focus`, `click`, `manual`. |
+| `disabled` | `boolean` | `false` | If true, the tooltip will not be shown. |
+| `distance` | `number` | `8` | Distance in pixels from the target. |
+| `skidding` | `number` | `0` | Lateral offset in pixels. |
+| `delay` | `number` | `0` | Delay in milliseconds before showing the tooltip on hover. |
+| `hoist` | `boolean` | `false` | If true, the tooltip will be appended to `document.body`. |
+
 ## CSS
 
 ### Import CSS

package/dist/index.cjs

@@ -27,31 +27,37 @@ class ToolTip extends HTMLElement {
   static {
     __name(this, "ToolTip");
   }
+  static TAG = "tool-tip";
   static observedAttributes = [
     "content",
     "placement",
     "disabled",
     "open",
     "distance",
-    "skidding"
+    "skidding",
+    "delay"
   ];
   popup = null;
   arrow = null;
   target = null;
   _open = false;
   _disabled = false;
+  _showTimeout = null;
+  /** The text content of the tooltip. */
   get content() {
     return this.getAttribute("content") || "";
   }
   set content(value) {
     this.setAttribute("content", value);
   }
+  /** Where to place the tooltip relative to the target. Defaults to 'top'. */
   get placement() {
     return this.getAttribute("placement") || "top";
   }
   set placement(value) {
     this.setAttribute("placement", value);
   }
+  /** Space-separated list of triggers. Defaults to 'hover focus'. */
   get trigger() {
     const attr = this.getAttribute("trigger") || "hover focus";
     return attr.split(" ").filter(Boolean);
@@ -63,6 +69,7 @@ class ToolTip extends HTMLElement {
       this.setAttribute("trigger", value);
     }
   }
+  /** Whether the tooltip is disabled. */
   get disabled() {
     return this._disabled;
   }
@@ -87,18 +94,27 @@ class ToolTip extends HTMLElement {
       this.hideTooltip();
     }
   }
+  /** Distance in pixels from the target. Defaults to 8. */
   get distance() {
     return parseInt(this.getAttribute("distance") || "8", 10);
   }
   set distance(value) {
     this.setAttribute("distance", String(value));
   }
+  /** Lateral offset in pixels. Defaults to 0. */
   get skidding() {
     return parseInt(this.getAttribute("skidding") || "0", 10);
   }
   set skidding(value) {
     this.setAttribute("skidding", String(value));
   }
+  /** Delay in milliseconds before showing the tooltip on hover. Defaults to 0. */
+  get delay() {
+    return parseInt(this.getAttribute("delay") || "0", 10);
+  }
+  set delay(value) {
+    this.setAttribute("delay", String(value));
+  }
   get hoist() {
     return this.hasAttribute("hoist");
   }
@@ -391,15 +407,28 @@ class ToolTip extends HTMLElement {
    * Programmatically show the tooltip
    */
   show() {
-    if (this._disabled) return;
-    this.open = true;
+    if (this._disabled || this._open) return;
+    const delay = this.delay;
+    if (delay > 0) {
+      if (this._showTimeout) return;
+      this._showTimeout = window.setTimeout(() => {
+        this.open = true;
+        this._showTimeout = null;
+      }, delay);
+    } else {
+      this.open = true;
+    }
   }
   /**
    * Programmatically hide the tooltip
    */
   hide() {
+    if (this._showTimeout) {
+      window.clearTimeout(this._showTimeout);
+      this._showTimeout = null;
+    }
     this.open = false;
   }
 }
-(0, import_util.define)("tool-tip", ToolTip);
+(0, import_util.define)(ToolTip.TAG, ToolTip);
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "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": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAuB;AAyBhB,MAAM,gBAAgB,YAAY;AAAA,EAzBzC,OAyByC;AAAA;AAAA;AAAA,EACrC,OAAO,qBAAqB;AAAA,IAAC;AAAA,IAAW;AAAA,IAAa;AAAA,IACjD;AAAA,IAAQ;AAAA,IAAY;AAAA,EAAU;AAAA,EAE1B,QAA4B;AAAA,EAC5B,QAA4B;AAAA,EAC5B,SAA0B;AAAA,EAE1B,QAAQ;AAAA,EACR,YAAY;AAAA,EAEpB,IAAI,UAAkB;AAClB,WAAO,KAAK,aAAa,SAAS,KAAK;AAAA,EAC3C;AAAA,EAEA,IAAI,QAAS,OAAc;AACvB,SAAK,aAAa,WAAW,KAAK;AAAA,EACtC;AAAA,EAEA,IAAI,YAAuB;AACvB,WAAQ,KAAK,aAAa,WAAW,KAAmB;AAAA,EAC5D;AAAA,EAEA,IAAI,UAAW,OAAiB;AAC5B,SAAK,aAAa,aAAa,KAAK;AAAA,EACxC;AAAA,EAEA,IAAI,UAAqB;AACrB,UAAM,OAAO,KAAK,aAAa,SAAS,KAAK;AAC7C,WAAO,KAAK,MAAM,GAAG,EAAE,OAAO,OAAO;AAAA,EACzC;AAAA,EAEA,IAAI,QAAS,OAAwB;AACjC,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,OAAgB;AAChB,WAAO,KAAK;AAAA,EAChB;AAAA,EAEA,IAAI,KAAM,OAAe;AACrB,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,WAAmB;AACnB,WAAO,SAAS,KAAK,aAAa,UAAU,KAAK,KAAK,EAAE;AAAA,EAC5D;AAAA,EAEA,IAAI,SAAU,OAAc;AACxB,SAAK,aAAa,YAAY,OAAO,KAAK,CAAC;AAAA,EAC/C;AAAA,EAEA,IAAI,WAAmB;AACnB,WAAO,SAAS,KAAK,aAAa,UAAU,KAAK,KAAK,EAAE;AAAA,EAC5D;AAAA,EAEA,IAAI,SAAU,OAAc;AACxB,SAAK,aAAa,YAAY,OAAO,KAAK,CAAC;AAAA,EAC/C;AAAA,EAEA,IAAI,QAAiB;AACjB,WAAO,KAAK,aAAa,OAAO;AAAA,EACpC;AAAA,EAEA,IAAI,MAAO,OAAe;AACtB,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,OAAO;AAC7C,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,gCACC,KAAK,OAAO;AAAA;AAAA;AAIpC,SAAK,QAAQ,KAAK,MAAM,cAAc,QAAQ;AAG9C,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,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,SAAS;AAClC,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,SAAS;AACrC,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;AAAA,IAEA,oBAAO,YAAY,OAAO;",
+  "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 TAG = 'tool-tip'\n    static observedAttributes = ['content', 'placement', 'disabled',\n        'open', 'distance', 'skidding', 'delay']\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    private _showTimeout:number|null = null\n\n    /** The text content of the tooltip. */\n    get content ():string {\n        return this.getAttribute('content') || ''\n    }\n\n    set content (value:string) {\n        this.setAttribute('content', value)\n    }\n\n    /** Where to place the tooltip relative to the target. Defaults to 'top'. */\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    /** Space-separated list of triggers. Defaults to 'hover focus'. */\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    /** Whether the tooltip is disabled. */\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    /** Distance in pixels from the target. Defaults to 8. */\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    /** Lateral offset in pixels. Defaults to 0. */\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    /** Delay in milliseconds before showing the tooltip on hover. Defaults to 0. */\n    get delay ():number {\n        return parseInt(this.getAttribute('delay') || '0', 10)\n    }\n\n    set delay (value:number) {\n        this.setAttribute('delay', 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 (\n        targetRect:DOMRect,\n        popupRect:DOMRect\n    ):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 || this._open) return\n\n        const delay = this.delay\n        if (delay > 0) {\n            if (this._showTimeout) return\n            this._showTimeout = window.setTimeout(() => {\n                this.open = true\n                this._showTimeout = null\n            }, delay)\n        } else {\n            this.open = true\n        }\n    }\n\n    /**\n     * Programmatically hide the tooltip\n     */\n    hide () {\n        if (this._showTimeout) {\n            window.clearTimeout(this._showTimeout)\n            this._showTimeout = null\n        }\n        this.open = false\n    }\n}\n\ndefine(ToolTip.TAG, ToolTip)\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/index.d.ts

@@ -6,26 +6,37 @@ declare global {
 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 TAG: string;
     static observedAttributes: string[];
     private popup;
     private arrow;
     private target;
     private _open;
     private _disabled;
+    private _showTimeout;
+    /** The text content of the tooltip. */
     get content(): string;
     set content(value: string);
+    /** Where to place the tooltip relative to the target. Defaults to 'top'. */
     get placement(): Placement;
     set placement(value: Placement);
+    /** Space-separated list of triggers. Defaults to 'hover focus'. */
     get trigger(): Trigger[];
     set trigger(value: Trigger[] | string);
+    /** Whether the tooltip is disabled. */
     get disabled(): boolean;
     set disabled(value: boolean);
     get open(): boolean;
     set open(value: boolean);
+    /** Distance in pixels from the target. Defaults to 8. */
     get distance(): number;
     set distance(value: number);
+    /** Lateral offset in pixels. Defaults to 0. */
     get skidding(): number;
     set skidding(value: number);
+    /** Delay in milliseconds before showing the tooltip on hover. Defaults to 0. */
+    get delay(): number;
+    set delay(value: number);
     get hoist(): boolean;
     set hoist(value: boolean);
     connectedCallback(): void;

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"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"}
+{"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,GAAG,SAAa;IACvB,MAAM,CAAC,kBAAkB,WACmB;IAE5C,OAAO,CAAC,KAAK,CAA2B;IACxC,OAAO,CAAC,KAAK,CAA2B;IACxC,OAAO,CAAC,MAAM,CAAwB;IAEtC,OAAO,CAAC,KAAK,CAAQ;IACrB,OAAO,CAAC,SAAS,CAAQ;IACzB,OAAO,CAAC,YAAY,CAAmB;IAEvC,uCAAuC;IACvC,IAAI,OAAO,IAAI,MAAM,CAEpB;IAED,IAAI,OAAO,CAAE,KAAK,EAAC,MAAM,EAExB;IAED,4EAA4E;IAC5E,IAAI,SAAS,IAAI,SAAS,CAEzB;IAED,IAAI,SAAS,CAAE,KAAK,EAAC,SAAS,EAE7B;IAED,mEAAmE;IACnE,IAAI,OAAO,IAAI,OAAO,EAAE,CAGvB;IAED,IAAI,OAAO,CAAE,KAAK,EAAC,OAAO,EAAE,GAAC,MAAM,EAMlC;IAED,uCAAuC;IACvC,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAE,KAAK,EAAC,OAAO,EAO1B;IAED,IAAI,IAAI,IAAI,OAAO,CAElB;IAED,IAAI,IAAI,CAAE,KAAK,EAAC,OAAO,EAUtB;IAED,yDAAyD;IACzD,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,IAAI,QAAQ,CAAE,KAAK,EAAC,MAAM,EAEzB;IAED,+CAA+C;IAC/C,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,IAAI,QAAQ,CAAE,KAAK,EAAC,MAAM,EAEzB;IAED,gFAAgF;IAChF,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAE,KAAK,EAAC,MAAM,EAEtB;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;IA8D3B;;OAEG;IACH,IAAI;IAeJ;;OAEG;IACH,IAAI;CAOP"}

package/dist/index.js

@@ -5,31 +5,37 @@ class ToolTip extends HTMLElement {
   static {
     __name(this, "ToolTip");
   }
+  static TAG = "tool-tip";
   static observedAttributes = [
     "content",
     "placement",
     "disabled",
     "open",
     "distance",
-    "skidding"
+    "skidding",
+    "delay"
   ];
   popup = null;
   arrow = null;
   target = null;
   _open = false;
   _disabled = false;
+  _showTimeout = null;
+  /** The text content of the tooltip. */
   get content() {
     return this.getAttribute("content") || "";
   }
   set content(value) {
     this.setAttribute("content", value);
   }
+  /** Where to place the tooltip relative to the target. Defaults to 'top'. */
   get placement() {
     return this.getAttribute("placement") || "top";
   }
   set placement(value) {
     this.setAttribute("placement", value);
   }
+  /** Space-separated list of triggers. Defaults to 'hover focus'. */
   get trigger() {
     const attr = this.getAttribute("trigger") || "hover focus";
     return attr.split(" ").filter(Boolean);
@@ -41,6 +47,7 @@ class ToolTip extends HTMLElement {
       this.setAttribute("trigger", value);
     }
   }
+  /** Whether the tooltip is disabled. */
   get disabled() {
     return this._disabled;
   }
@@ -65,18 +72,27 @@ class ToolTip extends HTMLElement {
       this.hideTooltip();
     }
   }
+  /** Distance in pixels from the target. Defaults to 8. */
   get distance() {
     return parseInt(this.getAttribute("distance") || "8", 10);
   }
   set distance(value) {
     this.setAttribute("distance", String(value));
   }
+  /** Lateral offset in pixels. Defaults to 0. */
   get skidding() {
     return parseInt(this.getAttribute("skidding") || "0", 10);
   }
   set skidding(value) {
     this.setAttribute("skidding", String(value));
   }
+  /** Delay in milliseconds before showing the tooltip on hover. Defaults to 0. */
+  get delay() {
+    return parseInt(this.getAttribute("delay") || "0", 10);
+  }
+  set delay(value) {
+    this.setAttribute("delay", String(value));
+  }
   get hoist() {
     return this.hasAttribute("hoist");
   }
@@ -369,17 +385,30 @@ class ToolTip extends HTMLElement {
    * Programmatically show the tooltip
    */
   show() {
-    if (this._disabled) return;
-    this.open = true;
+    if (this._disabled || this._open) return;
+    const delay = this.delay;
+    if (delay > 0) {
+      if (this._showTimeout) return;
+      this._showTimeout = window.setTimeout(() => {
+        this.open = true;
+        this._showTimeout = null;
+      }, delay);
+    } else {
+      this.open = true;
+    }
   }
   /**
    * Programmatically hide the tooltip
    */
   hide() {
+    if (this._showTimeout) {
+      window.clearTimeout(this._showTimeout);
+      this._showTimeout = null;
+    }
     this.open = false;
   }
 }
-define("tool-tip", ToolTip);
+define(ToolTip.TAG, ToolTip);
 export {
   ToolTip
 };

package/dist/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "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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",
+  "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 TAG = 'tool-tip'\n    static observedAttributes = ['content', 'placement', 'disabled',\n        'open', 'distance', 'skidding', 'delay']\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    private _showTimeout:number|null = null\n\n    /** The text content of the tooltip. */\n    get content ():string {\n        return this.getAttribute('content') || ''\n    }\n\n    set content (value:string) {\n        this.setAttribute('content', value)\n    }\n\n    /** Where to place the tooltip relative to the target. Defaults to 'top'. */\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    /** Space-separated list of triggers. Defaults to 'hover focus'. */\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    /** Whether the tooltip is disabled. */\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    /** Distance in pixels from the target. Defaults to 8. */\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    /** Lateral offset in pixels. Defaults to 0. */\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    /** Delay in milliseconds before showing the tooltip on hover. Defaults to 0. */\n    get delay ():number {\n        return parseInt(this.getAttribute('delay') || '0', 10)\n    }\n\n    set delay (value:number) {\n        this.setAttribute('delay', 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 (\n        targetRect:DOMRect,\n        popupRect:DOMRect\n    ):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 || this._open) return\n\n        const delay = this.delay\n        if (delay > 0) {\n            if (this._showTimeout) return\n            this._showTimeout = window.setTimeout(() => {\n                this.open = true\n                this._showTimeout = null\n            }, delay)\n        } else {\n            this.open = true\n        }\n    }\n\n    /**\n     * Programmatically hide the tooltip\n     */\n    hide () {\n        if (this._showTimeout) {\n            window.clearTimeout(this._showTimeout)\n            this._showTimeout = null\n        }\n        this.open = false\n    }\n}\n\ndefine(ToolTip.TAG, ToolTip)\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/index.min.js

@@ -1,5 +1,5 @@
-var w=Object.defineProperty;var l=(p,t)=>w(p,"name",{value:t,configurable:!0});var E=Object.defineProperty,y=l((p,t)=>E(p,"name",{value:t,configurable:!0}),"__name");function f(p){return Object.keys(p).reduce((t,e)=>{let i=p[e];return i?typeof i=="boolean"?i?(t+` ${e}`).trim():t:Array.isArray(i)?t+` ${e}="${i.join(" ")}"`:(t+` ${e}="${i}"`).trim():t},"")}l(f,"toAttributes");y(f,"toAttributes");var k=Object.defineProperty,m=l((p,t)=>k(p,"name",{value:t,configurable:!0}),"__name");function v(p){return document.createElement(p).constructor!==window.HTMLElement}l(v,"isRegistered");m(v,"isRegistered");function b(p,t){window&&"customElements"in window&&(v(p)||window.customElements.define(p,t))}l(b,"define");m(b,"define");var T=document.querySelector.bind(document),P=document.querySelectorAll.bind(document);var g=class extends HTMLElement{static{l(this,"ToolTip")}static observedAttributes=["content","placement","disabled","open","distance","skidding"];popup=null;arrow=null;target=null;_open=!1;_disabled=!1;get content(){return this.getAttribute("content")||""}set content(t){this.setAttribute("content",t)}get placement(){return this.getAttribute("placement")||"top"}set placement(t){this.setAttribute("placement",t)}get trigger(){return(this.getAttribute("trigger")||"hover focus").split(" ").filter(Boolean)}set trigger(t){Array.isArray(t)?this.setAttribute("trigger",t.join(" ")):this.setAttribute("trigger",t)}get disabled(){return this._disabled}set disabled(t){this._disabled=t,t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get open(){return this._open}set open(t){if(this._disabled)return;let e=this._open;this._open=t,t&&!e?this.showTooltip():!t&&e&&this.hideTooltip()}get distance(){return parseInt(this.getAttribute("distance")||"8",10)}set distance(t){this.setAttribute("distance",String(t))}get skidding(){return parseInt(this.getAttribute("skidding")||"0",10)}set skidding(t){this.setAttribute("skidding",String(t))}get hoist(){return this.hasAttribute("hoist")}set hoist(t){t?this.setAttribute("hoist",""):this.removeAttribute("hoist")}connectedCallback(){if(this.style.display="contents",this.target=this.firstElementChild,!this.target){console.warn("tool-tip: No target element found. Add a child element.");return}this.createPopup(),this.bindEvents(),this.hasAttribute("open")&&(this._open=!0,this.showTooltip())}disconnectedCallback(){this.unbindEvents(),this.popup?.remove()}attributeChangedCallback(t,e,i){if(t==="content"&&this.popup){let s=this.popup.querySelector(".body");s&&(s.textContent=i||"")}t==="placement"&&this._open&&this.positionPopup(),t==="disabled"&&(this._disabled=i!==null,this._disabled&&this._open&&this.hide()),t==="open"&&(this.open=i!==null),(t==="distance"||t==="skidding")&&this._open&&this.positionPopup()}createPopup(){this.popup=document.createElement("div"),this.popup.className="popup",this.popup.setAttribute("role","tooltip"),this.popup.setAttribute("aria-hidden","true"),this.popup.innerHTML=`
+var v=Object.defineProperty;var l=(p,t)=>v(p,"name",{value:t,configurable:!0});var E=Object.defineProperty,y=l((p,t)=>E(p,"name",{value:t,configurable:!0}),"__name");function m(p){return Object.keys(p).reduce((t,e)=>{let i=p[e];return i?typeof i=="boolean"?i?(t+` ${e}`).trim():t:Array.isArray(i)?t+` ${e}="${i.join(" ")}"`:(t+` ${e}="${i}"`).trim():t},"")}l(m,"toAttributes");y(m,"toAttributes");var A=Object.defineProperty,f=l((p,t)=>A(p,"name",{value:t,configurable:!0}),"__name");function w(p){return document.createElement(p).constructor!==window.HTMLElement}l(w,"isRegistered");f(w,"isRegistered");function g(p,t){window&&"customElements"in window&&(w(p)||window.customElements.define(p,t))}l(g,"define");f(g,"define");var M=document.querySelector.bind(document),P=document.querySelectorAll.bind(document);var b=class extends HTMLElement{static{l(this,"ToolTip")}static TAG="tool-tip";static observedAttributes=["content","placement","disabled","open","distance","skidding","delay"];popup=null;arrow=null;target=null;_open=!1;_disabled=!1;_showTimeout=null;get content(){return this.getAttribute("content")||""}set content(t){this.setAttribute("content",t)}get placement(){return this.getAttribute("placement")||"top"}set placement(t){this.setAttribute("placement",t)}get trigger(){return(this.getAttribute("trigger")||"hover focus").split(" ").filter(Boolean)}set trigger(t){Array.isArray(t)?this.setAttribute("trigger",t.join(" ")):this.setAttribute("trigger",t)}get disabled(){return this._disabled}set disabled(t){this._disabled=t,t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get open(){return this._open}set open(t){if(this._disabled)return;let e=this._open;this._open=t,t&&!e?this.showTooltip():!t&&e&&this.hideTooltip()}get distance(){return parseInt(this.getAttribute("distance")||"8",10)}set distance(t){this.setAttribute("distance",String(t))}get skidding(){return parseInt(this.getAttribute("skidding")||"0",10)}set skidding(t){this.setAttribute("skidding",String(t))}get delay(){return parseInt(this.getAttribute("delay")||"0",10)}set delay(t){this.setAttribute("delay",String(t))}get hoist(){return this.hasAttribute("hoist")}set hoist(t){t?this.setAttribute("hoist",""):this.removeAttribute("hoist")}connectedCallback(){if(this.style.display="contents",this.target=this.firstElementChild,!this.target){console.warn("tool-tip: No target element found. Add a child element.");return}this.createPopup(),this.bindEvents(),this.hasAttribute("open")&&(this._open=!0,this.showTooltip())}disconnectedCallback(){this.unbindEvents(),this.popup?.remove()}attributeChangedCallback(t,e,i){if(t==="content"&&this.popup){let s=this.popup.querySelector(".body");s&&(s.textContent=i||"")}t==="placement"&&this._open&&this.positionPopup(),t==="disabled"&&(this._disabled=i!==null,this._disabled&&this._open&&this.hide()),t==="open"&&(this.open=i!==null),(t==="distance"||t==="skidding")&&this._open&&this.positionPopup()}createPopup(){this.popup=document.createElement("div"),this.popup.className="popup",this.popup.setAttribute("role","tooltip"),this.popup.setAttribute("aria-hidden","true"),this.popup.innerHTML=`
             <div class="body">${this.content}</div>
             <div class="arrow"></div>
-        `,this.arrow=this.popup.querySelector(".arrow"),this.hoist?document.body.appendChild(this.popup):this.appendChild(this.popup)}bindEvents(){if(!this.target)return;let t=this.trigger;t.includes("hover")&&(this.target.addEventListener("mouseenter",this.handleMouseEnter),this.target.addEventListener("mouseleave",this.handleMouseLeave)),t.includes("focus")&&(this.target.addEventListener("focus",this.handleFocus),this.target.addEventListener("blur",this.handleBlur)),t.includes("click")&&this.target.addEventListener("click",this.handleClick),this.target.addEventListener("keydown",this.handleKeyDown)}unbindEvents(){this.target&&(this.target.removeEventListener("mouseenter",this.handleMouseEnter),this.target.removeEventListener("mouseleave",this.handleMouseLeave),this.target.removeEventListener("blur",this.handleBlur),this.target.removeEventListener("click",this.handleClick),this.target.removeEventListener("keydown",this.handleKeyDown))}handleMouseEnter=l(()=>{this.show()},"handleMouseEnter");handleMouseLeave=l(()=>{this.hide()},"handleMouseLeave");handleFocus=l(()=>{this.show()},"handleFocus");handleBlur=l(()=>{this.hide()},"handleBlur");handleClick=l(()=>{this._open?this.hide():this.show()},"handleClick");handleKeyDown=l(t=>{t.key==="Escape"&&this._open&&this.hide()},"handleKeyDown");showTooltip(){if(!this.popup||this._disabled)return;let t=new CustomEvent("tool-tip-show",{bubbles:!0,cancelable:!0});this.dispatchEvent(t)&&(this.popup.classList.add("visible"),this.popup.setAttribute("aria-hidden","false"),this.positionPopup(),this.dispatchEvent(new CustomEvent("tool-tip-after-show",{bubbles:!0})))}hideTooltip(){if(!this.popup)return;let t=new CustomEvent("tool-tip-hide",{bubbles:!0,cancelable:!0});this.dispatchEvent(t)&&(this.popup.classList.remove("visible"),this.popup.setAttribute("aria-hidden","true"),this.dispatchEvent(new CustomEvent("tool-tip-after-hide",{bubbles:!0})))}positionPopup(){if(!this.popup||!this.target)return;let t=this.target.getBoundingClientRect(),e=this.popup.getBoundingClientRect(),i=8,s=0,a=0,r="",n="",o="",h=this.distance,d=this.skidding,u=this.getOptimalPlacement(t,e);switch(this.popup.dataset.placement=u,u){case"top":s=t.top-e.height-h-i,a=t.left+t.width/2-e.width/2+d,r="100%",n="50%",o="translateX(-50%)";break;case"top-start":s=t.top-e.height-h-i,a=t.left+d,r="100%",n=`${Math.min(24,e.width/2)}px`,o="translateX(-50%)";break;case"top-end":s=t.top-e.height-h-i,a=t.right-e.width+d,r="100%",n=`calc(100% - ${Math.min(24,e.width/2)}px)`,o="translateX(-50%)";break;case"bottom":s=t.bottom+h+i,a=t.left+t.width/2-e.width/2+d,r="0",n="50%",o="translateX(-50%) translateY(-100%)";break;case"bottom-start":s=t.bottom+h+i,a=t.left+d,r="0",n=`${Math.min(24,e.width/2)}px`,o="translateX(-50%) translateY(-100%)";break;case"bottom-end":s=t.bottom+h+i,a=t.right-e.width+d,r="0",n=`calc(100% - ${Math.min(24,e.width/2)}px)`,o="translateX(-50%) translateY(-100%)";break;case"left":s=t.top+t.height/2-e.height/2+d,a=t.left-e.width-h-i,r="50%",n="100%",o="translateY(-50%)";break;case"left-start":s=t.top+d,a=t.left-e.width-h-i,r=`${Math.min(16,e.height/2)}px`,n="100%",o="translateY(-50%)";break;case"left-end":s=t.bottom-e.height+d,a=t.left-e.width-h-i,r=`calc(100% - ${Math.min(16,e.height/2)}px)`,n="100%",o="translateY(-50%)";break;case"right":s=t.top+t.height/2-e.height/2+d,a=t.right+h+i,r="50%",n="0",o="translateY(-50%) translateX(-100%)";break;case"right-start":s=t.top+d,a=t.right+h+i,r=`${Math.min(16,e.height/2)}px`,n="0",o="translateY(-50%) translateX(-100%)";break;case"right-end":s=t.bottom-e.height+d,a=t.right+h+i,r=`calc(100% - ${Math.min(16,e.height/2)}px)`,n="0",o="translateY(-50%) translateX(-100%)";break}this.hoist&&(s+=window.scrollY,a+=window.scrollX),this.popup.style.top=`${s}px`,this.popup.style.left=`${a}px`,this.arrow&&(this.arrow.style.top=r,this.arrow.style.left=n,this.arrow.style.transform=o)}getOptimalPlacement(t,e){let i=this.placement,s=window.innerWidth,a=window.innerHeight,r=this.distance,n=8,o={top:t.top-e.height-r-n>0,bottom:t.bottom+e.height+r+n<a,left:t.left-e.width-r-n>0,right:t.right+e.width+r+n<s},h=i.split("-")[0];if(o[h])return i;let u={top:"bottom",bottom:"top",left:"right",right:"left"}[h];if(o[u]){let c=i.includes("-")?i.split("-")[1]:"";return c?`${u}-${c}`:u}for(let c of["top","bottom","left","right"])if(o[c])return c;return i}show(){this._disabled||(this.open=!0)}hide(){this.open=!1}};b("tool-tip",g);export{g as ToolTip};
+        `,this.arrow=this.popup.querySelector(".arrow"),this.hoist?document.body.appendChild(this.popup):this.appendChild(this.popup)}bindEvents(){if(!this.target)return;let t=this.trigger;t.includes("hover")&&(this.target.addEventListener("mouseenter",this.handleMouseEnter),this.target.addEventListener("mouseleave",this.handleMouseLeave)),t.includes("focus")&&(this.target.addEventListener("focus",this.handleFocus),this.target.addEventListener("blur",this.handleBlur)),t.includes("click")&&this.target.addEventListener("click",this.handleClick),this.target.addEventListener("keydown",this.handleKeyDown)}unbindEvents(){this.target&&(this.target.removeEventListener("mouseenter",this.handleMouseEnter),this.target.removeEventListener("mouseleave",this.handleMouseLeave),this.target.removeEventListener("blur",this.handleBlur),this.target.removeEventListener("click",this.handleClick),this.target.removeEventListener("keydown",this.handleKeyDown))}handleMouseEnter=l(()=>{this.show()},"handleMouseEnter");handleMouseLeave=l(()=>{this.hide()},"handleMouseLeave");handleFocus=l(()=>{this.show()},"handleFocus");handleBlur=l(()=>{this.hide()},"handleBlur");handleClick=l(()=>{this._open?this.hide():this.show()},"handleClick");handleKeyDown=l(t=>{t.key==="Escape"&&this._open&&this.hide()},"handleKeyDown");showTooltip(){if(!this.popup||this._disabled)return;let t=new CustomEvent("tool-tip-show",{bubbles:!0,cancelable:!0});this.dispatchEvent(t)&&(this.popup.classList.add("visible"),this.popup.setAttribute("aria-hidden","false"),this.positionPopup(),this.dispatchEvent(new CustomEvent("tool-tip-after-show",{bubbles:!0})))}hideTooltip(){if(!this.popup)return;let t=new CustomEvent("tool-tip-hide",{bubbles:!0,cancelable:!0});this.dispatchEvent(t)&&(this.popup.classList.remove("visible"),this.popup.setAttribute("aria-hidden","true"),this.dispatchEvent(new CustomEvent("tool-tip-after-hide",{bubbles:!0})))}positionPopup(){if(!this.popup||!this.target)return;let t=this.target.getBoundingClientRect(),e=this.popup.getBoundingClientRect(),i=8,s=0,a=0,r="",n="",o="",h=this.distance,d=this.skidding,u=this.getOptimalPlacement(t,e);switch(this.popup.dataset.placement=u,u){case"top":s=t.top-e.height-h-i,a=t.left+t.width/2-e.width/2+d,r="100%",n="50%",o="translateX(-50%)";break;case"top-start":s=t.top-e.height-h-i,a=t.left+d,r="100%",n=`${Math.min(24,e.width/2)}px`,o="translateX(-50%)";break;case"top-end":s=t.top-e.height-h-i,a=t.right-e.width+d,r="100%",n=`calc(100% - ${Math.min(24,e.width/2)}px)`,o="translateX(-50%)";break;case"bottom":s=t.bottom+h+i,a=t.left+t.width/2-e.width/2+d,r="0",n="50%",o="translateX(-50%) translateY(-100%)";break;case"bottom-start":s=t.bottom+h+i,a=t.left+d,r="0",n=`${Math.min(24,e.width/2)}px`,o="translateX(-50%) translateY(-100%)";break;case"bottom-end":s=t.bottom+h+i,a=t.right-e.width+d,r="0",n=`calc(100% - ${Math.min(24,e.width/2)}px)`,o="translateX(-50%) translateY(-100%)";break;case"left":s=t.top+t.height/2-e.height/2+d,a=t.left-e.width-h-i,r="50%",n="100%",o="translateY(-50%)";break;case"left-start":s=t.top+d,a=t.left-e.width-h-i,r=`${Math.min(16,e.height/2)}px`,n="100%",o="translateY(-50%)";break;case"left-end":s=t.bottom-e.height+d,a=t.left-e.width-h-i,r=`calc(100% - ${Math.min(16,e.height/2)}px)`,n="100%",o="translateY(-50%)";break;case"right":s=t.top+t.height/2-e.height/2+d,a=t.right+h+i,r="50%",n="0",o="translateY(-50%) translateX(-100%)";break;case"right-start":s=t.top+d,a=t.right+h+i,r=`${Math.min(16,e.height/2)}px`,n="0",o="translateY(-50%) translateX(-100%)";break;case"right-end":s=t.bottom-e.height+d,a=t.right+h+i,r=`calc(100% - ${Math.min(16,e.height/2)}px)`,n="0",o="translateY(-50%) translateX(-100%)";break}this.hoist&&(s+=window.scrollY,a+=window.scrollX),this.popup.style.top=`${s}px`,this.popup.style.left=`${a}px`,this.arrow&&(this.arrow.style.top=r,this.arrow.style.left=n,this.arrow.style.transform=o)}getOptimalPlacement(t,e){let i=this.placement,s=window.innerWidth,a=window.innerHeight,r=this.distance,n=8,o={top:t.top-e.height-r-n>0,bottom:t.bottom+e.height+r+n<a,left:t.left-e.width-r-n>0,right:t.right+e.width+r+n<s},h=i.split("-")[0];if(o[h])return i;let u={top:"bottom",bottom:"top",left:"right",right:"left"}[h];if(o[u]){let c=i.includes("-")?i.split("-")[1]:"";return c?`${u}-${c}`:u}for(let c of["top","bottom","left","right"])if(o[c])return c;return i}show(){if(this._disabled||this._open)return;let t=this.delay;if(t>0){if(this._showTimeout)return;this._showTimeout=window.setTimeout(()=>{this.open=!0,this._showTimeout=null},t)}else this.open=!0}hide(){this._showTimeout&&(window.clearTimeout(this._showTimeout),this._showTimeout=null),this.open=!1}};g(b.TAG,b);export{b as ToolTip};
 //# sourceMappingURL=index.min.js.map

package/dist/index.min.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../node_modules/@substrate-system/web-component/src/attributes.ts", "../node_modules/@substrate-system/web-component/src/util.ts", "../src/index.ts"],
-  "sourcesContent": ["export type Attrs = Record<string, undefined|null|string|number|boolean|(string|number)[]>\n\n/**\n * Transform an object into an HTML attributes string. The object should be\n * like `{ attributeName: value }`.\n *\n * @param attrs An object for the attributes.\n * @returns {string} A string suitable for use as HTML attributes.\n */\nexport function toAttributes (attrs:Attrs):string {\n    return Object.keys(attrs).reduce((acc, k) => {\n        const value = attrs[k]\n        if (!value) return acc\n\n        if (typeof value === 'boolean') {\n            if (value) return (acc + ` ${k}`).trim()\n            return acc\n        }\n\n        if (Array.isArray(value)) {\n            return (acc + ` ${k}=\"${value.join(' ')}\"`)\n        }\n\n        return (acc + ` ${k}=\"${value}\"`).trim()\n    }, '')\n}\n", "export { toAttributes } from './attributes.js'\n\n/**\n * Check if the given tag name has been registered.\n *\n * @see {@link https://stackoverflow.com/a/28210364 stackoverflow}\n * @param {string} elName The custom element tag name.\n * @returns {boolean} True if the given name has been registered already.\n */\nexport function isRegistered (elName:string):boolean {\n    return document.createElement(elName).constructor !== window.HTMLElement\n}\n\nexport function define (name:string, element:CustomElementConstructor) {\n    if (!window) return\n    if (!('customElements' in window)) return\n\n    if (!isRegistered(name)) {\n        window.customElements.define(name, element)\n    }\n}\n\nexport const qs = document.querySelector.bind(document)\nexport const qsa = document.querySelectorAll.bind(document)\n", "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": "sKASO,SAASA,EAAcC,EAAoB,CAC9C,OAAO,OAAO,KAAKA,CAAK,EAAE,OAAO,CAACC,EAAKC,IAAM,CACzC,IAAMC,EAAQH,EAAME,CAAC,EACrB,OAAKC,EAED,OAAOA,GAAU,UACbA,GAAeF,EAAM,IAAIC,CAAC,IAAI,KAAK,EAChCD,EAGP,MAAM,QAAQE,CAAK,EACXF,EAAM,IAAIC,CAAC,KAAKC,EAAM,KAAK,GAAG,CAAC,KAGnCF,EAAM,IAAIC,CAAC,KAAKC,CAAK,KAAK,KAAK,EAXpBF,CAYvB,EAAG,EAAE,CACT,CAhBgBG,EAAAL,EAAA,gBAAAK,EAAAL,EAAA,cAAA,yFCAT,SAASM,EAAcC,EAAuB,CACjD,OAAO,SAAS,cAAcA,CAAM,EAAE,cAAgB,OAAO,WACjE,CAFgBC,EAAAF,EAAA,gBAAAE,EAAAF,EAAA,cAAA,EAIT,SAASG,EAAQC,EAAaC,EAAkC,CAC9D,QACC,mBAAoB,SAErBL,EAAaI,CAAI,GAClB,OAAO,eAAe,OAAOA,EAAMC,CAAO,EAElD,CAPgBH,EAAAC,EAAA,UAAAD,EAAAC,EAAA,QAAA,EAST,IAAMG,EAAK,SAAS,cAAc,KAAK,QAAQ,EACzCC,EAAM,SAAS,iBAAiB,KAAK,QAAQ,ECEnD,IAAMC,EAAN,cAAsB,WAAY,CAzBzC,MAyByC,CAAAC,EAAA,gBACrC,OAAO,mBAAqB,CAAC,UAAW,YAAa,WACjD,OAAQ,WAAY,UAAU,EAE1B,MAA4B,KAC5B,MAA4B,KAC5B,OAA0B,KAE1B,MAAQ,GACR,UAAY,GAEpB,IAAI,SAAkB,CAClB,OAAO,KAAK,aAAa,SAAS,GAAK,EAC3C,CAEA,IAAI,QAASC,EAAc,CACvB,KAAK,aAAa,UAAWA,CAAK,CACtC,CAEA,IAAI,WAAuB,CACvB,OAAQ,KAAK,aAAa,WAAW,GAAmB,KAC5D,CAEA,IAAI,UAAWA,EAAiB,CAC5B,KAAK,aAAa,YAAaA,CAAK,CACxC,CAEA,IAAI,SAAqB,CAErB,OADa,KAAK,aAAa,SAAS,GAAK,eACjC,MAAM,GAAG,EAAE,OAAO,OAAO,CACzC,CAEA,IAAI,QAASA,EAAwB,CAC7B,MAAM,QAAQA,CAAK,EACnB,KAAK,aAAa,UAAWA,EAAM,KAAK,GAAG,CAAC,EAE5C,KAAK,aAAa,UAAWA,CAAK,CAE1C,CAEA,IAAI,UAAqB,CACrB,OAAO,KAAK,SAChB,CAEA,IAAI,SAAUA,EAAgB,CAC1B,KAAK,UAAYA,EACbA,EACA,KAAK,aAAa,WAAY,EAAE,EAEhC,KAAK,gBAAgB,UAAU,CAEvC,CAEA,IAAI,MAAgB,CAChB,OAAO,KAAK,KAChB,CAEA,IAAI,KAAMA,EAAe,CACrB,GAAI,KAAK,UAAW,OACpB,IAAMC,EAAU,KAAK,MACrB,KAAK,MAAQD,EAETA,GAAS,CAACC,EACV,KAAK,YAAY,EACV,CAACD,GAASC,GACjB,KAAK,YAAY,CAEzB,CAEA,IAAI,UAAmB,CACnB,OAAO,SAAS,KAAK,aAAa,UAAU,GAAK,IAAK,EAAE,CAC5D,CAEA,IAAI,SAAUD,EAAc,CACxB,KAAK,aAAa,WAAY,OAAOA,CAAK,CAAC,CAC/C,CAEA,IAAI,UAAmB,CACnB,OAAO,SAAS,KAAK,aAAa,UAAU,GAAK,IAAK,EAAE,CAC5D,CAEA,IAAI,SAAUA,EAAc,CACxB,KAAK,aAAa,WAAY,OAAOA,CAAK,CAAC,CAC/C,CAEA,IAAI,OAAiB,CACjB,OAAO,KAAK,aAAa,OAAO,CACpC,CAEA,IAAI,MAAOA,EAAe,CAClBA,EACA,KAAK,aAAa,QAAS,EAAE,EAE7B,KAAK,gBAAgB,OAAO,CAEpC,CAEA,mBAAqB,CAOjB,GALA,KAAK,MAAM,QAAU,WAGrB,KAAK,OAAS,KAAK,kBAEf,CAAC,KAAK,OAAQ,CACd,QAAQ,KAAK,yDACa,EAC1B,MACJ,CAGA,KAAK,YAAY,EAGjB,KAAK,WAAW,EAGZ,KAAK,aAAa,MAAM,IACxB,KAAK,MAAQ,GACb,KAAK,YAAY,EAEzB,CAEA,sBAAwB,CACpB,KAAK,aAAa,EAClB,KAAK,OAAO,OAAO,CACvB,CAEA,yBACIE,EACAC,EACAC,EACF,CACE,GAAIF,IAAS,WAAa,KAAK,MAAO,CAClC,IAAMG,EAAO,KAAK,MAAM,cAAc,OAAO,EACzCA,IACAA,EAAK,YAAcD,GAAY,GAEvC,CAEIF,IAAS,aAAe,KAAK,OAC7B,KAAK,cAAc,EAGnBA,IAAS,aACT,KAAK,UAAYE,IAAa,KAC1B,KAAK,WAAa,KAAK,OACvB,KAAK,KAAK,GAIdF,IAAS,SACT,KAAK,KAAOE,IAAa,OAGxBF,IAAS,YAAcA,IAAS,aAAe,KAAK,OACrD,KAAK,cAAc,CAE3B,CAEQ,aAAe,CACnB,KAAK,MAAQ,SAAS,cAAc,KAAK,EACzC,KAAK,MAAM,UAAY,QACvB,KAAK,MAAM,aAAa,OAAQ,SAAS,EACzC,KAAK,MAAM,aAAa,cAAe,MAAM,EAC7C,KAAK,MAAM,UAAY;AAAA,gCACC,KAAK,OAAO;AAAA;AAAA,UAIpC,KAAK,MAAQ,KAAK,MAAM,cAAc,QAAQ,EAG1C,KAAK,MACL,SAAS,KAAK,YAAY,KAAK,KAAK,EAEpC,KAAK,YAAY,KAAK,KAAK,CAEnC,CAEQ,YAAc,CAClB,GAAI,CAAC,KAAK,OAAQ,OAElB,IAAMI,EAAW,KAAK,QAElBA,EAAS,SAAS,OAAO,IACzB,KAAK,OAAO,iBAAiB,aAAc,KAAK,gBAAgB,EAChE,KAAK,OAAO,iBAAiB,aAAc,KAAK,gBAAgB,GAGhEA,EAAS,SAAS,OAAO,IACzB,KAAK,OAAO,iBAAiB,QAAS,KAAK,WAAW,EACtD,KAAK,OAAO,iBAAiB,OAAQ,KAAK,UAAU,GAGpDA,EAAS,SAAS,OAAO,GACzB,KAAK,OAAO,iBAAiB,QAAS,KAAK,WAAW,EAI1D,KAAK,OAAO,iBAAiB,UAAW,KAAK,aAAa,CAC9D,CAEQ,cAAgB,CACf,KAAK,SAEV,KAAK,OAAO,oBAAoB,aAAc,KAAK,gBAAgB,EACnE,KAAK,OAAO,oBAAoB,aAAc,KAAK,gBAAgB,EACnE,KAAK,OAAO,oBAAoB,OAAQ,KAAK,UAAU,EACvD,KAAK,OAAO,oBAAoB,QAAS,KAAK,WAAW,EACzD,KAAK,OAAO,oBAAoB,UAAW,KAAK,aAAa,EACjE,CAEQ,iBAAmBP,EAAA,IAAM,CAC7B,KAAK,KAAK,CACd,EAF2B,oBAInB,iBAAmBA,EAAA,IAAM,CAC7B,KAAK,KAAK,CACd,EAF2B,oBAInB,YAAcA,EAAA,IAAM,CACxB,KAAK,KAAK,CACd,EAFsB,eAId,WAAaA,EAAA,IAAM,CACvB,KAAK,KAAK,CACd,EAFqB,cAIb,YAAcA,EAAA,IAAM,CACpB,KAAK,MACL,KAAK,KAAK,EAEV,KAAK,KAAK,CAElB,EANsB,eAQd,cAAgBA,EAACQ,GAAyB,CAE1CA,EAAM,MAAQ,UAAY,KAAK,OAC/B,KAAK,KAAK,CAElB,EALwB,iBAOhB,aAAe,CACnB,GAAI,CAAC,KAAK,OAAS,KAAK,UAAW,OAGnC,IAAMC,EAAY,IAAI,YAAY,gBAAiB,CAC/C,QAAS,GACT,WAAY,EAChB,CAAC,EACI,KAAK,cAAcA,CAAS,IAEjC,KAAK,MAAM,UAAU,IAAI,SAAS,EAClC,KAAK,MAAM,aAAa,cAAe,OAAO,EAG9C,KAAK,cAAc,EAGnB,KAAK,cAAc,IAAI,YAAY,sBAAuB,CACtD,QAAS,EACb,CAAC,CAAC,EACN,CAEQ,aAAe,CACnB,GAAI,CAAC,KAAK,MAAO,OAGjB,IAAMC,EAAY,IAAI,YAAY,gBAAiB,CAC/C,QAAS,GACT,WAAY,EAChB,CAAC,EACI,KAAK,cAAcA,CAAS,IAEjC,KAAK,MAAM,UAAU,OAAO,SAAS,EACrC,KAAK,MAAM,aAAa,cAAe,MAAM,EAG7C,KAAK,cAAc,IAAI,YAAY,sBAAuB,CACtD,QAAS,EACb,CAAC,CAAC,EACN,CAEQ,eAAiB,CACrB,GAAI,CAAC,KAAK,OAAS,CAAC,KAAK,OAAQ,OAEjC,IAAMC,EAAa,KAAK,OAAO,sBAAsB,EAC/CC,EAAY,KAAK,MAAM,sBAAsB,EAC7CC,EAAY,EAEdC,EAAM,EACNC,EAAO,EACPC,EAAW,GACXC,EAAY,GACZC,EAAiB,GAEfC,EAAW,KAAK,SAChBC,EAAW,KAAK,SAChBC,EAAY,KAAK,oBAAoBV,EAAYC,CAAS,EAKhE,OAFA,KAAK,MAAM,QAAQ,UAAYS,EAEvBA,EAAW,CACf,IAAK,MACDP,EAAMH,EAAW,IAAMC,EAAU,OAASO,EAAWN,EACrDE,EAAOJ,EAAW,KAAQA,EAAW,MAAQ,EACxCC,EAAU,MAAQ,EAAKQ,EAC5BJ,EAAW,OACXC,EAAY,MACZC,EAAiB,mBACjB,MACJ,IAAK,YACDJ,EAAMH,EAAW,IAAMC,EAAU,OAASO,EAAWN,EACrDE,EAAOJ,EAAW,KAAOS,EACzBJ,EAAW,OACXC,EAAY,GAAG,KAAK,IAAI,GAAIL,EAAU,MAAQ,CAAC,CAAC,KAChDM,EAAiB,mBACjB,MACJ,IAAK,UACDJ,EAAMH,EAAW,IAAMC,EAAU,OAASO,EAAWN,EACrDE,EAAOJ,EAAW,MAAQC,EAAU,MAAQQ,EAC5CJ,EAAW,OACXC,EAAY,eAAe,KAAK,IAAI,GAAIL,EAAU,MAAQ,CAAC,CAAC,MAC5DM,EAAiB,mBACjB,MACJ,IAAK,SACDJ,EAAMH,EAAW,OAASQ,EAAWN,EACrCE,EAAOJ,EAAW,KAAQA,EAAW,MAAQ,EACxCC,EAAU,MAAQ,EAAKQ,EAC5BJ,EAAW,IACXC,EAAY,MACZC,EAAiB,qCACjB,MACJ,IAAK,eACDJ,EAAMH,EAAW,OAASQ,EAAWN,EACrCE,EAAOJ,EAAW,KAAOS,EACzBJ,EAAW,IACXC,EAAY,GAAG,KAAK,IAAI,GAAIL,EAAU,MAAQ,CAAC,CAAC,KAChDM,EAAiB,qCACjB,MACJ,IAAK,aACDJ,EAAMH,EAAW,OAASQ,EAAWN,EACrCE,EAAOJ,EAAW,MAAQC,EAAU,MAAQQ,EAC5CJ,EAAW,IACXC,EAAY,eAAe,KAAK,IAAI,GAAIL,EAAU,MAAQ,CAAC,CAAC,MAC5DM,EAAiB,qCACjB,MACJ,IAAK,OACDJ,EAAMH,EAAW,IAAOA,EAAW,OAAS,EACvCC,EAAU,OAAS,EAAKQ,EAC7BL,EAAOJ,EAAW,KAAOC,EAAU,MAAQO,EAAWN,EACtDG,EAAW,MACXC,EAAY,OACZC,EAAiB,mBACjB,MACJ,IAAK,aACDJ,EAAMH,EAAW,IAAMS,EACvBL,EAAOJ,EAAW,KAAOC,EAAU,MAAQO,EAAWN,EACtDG,EAAW,GAAG,KAAK,IAAI,GAAIJ,EAAU,OAAS,CAAC,CAAC,KAChDK,EAAY,OACZC,EAAiB,mBACjB,MACJ,IAAK,WACDJ,EAAMH,EAAW,OAASC,EAAU,OAASQ,EAC7CL,EAAOJ,EAAW,KAAOC,EAAU,MAAQO,EAAWN,EACtDG,EAAW,eAAe,KAAK,IAAI,GAAIJ,EAAU,OAAS,CAAC,CAAC,MAC5DK,EAAY,OACZC,EAAiB,mBACjB,MACJ,IAAK,QACDJ,EAAMH,EAAW,IAAOA,EAAW,OAAS,EACvCC,EAAU,OAAS,EAAKQ,EAC7BL,EAAOJ,EAAW,MAAQQ,EAAWN,EACrCG,EAAW,MACXC,EAAY,IACZC,EAAiB,qCACjB,MACJ,IAAK,cACDJ,EAAMH,EAAW,IAAMS,EACvBL,EAAOJ,EAAW,MAAQQ,EAAWN,EACrCG,EAAW,GAAG,KAAK,IAAI,GAAIJ,EAAU,OAAS,CAAC,CAAC,KAChDK,EAAY,IACZC,EAAiB,qCACjB,MACJ,IAAK,YACDJ,EAAMH,EAAW,OAASC,EAAU,OAASQ,EAC7CL,EAAOJ,EAAW,MAAQQ,EAAWN,EACrCG,EAAW,eAAe,KAAK,IAAI,GAAIJ,EAAU,OAAS,CAAC,CAAC,MAC5DK,EAAY,IACZC,EAAiB,qCACjB,KACR,CAGI,KAAK,QACLJ,GAAO,OAAO,QACdC,GAAQ,OAAO,SAInB,KAAK,MAAM,MAAM,IAAM,GAAGD,CAAG,KAC7B,KAAK,MAAM,MAAM,KAAO,GAAGC,CAAI,KAG3B,KAAK,QACL,KAAK,MAAM,MAAM,IAAMC,EACvB,KAAK,MAAM,MAAM,KAAOC,EACxB,KAAK,MAAM,MAAM,UAAYC,EAErC,CAEQ,oBAAqBP,EAAoBC,EAA6B,CAC1E,IAAMS,EAAY,KAAK,UACjBC,EAAgB,OAAO,WACvBC,EAAiB,OAAO,YACxBJ,EAAW,KAAK,SAChBN,EAAY,EAGZW,EAAO,CACT,IAAKb,EAAW,IAAMC,EAAU,OAASO,EAAWN,EAAY,EAChE,OAASF,EAAW,OAASC,EAAU,OAASO,EAC5CN,EAAYU,EAChB,KAAMZ,EAAW,KAAOC,EAAU,MAAQO,EAAWN,EAAY,EACjE,MAAQF,EAAW,MAAQC,EAAU,MAAQO,EACzCN,EAAYS,CACpB,EAGMG,EAAgBJ,EAAU,MAAM,GAAG,EAAE,CAAC,EAM5C,GAAIG,EAAKC,CAAa,EAClB,OAAOJ,EAWX,IAAMK,EAPoC,CACtC,IAAK,SACL,OAAQ,MACR,KAAM,QACN,MAAO,MACX,EAE2BD,CAAa,EAExC,GAAID,EAAKE,CAAQ,EAAG,CAEhB,IAAMC,EAAaN,EAAU,SAAS,GAAG,EACrCA,EAAU,MAAM,GAAG,EAAE,CAAC,EACtB,GACJ,OAAQM,EACJ,GAAGD,CAAQ,IAAIC,CAAS,GACxBD,CACR,CAGA,QAAWE,IAAO,CAAC,MAAO,SAAU,OAAQ,OAAO,EAC/C,GAAIJ,EAAKI,CAAG,EACR,OAAOA,EAKf,OAAOP,CACX,CAKA,MAAQ,CACA,KAAK,YACT,KAAK,KAAO,GAChB,CAKA,MAAQ,CACJ,KAAK,KAAO,EAChB,CACJ,EAEAQ,EAAO,WAAY9B,CAAO",
-  "names": ["toAttributes", "attrs", "acc", "k", "value", "__name", "isRegistered", "elName", "__name", "define", "name", "element", "qs", "qsa", "ToolTip", "__name", "value", "wasOpen", "name", "_oldValue", "newValue", "body", "triggers", "event", "showEvent", "hideEvent", "targetRect", "popupRect", "arrowSize", "top", "left", "arrowTop", "arrowLeft", "arrowTransform", "distance", "skidding", "placement", "viewportWidth", "viewportHeight", "fits", "baseDirection", "opposite", "alignment", "dir", "define"]
+  "sourcesContent": ["export type Attrs = Record<string, undefined|null|string|number|boolean|(string|number)[]>\n\n/**\n * Transform an object into an HTML attributes string. The object should be\n * like `{ attributeName: value }`.\n *\n * @param attrs An object for the attributes.\n * @returns {string} A string suitable for use as HTML attributes.\n */\nexport function toAttributes (attrs:Attrs):string {\n    return Object.keys(attrs).reduce((acc, k) => {\n        const value = attrs[k]\n        if (!value) return acc\n\n        if (typeof value === 'boolean') {\n            if (value) return (acc + ` ${k}`).trim()\n            return acc\n        }\n\n        if (Array.isArray(value)) {\n            return (acc + ` ${k}=\"${value.join(' ')}\"`)\n        }\n\n        return (acc + ` ${k}=\"${value}\"`).trim()\n    }, '')\n}\n", "export { toAttributes } from './attributes.js'\n\n/**\n * Check if the given tag name has been registered.\n *\n * @see {@link https://stackoverflow.com/a/28210364 stackoverflow}\n * @param {string} elName The custom element tag name.\n * @returns {boolean} True if the given name has been registered already.\n */\nexport function isRegistered (elName:string):boolean {\n    return document.createElement(elName).constructor !== window.HTMLElement\n}\n\nexport function define (name:string, element:CustomElementConstructor) {\n    if (!window) return\n    if (!('customElements' in window)) return\n\n    if (!isRegistered(name)) {\n        window.customElements.define(name, element)\n    }\n}\n\nexport const qs = document.querySelector.bind(document)\nexport const qsa = document.querySelectorAll.bind(document)\n", "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 TAG = 'tool-tip'\n    static observedAttributes = ['content', 'placement', 'disabled',\n        'open', 'distance', 'skidding', 'delay']\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    private _showTimeout:number|null = null\n\n    /** The text content of the tooltip. */\n    get content ():string {\n        return this.getAttribute('content') || ''\n    }\n\n    set content (value:string) {\n        this.setAttribute('content', value)\n    }\n\n    /** Where to place the tooltip relative to the target. Defaults to 'top'. */\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    /** Space-separated list of triggers. Defaults to 'hover focus'. */\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    /** Whether the tooltip is disabled. */\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    /** Distance in pixels from the target. Defaults to 8. */\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    /** Lateral offset in pixels. Defaults to 0. */\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    /** Delay in milliseconds before showing the tooltip on hover. Defaults to 0. */\n    get delay ():number {\n        return parseInt(this.getAttribute('delay') || '0', 10)\n    }\n\n    set delay (value:number) {\n        this.setAttribute('delay', 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 (\n        targetRect:DOMRect,\n        popupRect:DOMRect\n    ):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 || this._open) return\n\n        const delay = this.delay\n        if (delay > 0) {\n            if (this._showTimeout) return\n            this._showTimeout = window.setTimeout(() => {\n                this.open = true\n                this._showTimeout = null\n            }, delay)\n        } else {\n            this.open = true\n        }\n    }\n\n    /**\n     * Programmatically hide the tooltip\n     */\n    hide () {\n        if (this._showTimeout) {\n            window.clearTimeout(this._showTimeout)\n            this._showTimeout = null\n        }\n        this.open = false\n    }\n}\n\ndefine(ToolTip.TAG, ToolTip)\n"],
+  "mappings": "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",
+  "names": ["toAttributes", "attrs", "acc", "k", "value", "__name", "isRegistered", "elName", "__name", "define", "name", "element", "qs", "qsa", "ToolTip", "__name", "value", "wasOpen", "name", "_oldValue", "newValue", "body", "triggers", "event", "showEvent", "hideEvent", "targetRect", "popupRect", "arrowSize", "top", "left", "arrowTop", "arrowLeft", "arrowTransform", "distance", "skidding", "placement", "viewportWidth", "viewportHeight", "fits", "baseDirection", "opposite", "alignment", "dir", "delay", "define"]
 }

package/dist/meta.json

@@ -1,7 +1,7 @@
 {
   "inputs": {
     "src/index.ts": {
-      "bytes": 15584,
+      "bytes": 16749,
       "imports": [],
       "format": "esm"
     }
@@ -11,7 +11,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 24057
+      "bytes": 25739
     },
     "dist/index.js": {
       "imports": [
@@ -27,10 +27,10 @@
       "entryPoint": "src/index.ts",
       "inputs": {
         "src/index.ts": {
-          "bytesInOutput": 11973
+          "bytesInOutput": 12980
         }
       },
-      "bytes": 12158
+      "bytes": 13165
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@substrate-system/tool-tip",
-  "version": "0.0.2",
+  "version": "0.0.5",
   "description": "Tooltips for when you hover",
   "type": "module",
   "exports": {