@nectary/components 0.42.0 → 0.43.0

package/theme/fonts.css

@@ -0,0 +1,85 @@
+@font-face {
+  font-family: "Gilroy";
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+  src:
+    local("Gilroy-Regular"),
+    url("https://d2vu40klajma73.cloudfront.net/Gilroy-Regular.woff2") format("woff2"),
+    url("https://d2vu40klajma73.cloudfront.net/Gilroy-Regular.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Gilroy";
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+  src:
+    local("Gilroy-SemiBold"),
+    url("https://d2vu40klajma73.cloudfront.net/Gilroy-SemiBold.woff2") format("woff2"),
+    url("https://d2vu40klajma73.cloudfront.net/Gilroy-SemiBold.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Gilroy";
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+  src:
+    local("Gilroy-Bold"),
+    url("https://d2vu40klajma73.cloudfront.net/Gilroy-Bold.woff2") format("woff2"),
+    url("https://d2vu40klajma73.cloudfront.net/Gilroy-Bold.woff") format("woff");
+}
+
+@font-face {
+  font-family: "DM Sans";
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+  src:
+    local("DMSans-Regular"),
+    url("https://d2vu40klajma73.cloudfront.net/DM-Sans-400.woff2") format("woff2"),
+    url("https://d2vu40klajma73.cloudfront.net/DM-Sans-400.woff") format("woff");
+}
+
+@font-face {
+  font-family: "DM Sans";
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+  src:
+    local("DMSans-Medium"),
+    url("https://d2vu40klajma73.cloudfront.net/DM-Sans-500.woff2") format("woff2"),
+    url("https://d2vu40klajma73.cloudfront.net/DM-Sans-500.woff") format("woff");
+}
+
+@font-face {
+  font-family: "DM Sans";
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+  src:
+    local("DMSans-Bold"),
+    url("https://d2vu40klajma73.cloudfront.net/DM-Sans-700.woff2") format("woff2"),
+    url("https://d2vu40klajma73.cloudfront.net/DM-Sans-700.woff") format("woff");
+}
+
+@font-face {
+  font-family: "DM Mono";
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+  src:
+    local("DMMono-Regular"),
+    url("https://d2vu40klajma73.cloudfront.net/DM-Mono-400.woff2") format("woff2"),
+    url("https://d2vu40klajma73.cloudfront.net/DM-Mono-400.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Material Icons Outlined";
+  font-style: normal;
+  font-weight: 400;
+  src:
+    url("https://fonts.gstatic.com/s/materialsymbolsoutlined/v63/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOejbd5zrDAt.woff2") format("woff2"),
+    url("https://fonts.gstatic.com/s/materialsymbolsoutlined/v63/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOelbd5zrDAt.woff") format("woff");
+}

package/theme/fonts.json

@@ -0,0 +1,88 @@
+[
+  {
+    "family": "Gilroy",
+    "weight": 400,
+    "style": "normal",
+    "display": "swap",
+    "src": {
+      "local": "Gilroy-Regular",
+      "woff2": "https://d2vu40klajma73.cloudfront.net/Gilroy-Regular.woff2",
+      "woff": "https://d2vu40klajma73.cloudfront.net/Gilroy-Regular.woff"
+    }
+  },
+  {
+    "family": "Gilroy",
+    "weight": 600,
+    "style": "normal",
+    "display": "swap",
+    "src": {
+      "local": "Gilroy-SemiBold",
+      "woff2": "https://d2vu40klajma73.cloudfront.net/Gilroy-SemiBold.woff2",
+      "woff": "https://d2vu40klajma73.cloudfront.net/Gilroy-SemiBold.woff"
+    }
+  },
+  {
+    "family": "Gilroy",
+    "weight": 700,
+    "style": "normal",
+    "display": "swap",
+    "src": {
+      "local": "Gilroy-Bold",
+      "woff2": "https://d2vu40klajma73.cloudfront.net/Gilroy-Bold.woff2",
+      "woff": "https://d2vu40klajma73.cloudfront.net/Gilroy-Bold.woff"
+    }
+  },
+  {
+    "family": "DM Sans",
+    "weight": 400,
+    "style": "normal",
+    "display": "swap",
+    "src": {
+      "local": "DMSans-Regular",
+      "woff2": "https://d2vu40klajma73.cloudfront.net/DM-Sans-400.woff2",
+      "woff": "https://d2vu40klajma73.cloudfront.net/DM-Sans-400.woff"
+    }
+  },
+  {
+    "family": "DM Sans",
+    "weight": 500,
+    "style": "normal",
+    "display": "swap",
+    "src": {
+      "local": "DMSans-Medium",
+      "woff2": "https://d2vu40klajma73.cloudfront.net/DM-Sans-500.woff2",
+      "woff": "https://d2vu40klajma73.cloudfront.net/DM-Sans-500.woff"
+    }
+  },
+  {
+    "family": "DM Sans",
+    "weight": 700,
+    "style": "normal",
+    "display": "swap",
+    "src": {
+      "local": "DMSans-Bold",
+      "woff2": "https://d2vu40klajma73.cloudfront.net/DM-Sans-700.woff2",
+      "woff": "https://d2vu40klajma73.cloudfront.net/DM-Sans-700.woff"
+    }
+  },
+  {
+    "family": "DM Mono",
+    "weight": 400,
+    "style": "normal",
+    "display": "swap",
+    "src": {
+      "local": "DMMono-Regular",
+      "woff2": "https://d2vu40klajma73.cloudfront.net/DM-Mono-400.woff2",
+      "woff": "https://d2vu40klajma73.cloudfront.net/DM-Mono-400.woff"
+    }
+  },
+  {
+    "family": "Material Icons Outlined",
+    "weight": 400,
+    "style": "normal",
+    "src": {
+      "woff2": "https://fonts.gstatic.com/s/materialsymbolsoutlined/v63/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOejbd5zrDAt.woff2",
+      "woff": "https://fonts.gstatic.com/s/materialsymbolsoutlined/v63/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOelbd5zrDAt.woff"
+    }
+  }
+]

package/theme/icon.css

@@ -0,0 +1,7 @@
+:root,
+:host {
+  --sinch-icon-font-family: "Material Icons Outlined";
+  --sinch-icon-font-variation-settings: "FILL" 1;
+  --sinch-icon-font-feature-settings: "liga";
+  --sinch-icon-font-weight: 400;
+}

package/theme/palette.css

@@ -0,0 +1,90 @@
+:root,
+:host {
+  --sinch-color-honey-700: #CC8800;
+  --sinch-color-honey-600: #FFAA00;
+  --sinch-color-honey-500: #FFBE3C;
+  --sinch-color-honey-400: #FFCC66;
+  --sinch-color-honey-300: #FFDF9E;
+  --sinch-color-honey-200: #FCECCB;
+  --sinch-color-honey-100: #FFF7E6;
+  --sinch-color-tropical-700: #003D3D;
+  --sinch-color-tropical-600: #005757;
+  --sinch-color-tropical-500: #007171;
+  --sinch-color-tropical-400: #059688;
+  --sinch-color-tropical-300: #66AAAA;
+  --sinch-color-tropical-200: #A7D5C2;
+  --sinch-color-tropical-100: #DCEDE1;
+  --sinch-color-tropical-50: #E5F1F1;
+  --sinch-color-stormy-700: #000000;
+  --sinch-color-stormy-600: #171717;
+  --sinch-color-stormy-500: #242424;
+  --sinch-color-stormy-400: #595959;
+  --sinch-color-stormy-300: #767676;
+  --sinch-color-stormy-200: #8C8C8C;
+  --sinch-color-stormy-100: #A6A6A6;
+  --sinch-color-ocean-700: #1B3E65;
+  --sinch-color-ocean-600: #1686CB;
+  --sinch-color-ocean-500: #3AA7EA;
+  --sinch-color-ocean-400: #6EBBEE;
+  --sinch-color-ocean-300: #A1D5F5;
+  --sinch-color-ocean-200: #C8E6F9;
+  --sinch-color-ocean-100: #DEF2FF;
+  --sinch-color-ocean-50: #F3FAFE;
+  --sinch-color-snow-700: #CCCCCC;
+  --sinch-color-snow-600: #D9D9D9;
+  --sinch-color-snow-500: #E0E0E0;
+  --sinch-color-snow-400: #F2F2F2;
+  --sinch-color-snow-200: #F8F8F8;
+  --sinch-color-snow-100: #FFFFFF;
+  --sinch-color-raspberry-700: #882024;
+  --sinch-color-raspberry-600: #D13D42;
+  --sinch-color-raspberry-500: #EF5858;
+  --sinch-color-raspberry-400: #F38686;
+  --sinch-color-raspberry-300: #FFB8B8;
+  --sinch-color-raspberry-200: #FBD5D5;
+  --sinch-color-raspberry-100: #FFE8E4;
+  --sinch-color-raspberry-50: #FFF6F5;
+  --sinch-color-night-700: #1223a1;
+  --sinch-color-night-400: #3247E9;
+  --sinch-color-night-200: #D1D6FA;
+  --sinch-color-grass-700: #006602;
+  --sinch-color-grass-400: #39B93D;
+  --sinch-color-grass-200: #B4E4B5;
+  --sinch-color-dirt-700: #363230;
+  --sinch-color-dirt-400: #828282;
+  --sinch-color-dirt-200: #E0DDDC;
+  --sinch-color-candy-700: #981b77;
+  --sinch-color-candy-400: #E467C3;
+  --sinch-color-candy-200: #F6CBEA;
+  --sinch-color-mud-700: #6d4e46;
+  --sinch-color-mud-400: #8B6559;
+  --sinch-color-mud-200: #D7C6C1;
+  --sinch-color-orange-700: #974302;
+  --sinch-color-orange-400: #FF8C34;
+  --sinch-color-orange-200: #FFD4B3;
+  --sinch-color-bolt-700: #805500;
+  --sinch-color-bolt-400: #FFBE3C;
+  --sinch-color-bolt-200: #FFE6B3;
+  --sinch-color-violet-700: #4F1B98;
+  --sinch-color-violet-400: #9E67E4;
+  --sinch-color-violet-200: #DECBF6;
+  --sinch-color-error-700: #882024;
+  --sinch-color-error-500: #D13D42;
+  --sinch-color-error-200: #FBD5D5;
+  --sinch-color-success-700: #275D33;
+  --sinch-color-success-500: #46A65A;
+  --sinch-color-success-200: #D7F1D8;
+  --sinch-color-informative-700: #003B7E;
+  --sinch-color-informative-500: #2071CE;
+  --sinch-color-informative-200: #D5E5F8;
+  --sinch-color-warning-700: #9C2E00;
+  --sinch-color-warning-500: #F35B1C;
+  --sinch-color-warning-200: #FFE8D6;
+  --sinch-color-skin-tone-0: #FFCC4D;
+  --sinch-color-skin-tone-10: #F7DECE;
+  --sinch-color-skin-tone-20: #F3D2A2;
+  --sinch-color-skin-tone-30: #D4AB88;
+  --sinch-color-skin-tone-40: #AF7E57;
+  --sinch-color-skin-tone-50: #7C533E;
+  --sinch-color-transparent: transparent;
+}

package/theme/shapes.css

@@ -0,0 +1,7 @@
+:root,
+:host {
+  --sinch-shape-radius-xs: 2px;
+  --sinch-shape-radius-s: 4px;
+  --sinch-shape-radius-m: 8px;
+  --sinch-shape-radius-l: 12px;
+}

package/theme/tag.css

@@ -0,0 +1,53 @@
+:root,
+:host {
+  --sinch-tag-color-default-bg: var(--sinch-color-snow-500);
+  --sinch-tag-color-default-fg: var(--sinch-color-stormy-500);
+  --sinch-tag-color-light-blue-bg: var(--sinch-color-night-200);
+  --sinch-tag-color-light-blue-fg: var(--sinch-color-night-700);
+  --sinch-tag-color-light-brown-bg: var(--sinch-color-mud-200);
+  --sinch-tag-color-light-brown-fg: var(--sinch-color-mud-700);
+  --sinch-tag-color-light-gray-bg: var(--sinch-color-dirt-200);
+  --sinch-tag-color-light-gray-fg: var(--sinch-color-dirt-700);
+  --sinch-tag-color-light-green-bg: var(--sinch-color-grass-200);
+  --sinch-tag-color-light-green-fg: var(--sinch-color-grass-700);
+  --sinch-tag-color-light-orange-bg: var(--sinch-color-orange-200);
+  --sinch-tag-color-light-orange-fg: var(--sinch-color-orange-700);
+  --sinch-tag-color-light-pink-bg: var(--sinch-color-candy-200);
+  --sinch-tag-color-light-pink-fg: var(--sinch-color-candy-700);
+  --sinch-tag-color-light-violet-bg: var(--sinch-color-violet-200);
+  --sinch-tag-color-light-violet-fg: var(--sinch-color-violet-700);
+  --sinch-tag-color-light-yellow-bg: var(--sinch-color-bolt-200);
+  --sinch-tag-color-light-yellow-fg: var(--sinch-color-bolt-700);
+  --sinch-tag-color-dark-blue-bg: var(--sinch-color-night-700);
+  --sinch-tag-color-dark-blue-fg: var(--sinch-color-night-200);
+  --sinch-tag-color-dark-brown-bg: var(--sinch-color-mud-700);
+  --sinch-tag-color-dark-brown-fg: var(--sinch-color-mud-200);
+  --sinch-tag-color-dark-gray-bg: var(--sinch-color-dirt-700);
+  --sinch-tag-color-dark-gray-fg: var(--sinch-color-dirt-200);
+  --sinch-tag-color-dark-green-bg: var(--sinch-color-grass-700);
+  --sinch-tag-color-dark-green-fg: var(--sinch-color-grass-200);
+  --sinch-tag-color-dark-orange-bg: var(--sinch-color-orange-700);
+  --sinch-tag-color-dark-orange-fg: var(--sinch-color-orange-200);
+  --sinch-tag-color-dark-pink-bg: var(--sinch-color-candy-700);
+  --sinch-tag-color-dark-pink-fg: var(--sinch-color-candy-200);
+  --sinch-tag-color-dark-violet-bg: var(--sinch-color-violet-700);
+  --sinch-tag-color-dark-violet-fg: var(--sinch-color-violet-200);
+  --sinch-tag-color-dark-yellow-bg: var(--sinch-color-bolt-700);
+  --sinch-tag-color-dark-yellow-fg: var(--sinch-color-bolt-200);
+  --sinch-tag-color-blue-bg: var(--sinch-color-night-400);
+  --sinch-tag-color-blue-fg: var(--sinch-color-snow-100);
+  --sinch-tag-color-brown-bg: var(--sinch-color-mud-400);
+  --sinch-tag-color-brown-fg: var(--sinch-color-snow-100);
+  --sinch-tag-color-gray-bg: var(--sinch-color-dirt-400);
+  --sinch-tag-color-gray-fg: var(--sinch-color-snow-100);
+  --sinch-tag-color-green-bg: var(--sinch-color-grass-400);
+  --sinch-tag-color-green-fg: var(--sinch-color-stormy-500);
+  --sinch-tag-color-orange-bg: var(--sinch-color-orange-400);
+  --sinch-tag-color-orange-fg: var(--sinch-color-stormy-500);
+  --sinch-tag-color-pink-bg: var(--sinch-color-candy-400);
+  --sinch-tag-color-pink-fg: var(--sinch-color-stormy-500);
+  --sinch-tag-color-violet-bg: var(--sinch-color-violet-400);
+  --sinch-tag-color-violet-fg: var(--sinch-color-stormy-500);
+  --sinch-tag-color-yellow-bg: var(--sinch-color-bolt-400);
+  --sinch-tag-color-yellow-fg: var(--sinch-color-stormy-500);
+}

package/theme/typography.css

@@ -0,0 +1,16 @@
+:root,
+:host {
+  --sinch-font-family: "Gilroy", "Arial", "sans-serif";
+  --sinch-font-weight-emphasized: 600;
+  --sinch-font-title-xl: 600 40px/48px var(--sinch-font-family);
+  --sinch-font-title-l: 600 24px/32px var(--sinch-font-family);
+  --sinch-font-title-m: 600 20px/24px var(--sinch-font-family);
+  --sinch-font-title-s: 600 16px/24px var(--sinch-font-family);
+  --sinch-font-title-xs: 600 14px/22px var(--sinch-font-family);
+  --sinch-font-text-m: 400 16px/24px var(--sinch-font-family);
+  --sinch-font-text-s: 400 14px/22px var(--sinch-font-family);
+  --sinch-font-text-xs: 400 12px/20px var(--sinch-font-family);
+  --sinch-font-text-xxs: 400 10px/16px var(--sinch-font-family);
+  --sinch-font-mono-family: "DM Mono", "monospace";
+  --sinch-font-mono-text-s: 400 16px/24px var(--sinch-font-mono-family);
+}

package/theme.css

@@ -10,6 +10,8 @@
 @import "theme/chip.css";
 @import "theme/color-swatch.css";
 @import "theme/tag.css";
+@import "theme/emoji.css";
+@import "theme/icon.css";
 
 :root,
 :host {

package/tooltip/index.js

@@ -1,13 +1,13 @@
 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 { TooltipState } from './tooltip-state';
 import { assertOrientation, getPopOrientation, orientationValues } from './utils';
 const TIP_SIZE = 8;
 const SHOW_DELAY = 1000;
-const HIDE_DELAY = 100;
-const ANIMATION_DURATION = 100;
+const HIDE_DELAY = 0;
+const ANIMATION_DURATION = 50;
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-tooltip', class extends NectaryElement {
@@ -21,6 +21,8 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
   #tooltipState;
   #animation = null;
   #shouldReduceMotion = false;
+  #isConnected = false;
+  #isSubscribed = false;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -36,35 +38,20 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
       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
+      onShow: this.#onStateShow,
+      onHideStart: this.#onStateHideStart,
+      onHideEnd: this.#onStateHideEnd
     });
   }
   connectedCallback() {
+    this.#isConnected = true;
     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
-    });
+    const options = {
+      signal: this.#controller.signal
+    };
+    this.#$pop.addEventListener('-close', this.#onPopClose, options);
     updateAttribute(this.#$pop, 'orientation', getPopOrientation(this.orientation));
+    this.#updateText();
   }
   disconnectedCallback() {
     this.#controller.abort();
@@ -101,7 +88,7 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
     switch (name) {
       case 'text':
         {
-          this.#$tooltipText.textContent = newVal;
+          this.#updateText();
           break;
         }
       case 'orientation':
@@ -118,19 +105,28 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
   }
   #onMouseDown = () => {
     this.#tooltipState.interrupt();
+    this.#unsubscribeScroll();
   };
   #onPopClose = () => {
     this.#tooltipState.destroy();
