@nectary/components 0.45.0 → 0.45.2

package/emoji-picker/index.d.ts

@@ -6,6 +6,7 @@ import '../popover';
 import '../tabs';
 import '../tabs-icon-option';
 import '../emoji';
+import '../text';
 import '../icons/search';
 import '../icons/sentiment-satisfied';
 import '../icons/emoji-people';

package/emoji-picker/index.js

@@ -6,6 +6,7 @@ import '../popover';
 import '../tabs';
 import '../tabs-icon-option';
 import '../emoji';
+import '../text';
 import '../icons/search';
 import '../icons/sentiment-satisfied';
 import '../icons/emoji-people';
@@ -15,13 +16,15 @@ import '../icons/emoji-objects';
 import '../icons/emoji-transportation';
 import '../icons/emoji-events';
 import '../icons/emoji-symbols';
-import { defineCustomElement, getAttribute, getBooleanAttribute, NectaryElement, updateAttribute, updateBooleanAttribute, getReactEventHandler, getRect, subscribeContext } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, NectaryElement, updateAttribute, updateBooleanAttribute, getReactEventHandler, getRect, subscribeContext, debounceTimeout, setClass } from '../utils';
 import dataJson from './data.json';
-const templateHTML = '<style>:host{display:block}#wrapper{width:384px;max-height:504px;display:flex;flex-direction:column;gap:8px;padding:12px 0}#toolbar{display:flex;gap:8px;padding:0 12px}#input{flex:1}#list-wrapper{overflow-y:auto;overflow-x:hidden;width:384px;box-sizing:border-box;scrollbar-gutter:stable}#list{display:flex;flex-wrap:wrap;gap:8px;padding:4px 12px 0;width:384px;box-sizing:border-box}</style><div id="wrapper"><div id="toolbar"><sinch-input id="input" size="l" aria-label="Search emojis"><sinch-icon-search slot="icon"></sinch-icon-search></sinch-input><sinch-popover id="skin-popover" orientation="bottom-left" aria-label="Emoji skin tone select"><sinch-icon-button id="skin-button" slot="target" size="l" aria-label="Select emoji skin tones"><sinch-color-swatch id="skin-swatch" slot="icon" name="skin-tone-0"></sinch-color-swatch></sinch-icon-button><sinch-color-menu id="skin-menu" slot="content" cols="1" value="skin-tone-0" colors="skin-tone-0,skin-tone-10,skin-tone-20,skin-tone-30,skin-tone-40,skin-tone-50" aria-label="Emoji skin tone menu"></sinch-color-menu></sinch-popover></div><sinch-tabs id="tabs" aria-label="Emoji groups"></sinch-tabs><div id="list-wrapper"><div id="list"></div></div></div>';
+const templateHTML = '<style>:host{display:block}#wrapper{width:384px;max-height:504px;display:flex;flex-direction:column;gap:8px;padding:12px 0}#toolbar{display:flex;gap:8px;padding:0 12px}#input{flex:1}#list-wrapper{overflow-y:auto;overflow-x:hidden;width:384px;box-sizing:border-box;scrollbar-gutter:stable}#list{display:flex;flex-wrap:wrap;gap:8px;padding:4px 12px 0;width:384px;box-sizing:border-box}#not-found{display:none;width:100%;height:48px;align-items:center;justify-content:center;color:var(--sinch-color-text-muted);pointer-events:none;user-select:none}#not-found.active{display:flex}</style><div id="wrapper"><div id="toolbar"><sinch-input id="input" size="l" aria-label="Search emojis"><sinch-icon-search slot="icon"></sinch-icon-search></sinch-input><sinch-popover id="skin-popover" orientation="bottom-left" aria-label="Emoji skin tone select"><sinch-icon-button id="skin-button" slot="target" size="l" aria-label="Select emoji skin tones"><sinch-color-swatch id="skin-swatch" slot="icon" name="skin-tone-0"></sinch-color-swatch></sinch-icon-button><sinch-color-menu id="skin-menu" slot="content" cols="1" value="skin-tone-0" colors="skin-tone-0,skin-tone-10,skin-tone-20,skin-tone-30,skin-tone-40,skin-tone-50" aria-label="Emoji skin tone menu"></sinch-color-menu></sinch-popover></div><sinch-tabs id="tabs" aria-label="Emoji groups"></sinch-tabs><div id="list-wrapper"><div id="list"></div><div id="not-found"><sinch-text type="m">No results</sinch-text></div></div></div>';
 const groupIconTagNames = ['sinch-icon-sentiment-satisfied', 'sinch-icon-emoji-people', 'sinch-icon-emoji-nature', 'sinch-icon-emoji-food-beverage', 'sinch-icon-emoji-transportation', 'sinch-icon-emoji-events', 'sinch-icon-emoji-objects', 'sinch-icon-emoji-symbols'];
 const groupLabels = ['Emotions', 'People', 'Animals and nature', 'Food and drinks', 'Travel and places', 'Sports and activities', 'Objects', 'Symbols and flags'];
 const data = dataJson;
 const template = document.createElement('template');
+const MIN_SEARCH_LENGTH = 2;
+const SEARCH_DEBOUNCE_TIMEOUT = 300;
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
   #$tabs;
@@ -31,9 +34,12 @@ defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
   #$skinSwatch;
   #$skinButton;
   #$list;
+  #$notFound;
   #controller = null;
   #$sh;
+  #searchDebounce;
   #currentSkinTone = 0;
+  #prevTabsValue = null;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -46,6 +52,8 @@ defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
     this.#$skinSwatch = shadowRoot.querySelector('#skin-swatch');
     this.#$skinButton = shadowRoot.querySelector('#skin-button');
     this.#$list = shadowRoot.querySelector('#list');
