@nectary/components 0.39.0 → 0.41.0

package/toggle/index.js

@@ -1,115 +1,36 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$input, _$label, _onInput, _onCheckboxFocus, _onCheckboxBlur, _onChangeReactHandler, _onFocusReactHandler, _onBlurReactHandler;
-
-function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
-
-function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
-
 import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;width:100%;height:32px}:host([small]:not([small=false])) #wrapper{font:var(--sinch-font-small-text)}#input{all:initial;display:block;position:absolute;left:0;top:6px;width:40px;height:20px;cursor:pointer;pointer-events:initial}#input:disabled{cursor:initial}:host([small]:not([small=false])) #input{width:32px;height:16px;top:8px}#input:focus-visible::after{position:absolute;content:"";left:-4px;top:-4px;right:-4px;bottom:-4px;border:2px solid var(--sinch-color-aqua-400);border-radius:18px;pointer-events:none}:host([small]:not([small=false])) #input:focus-visible::after{border-radius:14px}@supports not selector(:focus-visible){#input:focus::after{position:absolute;content:"";left:-4px;top:-4px;right:-4px;bottom:-4px;border:2px solid var(--sinch-color-aqua-400);border-radius:18px;pointer-events:none}:host([small]:not([small=false])) #input:focus::after{border-radius:14px}}#knob-container{position:relative;box-sizing:border-box;width:40px;height:20px;border-radius:10px;pointer-events:none;padding:2px;background-color:var(--sinch-color-stormy-100);overflow:hidden}:host([small]:not([small=false])) #knob-container{width:32px;height:16px;border-radius:8px}#input:checked~#knob-container{background-color:var(--sinch-color-tropical-500)}#knob{position:relative;box-sizing:border-box;width:16px;height:16px;border-radius:50%;background-color:var(--sinch-color-snow-100);box-shadow:var(--sinch-elevation-level-1);transform:translateX(0);transition:transform .1s ease-in-out}:host([small]:not([small=false])) #knob{width:12px;height:12px}#input:checked~#knob-container>#knob{transform:translateX(20px)}:host([small]:not([small=false])) #input:checked~#knob-container>#knob{transform:translateX(16px)}#knob::after,#knob::before{font:var(--sinch-font-body);color:var(--sinch-color-snow-100);text-transform:uppercase;font-size:8px;line-height:16px;display:none;position:absolute;top:0;padding:0 3px}#knob::before{content:"on";right:100%}#knob::after{content:"off";left:100%}:host([labeled]:not([labeled=false]):is(:not([small]),[small=false])) #knob::after,:host([labeled]:not([labeled=false]):is(:not([small]),[small=false])) #knob::before{display:block}@media (prefers-reduced-motion){#knob{transition:none}}#label{flex:1;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:8px;font:var(--sinch-font-body);color:var(--sinch-color-text-default)}#label:empty{display:none}#input:disabled~#label{color:var(--sinch-color-stormy-200)}#input:disabled~#knob-container{background-color:var(--sinch-color-snow-700)}#input:checked:disabled~#knob-container{background-color:var(--sinch-color-tropical-100)}</style><div id="wrapper"><input id="input" type="checkbox"><div id="knob-container"><div id="knob"></div></div><label id="label" for="input"></label></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;width:100%;height:32px}:host([small]:not([small=false])) #wrapper{font:var(--sinch-font-small-text)}#input{all:initial;display:block;position:absolute;left:0;top:6px;width:40px;height:20px;cursor:pointer;pointer-events:initial}#input:disabled{cursor:initial}:host([small]:not([small=false])) #input{width:32px;height:16px;top:8px}#input:focus-visible::after{position:absolute;content:"";left:-4px;top:-4px;right:-4px;bottom:-4px;border:2px solid var(--sinch-color-border-focus);border-radius:18px;pointer-events:none}:host([small]:not([small=false])) #input:focus-visible::after{border-radius:14px}@supports not selector(:focus-visible){#input:focus::after{position:absolute;content:"";left:-4px;top:-4px;right:-4px;bottom:-4px;border:2px solid var(--sinch-color-border-focus);border-radius:18px;pointer-events:none}:host([small]:not([small=false])) #input:focus::after{border-radius:14px}}#knob-container{position:relative;box-sizing:border-box;width:40px;height:20px;border-radius:10px;pointer-events:none;padding:2px;background-color:var(--sinch-color-stormy-100);overflow:hidden}:host([small]:not([small=false])) #knob-container{width:32px;height:16px;border-radius:8px}#input:checked~#knob-container{background-color:var(--sinch-color-tropical-500)}#knob{position:relative;box-sizing:border-box;width:16px;height:16px;border-radius:50%;background-color:var(--sinch-color-snow-100);box-shadow:var(--sinch-elevation-level-1);transform:translateX(0);transition:transform .1s ease-in-out}:host([small]:not([small=false])) #knob{width:12px;height:12px}#input:checked~#knob-container>#knob{transform:translateX(20px)}:host([small]:not([small=false])) #input:checked~#knob-container>#knob{transform:translateX(16px)}#knob::after,#knob::before{font:var(--sinch-font-body);color:var(--sinch-color-snow-100);text-transform:uppercase;font-size:8px;line-height:16px;display:none;position:absolute;top:0;padding:0 3px}#knob::before{content:"on";right:100%}#knob::after{content:"off";left:100%}:host([labeled]:not([labeled=false]):is(:not([small]),[small=false])) #knob::after,:host([labeled]:not([labeled=false]):is(:not([small]),[small=false])) #knob::before{display:block}@media (prefers-reduced-motion){#knob{transition:none}}#label{flex:1;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:8px;font:var(--sinch-font-body);color:var(--sinch-color-text-default)}#label:empty{display:none}#input:disabled~#label{color:var(--sinch-color-stormy-200)}#input:disabled~#knob-container{background-color:var(--sinch-color-snow-700)}#input:checked:disabled~#knob-container{background-color:var(--sinch-color-tropical-100)}</style><div id="wrapper"><input id="input" type="checkbox"><div id="knob-container"><div id="knob"></div></div><label id="label" for="input"></label></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-toggle', (_$input = new WeakMap(), _$label = new WeakMap(), _onInput = new WeakMap(), _onCheckboxFocus = new WeakMap(), _onCheckboxBlur = new WeakMap(), _onChangeReactHandler = new WeakMap(), _onFocusReactHandler = new WeakMap(), _onBlurReactHandler = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-toggle', class extends NectaryElement {