+    this.#unsubscribeScroll();
   };
   #onMouseEnter = () => {
     this.#tooltipState.show();
+    this.#subscribeScroll();
+    this.#subscribeMouseLeaveEvents();
   };
   #onMouseLeave = e => {
     if (!this.#isOpen() || e.relatedTarget !== this.#$contentWrapper && e.relatedTarget !== this.#$target) {
       this.#tooltipState.hide();
+      this.#unsubscribeScroll();
     }
   };
-  #onShow = () => {
+  #onScroll = () => {
+    this.#tooltipState.destroy();
+    this.#unsubscribeScroll();
+  };
+  #onStateShow = () => {
     updateBooleanAttribute(this.#$pop, 'open', true);
     requestAnimationFrame(this.#updateTipOrientation);
     if (this.#animation !== null) {
@@ -146,14 +142,15 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
       });
     }
   };
-  #onHideStart = () => {
+  #onStateHideStart = () => {
     this.#animation.updatePlaybackRate(-1);
     this.#animation.play();
   };
-  #onHideEnd = () => {
+  #onStateHideEnd = () => {
     this.#animation.finish();
     this.#resetTipOrientation();
     updateBooleanAttribute(this.#$pop, 'open', false);
+    this.#unsubscribeMouseLeaveEvents();
   };
   #resetTipOrientation() {
     this.#$tip.style.top = '';