+    this.#$notFound = shadowRoot.querySelector('#not-found');
+    this.#searchDebounce = debounceTimeout(SEARCH_DEBOUNCE_TIMEOUT)(this.#updateSearch);
   }
   connectedCallback() {
     this.#controller = new AbortController();
@@ -83,6 +91,7 @@ defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
   }
   disconnectedCallback() {
     this.#controller.abort();
+    this.#searchDebounce.cancel();
   }
   get skinToneButtonRect() {
     return getRect(this.#$skinButton);
@@ -90,6 +99,9 @@ defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
   get searchInputRect() {
     return getRect(this.#$input);
   }
+  get searchClearButtonRect() {
+    return this.#$input.clearButtonRect;
+  }
   nthSkinToneRect(index) {
     return this.#$skinMenu.nthItemRect(index);
   }
@@ -146,13 +158,8 @@ defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
     this.#updateEmojis();
   };
   #onSearchChange = e => {
-    const value = e.detail;
-    this.#$input.value = value;
-    if (value.length < 3) {
-      return;
-    }
-    updateAttribute(this.#$tabs, 'value', '');
-    this.#updateSearchEmojis();
+    this.#$input.value = e.detail;
+    this.#searchDebounce.fn();
   };
   #onChangeReactHandler = e => {
     getReactEventHandler(this, 'on-change')?.(e);
@@ -163,6 +170,24 @@ defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
   #getDocumentRoot() {
     return Reflect.has(this.#$sh, 'createElement') ? this.#$sh : document;
   }
+  #updateSearch = () => {
+    const value = this.#$input.value;
+    if (value.length < MIN_SEARCH_LENGTH) {
+      if (this.#isSearchMode()) {
+        if (this.#prevTabsValue !== null) {
+          this.#$tabs.setAttribute('value', this.#prevTabsValue);
+        }
+        this.#updateEmojis();
+      }
+      return;
+    }
+    const currentActiveTab = this.#$tabs.getAttribute('value');
+    if (currentActiveTab !== null) {
+      this.#prevTabsValue = currentActiveTab;
+    }
+    this.#$tabs.removeAttribute('value');
+    this.#updateSearchEmojis();
+  };
   #updateTabs() {
     const doc = this.#getDocumentRoot();
     const tabsFragment = document.createDocumentFragment();
@@ -183,7 +208,7 @@ defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
   *#iterateSearchEmojis(searchValue, skinTone) {
     for (const group of data) {
       for (const entry of group.emojis) {
-        if (entry.label.includes(searchValue)) {
+        if (entry.label.toLowerCase().includes(searchValue)) {
           const hasSkins = entry.skins != null;
           if (skinTone === 0 || !hasSkins) {
             yield entry;
@@ -214,15 +239,18 @@ defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
   }
   #updateSearchEmojis() {
     const searchValue = this.#$input.value;
-    if (searchValue.length < 3) {
+    if (searchValue.length < MIN_SEARCH_LENGTH) {
       return;
     }
     const doc = this.#getDocumentRoot();
     const fragment = document.createDocumentFragment();
+    let someFound = false;
     for (const entry of this.#iterateSearchEmojis(searchValue, this.#currentSkinTone)) {
       const el = this.#createEmojiElement(doc, entry);
+      someFound = true;
       fragment.appendChild(el);
     }
+    setClass(this.#$notFound, 'active', !someFound);
     this.#$list.replaceChildren(fragment);
     this.#$list.scrollTo(0, 0);
   }

package/emoji-picker/types.d.ts

@@ -13,6 +13,7 @@ export declare type TEmojiGroup = {
 export declare type TSinchEmojiPickerElement = HTMLElement & {
     readonly skinToneButtonRect: TRect;
     readonly searchInputRect: TRect;
+    readonly searchClearButtonRect: TRect;
     nthSkinToneRect(index: number): TRect | null;
     nthTabRect(index: number): TRect | null;
     nthEmojiRect(index: number): TRect | null;

package/help-tooltip/index.js

@@ -1,20 +1,39 @@
 import '../tooltip';
 import '../icons/help-outline';
-import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, NectaryElement, updateAttribute, updateBooleanAttribute, updateIntegerAttribute } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute, updateIntegerAttribute } from '../utils';
 const templateHTML = '<style>:host{display:contents}#icon{--sinch-size-icon:18px}</style><sinch-tooltip><sinch-icon-help-outline id="icon"></sinch-icon-help-outline></sinch-tooltip>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-help-tooltip', class extends NectaryElement {
   #$tooltip;
+  #controller = null;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$tooltip = shadowRoot.querySelector('sinch-tooltip');
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this.#controller = new AbortController();
+    const options = {
+      signal: this.#controller.signal
+    };
+    this.#$tooltip.addEventListener('-show', this.#onTooltipShow, options);
+    this.#$tooltip.addEventListener('-hide', this.#onTooltipHide, options);
+    this.addEventListener('-show', this.#onTooltipShowReactHandler, options);
+    this.addEventListener('-hide', this.#onTooltipHideReactHandler, options);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#controller.abort();
+  }
   static get observedAttributes() {
     return ['text', 'width', 'orientation', 'inverted'];
   }
+  attributeChangedCallback(name, _, newVal) {
+    updateAttribute(this.#$tooltip, name, newVal);
+  }
   get text() {
     return getAttribute(this, 'text', '');
   }
@@ -45,7 +64,16 @@ defineCustomElement('sinch-help-tooltip', class extends NectaryElement {
   get tooltipRect() {
     return this.#$tooltip.tooltipRect;
   }
-  attributeChangedCallback(name, _, newVal) {
-    updateAttribute(this.#$tooltip, name, newVal);
-  }
+  #onTooltipShow = () => {
+    this.dispatchEvent(new CustomEvent('-show'));
+  };
+  #onTooltipHide = () => {
+    this.dispatchEvent(new CustomEvent('-hide'));
+  };
+  #onTooltipShowReactHandler = () => {
+    getReactEventHandler(this, 'on-show')?.();
+  };
+  #onTooltipHideReactHandler = () => {
+    getReactEventHandler(this, 'on-hide')?.();
+  };
 });

package/icon-button/index.js

@@ -33,6 +33,10 @@ defineCustomElement('sinch-icon-button', class extends NectaryElement {
     this.addEventListener('-click', this.#onClickReactHandler, options);
     this.addEventListener('-focus', this.#onFocusReactHandler, options);
     this.addEventListener('-blur', this.#onBlurReactHandler, options);
+    this.#$tooltip.addEventListener('-show', this.#onTooltipShow, options);
+    this.#$tooltip.addEventListener('-hide', this.#onTooltipHide, options);
+    this.addEventListener('-tooltip-show', this.#onTooltipShowReactHandler, options);
+    this.addEventListener('-tooltip-hide', this.#onTooltipHideReactHandler, options);
     subscribeContext(this, 'size', this.#onContextSize, this.#controller.signal);
     this.#sizeContext.listen(this.#controller.signal);
     this.#onSizeUpdate();
@@ -150,6 +154,12 @@ defineCustomElement('sinch-icon-button', class extends NectaryElement {
   #onButtonBlur = () => {
     this.dispatchEvent(new CustomEvent('-blur'));
   };
+  #onTooltipShow = () => {
+    this.dispatchEvent(new CustomEvent('-tooltip-show'));
+  };
+  #onTooltipHide = () => {
+    this.dispatchEvent(new CustomEvent('-tooltip-hide'));
+  };
   #onFocusReactHandler = () => {
     getReactEventHandler(this, 'on-focus')?.();
   };
@@ -159,4 +169,10 @@ defineCustomElement('sinch-icon-button', class extends NectaryElement {
   #onClickReactHandler = e => {
     getReactEventHandler(this, 'on-click')?.(e);
   };
+  #onTooltipShowReactHandler = () => {
+    getReactEventHandler(this, 'on-tooltip-show')?.();
+  };
+  #onTooltipHideReactHandler = () => {
+    getReactEventHandler(this, 'on-tooltip-hide')?.();
+  };
 });

package/icon-button/types.d.ts

@@ -37,4 +37,8 @@ export declare type TSinchIconButtonReact = TSinchElementReact<TSinchIconButtonE
     'on-focus'?: (e: CustomEvent<void>) => void;
     /** Blur event handler */
     'on-blur'?: (e: CustomEvent<void>) => void;
+    /** Tooltip Show Event */
+    'on-tooltip-show'?: (e: CustomEvent<void>) => void;
+    /** Tooltip Hide Event */
+    'on-tooltip-hide'?: (e: CustomEvent<void>) => void;
 };

package/input/index.js

@@ -1,9 +1,9 @@
 import '../icon-button';
 import '../icons/close';
 import '../stop-events';
-import { Context, defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, setClass, subscribeContext, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute } from '../utils';
+import { Context, defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, getRect, isAttrTrue, NectaryElement, setClass, subscribeContext, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute } from '../utils';
 import { assertSize, DEFAULT_SIZE, sizeValues } from '../utils/size';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}:host([data-size="l"]){--sinch-size:var(--sinch-size-l);--sinch-size-icon:var(--sinch-input-icon-size-l);--sinch-shape-radius:var(--sinch-shape-radius-l)}:host([data-size="m"]){--sinch-size:var(--sinch-size-m);--sinch-size-icon:var(--sinch-input-icon-size-m);--sinch-shape-radius:var(--sinch-shape-radius-m)}:host([data-size="s"]){--sinch-size:var(--sinch-size-s);--sinch-size-icon:var(--sinch-input-icon-size-s);--sinch-shape-radius:var(--sinch-shape-radius-s)}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;border-radius:var(--sinch-shape-radius);width:100%;height:var(--sinch-size);background-color:var(--sinch-color-bg-primary-light)}#input{all:initial;flex:1;min-width:0;height:100%;padding:0 12px 0 40px;font:var(--sinch-font-text-m);color:var(--sinch-color-text-default)}:host([data-size="s"]) #input{padding-left:32px}#input::placeholder{font:var(--sinch-font-text-m);color:var(--sinch-color-text-muted);opacity:1}#border{position:absolute;border:1px solid var(--sinch-color-border-dark);border-radius:var(--sinch-shape-radius);inset:0;pointer-events:none}:host([invalid]:not([invalid=false]):not([disabled])) #border{border-color:var(--sinch-color-text-invalid)}#input:disabled{color:var(--sinch-color-text-disabled)}#input:disabled::placeholder{color:var(--sinch-color-text-disabled)}#input:disabled+#border{border-color:var(--sinch-color-border-disabled)}#input:focus+#border{border-color:var(--sinch-color-border-focus);border-width:2px}#input[type=password]{font-size:1.5em;letter-spacing:.1em}#icon-wrapper{position:relative;height:100%}#icon{position:absolute;display:flex;align-items:center;left:10px;top:0;bottom:0;pointer-events:none;--sinch-color-icon:var(--sinch-color-stormy-500)}:host([disabled]:not([disabled=false])) #icon{--sinch-color-icon:var(--sinch-color-border-disabled)}#icon-wrapper.empty{display:none}#icon-wrapper.empty~#input{padding-left:12px}#clear{display:none;--sinch-icon-button-color-icon:var(--sinch-color-text-muted)}#clear.active{display:block}:host([disabled]:not([disabled=false])) #clear{display:none}#wrapper:focus-within #clear{--sinch-icon-button-color-icon:var(--sinch-color-stormy-500)}#right{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;padding-right:4px}#right.empty{display:none}#left{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;padding-left:4px}#left.empty{display:none}</style><div id="wrapper"><div id="left"><slot name="left"></slot></div><div id="icon-wrapper"><div id="icon"><slot name="icon"></slot></div></div><input id="input" type="text"/><div id="border"></div><div id="right"><sinch-stop-events events="keydown"><sinch-icon-button id="clear" aria-label="Clear input value"><sinch-icon-close slot="icon"></sinch-icon-close></sinch-icon-button></sinch-stop-events><slot name="right"></slot></div></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}:host([data-size="l"]){--sinch-size:var(--sinch-size-l);--sinch-size-icon:var(--sinch-input-icon-size-l);--sinch-shape-radius:var(--sinch-shape-radius-l)}:host([data-size="m"]){--sinch-size:var(--sinch-size-m);--sinch-size-icon:var(--sinch-input-icon-size-m);--sinch-shape-radius:var(--sinch-shape-radius-m)}:host([data-size="s"]){--sinch-size:var(--sinch-size-s);--sinch-size-icon:var(--sinch-input-icon-size-s);--sinch-shape-radius:var(--sinch-shape-radius-s)}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;border-radius:var(--sinch-shape-radius);width:100%;height:var(--sinch-size);background-color:var(--sinch-color-bg-primary-light)}#input{all:initial;flex:1;min-width:0;height:100%;padding:0 12px 0 40px;font:var(--sinch-font-text-m);color:var(--sinch-color-text-default)}:host([data-size="s"]) #input{padding-left:32px}#input::placeholder{font:var(--sinch-font-text-m);color:var(--sinch-color-text-muted);opacity:1}#border{position:absolute;border:1px solid var(--sinch-color-border-dark);border-radius:var(--sinch-shape-radius);inset:0;pointer-events:none}:host([invalid]:not([invalid=false]):not([disabled])) #border{border-color:var(--sinch-color-text-invalid)}#input:disabled{color:var(--sinch-color-text-disabled)}#input:disabled::placeholder{color:var(--sinch-color-text-disabled)}#input:disabled+#border{border-color:var(--sinch-color-border-disabled)}#input:focus+#border{border-color:var(--sinch-color-border-focus);border-width:2px}#input[type=password]{font-size:1.5em;letter-spacing:.1em}#icon-wrapper{position:relative;height:100%}#icon{position:absolute;display:flex;align-items:center;left:10px;top:0;bottom:0;pointer-events:none;--sinch-color-icon:var(--sinch-color-stormy-500)}:host([disabled]:not([disabled=false])) #icon{--sinch-color-icon:var(--sinch-color-border-disabled)}#icon-wrapper.empty{display:none}#icon-wrapper.empty~#input{padding-left:12px}#clear-wrapper{margin-left:-10px;margin-right:4px}#clear{display:none;--sinch-icon-button-color-icon:var(--sinch-color-stormy-500)}:host([value]:not([value=""])) #clear[data-focus],:host([value]:not([value=""])) #clear[data-tooltip]{display:block}#right{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;padding-right:4px}#right.empty{display:none}#left{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;padding-left:4px}#left.empty{display:none}</style><div id="wrapper"><div id="left"><slot name="left"></slot></div><div id="icon-wrapper"><div id="icon"><slot name="icon"></slot></div></div><input id="input" type="text"/><div id="border"></div><div id="clear-wrapper"><sinch-stop-events events="keydown"><sinch-icon-button id="clear" aria-label="Clear input value"><sinch-icon-close slot="icon"></sinch-icon-close></sinch-icon-button></sinch-stop-events></div><div id="right"><slot name="right"></slot></div></div>';
 import { inputTypes } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -51,7 +51,10 @@ defineCustomElement('sinch-input', class extends NectaryElement {
     this.#$input.addEventListener('keydown', this.#onSelectionChange, options);
     this.#$input.addEventListener('focus', this.#onInputFocus, options);
     this.#$input.addEventListener('blur', this.#onInputBlur, options);
-    this.#$clear.addEventListener('click', this.#onClear, options);
+    this.#$clear.addEventListener('click', this.#onClearButtonClick, options);
+    this.#$clear.addEventListener('blur', this.#onClearButtonBlur, options);
+    this.#$clear.addEventListener('-tooltip-show', this.#onClearButtonTooltipShow, options);
+    this.#$clear.addEventListener('-tooltip-hide', this.#onClearButtonTooltipHide, options);
     this.#$iconSlot.addEventListener('slotchange', this.#onIconSlotChange, options);
     this.#$leftSlot.addEventListener('slotchange', this.#onLeftSlotChange, options);
     this.#$rightSlot.addEventListener('slotchange', this.#onRightSlotChange, options);
@@ -91,7 +94,6 @@ defineCustomElement('sinch-input', class extends NectaryElement {
               this.#$input.setSelectionRange(this.#cursorPos, this.#cursorPos);
             }
           }
-          setClass(this.#$clear, 'active', nextVal.length > 0);
           this.#onRightSlotChange();
           break;
         }
@@ -185,6 +187,9 @@ defineCustomElement('sinch-input', class extends NectaryElement {
   set selectionDirection(value) {
     this.#$input.selectionDirection = value;
   }
+  get clearButtonRect() {
+    return getRect(this.#$clear);
+  }
   get focusable() {
     return true;
   }
@@ -253,19 +258,18 @@ defineCustomElement('sinch-input', class extends NectaryElement {
     setClass(this.#$leftWrapper, 'empty', isEmpty);
   };
   #onRightSlotChange = () => {
-    const isEmpty = this.#$rightSlot.assignedElements().length === 0 && this.value.length === 0;
+    const isEmpty = this.#$rightSlot.assignedElements().length === 0;
     setClass(this.#$rightWrapper, 'empty', isEmpty);
   };
   #onInputFocus = () => {
+    this.#$clear.setAttribute('data-focus', '');
     this.dispatchEvent(new CustomEvent('-focus'));
   };
-  #onInputBlur = () => {
+  #onInputBlur = e => {
     this.dispatchEvent(new CustomEvent('-blur'));
-  };
-  #onClear = () => {
-    this.#$input.value = '';
-    this.#$input.focus();
-    this.#handleInput();
+    if (e.relatedTarget !== this.#$clear) {
+      this.#$clear.removeAttribute('data-focus');
+    }
   };
   #onSizeUpdate() {
     if (!this.isConnected) {
@@ -274,6 +278,23 @@ defineCustomElement('sinch-input', class extends NectaryElement {
     const size = this.getAttribute('data-size') ?? DEFAULT_SIZE;
     this.#sizeContext.dispatch(size);
   }
+  #onClearButtonClick = () => {
+    this.#$input.value = '';
+    this.#$input.focus();
+    this.#handleInput();
+  };
+  #onClearButtonBlur = e => {
+    if (e.relatedTarget !== this.#$input) {
+      this.#$clear.removeAttribute('data-focus');
+    }
+  };
+  #onClearButtonTooltipShow = () => {
+    this.#$clear.setAttribute('data-tooltip', '');
+  };
+  #onClearButtonTooltipHide = () => {
+    this.#$input.focus();
+    this.#$clear.removeAttribute('data-tooltip');
+  };
   #onChangeReactHandler = e => {
     getReactEventHandler(this, 'on-change')?.(e);
   };

package/input/types.d.ts

@@ -1,4 +1,4 @@
-import type { TSinchElementReact } from '../types';
+import type { TRect, TSinchElementReact } from '../types';
 import type { TSinchSize } from '../utils/size';
 import type { SyntheticEvent } from 'react';
 export declare type TSinchInputType = 'text' | 'password';
@@ -18,6 +18,7 @@ export declare type TSinchInputElement = HTMLElement & {
     selectionStart: number | null;
     selectionEnd: number | null;
     selectionDirection: 'forward' | 'backward' | 'none' | null;
+    readonly clearButtonRect: TRect;
     /** Change value event */
     addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
     /** Focus event */

package/link/index.js

@@ -1,7 +1,7 @@
 import '../icons/open-in-new';
 import '../icons/arrow-forward';
 import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, isAttrTrue, getReactEventHandler } from '../utils';
-const templateHTML = '<style>:host{display:inline}a{font:var(--sinch-font-text-m);font-size:inherit;line-height:inherit;color:var(--sinch-color-tropical-500);border-radius:.5em;--sinch-size-icon:1em;--sinch-color-icon:var(--sinch-color-tropical-500)}a:hover{color:var(--sinch-color-tropical-600);--sinch-color-icon:var(--sinch-color-tropical-600)}a:focus-visible{outline:2px solid var(--sinch-color-border-focus);outline-offset:2px}#external-icon{display:none;margin-right:.2em;vertical-align:-.2em}#standalone-icon{display:none}:host([external]:not([external=false])) #external-icon{display:inline-block}:host([standalone]:not([standalone=false])){display:block}:host([standalone]:not([standalone=false])) a{display:block;font:var(--sinch-font-text-m);font-weight:var(--sinch-font-weight-emphasized);text-decoration:none;border-radius:var(--sinch-shape-radius-m);width:fit-content;--sinch-size-icon:24px}:host([standalone]:not([standalone=false])) #external-icon{margin-right:8px;vertical-align:-7px}:host([standalone]:not([standalone=false]):is([external=false],:not([external]))) #standalone-icon{display:inline-block;vertical-align:-7px;margin-left:8px}:host([disabled]:not([disabled=false])) a{color:var(--sinch-color-tropical-200);pointer-events:none;cursor:initial;--sinch-color-icon:var(--sinch-color-tropical-200)}</style><a referrerpolicy="no-referer" aria-hidden="true"><sinch-icon-open-in-new id="external-icon"></sinch-icon-open-in-new><span id="content"></span><sinch-icon-arrow-forward id="standalone-icon"></sinch-icon-arrow-forward></a>';
+const templateHTML = '<style>:host{display:inline}a{font:var(--sinch-font-text-m);font-size:inherit;line-height:inherit;color:var(--sinch-color-tropical-500);border-radius:.5em;white-space:nowrap;--sinch-size-icon:1em;--sinch-color-icon:var(--sinch-color-tropical-500)}a:hover{color:var(--sinch-color-tropical-600);--sinch-color-icon:var(--sinch-color-tropical-600)}a:focus-visible{outline:2px solid var(--sinch-color-border-focus);outline-offset:2px}#external-icon{display:none;margin-right:.2em;vertical-align:-.2em}#standalone-icon,#standalone-icon-prefix{display:none}:host([external]:not([external=false])) #external-icon{display:inline-block}:host([standalone]:not([standalone=false])){display:block}:host([standalone]:not([standalone=false])) a{display:block;font:var(--sinch-font-text-m);font-weight:var(--sinch-font-weight-emphasized);text-decoration:none;border-radius:var(--sinch-shape-radius-m);width:fit-content;--sinch-size-icon:24px}:host([standalone]:not([standalone=false])) #external-icon{margin-right:8px;vertical-align:-7px}:host([standalone]:not([standalone=false])) #standalone-icon-prefix{display:inline}:host([standalone]:not([standalone=false]):is([external=false],:not([external]))) #standalone-icon{display:inline-block;vertical-align:-7px}:host([disabled]:not([disabled=false])) a{color:var(--sinch-color-tropical-200);pointer-events:none;cursor:initial;--sinch-color-icon:var(--sinch-color-tropical-200)}#content{white-space:var(--sinch-text-white-space,normal)}</style><a referrerpolicy="no-referer" aria-hidden="true"><sinch-icon-open-in-new id="external-icon"></sinch-icon-open-in-new><span id="content"></span><span id="standalone-icon-prefix">&nbsp;</span><sinch-icon-arrow-forward id="standalone-icon"></sinch-icon-arrow-forward></a>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-link', class extends NectaryElement {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "0.45.0",
+  "version": "0.45.2",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/popover/index.js

@@ -29,7 +29,7 @@ defineCustomElement('sinch-popover', class extends NectaryElement {
     this.#$pop.addEventListener('-close', this.#onPopClose, {
       signal
     });
-    subscribeContext(this, 'visibility', this.#onContextVisibility, signal);
+    subscribeContext(this.#$content, 'visibility', this.#onContextVisibility, signal);
     updateAttribute(this.#$pop, 'orientation', getPopOrientation(this.orientation));
   }
   disconnectedCallback() {

package/text/index.js

@@ -1,6 +1,6 @@
 import '../icons/cancel';
 import { defineCustomElement, getBooleanAttribute, updateBooleanAttribute, NectaryElement, getLiteralAttribute, updateLiteralAttribute, isAttrTrue } from '../utils';
-const templateHTML = '<style>:host{display:block;font:var(--sinch-font-text-m)}:host([inline]:not([inline=false])){display:inline}:host([type="s"]){font:var(--sinch-font-text-s)}:host([type=xs]){font:var(--sinch-font-text-xs)}:host([type=xxs]){font:var(--sinch-font-text-xxs)}:host([emphasized]:not([emphasized=false])){font-weight:var(--sinch-font-weight-emphasized)}:host([ellipsis]:not([ellipsis=false])){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}</style><slot></slot>';
+const templateHTML = '<style>:host{display:block;font:var(--sinch-font-text-m)}:host([inline]:not([inline=false])){display:inline}:host([type="s"]){font:var(--sinch-font-text-s)}:host([type=xs]){font:var(--sinch-font-text-xs)}:host([type=xxs]){font:var(--sinch-font-text-xxs)}:host([emphasized]:not([emphasized=false])){font-weight:var(--sinch-font-weight-emphasized)}:host([ellipsis]:not([ellipsis=false])){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--sinch-text-white-space:nowrap}</style><slot></slot>';
 import { assertType, typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/textarea/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#input{all:initial;display:block;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:var(--sinch-shape-radius-s);width:100%;padding:8px 12px;font:var(--sinch-font-text-m);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);resize:none}#input::placeholder{font:var(--sinch-font-text-m);color:var(--sinch-color-text-muted);opacity:1}#input:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:focus{border-color:var(--sinch-color-stormy-600)}:host([resizable]:not([resizable=false])) #input{resize:vertical}:host([invalid]:not([invalid=false])) #input:enabled{border-color:var(--sinch-color-text-invalid)}</style><textarea id="input"></textarea>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#input{all:initial;display:block;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:var(--sinch-shape-radius-s);width:100%;padding:8px 12px;font:var(--sinch-font-text-m);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);resize:none;white-space:pre-wrap}#input::placeholder{font:var(--sinch-font-text-m);color:var(--sinch-color-text-muted);opacity:1}#input:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:focus{border-color:var(--sinch-color-stormy-600)}:host([resizable]:not([resizable=false])) #input{resize:vertical}:host([invalid]:not([invalid=false])) #input:enabled{border-color:var(--sinch-color-text-invalid)}</style><textarea id="input"></textarea>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-textarea', class extends NectaryElement {

package/time-picker/index.d.ts

@@ -1,7 +1,5 @@
 import '../icon-button';
 import '../icons/done';
-import '../icons/arrow-drop-up';
-import '../icons/arrow-drop-down';
 import '../segmented-control';
 import '../segmented-control-option';
 import type { TSinchTimePickerElement, TSinchTimePickerReact } from './types';

package/time-picker/index.js

@@ -1,11 +1,9 @@
 import '../icon-button';
 import '../icons/done';
-import '../icons/arrow-drop-up';
-import '../icons/arrow-drop-down';
 import '../segmented-control';
 import '../segmented-control-option';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, getRect, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;width:248px;padding:16px;box-sizing:border-box;gap:16px}#header{position:relative;width:100%;height:48px;font:var(--sinch-font-title-xl);line-height:48px}#footer{display:flex;justify-content:center;width:100%;height:32px}#picker{position:relative;width:216px;height:216px;border-radius:50%;box-sizing:border-box;border:1px solid var(--sinch-color-stormy-500)}#picker-hours,#picker-minutes{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;pointer-events:none;user-select:none}.digit-hour-12,.digit-hour-24,.digit-minute{position:absolute;width:28px;height:28px;font:var(--sinch-font-text-s);line-height:28px;text-align:center;color:var(--sinch-color-text-default);top:calc(50% - 14px);left:calc(50% - 14px);z-index:1;cursor:pointer}.digit-hour-24{font:var(--sinch-font-text-xs);line-height:28px;color:var(--sinch-color-text-muted)}.digit-minute{font:var(--sinch-font-text-xs);line-height:28px;color:var(--sinch-color-text-muted)}.digit-hour-12:hover,.digit-hour-24:hover,.digit-minute:hover{color:var(--sinch-color-tropical-500)}.digit-hour-12.selected,.digit-hour-24.selected,.digit-minute.selected{color:var(--sinch-color-tropical-500)}.digit-hour-12.selected{font-size:16px}.digit-hour-24.selected{font-size:16px}.digit-minute.selected{font-size:16px}#picker-touch{position:absolute;left:0;top:0;width:100%;height:100%;cursor:pointer;border-radius:50%}#needle-hour,#needle-minute,#picker-touch::after{background-color:var(--sinch-color-stormy-500)}#needle-hour,#needle-minute{position:absolute;transform-origin:bottom center;transform:rotate(0);bottom:50%;height:50px;transition-duration:.25s;transition-timing-function:ease-in-out;transition-property:transform height;z-index:2}@media (prefers-reduced-motion){#needle-hour,#needle-minute{transition:none}}#needle-hour{width:4px;left:calc(50% - 2px);border-radius:2px}#needle-minute{width:2px;left:calc(50% - 1px);border-radius:1px}#needle-minute:not(.selected)::after{content:"";position:absolute;transform:translateX(-50%);left:0;top:-16px;width:4px;height:4px;border-radius:50%;background-color:var(--sinch-color-tropical-500)}#picker-touch::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%)}#header-hours,#header-minutes{position:absolute;padding:0 4px;width:50px;outline:0;--sinch-size-icon:24px}#header-hours{right:calc(50% + 8px);text-align:right}#header-minutes{left:calc(50% + 8px)}#header-hours::before,#header-minutes::before{content:"";display:none;position:absolute;border-radius:12px;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%);padding:1px;border:1px solid var(--sinch-color-border-focus)}#header-hours-down,#header-hours-up,#header-minutes-down,#header-minutes-up{display:none;position:absolute;left:50%;transform:translateX(-50%)}#header-hours-up,#header-minutes-up{top:-18px}#header-hours-down,#header-minutes-down{bottom:-18px}#header-hours:focus #header-hours-down,#header-hours:focus #header-hours-up,#header-hours:focus::before{display:block}#header-minutes:focus #header-minutes-down,#header-minutes:focus #header-minutes-up,#header-minutes:focus::before{display:block}#header-colon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}#submit{position:absolute;right:0;top:50%;transform:translateY(-50%)}:host([ampm]) .digit-hour-24{display:none}:host(:not([ampm])) #footer{display:none}</style><div id="wrapper"><div id="header"><div id="header-hours" tabindex="0" role="meter" aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="0"><span>00</span><sinch-icon-arrow-drop-up id="header-hours-up"></sinch-icon-arrow-drop-up><sinch-icon-arrow-drop-down id="header-hours-down"></sinch-icon-arrow-drop-down></div><div id="header-colon">&colon;</div><div id="header-minutes" tabindex="0" role="meter" aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="0"><span>00</span><sinch-icon-arrow-drop-up id="header-minutes-up"></sinch-icon-arrow-drop-up><sinch-icon-arrow-drop-down id="header-minutes-down"></sinch-icon-arrow-drop-down></div><sinch-icon-button id="submit" size="s" aria-label="Submit"><sinch-icon-done slot="icon"></sinch-icon-done></sinch-icon-button></div><div id="picker" aria-hidden="true"><div id="picker-hours"></div><div id="picker-minutes"></div><div id="picker-touch"><div id="needle-hour"></div><div id="needle-minute"></div></div></div><div id="footer"><sinch-segmented-control id="ampm"><sinch-segmented-control-option value="am" text="AM" aria-label="AM"></sinch-segmented-control-option><sinch-segmented-control-option value="pm" text="PM" aria-label="PM"></sinch-segmented-control-option></sinch-segmented-control></div></div>';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;width:248px;padding:16px;box-sizing:border-box;gap:16px}#header{position:relative;width:100%;height:48px;font:var(--sinch-font-title-xl);line-height:48px;user-select:none}#footer{display:flex;justify-content:center;width:100%;height:32px}#picker{position:relative;width:216px;height:216px;border-radius:50%;box-sizing:border-box;border:1px solid var(--sinch-color-stormy-500)}#picker-hours,#picker-minutes{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;pointer-events:none;user-select:none}.digit-hour-12,.digit-hour-24,.digit-minute{position:absolute;width:28px;height:28px;font:var(--sinch-font-text-s);line-height:28px;text-align:center;color:var(--sinch-color-text-default);top:calc(50% - 14px);left:calc(50% - 14px);z-index:1;cursor:pointer}.digit-hour-24{font:var(--sinch-font-text-xs);line-height:28px;color:var(--sinch-color-text-muted)}.digit-minute{font:var(--sinch-font-text-xs);line-height:28px;color:var(--sinch-color-text-muted)}.digit-hour-12:hover,.digit-hour-24:hover,.digit-minute:hover{color:var(--sinch-color-tropical-500)}.digit-hour-12.selected,.digit-hour-24.selected,.digit-minute.selected{color:var(--sinch-color-tropical-500)}.digit-hour-12.selected{font-size:16px}.digit-hour-24.selected{font-size:16px}.digit-minute.selected{font-size:16px}#picker-touch{position:absolute;left:0;top:0;width:100%;height:100%;cursor:pointer;border-radius:50%}#needle-hour,#needle-minute,#picker-touch::after{background-color:var(--sinch-color-stormy-500)}#needle-hour,#needle-minute{position:absolute;transform-origin:bottom center;transform:rotate(0);bottom:50%;height:50px;transition-duration:.25s;transition-timing-function:ease-in-out;transition-property:transform height;z-index:2;outline:0}@media (prefers-reduced-motion){#needle-hour,#needle-minute{transition:none}}#needle-hour{width:4px;left:calc(50% - 2px);border-radius:2px}#needle-minute{width:2px;left:calc(50% - 1px);border-radius:1px}#needle-hour:focus-visible,#needle-minute:focus-visible{background-color:var(--sinch-color-tropical-500)}#needle-minute:not(.selected)::after{content:"";position:absolute;transform:translateX(-50%);left:0;top:-16px;width:4px;height:4px;border-radius:50%;background-color:var(--sinch-color-tropical-500)}#picker-touch::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%)}#header-hours,#header-minutes{position:absolute;padding:0 4px;width:50px;outline:0;--sinch-size-icon:24px}#header-hours{right:calc(50% + 8px);text-align:right}#header-minutes{left:calc(50% + 8px)}#header-colon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}#submit{position:absolute;right:0;top:50%;transform:translateY(-50%)}:host([ampm]) .digit-hour-24{display:none}:host(:not([ampm])) #footer{display:none}</style><div id="wrapper"><div id="header"><div id="header-hours" role="meter" aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="0"><span>00</span></div><div id="header-colon">&colon;</div><div id="header-minutes" role="meter" aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="0"><span>00</span></div><sinch-icon-button id="submit" size="s" aria-label="Submit"><sinch-icon-done slot="icon"></sinch-icon-done></sinch-icon-button></div><div id="picker" aria-hidden="true"><div id="picker-hours"></div><div id="picker-minutes"></div><div id="picker-touch"><div id="needle-hour" tabindex="0"></div><div id="needle-minute" tabindex="0"></div></div></div><div id="footer"><sinch-segmented-control id="ampm"><sinch-segmented-control-option value="am" text="AM" aria-label="AM"></sinch-segmented-control-option><sinch-segmented-control-option value="pm" text="PM" aria-label="PM"></sinch-segmented-control-option></sinch-segmented-control></div></div>';
 import { getNeedleRotationDeg, getShortestCssDeg, hourToIndex, parseTime, stringifyHour, stringifyHourFace, stringifyMinute, stringifyTime } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -33,6 +31,7 @@ defineCustomElement('sinch-time-picker', class extends NectaryElement {
   #$submitButton;
   #hour = 0;
   #minute = 0;
+  #controller = null;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -96,20 +95,19 @@ defineCustomElement('sinch-time-picker', class extends NectaryElement {
     this.#$pickerMinutes.appendChild(minutesFrag);
   }
   connectedCallback() {
-    this.#$pickerTouch.addEventListener('click', this.#onPickerClick);
-    this.#$ampm.addEventListener('change', this.#onAmPmChange);
-    this.#$submitButton.addEventListener('click', this.#onSubmitButtonClick);
-    this.#$headerHours.addEventListener('keydown', this.#onHoursKeydown);
-    this.#$headerMinutes.addEventListener('keydown', this.#onMinutesKeydown);
-    this.addEventListener('-change', this.#onChangeReactHandler);
+    this.#controller = new AbortController();
+    const options = {
+      signal: this.#controller.signal
+    };
+    this.#$pickerTouch.addEventListener('click', this.#onPickerClick, options);
+    this.#$ampm.addEventListener('change', this.#onAmPmChange, options);
+    this.#$submitButton.addEventListener('click', this.#onSubmitButtonClick, options);
+    this.#$needleHour.addEventListener('keydown', this.#onHoursKeydown, options);
+    this.#$needleMinute.addEventListener('keydown', this.#onMinutesKeydown, options);
+    this.addEventListener('-change', this.#onChangeReactHandler, options);
   }
   disconnectedCallback() {
-    this.#$pickerTouch.removeEventListener('click', this.#onPickerClick);
-    this.#$ampm.removeEventListener('change', this.#onAmPmChange);
-    this.#$submitButton.removeEventListener('click', this.#onSubmitButtonClick);
-    this.#$headerHours.removeEventListener('keydown', this.#onHoursKeydown);
-    this.#$headerMinutes.removeEventListener('keydown', this.#onMinutesKeydown);
-    this.removeEventListener('-change', this.#onChangeReactHandler);
+    this.#controller.abort();
   }
   static get observedAttributes() {
     return ['value', 'ampm', 'submit-aria-label'];

package/tooltip/index.js

@@ -1,6 +1,6 @@
 import '../text';
 import '../pop';
-import { defineCustomElement, getBooleanAttribute, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, setClass, rectOverlap } from '../utils';
+import { defineCustomElement, getBooleanAttribute, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, setClass, rectOverlap, getReactEventHandler } from '../utils';
 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';
@@ -49,6 +49,8 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
       signal: this.#controller.signal
     };
     this.#$pop.addEventListener('-close', this.#onPopClose, options);
+    this.addEventListener('-show', this.#onShowReactHandler, options);
+    this.addEventListener('-hide', this.#onHideReactHandler, options);
     updateAttribute(this.#$pop, 'orientation', getPopOrientation(this.orientation));
     this.#updateText();
   }
@@ -129,6 +131,7 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
     this.#unsubscribeScroll();
   };
   #onStateShow = () => {
+    this.#dispatchShowEvent();
     updateBooleanAttribute(this.#$pop, 'open', true);
     requestAnimationFrame(this.#updateTipOrientation);
     if (this.#animation !== null) {
@@ -152,6 +155,7 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
     this.#animation.finish();
     this.#resetTipOrientation();
     updateBooleanAttribute(this.#$pop, 'open', false);
+    this.#dispatchHideEvent();
     this.#unsubscribeMouseLeaveEvents();
   };
   #resetTipOrientation() {
@@ -232,4 +236,16 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
   #isOpen() {
     return this.#$pop.hasAttribute('open');
   }
+  #dispatchShowEvent() {
+    this.dispatchEvent(new CustomEvent('-show'));
+  }
+  #dispatchHideEvent() {
+    this.dispatchEvent(new CustomEvent('-hide'));
+  }
+  #onShowReactHandler = () => {
+    getReactEventHandler(this, 'on-show')?.();
+  };
+  #onHideReactHandler = () => {
+    getReactEventHandler(this, 'on-hide')?.();
+  };
 });

package/tooltip/types.d.ts

@@ -11,6 +11,10 @@ export declare type TSinchTooltipElement = HTMLElement & {
     orientation: TSinchTooltipOrientation;
     readonly footprintRect: TRect;
     readonly tooltipRect: TRect;
+    /** Show event */
+    addEventListener(type: '-show', listener: (e: CustomEvent<void>) => void): void;
+    /** Hide event */
+    addEventListener(type: '-hide', listener: (e: CustomEvent<void>) => void): void;
     /** Text */
     setAttribute(name: 'text', value: string): void;
     /** @deprecated */
@@ -29,4 +33,8 @@ export declare type TSinchTooltipReact = TSinchElementReact<TSinchTooltipElement
     inverted?: boolean;
     /** Orientation, where it *points to* from origin */
     orientation?: TSinchTooltipOrientation;
+    /** Show event handler */
+    'on-show'?: (e: CustomEvent<void>) => void;
+    /** Hide event handler */
+    'on-hide'?: (e: CustomEvent<void>) => void;
 };