+  #$input;
+  #$label;
+
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$input, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$label, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _onInput, {
-      writable: true,
-      value: e => {
-        e.stopPropagation();
-
-        const isChecked = _classPrivateFieldGet(this, _$input).checked;
-
-        _classPrivateFieldGet(this, _$input).checked = this.checked;
-        this.dispatchEvent(new CustomEvent('change', {
-          detail: isChecked,
-          bubbles: true
-        }));
-        this.dispatchEvent(new CustomEvent('-change', {
-          detail: isChecked
-        }));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onCheckboxFocus, {
-      writable: true,
-      value: () => {
-        this.dispatchEvent(new CustomEvent('-focus'));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onCheckboxBlur, {
-      writable: true,
-      value: () => {
-        this.dispatchEvent(new CustomEvent('-blur'));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onChangeReactHandler, {
-      writable: true,
-      value: e => {
-        getReactEventHandler(this, 'on-change')?.(e);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onFocusReactHandler, {
-      writable: true,
-      value: e => {
-        getReactEventHandler(this, 'on-focus')?.(e);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onBlurReactHandler, {
-      writable: true,
-      value: e => {
-        getReactEventHandler(this, 'on-blur')?.(e);
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$input, shadowRoot.querySelector('#input'));
-
-    _classPrivateFieldSet(this, _$label, shadowRoot.querySelector('#label'));
+    this.#$input = shadowRoot.querySelector('#input');
+    this.#$label = shadowRoot.querySelector('#label');
   }
 
   connectedCallback() {
     this.setAttribute('role', 'checkbox');
-
-    _classPrivateFieldGet(this, _$input).addEventListener('input', _classPrivateFieldGet(this, _onInput));
-
-    _classPrivateFieldGet(this, _$input).addEventListener('focus', _classPrivateFieldGet(this, _onCheckboxFocus));
-
-    _classPrivateFieldGet(this, _$input).addEventListener('blur', _classPrivateFieldGet(this, _onCheckboxBlur));
-
-    this.addEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
-    this.addEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
-    this.addEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
+    this.#$input.addEventListener('input', this.#onInput);
+    this.#$input.addEventListener('focus', this.#onCheckboxFocus);
+    this.#$input.addEventListener('blur', this.#onCheckboxBlur);
+    this.addEventListener('-change', this.#onChangeReactHandler);
+    this.addEventListener('-focus', this.#onFocusReactHandler);
+    this.addEventListener('-blur', this.#onBlurReactHandler);
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$input).removeEventListener('input', _classPrivateFieldGet(this, _onInput));
-
-    _classPrivateFieldGet(this, _$input).removeEventListener('focus', _classPrivateFieldGet(this, _onCheckboxFocus));
-
-    _classPrivateFieldGet(this, _$input).removeEventListener('blur', _classPrivateFieldGet(this, _onCheckboxBlur));
-
-    this.removeEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
-    this.removeEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
-    this.removeEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
+    this.#$input.removeEventListener('input', this.#onInput);
+    this.#$input.removeEventListener('focus', this.#onCheckboxFocus);
+    this.#$input.removeEventListener('blur', this.#onCheckboxBlur);
+    this.removeEventListener('-change', this.#onChangeReactHandler);
+    this.removeEventListener('-focus', this.#onFocusReactHandler);
+    this.removeEventListener('-blur', this.#onBlurReactHandler);
   }
 
   static get observedAttributes() {
@@ -161,21 +82,21 @@ defineCustomElement('sinch-toggle', (_$input = new WeakMap(), _$label = new Weak
   }
 
   get text() {
-    return getAttribute(this, 'text', null);
+    return getAttribute(this, 'text');
   }
 
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case 'text':
         {
-          _classPrivateFieldGet(this, _$label).textContent = newVal;
+          this.#$label.textContent = newVal;
           break;
         }
 
       case 'checked':
         {
           const isChecked = isAttrTrue(newVal);
-          _classPrivateFieldGet(this, _$input).checked = isChecked;
+          this.#$input.checked = isChecked;
           updateExplicitBooleanAttribute(this, 'aria-checked', isChecked);
           break;
         }
@@ -183,19 +104,50 @@ defineCustomElement('sinch-toggle', (_$input = new WeakMap(), _$label = new Weak
       case 'disabled':
         {
           const isDisabled = isAttrTrue(newVal);
-          _classPrivateFieldGet(this, _$input).disabled = isDisabled;
+          this.#$input.disabled = isDisabled;
           updateBooleanAttribute(this, 'disabled', isDisabled);
           break;
         }
     }
   }
 
-  focus() {
-    _classPrivateFieldGet(this, _$input).focus();
+  get focusable() {
+    return true;
   }
 
-  blur() {
-    _classPrivateFieldGet(this, _$input).blur();
+  focus() {
+    this.#$input.focus();
   }
 
-}));
+  blur() {
+    this.#$input.blur();
+  }
+
+  #onInput = e => {
+    e.stopPropagation();
+    const isChecked = this.#$input.checked;
+    this.#$input.checked = this.checked;
+    this.dispatchEvent(new CustomEvent('change', {
+      detail: isChecked,
+      bubbles: true
+    }));
+    this.dispatchEvent(new CustomEvent('-change', {
+      detail: isChecked
+    }));
+  };
+  #onCheckboxFocus = () => {
+    this.dispatchEvent(new CustomEvent('-focus'));
+  };
+  #onCheckboxBlur = () => {
+    this.dispatchEvent(new CustomEvent('-blur'));
+  };
+  #onChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-change')?.(e);
+  };
+  #onFocusReactHandler = e => {
+    getReactEventHandler(this, 'on-focus')?.(e);
+  };
+  #onBlurReactHandler = e => {
+    getReactEventHandler(this, 'on-blur')?.(e);
+  };
+});

package/tooltip/index.d.ts

@@ -1,3 +1,5 @@
+import '../text';
+import '../pop';
 import type { TSinchTooltipElement, TSinchTooltipReact } from './types';
 declare global {
     namespace JSX {

package/tooltip/index.js

@@ -1,18 +1,81 @@
-import { attrValueToPixels, defineCustomElement, getBooleanAttribute, getIntegerAttribute, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, getRect, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{position:relative;display:block}#tooltip{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .2s linear .2s}@media (prefers-reduced-motion){#tooltip{transition:none}}:host(:hover) #tooltip{opacity:1}#text{position:absolute;padding:2px 6px;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-600);width:max-content;border-radius:var(--sinch-shape-radius-xs);top:-8px;left:50%;transform:translateX(-50%) translateY(-100%);word-break:break-word}#arrow{position:absolute;top:-8px;left:50%;transform:translateX(-50%);fill:var(--sinch-color-snow-600)}:host([orientation=top-left]) #text{transform:translateX(-80%) translateY(-100%)}:host([orientation=top-right]) #text{transform:translateX(-20%) translateY(-100%)}:host([orientation=bottom-right]) #text{top:calc(100% + 8px);transform:translateX(-20%)}:host([orientation=bottom-left]) #text{top:calc(100% + 8px);transform:translateX(-80%)}:host([orientation=bottom]) #text{top:calc(100% + 8px);transform:translateX(-50%)}:host([orientation^=bottom]) #arrow{top:calc(100% + 4px);transform:translateX(-50%) rotate(180deg)}:host([orientation=left]) #text{left:unset;right:calc(100% + 8px);top:50%;transform:translateY(-50%)}:host([orientation=left]) #arrow{left:-11px;top:50%;transform:translateY(-50%) rotate(270deg)}:host([orientation=right]) #text{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}:host([orientation=right]) #arrow{top:50%;left:calc(100% + 2px);transform:translateY(-50%) rotate(90deg)}:host([inverted]:not([inverted=false])) #text{color:var(--sinch-color-text-inverted);background-color:var(--sinch-color-stormy-500)}:host([inverted]:not([inverted=false])) #arrow{fill:var(--sinch-color-stormy-500)}::slotted(*){display:block}</style><div id="wrapper"><slot></slot><div id="tooltip"><div id="text"></div><svg id="arrow" width="9" height="4" aria-hidden="true"><path d="m4.5 4 4-4h-8l4 4Z"/></svg></div></div>';
-import { orientationValues } from './utils';
+import '../text';
+import '../pop';
+import { defineCustomElement, getBooleanAttribute, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, setClass, rectOverlap } from '../utils';
+import { TooltipState } from '../utils/animation';
+const templateHTML = '<style>:host{display:contents}#content-wrapper{padding-bottom:8px}#content{position:relative;display:block;max-width:300px;padding:2px 6px;box-sizing:border-box;color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-600);border-radius:var(--sinch-shape-radius-xs);pointer-events:none;opacity:0}:host([orientation=left]) #content-wrapper{padding-bottom:0;padding-right:8px}:host([orientation=right]) #content-wrapper{padding-bottom:0;padding-left:8px}:host([orientation^=bottom]) #content-wrapper{padding-bottom:0;padding-top:8px}#text{word-break:break-word;pointer-events:none}#tip{position:absolute;left:50%;top:100%;transform:translateX(-50%) rotate(0);transform-origin:top center;fill:var(--sinch-color-snow-600);pointer-events:none}#tip.hidden{display:none}:host([orientation=left]) #tip{transform:translateX(-50%) rotate(270deg);top:50%;left:100%}:host([orientation=right]) #tip{transform:translateX(-50%) rotate(90deg);top:50%;left:0}:host([orientation^=bottom]) #tip{transform:translateX(-50%) rotate(180deg);top:0}:host([inverted]:not([inverted=false])) #content{background-color:var(--sinch-color-stormy-500);color:var(--sinch-color-text-inverted)}:host([inverted]:not([inverted=false])) #tip{fill:var(--sinch-color-stormy-500)}</style><sinch-pop id="pop"><slot id="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><sinch-text id="text" type="s"></sinch-text><svg id="tip" width="8" height="4" aria-hidden="true"><path d="m4 4 4-4h-8l4 4Z"/></svg></div></div></sinch-pop>';
+import { assertOrientation, getPopOrientation, orientationValues } from './utils';
+const TIP_SIZE = 8;
+const SHOW_DELAY = 1000;
+const HIDE_DELAY = 100;
+const ANIMATION_DURATION = 100;
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-tooltip', class extends NectaryElement {
+  #$pop;
+  #$tooltipText;
+  #$content;
+  #$contentWrapper;
+  #$tip;
+  #$target;
+  #controller = null;
+  #tooltipState;
+  #animation = null;
+  #shouldReduceMotion = false;
+
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.$tooltipText = shadowRoot.querySelector('#text');
+    this.#$pop = shadowRoot.querySelector('#pop');
+    this.#$tooltipText = shadowRoot.querySelector('#text');
+    this.#$content = shadowRoot.querySelector('#content');
+    this.#$contentWrapper = shadowRoot.querySelector('#content-wrapper');
+    this.#$tip = shadowRoot.querySelector('#tip');
+    this.#$target = shadowRoot.querySelector('#target');
+    this.#shouldReduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    this.#tooltipState = new TooltipState({
+      showDelay: SHOW_DELAY,
+      hideDelay: this.#shouldReduceMotion ? HIDE_DELAY + ANIMATION_DURATION : HIDE_DELAY,
+      hideAnimationDuration: this.#shouldReduceMotion ? 0 : ANIMATION_DURATION,
+      onShow: this.#onShow,
+      onHideStart: this.#onHideStart,
+      onHideEnd: this.#onHideEnd
+    });
+  }
+
+  connectedCallback() {
+    this.#controller = new AbortController();
+    const {
+      signal
+    } = this.#controller;
+    this.#$pop.addEventListener('-close', this.#onPopClose, {
+      signal
+    });
+    this.#$target.addEventListener('mousedown', this.#onMouseDown, {
+      signal
+    });
+    this.#$target.addEventListener('mouseenter', this.#onMouseEnter, {
+      signal
+    });
+    this.#$target.addEventListener('mouseleave', this.#onMouseLeave, {
+      signal
+    });
+    this.#$contentWrapper.addEventListener('mouseenter', this.#onMouseEnter, {
+      signal
+    });
+    this.#$contentWrapper.addEventListener('mouseleave', this.#onMouseLeave, {
+      signal
+    });
+    updateAttribute(this.#$pop, 'orientation', getPopOrientation(this.orientation));
+  }
+
+  disconnectedCallback() {
+    this.#controller.abort();
+    this.#tooltipState.destroy();
   }
 
   static get observedAttributes() {
-    return ['text', 'width'];
+    return ['text', 'orientation'];
   }
 
   get text() {
@@ -23,14 +86,6 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
     updateAttribute(this, 'text', value);
   }
 