@@ -180,6 +177,56 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
     }
     setClass(this.#$tip, 'hidden', rectOverlap(targetRect, contentRect));
   };
+  #updateText() {
+    if (!this.#isConnected) {
+      return;
+    }
+    const value = this.text;
+    this.#$tooltipText.textContent = value;
+    if (value.length === 0) {
+      if (this.#isSubscribed) {
+        this.#tooltipState.destroy();
+        this.#unsubscribeMouseEnterEvent();
+        this.#unsubscribeMouseLeaveEvents();
+      }
+      return;
+    }
+    this.#subscribeMouseEnterEvent();
+  }
+  #subscribeMouseEnterEvent() {
+    if (!this.#isConnected || this.#isSubscribed) {
+      return;
+    }
+    this.#$target.addEventListener('mouseenter', this.#onMouseEnter, {
+      signal: this.#controller.signal
+    });
+    this.#isSubscribed = true;
+  }
+  #unsubscribeMouseEnterEvent() {
+    this.#$target.removeEventListener('mouseenter', this.#onMouseEnter);
+    this.#isSubscribed = false;
+  }
+  #subscribeMouseLeaveEvents() {
+    const options = {
+      signal: this.#controller.signal
+    };
+    this.#$target.addEventListener('mousedown', this.#onMouseDown, options);
+    this.#$target.addEventListener('mouseleave', this.#onMouseLeave, options);
+    this.#$contentWrapper.addEventListener('mouseenter', this.#onMouseEnter, options);
+    this.#$contentWrapper.addEventListener('mouseleave', this.#onMouseLeave, options);
+  }
+  #unsubscribeMouseLeaveEvents() {
+    this.#$target.removeEventListener('mousedown', this.#onMouseDown);
+    this.#$target.removeEventListener('mouseleave', this.#onMouseLeave);
+    this.#$contentWrapper.removeEventListener('mouseenter', this.#onMouseEnter);
+    this.#$contentWrapper.removeEventListener('mouseleave', this.#onMouseLeave);
+  }
+  #subscribeScroll() {
+    window.addEventListener('wheel', this.#onScroll, true);
+  }
+  #unsubscribeScroll() {
+    window.removeEventListener('wheel', this.#onScroll, true);
+  }
   #isOpen() {
     return this.#$pop.hasAttribute('open');
   }

