@nectary/components 0.45.1 → 0.46.0

package/badge/index.js

@@ -90,7 +90,9 @@ defineCustomElement('sinch-badge', class extends NectaryElement {
         }
       case 'mode':
         {
-          assertMode(newVal);
+          if ('production' !== 'production') {
+            assertMode(newVal);
+          }
           this.#updatePosition();
           break;
         }
@@ -112,7 +114,9 @@ defineCustomElement('sinch-badge', class extends NectaryElement {
     }
     const colorName = this.color;
     if (colorName !== null && colorName.length > 0) {
-      assertBadgeColor(this, colorName);
+      if ('production' !== 'production') {
+        assertBadgeColor(this, colorName);
+      }
       const bg = getBadgeColorBg(colorName);
       const fg = getBadgeColorFg(colorName);
       this.#$badge.style.setProperty('background-color', bg);

package/date-picker/index.js

@@ -77,15 +77,21 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
     switch (name) {
       case 'value':
         {
-          assertValue(newVal);
+          if ('production' !== 'production') {
+            assertValue(newVal);
+          }
           this.#onValueChange();
           break;
         }
       case 'min':
         {
-          assertMinMax(newVal, name);
+          if ('production' !== 'production') {
+            assertMinMax(newVal, name);
+          }
           this.#minDate = isoToDate(newVal);
-          assertDate(this.#minDate, name, newVal);
+          if ('production' !== 'production') {
+            assertDate(this.#minDate, name, newVal);
+          }
 
           if (this.#uiDate !== null) {
             clampMinDate(this.#uiDate, this.#minDate);
@@ -95,9 +101,13 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
         }
       case 'max':
         {
-          assertMinMax(newVal, name);
+          if ('production' !== 'production') {
+            assertMinMax(newVal, name);
+          }
           this.#maxDate = isoToDate(newVal);
-          assertDate(this.#maxDate, name, newVal);
+          if ('production' !== 'production') {
+            assertDate(this.#maxDate, name, newVal);
+          }
 
           if (this.#uiDate !== null) {
             clampMaxDate(this.#uiDate, this.#maxDate);
@@ -107,7 +117,9 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
         }
       case 'locale':
         {
-          assertLocale(newVal);
+          if ('production' !== 'production') {
+            assertLocale(newVal);
+          }
           const names = getDayNames(newVal);
           this.#$weekDayNames.forEach(($day, i) => {
             $day.textContent = names[i];

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/logo/engage-icon/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchLogoElement, TSinchLogoReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-logo-engage-icon': TSinchLogoReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-logo-engage-icon': TSinchLogoElement;
+    }
+}

package/logo/engage-icon/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createLogoClass } from '../create-logo-class';
+const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true"><path d="M46.398 19.2a17.48 17.48 0 0 1-5.155 12.443A17.488 17.488 0 0 1 28.8 36.798H24l4.8-4.8c7.057 0 12.799-5.741 12.799-12.798S35.857 6.402 28.8 6.402c-7.057 0-12.799 5.741-12.799 12.798v.25a15.66 15.66 0 0 0-2.801-.25h-.798c-.402 0-.803.014-1.2.046V19.2a17.48 17.48 0 0 1 5.155-12.443A17.488 17.488 0 0 1 28.8 1.602c4.698 0 9.12 1.832 12.443 5.155A17.488 17.488 0 0 1 46.398 19.2Z"/><path d="M24.046 46.398H12.8c-6.176 0-11.202-5.026-11.202-11.201 0-6.176 5.026-11.202 11.202-11.202 6.174 0 11.2 5.026 11.2 11.202v1.601h-4.8v-1.601c0-3.53-2.87-6.402-6.401-6.402a6.408 6.408 0 0 0-6.402 6.402c0 3.53 2.87 6.401 6.402 6.401h6.447l4.8 4.8Z"/></svg>';
+defineCustomElement('sinch-logo-engage-icon', createLogoClass(templateHTML));

package/logo/engage-icon-wordmark/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchLogoElement, TSinchLogoReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-logo-engage-icon-wordmark': TSinchLogoReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-logo-engage-icon-wordmark': TSinchLogoElement;
+    }
+}

package/logo/engage-icon-wordmark/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createLogoClass } from '../create-logo-class';
+const templateHTML = '<svg viewBox="0 0 159 48" aria-hidden="true"><path d="M53.94 40.214V16.722h15.338v3.456H58.236v6.444h10.035v3.356H58.236v6.78h11.042v3.456H53.94Zm17.62 0V23.568h3.792l.336 2.819a5.862 5.862 0 0 1 2.231-2.35c.974-.582 2.119-.872 3.44-.872 2.06 0 3.658.65 4.8 1.947 1.14 1.296 1.711 3.2 1.711 5.705v9.397h-4.296V31.22c0-1.43-.29-2.53-.872-3.29-.583-.758-1.49-1.14-2.719-1.14-1.229 0-2.198.423-2.97 1.275-.772.852-1.158 2.035-1.158 3.557v8.592H71.56Zm25.774-4.967a8.905 8.905 0 0 1-2.248-.269l-1.242 1.242c.382.202.893.37 1.544.504.65.134 1.699.268 3.154.402 2.215.202 3.826.726 4.833 1.578 1.007.851 1.51 2.026 1.51 3.524 0 .985-.268 1.917-.805 2.802s-1.364 1.598-2.484 2.148c-1.12.55-2.55.822-4.295.822-2.37 0-4.284-.44-5.74-1.326-1.455-.885-2.18-2.21-2.18-3.977 0-1.497.725-2.798 2.18-3.893a7.352 7.352 0 0 1-1.157-.637 6.089 6.089 0 0 1-.856-.705v-.772l2.92-3.087c-1.296-1.142-1.947-2.606-1.947-4.397 0-1.12.273-2.135.823-3.054.55-.919 1.325-1.644 2.332-2.181 1.007-.537 2.228-.806 3.658-.806.94 0 1.813.134 2.618.403h6.309v2.618l-2.852.201c.449.852.671 1.791.671 2.82 0 1.12-.269 2.134-.806 3.053s-1.313 1.645-2.332 2.181c-1.02.537-2.22.806-3.608.806Zm-4.027 7.014c0 .827.386 1.447 1.158 1.863.772.415 1.715.62 2.836.62 1.12 0 1.946-.218 2.617-.654.672-.436 1.007-1.023 1.007-1.762a1.97 1.97 0 0 0-.654-1.51c-.437-.403-1.305-.65-2.601-.738a26.661 26.661 0 0 1-2.55-.302c-.651.356-1.113.75-1.394 1.174-.28.424-.42.86-.42 1.31Zm4.027-10.303c.873 0 1.594-.235 2.165-.705.57-.47.856-1.14.856-2.013s-.286-1.544-.856-2.014c-.57-.47-1.292-.705-2.165-.705-.919 0-1.657.235-2.215.705-.558.47-.839 1.141-.839 2.014 0 .872.281 1.543.84 2.013.557.47 1.295.705 2.214.705Zm16.109 8.659c-1.43 0-2.605-.231-3.524-.688-.918-.458-1.598-1.07-2.047-1.83a4.851 4.851 0 0 1-.671-2.516c0-1.544.604-2.798 1.812-3.76 1.208-.96 3.021-1.442 5.437-1.442h4.229v-.403c0-1.141-.323-1.98-.973-2.517-.651-.537-1.456-.805-2.417-.805-.872 0-1.632.205-2.282.62-.65.416-1.053 1.024-1.208 1.83h-4.195c.113-1.209.52-2.262 1.225-3.155.705-.894 1.615-1.582 2.735-2.064 1.12-.483 2.37-.722 3.759-.722 2.37 0 4.241.592 5.604 1.779 1.364 1.187 2.048 2.865 2.048 5.034v10.236h-3.659l-.402-2.685a6.205 6.205 0 0 1-2.064 2.215c-.885.583-2.018.873-3.407.873Zm.974-3.356c1.229 0 2.185-.403 2.869-1.209.684-.805 1.112-1.8 1.292-2.986h-3.658c-1.141 0-1.959.205-2.45.62-.491.416-.738.923-.738 1.527 0 .65.247 1.154.738 1.51.491.357 1.141.538 1.947.538Zm18.022-2.014a8.905 8.905 0 0 1-2.249-.269l-1.242 1.242c.382.202.894.37 1.544.504s1.699.268 3.155.402c2.215.202 3.826.726 4.833 1.578 1.006.851 1.51 2.026 1.51 3.524 0 .985-.269 1.917-.806 2.802s-1.363 1.598-2.483 2.148-2.551.822-4.296.822c-2.37 0-4.283-.44-5.739-1.326-1.456-.885-2.181-2.21-2.181-3.977 0-1.497.725-2.798 2.181-3.893a7.349 7.349 0 0 1-1.158-.637 6.052 6.052 0 0 1-.855-.705v-.772l2.919-3.087c-1.296-1.142-1.946-2.606-1.946-4.397 0-1.12.272-2.135.822-3.054.55-.919 1.326-1.644 2.333-2.181 1.006-.537 2.227-.806 3.658-.806.939 0 1.812.134 2.617.403h6.31v2.618l-2.853.201c.449.852.671 1.791.671 2.82 0 1.12-.268 2.134-.805 3.053s-1.313 1.645-2.333 2.181c-1.019.537-2.219.806-3.607.806Zm-4.028 7.014c0 .827.386 1.447 1.158 1.863.772.415 1.716.62 2.836.62 1.12 0 1.947-.218 2.618-.654.671-.436 1.007-1.023 1.007-1.762 0-.604-.219-1.107-.655-1.51-.436-.403-1.304-.65-2.601-.738a26.617 26.617 0 0 1-2.55-.302c-.651.356-1.112.75-1.393 1.174-.281.424-.42.86-.42 1.31Zm4.028-10.303c.872 0 1.594-.235 2.164-.705.571-.47.856-1.14.856-2.013s-.285-1.544-.856-2.014c-.57-.47-1.292-.705-2.164-.705-.919 0-1.657.235-2.215.705-.558.47-.839 1.141-.839 2.014 0 .872.281 1.543.839 2.013.558.47 1.296.705 2.215.705Zm17.787 8.659c-1.678 0-3.168-.357-4.464-1.074a7.806 7.806 0 0 1-3.054-3.02c-.738-1.297-1.107-2.799-1.107-4.498 0-1.699.365-3.255 1.09-4.598a7.911 7.911 0 0 1 3.021-3.137c1.288-.751 2.802-1.125 4.547-1.125 1.632 0 3.075.357 4.33 1.074a7.715 7.715 0 0 1 2.936 2.937c.705 1.241 1.057 2.622 1.057 4.144 0 .248-.004.504-.016.772-.013.269-.03.55-.051.84h-12.652c.088 1.296.541 2.315 1.359 3.053.818.739 1.808 1.108 2.97 1.108.873 0 1.607-.197 2.198-.588a3.632 3.632 0 0 0 1.326-1.527h4.363a7.93 7.93 0 0 1-1.561 2.87 7.688 7.688 0 0 1-2.684 2.03c-1.062.491-2.266.739-3.608.739Zm.033-13.961c-1.053 0-1.98.297-2.785.889-.806.591-1.322 1.493-1.544 2.701h8.29c-.068-1.094-.47-1.967-1.209-2.617-.738-.65-1.657-.974-2.752-.974ZM56.944 11.742c-.604 0-1.137-.105-1.598-.31a2.524 2.524 0 0 1-1.091-.894c-.264-.386-.403-.86-.411-1.414h1.586c.016.386.155.71.415.97s.625.394 1.087.394c.398 0 .717-.097.952-.29a.944.944 0 0 0 .352-.768c0-.318-.105-.6-.31-.788-.206-.189-.483-.34-.827-.457l-1.103-.378c-.634-.218-1.12-.5-1.452-.847-.331-.344-.499-.802-.499-1.376-.008-.487.11-.902.348-1.25a2.37 2.37 0 0 1 .982-.81c.415-.193.894-.29 1.435-.29s1.032.097 1.451.294c.42.197.747.47.986.822.24.353.365.772.382 1.259h-1.611a1.109 1.109 0 0 0-.336-.768c-.214-.222-.516-.336-.897-.336-.328-.008-.604.072-.827.24-.222.167-.335.41-.335.734 0 .272.088.49.26.65.172.16.407.298.704.407.298.109.638.226 1.024.352.407.143.78.307 1.116.495.336.19.608.437.81.747.205.31.306.705.306 1.191 0 .433-.11.831-.327 1.2-.218.37-.546.663-.974.885-.432.223-.96.336-1.585.336h-.013Zm6.553-.138V3.38h1.502v8.223h-1.502Zm5.449 0V3.38h1.502l3.864 5.79V3.38h1.502v8.223h-1.502l-3.864-5.781v5.78h-1.502Zm14.544.138c-.83 0-1.543-.176-2.139-.533a3.565 3.565 0 0 1-1.376-1.493c-.323-.638-.482-1.376-.482-2.215 0-.84.159-1.578.482-2.22a3.56 3.56 0 0 1 1.376-1.501c.596-.361 1.309-.541 2.14-.541.985 0 1.795.243 2.424.734.63.49 1.024 1.174 1.18 2.06h-1.658a1.782 1.782 0 0 0-.65-1.053c-.332-.256-.772-.382-1.322-.382-.759 0-1.355.26-1.787.776-.432.516-.646 1.225-.646 2.127 0 .902.214 1.606.646 2.118.432.512 1.028.768 1.787.768.55 0 .99-.117 1.322-.357.331-.239.55-.57.65-.994h1.657c-.155.848-.55 1.506-1.179 1.984-.629.479-1.439.718-2.425.718v.004Zm7.283-.138V3.38h1.502V6.8h3.687V3.38h1.502v8.223h-1.502V8.02h-3.687v3.582h-1.502Zm-48.6 5.847c0 4.275-1.665 8.29-4.686 11.31a15.895 15.895 0 0 1-11.31 4.686h-4.363l4.363-4.363c6.415 0 11.633-5.218 11.633-11.633 0-6.414-5.218-11.632-11.633-11.632-6.414 0-11.633 5.218-11.633 11.633v.226a14.231 14.231 0 0 0-2.546-.227h-.726c-.365 0-.73.013-1.09.042v-.041c0-4.275 1.665-8.29 4.685-11.31a15.895 15.895 0 0 1 11.31-4.686c4.27 0 8.29 1.665 11.31 4.686a15.896 15.896 0 0 1 4.686 11.31Z"/><path d="M21.856 42.173H11.633c-5.613 0-10.181-4.568-10.181-10.181 0-5.613 4.568-10.182 10.181-10.182 5.613 0 10.181 4.569 10.181 10.182v1.455h-4.362v-1.455c0-3.21-2.61-5.819-5.819-5.819a5.824 5.824 0 0 0-5.819 5.819 5.824 5.824 0 0 0 5.819 5.818h5.86l4.363 4.363Z"/></svg>';
+defineCustomElement('sinch-logo-engage-icon-wordmark', createLogoClass(templateHTML));

package/package.json

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

package/tag/index.js

@@ -59,7 +59,9 @@ defineCustomElement('sinch-tag', class extends NectaryElement {
     }
     const colorName = this.color;
     if (colorName !== null && colorName.length > 0) {
-      assertTagColor(this, colorName);
+      if ('production' !== 'production') {
+        assertTagColor(this, colorName);
+      }
       const bg = getTagColorBg(colorName);
       const fg = getTagColorFg(colorName);
       this.#$wrapper.style.setProperty('background-color', bg);

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/theme/button.css

@@ -96,10 +96,10 @@
   --sinch-button-cta-secondary-mix-blend-mode: initial;
 
   /* Destructive */
-  --sinch-button-destructive-color-background: transparent;
+  --sinch-button-destructive-color-background: var(--sinch-color-snow-100);
   --sinch-button-destructive-color-background-hover: var(--sinch-color-raspberry-100);
   --sinch-button-destructive-color-background-active: var(--sinch-color-raspberry-100);
-  --sinch-button-destructive-color-background-disabled: transparent;
+  --sinch-button-destructive-color-background-disabled: var(--sinch-color-snow-100);
   --sinch-button-destructive-color-border: var(--sinch-color-raspberry-500);
   --sinch-button-destructive-color-border-hover: var(--sinch-color-raspberry-500);
   --sinch-button-destructive-color-border-active: var(--sinch-color-raspberry-500);

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;
 };

package/utils/dom.js

@@ -44,7 +44,9 @@ export function getLiteralAttribute($element, literals, attrName, defaultValue)
     return attrValue;
   }
   if (typeof defaultValue === 'undefined') {
-    throw new Error(`Invalid attribute value: ${attrName} = ${attrValue}`);
+    if ('production' !== 'production') {
+      throw new Error(`Invalid attribute value: ${attrName} = ${attrValue}`);
+    }
   }
   return defaultValue;
 }