-  get width() {
-    return getIntegerAttribute(this, 'width', null);
-  }
-
-  set width(value) {
-    updateAttribute(this, 'width', value);
-  }
-
   get inverted() {
     return getBooleanAttribute(this, 'inverted');
   }
@@ -47,24 +102,112 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
     updateLiteralAttribute(this, orientationValues, 'orientation', value);
   }
 
+  get footprintRect() {
+    return this.#$pop.footprintRect;
+  }
+
   get tooltipRect() {
-    return getRect(this.$tooltipText);
+    return this.#$pop.popoverRect;
   }
 
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case 'text':
         {
-          this.$tooltipText.textContent = newVal;
+          this.#$tooltipText.textContent = newVal;
           break;
         }
 
-      case 'width':
+      case 'orientation':
         {
-          this.$tooltipText.style.maxWidth = attrValueToPixels(newVal);
+          assertOrientation(newVal);
+          updateAttribute(this.#$pop, 'orientation', getPopOrientation(newVal));
+
+          if (this.#isOpen()) {
+            this.#resetTipOrientation();
+            this.#updateTipOrientation();
+          }
+
           break;
         }
     }
   }
 
+  #onMouseDown = () => {
+    this.#tooltipState.interrupt();
+  };
+  #onPopClose = () => {
+    this.#tooltipState.destroy();
+  };
+  #onMouseEnter = () => {
+    this.#tooltipState.show();
+  };
+  #onMouseLeave = e => {
+    if (!this.#isOpen() || e.relatedTarget !== this.#$contentWrapper && e.relatedTarget !== this.#$target) {
+      this.#tooltipState.hide();
+    }
+  };
+  #onShow = () => {
+    updateBooleanAttribute(this.#$pop, 'open', true);
+    requestAnimationFrame(this.#updateTipOrientation);
+
+    if (this.#animation !== null) {
+      this.#animation.updatePlaybackRate(1);
+      this.#animation.play();
+    } else {
+      this.#animation = this.#$content.animate({
+        opacity: [0, 1]
+      }, {
+        duration: this.#shouldReduceMotion ? 0 : ANIMATION_DURATION,
+        iterations: 1,
+        fill: 'forwards'
+      });
+    }
+  };
+  #onHideStart = () => {
+    this.#animation.updatePlaybackRate(-1);
+    this.#animation.play();
+  };
+  #onHideEnd = () => {
+    this.#animation.finish();
+    this.#resetTipOrientation();
+    updateBooleanAttribute(this.#$pop, 'open', false);
+  };
+
+  #resetTipOrientation() {
+    this.#$tip.style.top = '';
+    this.#$tip.style.left = '';
+  }
+
+  #updateTipOrientation = () => {
+    const orient = this.orientation;
+    const targetRect = this.#$pop.footprintRect;
+    const contentRect = this.#$content.getBoundingClientRect();
+    const diffX = targetRect.x - contentRect.x;
+    const diffY = targetRect.y - contentRect.y;
+
+    if (orient === 'left' || orient === 'right') {
+      const yPos = Math.max(TIP_SIZE, Math.min(diffY + targetRect.height / 2, contentRect.height - TIP_SIZE));
+      this.#$tip.style.top = `${yPos}px`;
+    } else {
+      let xPos = Math.max(TIP_SIZE, Math.min(diffX + targetRect.width / 2, contentRect.width - TIP_SIZE));
+
+      if (orient === 'bottom-left' || orient === 'top-left') {
+        xPos = Math.max(xPos, contentRect.width * 0.75);
+      }
+
+      if (orient === 'bottom-right' || orient === 'top-right') {
+        xPos = Math.min(xPos, contentRect.width * 0.25);
+      }
+
+      this.#$tip.style.left = `${xPos}px`;
+    }
+
+    setClass(this.#$tip, 'hidden', rectOverlap(targetRect, contentRect));
+  };
+
+  #isOpen() {
+    return this.#$pop.hasAttribute('open');
+  }
+
 });