package/utils/csv.d.ts

@@ -0,0 +1,3 @@
+export declare const getCsvSet: (acc: string) => Set<string>;
+export declare const updateCsv: (acc: string, value: string, setActive: boolean) => string;
+export declare const getFirstCsvValue: (acc: string) => string | null;

package/utils/csv.js

@@ -0,0 +1,21 @@
+const unpackCsv = csv => {
+  return csv === '' ? [] : csv.split(',');
+};
+const packCsv = values => {
+  return Array.from(values).join(',');
+};
+export const getCsvSet = acc => {
+  return new Set(unpackCsv(acc));
+};
+export const updateCsv = (acc, value, setActive) => {
+  const values = getCsvSet(acc);
+  if (setActive) {
+    values.add(value);
+  } else {
+    values.delete(value);
+  }
+  return packCsv(values);
+};
+export const getFirstCsvValue = acc => {
+  return acc === '' ? null : unpackCsv(acc)[0];
+};

package/utils/dom.d.ts

@@ -0,0 +1,30 @@
+export declare const updateExplicitBooleanAttribute: ($element: Element, attrName: string, attrValue: boolean | null | undefined) => void;
+export declare const isAttrTrue: (attrValue: string | null) => boolean;
+export declare const getBooleanAttribute: ($element: Element, attrName: string) => boolean;
+export declare const updateBooleanAttribute: ($element: Element, attrName: string, attrValue: boolean | null | undefined) => void;
+export declare const updateAttribute: ($element: Element, attrName: string, attrValue: string | number | boolean | null | undefined) => void;
+export declare function getAttribute($element: Element, attrName: string): string | null;
+export declare function getAttribute($element: Element, attrName: string, defaultValue: string): string;
+export declare const isLiteralValue: <T extends readonly string[]>(literals: T, value: string | null | undefined) => value is T[number];
+export declare const updateLiteralAttribute: <T extends readonly string[]>($element: Element, literals: T, attrName: string, attrValue: string | null | undefined) => void;
+export declare function getLiteralAttribute<T extends readonly string[]>($element: Element, literals: T, attrName: string): T[number];
+export declare function getLiteralAttribute<T extends readonly string[]>($element: Element, literals: T, attrName: string, defaultValue: null): T[number] | null;
+export declare function getLiteralAttribute<T extends readonly string[]>($element: Element, literals: T, attrName: string, defaultValue: T[number]): T[number];
+export declare const clampNumber: (value: number, min: number, max: number) => number;
+declare type IntegerOptions = {
+    min?: number;
+    max?: number;
+    defaultValue?: number | null;
+    itemSizeMultiplier?: number;
+    itemSpaceBetween?: number;
+};
+export declare const attrValueToInteger: (value: string | null, options?: IntegerOptions) => number | null;
+export declare const attrValueToPixels: (value: string | null, options?: IntegerOptions) => string;
+export declare const updateIntegerAttribute: ($element: Element, attrName: string, attrValue: string | number | null | undefined, options?: IntegerOptions) => void;
+export declare function getIntegerAttribute($element: Element, attrName: string): number | undefined;
+export declare function getIntegerAttribute($element: Element, attrName: string, defaultValue: null): number | null;
+export declare function getIntegerAttribute($element: Element, attrName: string, defaultValue: number): number;
+export declare const setClass: (elem: Element, name: string, isSet: boolean) => void;
+export declare const getCssVar: (element: Element, variableName: string) => string | null;
+export declare const cloneNode: (el: Element, deep: boolean) => Element;
+export {};