package/tooltip/types.d.ts

@@ -1,19 +1,32 @@
 import type { TRect, TSinchElementReact } from '../types';
 export declare type TSinchTooltipOrientation = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 export declare type TSinchTooltipElement = HTMLElement & {
+    /** Text */
     text: string;
+    /** @deprecated */
     width: number | null;
+    /** Inverted */
     inverted: boolean;
+    /** Orientation, where it *points to* from origin */
     orientation: TSinchTooltipOrientation;
+    readonly footprintRect: TRect;
     readonly tooltipRect: TRect;
+    /** Text */
     setAttribute(name: 'text', value: string): void;
+    /** @deprecated */
     setAttribute(name: 'width', value: string): void;
+    /** Inverted */
     setAttribute(name: 'inverted', value: ''): void;
+    /** Orientation, where it *points to* from origin */
     setAttribute(name: 'orientation', value: TSinchTooltipOrientation): void;
 };
 export declare type TSinchTooltipReact = TSinchElementReact<TSinchTooltipElement> & {
+    /** Text */
     text: string;
+    /** @deprecated */
     width?: number;
+    /** Inverted */
     inverted?: boolean;
+    /** Orientation, where it *points to* from origin */
     orientation?: TSinchTooltipOrientation;
 };

package/tooltip/utils.d.ts

@@ -1,2 +1,7 @@
+import type { TSinchPopOrientation } from '../pop/types';
 import type { TSinchTooltipOrientation } from './types';
 export declare const orientationValues: readonly TSinchTooltipOrientation[];
+export declare const getPopOrientation: (orientation: TSinchTooltipOrientation) => TSinchPopOrientation;
+declare type TAssertOrientation = (value: string | null) => asserts value is TSinchTooltipOrientation;
+export declare const assertOrientation: TAssertOrientation;
+export {};

package/tooltip/utils.js

@@ -1 +1,25 @@
-export const orientationValues = ['top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'];
+export const orientationValues = ['top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'];
+export const getPopOrientation = orientation => {
+  if (orientation === 'top') {
+    return 'top-center';
+  }
+
+  if (orientation === 'bottom') {
+    return 'bottom-center';
+  }
+
+  if (orientation === 'left') {
+    return 'center-left';
+  }
+
+  if (orientation === 'right') {
+    return 'center-right';
+  }
+
+  return orientation;
+};
+export const assertOrientation = value => {
+  if (value === null || !orientationValues.includes(value)) {
+    throw new Error(`sinch-tooltip: invalid orientation attribute: ${value}`);
+  }
+};

package/utils/animation.d.ts

@@ -0,0 +1,17 @@
+declare type TTooltipStateOptions = {
+    showDelay: number;
+    hideDelay: number;
+    hideAnimationDuration: number;
+    onShow(): void;
+    onHideStart(): void;
+    onHideEnd(): void;
+};
+export declare class TooltipState {
+    #private;
+    constructor(options: TTooltipStateOptions);
+    show(): void;
+    hide(): void;
+    interrupt(): void;
+    destroy(): void;
+}
+export {};

package/utils/animation.js

@@ -0,0 +1,142 @@
+export class TooltipState {
+  #timerId = null;
+  #state = 'initial';
+  #options;
+
+  constructor(options) {
+    this.#options = options;
+  }
+
+  show() {
+    switch (this.#state) {
+      case 'initial':
+        {
+          this.#delayShow();
+          break;
+        }
+
+      case 'hide-delay':
+        {
+          this.#cancelStateChange('show');
+          break;
+        }
+
+      case 'hide':
+        {
+          this.#cancelStateChange();
+          this.#onShow();
+          break;
+        }
+    }
+  }
+
+  hide() {
+    switch (this.#state) {
+      case 'show-delay':
+        {
+          this.#cancelStateChange('initial');
+          break;
+        }
+
+      case 'show':
+        {
+          this.#delayHide();
+          break;
+        }
+    }
+  }
+
+  interrupt() {
+    switch (this.#state) {
+      case 'show-delay':
+        {
+          this.#cancelStateChange('initial');
+          break;
+        }
+
+      case 'show':
+        {
+          this.#onHideStart();
+          break;
+        }
+
+      case 'hide-delay':
+        {
+          this.#cancelStateChange();
+          this.#onHideStart();
+          break;
+        }
+    }
+  }
+
+  destroy() {
+    switch (this.#state) {
+      case 'show-delay':
+        {
+          this.#cancelStateChange('initial');
+          break;
+        }
+
+      case 'show':
+        {
+          this.#onHideStart(true);
+          break;
+        }
+
+      case 'hide-delay':
+        {
+          this.#cancelStateChange();
+          this.#onHideStart(true);
+          break;
+        }
+
+      case 'hide':
+        {
+          this.#cancelStateChange();
+          this.#onHideEnd();
+          break;
+        }
+    }
+  }
+
+  #delayShow() {
+    this.#state = 'show-delay';
+    this.#timerId = window.setTimeout(this.#onShow, this.#options.showDelay);
+  }
+
+  #delayHide() {
+    this.#state = 'hide-delay';
+    this.#timerId = window.setTimeout(this.#onHideStart, this.#options.hideDelay);
+  }
+
+  #onShow = () => {
+    this.#state = 'show';
+    this.#options.onShow();
+  };
+  #onHideStart = isImmediate => {
+    this.#state = 'hide';
+    this.#options.onHideStart();
+
+    if (isImmediate === true || this.#options.hideAnimationDuration === 0) {
+      this.#onHideEnd();
+    } else {
+      this.#timerId = window.setTimeout(this.#onHideEnd, this.#options.hideAnimationDuration);
+    }
+  };
+  #onHideEnd = () => {
+    this.#state = 'initial';
+    this.#options.onHideEnd();
+  };
+
+  #cancelStateChange(nextState) {
+    if (nextState != null) {
+      this.#state = nextState;
+    }
+
+    if (this.#timerId !== null) {
+      clearTimeout(this.#timerId);
+      this.#timerId = null;
+    }
+  }
+
+}