@nectary/components 0.39.0 → 0.41.0

package/file-status/index.js

@@ -1,12 +1,3 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$filename, _$contentSlot, _onContentSlotChange;
-
-function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
-
-function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
-
 import '../spinner';
 import '../icons/check-circle';
 import '../icons/report';
@@ -14,47 +5,29 @@ import '../icons/pending-actions';
 import '../icons/text-snippet';
 import '../text';
 import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:12px 16px;box-sizing:border-box;min-height:48px;min-width:148px;background-color:var(--sinch-color-background-grey);border-radius:var(--sinch-shape-radius-m)}:host([type=error]) #wrapper{background-color:var(--sinch-color-error-200)}#content-wrapper{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;margin-left:16px;color:var(--sinch-color-stormy-500)}#icon-error,#icon-loading,#icon-pending,#icon-progress,#icon-success{display:none}#action{height:24px}#action ::slotted(*){position:relative;top:50%;transform:translateY(-50%)}:host([type=error]) #icon-error,:host([type=loading]) #icon-loading,:host([type=pending]) #icon-pending,:host([type=progress]) #icon-progress,:host([type=success]) #icon-success{display:block;--sinch-color-icon:var(--sinch-color-stormy-500)}:host([type=success]) #icon-success{--sinch-color-icon:var(--sinch-color-success-500)}:host([type=error]) #icon-error{--sinch-color-icon:var(--sinch-color-error-500)}</style><div id="wrapper"><sinch-spinner id="icon-loading" type="medium"></sinch-spinner><sinch-icon-check-circle id="icon-success"></sinch-icon-check-circle><sinch-icon-report id="icon-error"></sinch-icon-report><sinch-icon-pending-actions id="icon-pending"></sinch-icon-pending-actions><sinch-icon-text-snippet id="icon-progress"></sinch-icon-text-snippet><div id="content-wrapper"><sinch-text id="filename" type="m" ellipsis></sinch-text><slot name="content"></slot></div><div id="action"><slot name="action"></slot></div></div>';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:12px 16px;box-sizing:border-box;min-height:48px;min-width:148px;background-color:var(--sinch-color-bg-primary-contrast);border-radius:var(--sinch-shape-radius-m)}:host([type=error]) #wrapper{background-color:var(--sinch-color-error-200)}#content-wrapper{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;margin-left:16px;color:var(--sinch-color-stormy-500)}#icon-error,#icon-loading,#icon-pending,#icon-progress,#icon-success{display:none}#action{height:24px}#action ::slotted(*){position:relative;top:50%;transform:translateY(-50%)}:host([type=error]) #icon-error,:host([type=loading]) #icon-loading,:host([type=pending]) #icon-pending,:host([type=progress]) #icon-progress,:host([type=success]) #icon-success{display:block;--sinch-color-icon:var(--sinch-color-stormy-500)}:host([type=success]) #icon-success{--sinch-color-icon:var(--sinch-color-success-500)}:host([type=error]) #icon-error{--sinch-color-icon:var(--sinch-color-error-500)}</style><div id="wrapper"><sinch-spinner id="icon-loading" type="medium"></sinch-spinner><sinch-icon-check-circle id="icon-success"></sinch-icon-check-circle><sinch-icon-report id="icon-error"></sinch-icon-report><sinch-icon-pending-actions id="icon-pending"></sinch-icon-pending-actions><sinch-icon-text-snippet id="icon-progress"></sinch-icon-text-snippet><div id="content-wrapper"><sinch-text id="filename" type="m" ellipsis></sinch-text><slot name="content"></slot></div><div id="action"><slot name="action"></slot></div></div>';
 import { assertType, typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-file-status', (_$filename = new WeakMap(), _$contentSlot = new WeakMap(), _onContentSlotChange = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-file-status', class extends NectaryElement {
+  #$filename;
+  #$contentSlot;
+
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$filename, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$contentSlot, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _onContentSlotChange, {
-      writable: true,
-      value: () => {
-        updateBooleanAttribute(_classPrivateFieldGet(this, _$filename), 'emphasized', _classPrivateFieldGet(this, _$contentSlot).assignedElements().length > 0);
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$filename, shadowRoot.querySelector('#filename'));
-
-    _classPrivateFieldSet(this, _$contentSlot, shadowRoot.querySelector('slot[name="content"]'));
+    this.#$filename = shadowRoot.querySelector('#filename');
+    this.#$contentSlot = shadowRoot.querySelector('slot[name="content"]');
   }
 
   connectedCallback() {
-    _classPrivateFieldGet(this, _$contentSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onContentSlotChange));
-
-    _classPrivateFieldGet(this, _onContentSlotChange).call(this);
+    this.#$contentSlot.addEventListener('slotchange', this.#onContentSlotChange);
+    this.#onContentSlotChange();
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$contentSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onContentSlotChange));
+    this.#$contentSlot.removeEventListener('slotchange', this.#onContentSlotChange);
   }
 
   get type() {
@@ -91,10 +64,13 @@ defineCustomElement('sinch-file-status', (_$filename = new WeakMap(), _$contentS
 
       case 'filename':
         {
-          _classPrivateFieldGet(this, _$filename).textContent = newVal;
+          this.#$filename.textContent = newVal;
           break;
         }
     }
   }
 
-}));
+  #onContentSlotChange = () => {
+    updateBooleanAttribute(this.#$filename, 'emphasized', this.#$contentSlot.assignedElements().length > 0);
+  };
+});

package/help-tooltip/index.js

@@ -1,15 +1,17 @@
 import '../tooltip';
 import '../icons/help-outline';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, NectaryElement, updateAttribute, updateBooleanAttribute, updateIntegerAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;--sinch-size-icon:18px}sinch-tooltip{display:block}</style><sinch-tooltip><sinch-icon-help-outline></sinch-icon-help-outline></sinch-tooltip>';
+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;
+
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.$tooltip = shadowRoot.querySelector('sinch-tooltip');
+    this.#$tooltip = shadowRoot.querySelector('sinch-tooltip');
   }
 
   static get observedAttributes() {
@@ -41,42 +43,23 @@ defineCustomElement('sinch-help-tooltip', class extends NectaryElement {
   }
 
   get orientation() {
-    return getAttribute(this, 'orientation');
+    return getAttribute(this, 'orientation', 'top');
   }
 
   set orientation(value) {
     updateAttribute(this, 'orientation', value);
   }
 
+  get footprintRect() {
+    return this.#$tooltip.footprintRect;
+  }
+
   get tooltipRect() {
-    return this.$tooltip.tooltipRect;
+    return this.#$tooltip.tooltipRect;
   }
 
   attributeChangedCallback(name, _, newVal) {
-    switch (name) {
-      case 'text':
-        {
-          updateAttribute(this.$tooltip, 'text', newVal);
-          break;
-        }
-
-      case 'width':
-        {
-          updateAttribute(this.$tooltip, 'width', newVal);
-          break;
-        }
-
-      case 'inverted':
-        {
-          updateAttribute(this.$tooltip, 'inverted', newVal);
-          break;
-        }
-
-      case 'orientation':
-        {
-          updateAttribute(this.$tooltip, 'orientation', newVal);
-        }
-    }
+    updateAttribute(this.#$tooltip, name, newVal);
   }
 
 });

package/horizontal-stepper/index.js

@@ -1,77 +1,29 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$itemsSlot, _$progressBar, _updateItems;
-
-function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
-
-function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
-
 import '../icons/check';
 import '../icons/error-outline';
 import { clampNumber, defineCustomElement, getAttribute, getIntegerAttribute, NectaryElement, updateAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;display:flex;flex-direction:row;gap:28px;width:fit-content}#progress{position:absolute;height:1px;background-color:var(--sinch-color-snow-700);left:72px;right:72px;top:16px;transform:translateY(-50%)}#bar{position:absolute;height:1px;background-color:var(--sinch-color-stormy-400);left:0;top:0}</style><div id="wrapper"><div id="progress"><div id="bar"></div></div><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-horizontal-stepper', (_$itemsSlot = new WeakMap(), _$progressBar = new WeakMap(), _updateItems = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-horizontal-stepper', class extends NectaryElement {
+  #$itemsSlot;
+  #$progressBar;
+
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$itemsSlot, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$progressBar, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _updateItems, {
-      writable: true,
-      value: () => {
-        const $items = _classPrivateFieldGet(this, _$itemsSlot).assignedElements();
-
-        const activeIndex = clampNumber(getIntegerAttribute(this, 'index', 0), 0, $items.length + 1);
-
-        for (let i = 0; i < $items.length; i++) {
-          const $el = $items[i];
-          const itemIndex = i + 1;
-          $el.setAttribute('data-index', String(itemIndex));
-
-          if (itemIndex === activeIndex) {
-            $el.setAttribute('data-progress', 'active');
-          } else if (itemIndex < activeIndex) {
-            $el.setAttribute('data-progress', 'done');
-          } else {
-            $el.removeAttribute('data-progress');
-          }
-        }
-
-        const valueIndex = clampNumber(activeIndex - 1, 0, $items.length - 1);
-        _classPrivateFieldGet(this, _$progressBar).style.width = `${Math.floor(valueIndex / Math.max(1, $items.length - 1) * 100)}%`;
-        this.setAttribute('aria-valuemax', String($items.length));
-        this.setAttribute('aria-valuenow', String(valueIndex + 1));
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$itemsSlot, shadowRoot.querySelector('slot'));
-
-    _classPrivateFieldSet(this, _$progressBar, shadowRoot.querySelector('#bar'));
+    this.#$itemsSlot = shadowRoot.querySelector('slot');
+    this.#$progressBar = shadowRoot.querySelector('#bar');
   }
 
   connectedCallback() {
     this.setAttribute('role', 'progressbar');
     this.setAttribute('aria-valuemin', '0');
-
-    _classPrivateFieldGet(this, _$itemsSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _updateItems));
+    this.#$itemsSlot.addEventListener('slotchange', this.#updateItems);
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$itemsSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _updateItems));
+    this.#$itemsSlot.removeEventListener('slotchange', this.#updateItems);
   }
 
   static get observedAttributes() {
@@ -86,8 +38,7 @@ defineCustomElement('sinch-horizontal-stepper', (_$itemsSlot = new WeakMap(), _$
     switch (name) {
       case 'index':
         {
-          _classPrivateFieldGet(this, _updateItems).call(this);
-
+          this.#updateItems();
           break;
         }
     }
@@ -101,4 +52,27 @@ defineCustomElement('sinch-horizontal-stepper', (_$itemsSlot = new WeakMap(), _$
     return getAttribute(this, 'index', '1');
   }
 
-}));
+  #updateItems = () => {
+    const $items = this.#$itemsSlot.assignedElements();
+    const activeIndex = clampNumber(getIntegerAttribute(this, 'index', 0), 0, $items.length + 1);
+
+    for (let i = 0; i < $items.length; i++) {
+      const $el = $items[i];
+      const itemIndex = i + 1;
+      $el.setAttribute('data-index', String(itemIndex));
+
+      if (itemIndex === activeIndex) {
+        $el.setAttribute('data-progress', 'active');
+      } else if (itemIndex < activeIndex) {
+        $el.setAttribute('data-progress', 'done');
+      } else {
+        $el.removeAttribute('data-progress');
+      }
+    }
+
+    const valueIndex = clampNumber(activeIndex - 1, 0, $items.length - 1);
+    this.#$progressBar.style.width = `${Math.floor(valueIndex / Math.max(1, $items.length - 1) * 100)}%`;
+    this.setAttribute('aria-valuemax', String($items.length));
+    this.setAttribute('aria-valuenow', String(valueIndex + 1));
+  };
+});

package/horizontal-stepper-item/index.js

@@ -1,46 +1,22 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$label, _$description, _$circleText;
-
-function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
-
-function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
-
 import '../icons/check';
 import '../icons/exclamation';
 import { defineCustomElement, getAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{width:144px;min-height:64px;display:flex;flex-direction:column}#circle{position:relative;display:flex;align-items:center;justify-content:center;align-self:center;width:32px;height:32px;background-color:var(--sinch-color-snow-700);font:var(--sinch-font-title-s);line-height:32px;text-align:center;color:var(--sinch-color-stormy-500);border:1px solid transparent;border-radius:50%;box-sizing:border-box;--sinch-icon-size:20px}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-stormy-500);text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-top:8px}#description{font:var(--sinch-font-text-xs);color:var(--sinch-color-stormy-300);text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#icon-error,#icon-success{display:none}:host([data-progress=active]) #circle{color:var(--sinch-color-snow-100);background-color:var(--sinch-color-stormy-400)}:host([data-progress=done]) #circle{border-color:var(--sinch-color-stormy-400)}:host([data-progress=done]:not([status])) #icon-success{display:block}:host([data-progress=done][status=error]) #circle{background-color:var(--sinch-color-error-200);border-color:var(--sinch-color-stormy-400)}:host([data-progress=done][status=error]) #icon-error{display:block}:host([data-progress=done]:not([status=skip])) #circle-text{display:none}</style><div id="wrapper"><div id="circle" aria-hidden="true"><sinch-icon-check id="icon-success"></sinch-icon-check><sinch-icon-exclamation id="icon-error"></sinch-icon-exclamation><span id="circle-text"></span></div><span id="label"></span><span id="description"></span></div>';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{width:144px;min-height:64px;display:flex;flex-direction:column}#circle{position:relative;display:flex;align-items:center;justify-content:center;align-self:center;width:32px;height:32px;background-color:var(--sinch-color-snow-700);font:var(--sinch-font-title-s);line-height:32px;text-align:center;color:var(--sinch-color-stormy-500);border:1px solid transparent;border-radius:50%;box-sizing:border-box;--sinch-size-icon:20px}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-stormy-500);text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-top:8px}#description{font:var(--sinch-font-text-xs);color:var(--sinch-color-stormy-300);text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#icon-error,#icon-success{display:none}:host([data-progress=active]) #circle{color:var(--sinch-color-snow-100);background-color:var(--sinch-color-stormy-400)}:host([data-progress=done]) #circle{border-color:var(--sinch-color-stormy-400)}:host([data-progress=done]:not([status])) #icon-success{display:block}:host([data-progress=done][status=error]) #circle{background-color:var(--sinch-color-error-200);border-color:var(--sinch-color-stormy-400)}:host([data-progress=done][status=error]) #icon-error{display:block}:host([data-progress=done]:not([status=skip])) #circle-text{display:none}</style><div id="wrapper"><div id="circle" aria-hidden="true"><sinch-icon-check id="icon-success"></sinch-icon-check><sinch-icon-exclamation id="icon-error"></sinch-icon-exclamation><span id="circle-text"></span></div><span id="label"></span><span id="description"></span></div>';
 import { statusValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-horizontal-stepper-item', (_$label = new WeakMap(), _$description = new WeakMap(), _$circleText = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-horizontal-stepper-item', class extends NectaryElement {
+  #$label;
+  #$description;
+  #$circleText;
+
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$label, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$description, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$circleText, {
-      writable: true,
-      value: void 0
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$label, shadowRoot.querySelector('#label'));
-
-    _classPrivateFieldSet(this, _$description, shadowRoot.querySelector('#description'));
-
-    _classPrivateFieldSet(this, _$circleText, shadowRoot.querySelector('#circle-text'));
+    this.#$label = shadowRoot.querySelector('#label');
+    this.#$description = shadowRoot.querySelector('#description');
+    this.#$circleText = shadowRoot.querySelector('#circle-text');
   }
 
   connectedCallback() {}
@@ -55,19 +31,19 @@ defineCustomElement('sinch-horizontal-stepper-item', (_$label = new WeakMap(), _
     switch (name) {
       case 'label':
         {
-          _classPrivateFieldGet(this, _$label).textContent = newVal;
+          this.#$label.textContent = newVal;
           break;
         }
 
       case 'description':
         {
-          _classPrivateFieldGet(this, _$description).textContent = newVal;
+          this.#$description.textContent = newVal;
           break;
         }
 
       case 'data-index':
         {
-          _classPrivateFieldGet(this, _$circleText).textContent = newVal;
+          this.#$circleText.textContent = newVal;
           break;
         }
     }
@@ -97,4 +73,4 @@ defineCustomElement('sinch-horizontal-stepper-item', (_$label = new WeakMap(), _
     updateLiteralAttribute(this, statusValues, 'status', value);
   }
 
-}));
+});

package/icon-button/index.d.ts

@@ -1,3 +1,4 @@
+import '../tooltip';
 import type { TSinchIconButtonElement, TSinchIconButtonReact } from './types';
 declare global {
     namespace JSX {

package/icon-button/index.js

@@ -1,97 +1,37 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$button, _onButtonClick, _onButtonFocus, _onButtonBlur, _onFocusReactHandler, _onBlurReactHandler, _onClickReactHandler;
-
-function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
-
-function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
-
+import '../tooltip';
 import { defineCustomElement, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}button{all:initial;position:relative;display:flex;align-items:center;justify-content:center;width:48px;height:48px;cursor:pointer;contain:size;--sinch-size-icon:24px;--sinch-color-icon:var(--sinch-icon-button-color, var(--sinch-color-stormy-500));--sinch-icon-button-shape-radius:var(--sinch-shape-radius-l)}button::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;border-radius:var(--sinch-icon-button-shape-radius);pointer-events:none;box-sizing:border-box;border:1px solid transparent;background-color:transparent;mix-blend-mode:multiply}button:focus-visible::after{position:absolute;content:"";left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;padding:2px;border:2px solid var(--sinch-color-aqua-400);border-radius:calc(var(--sinch-icon-button-shape-radius) + 4px);pointer-events:none}@supports not selector(:focus-visible){button:focus::after{position:absolute;content:"";left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;padding:2px;border:2px solid var(--sinch-color-aqua-400);border-radius:calc(var(--sinch-icon-button-shape-radius) + 4px);pointer-events:none}}button:enabled:hover::before{background-color:var(--sinch-color-snow-500)}button:enabled:active::before{background-color:var(--sinch-color-snow-600)}button:disabled{background-color:transparent;cursor:initial;--sinch-color-spinner-bg:var(--sinch-color-snow-200);--sinch-color-spinner-fg:var(--sinch-color-stormy-200);--sinch-color-icon:var(--sinch-color-stormy-100)}:host([small]:not([small=false]))>button{width:32px;height:32px;--sinch-icon-button-shape-radius:var(--sinch-shape-radius-m)}button>*{pointer-events:none}</style><button><slot name="icon"></slot></button>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}button{all:initial;position:relative;display:flex;align-items:center;justify-content:center;width:48px;height:48px;cursor:pointer;contain:size;--sinch-size-icon:24px;--sinch-color-icon:var(--sinch-icon-button-color, var(--sinch-color-stormy-500));--sinch-icon-button-shape-radius:var(--sinch-shape-radius-l)}button::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;border-radius:var(--sinch-icon-button-shape-radius);pointer-events:none;box-sizing:border-box;border:1px solid transparent;background-color:transparent;mix-blend-mode:multiply}button:focus-visible::after{position:absolute;content:"";left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;padding:2px;border:2px solid var(--sinch-color-border-focus);border-radius:calc(var(--sinch-icon-button-shape-radius) + 4px);pointer-events:none}@supports not selector(:focus-visible){button:focus::after{position:absolute;content:"";left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;padding:2px;border:2px solid var(--sinch-color-border-focus);border-radius:calc(var(--sinch-icon-button-shape-radius) + 4px);pointer-events:none}}button:enabled:hover::before{background-color:#f1f2f4}button:enabled:active::before{background-color:#e3e6e8}button:disabled{background-color:transparent;cursor:initial;--sinch-color-spinner-bg:var(--sinch-color-snow-200);--sinch-color-spinner-fg:var(--sinch-color-stormy-200);--sinch-color-icon:var(--sinch-color-stormy-100)}:host([small]:not([small=false])) #button{width:32px;height:32px;--sinch-icon-button-shape-radius:var(--sinch-shape-radius-m)}button>*{pointer-events:none}</style><sinch-tooltip id="tooltip"><button id="button"><slot name="icon"></slot></button></sinch-tooltip>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-icon-button', (_$button = new WeakMap(), _onButtonClick = new WeakMap(), _onButtonFocus = new WeakMap(), _onButtonBlur = new WeakMap(), _onFocusReactHandler = new WeakMap(), _onBlurReactHandler = new WeakMap(), _onClickReactHandler = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-icon-button', class extends NectaryElement {
+  #$button;
+  #$tooltip;
+  #controller = null;
+
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$button, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _onButtonClick, {
-      writable: true,
-      value: () => {
-        this.dispatchEvent(new CustomEvent('-click'));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onButtonFocus, {
-      writable: true,
-      value: () => {
-        this.dispatchEvent(new CustomEvent('-focus'));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onButtonBlur, {
-      writable: true,
-      value: () => {
-        this.dispatchEvent(new CustomEvent('-blur'));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onFocusReactHandler, {
-      writable: true,
-      value: () => {
-        getReactEventHandler(this, 'on-focus')?.();
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onBlurReactHandler, {
-      writable: true,
-      value: () => {
-        getReactEventHandler(this, 'on-blur')?.();
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onClickReactHandler, {
-      writable: true,
-      value: e => {
-        getReactEventHandler(this, 'on-click')?.(e);
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$button, shadowRoot.querySelector('button'));
+    this.#$button = shadowRoot.querySelector('#button');
+    this.#$tooltip = shadowRoot.querySelector('#tooltip');
   }
 
   connectedCallback() {
+    this.#controller = new AbortController();
+    const options = {
+      signal: this.#controller.signal
+    };
     this.setAttribute('role', 'button');
-
-    _classPrivateFieldGet(this, _$button).addEventListener('click', _classPrivateFieldGet(this, _onButtonClick));
-
-    _classPrivateFieldGet(this, _$button).addEventListener('focus', _classPrivateFieldGet(this, _onButtonFocus));
-
-    _classPrivateFieldGet(this, _$button).addEventListener('blur', _classPrivateFieldGet(this, _onButtonBlur));
-
-    this.addEventListener('-click', _classPrivateFieldGet(this, _onClickReactHandler));
-    this.addEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
-    this.addEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
+    this.#$button.addEventListener('click', this.#onButtonClick, options);
+    this.#$button.addEventListener('focus', this.#onButtonFocus, options);
+    this.#$button.addEventListener('blur', this.#onButtonBlur, options);
+    this.addEventListener('-click', this.#onClickReactHandler, options);
+    this.addEventListener('-focus', this.#onFocusReactHandler, options);
+    this.addEventListener('-blur', this.#onBlurReactHandler, options);
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$button).removeEventListener('click', _classPrivateFieldGet(this, _onButtonClick));
-
-    _classPrivateFieldGet(this, _$button).removeEventListener('focus', _classPrivateFieldGet(this, _onButtonFocus));
-
-    _classPrivateFieldGet(this, _$button).removeEventListener('blur', _classPrivateFieldGet(this, _onButtonBlur));
-
-    this.removeEventListener('-click', _classPrivateFieldGet(this, _onClickReactHandler));
-    this.removeEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
-    this.removeEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
+    this.#controller.abort();
   }
 
   static get observedAttributes() {
@@ -103,14 +43,14 @@ defineCustomElement('sinch-icon-button', (_$button = new WeakMap(), _onButtonCli
       case 'disabled':
         {
           const isDisabled = isAttrTrue(newVal);
-          _classPrivateFieldGet(this, _$button).disabled = isDisabled;
+          this.#$button.disabled = isDisabled;
           updateBooleanAttribute(this, 'disabled', isDisabled);
           break;
         }
 
       case 'aria-label':
         {
-          updateAttribute(this, 'title', newVal);
+          updateAttribute(this.#$tooltip, 'text', newVal);
           break;
         }
     }
@@ -132,12 +72,38 @@ defineCustomElement('sinch-icon-button', (_$button = new WeakMap(), _onButtonCli
     return getBooleanAttribute(this, 'small');
   }
 
+  get tooltipRect() {
+    return this.#$tooltip.tooltipRect;
+  }
+
+  get focusable() {
+    return true;
+  }
+
   focus() {
-    _classPrivateFieldGet(this, _$button).focus();
+    this.#$button.focus();
   }
 
   blur() {
-    _classPrivateFieldGet(this, _$button).blur();
+    this.#$button.blur();
   }
 
-}));
+  #onButtonClick = () => {
+    this.dispatchEvent(new CustomEvent('-click'));
+  };
+  #onButtonFocus = () => {
+    this.dispatchEvent(new CustomEvent('-focus'));
+  };
+  #onButtonBlur = () => {
+    this.dispatchEvent(new CustomEvent('-blur'));
+  };
+  #onFocusReactHandler = () => {
+    getReactEventHandler(this, 'on-focus')?.();
+  };
+  #onBlurReactHandler = () => {
+    getReactEventHandler(this, 'on-blur')?.();
+  };
+  #onClickReactHandler = e => {
+    getReactEventHandler(this, 'on-click')?.(e);
+  };
+});

package/icon-button/types.d.ts

@@ -1,18 +1,32 @@
-import type { TSinchElementReact } from '../types';
+import type { TRect, TSinchElementReact } from '../types';
 export declare type TSinchIconButtonElement = HTMLElement & {
+    /** Disabled */
     disabled: boolean;
+    /** Small */
     small: boolean;
+    readonly tooltipRect: TRect;
+    /** Click event */
     addEventListener(type: '-click', listener: (e: CustomEvent<void>) => void): void;
+    /** Focus event */
     addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
+    /** Blur event */
     addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
+    /** Disabled */
     setAttribute(name: 'disabled', value: ''): void;
+    /** Small */
     setAttribute(name: 'small', value: ''): void;
 };
 export declare type TSinchIconButtonReact = TSinchElementReact<TSinchIconButtonElement> & {
-    'aria-label': string;
+    /** Disabled */
     disabled?: boolean;
+    /** Small */
     small?: boolean;
+    /** Label that is used for a11y */
+    'aria-label': string;
+    /** Click event handler */
     'on-click'?: (e: CustomEvent<void>) => void;
+    /** Focus event handler */
     'on-focus'?: (e: CustomEvent<void>) => void;
+    /** Blur event handler */
     'on-blur'?: (e: CustomEvent<void>) => void;
 };

package/icons-channel/notify/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchIconChannelElement, TSinchIconChannelReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-icon-channel-notify': TSinchIconChannelReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-icon-channel-notify': TSinchIconChannelElement;
+    }
+}

package/icons-channel/notify/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 40 40" aria-hidden="true" focusable="false"><path fill="#0076BA" fill-rule="evenodd" d="M8.523 33.337C3.37 30.02 0 24.532 0 18.328 0 8.213 8.962 0 20 0s20 8.213 20 18.328c0 10.116-8.962 18.328-20 18.328-.64 0-1.273-.027-1.898-.081C16.235 38.665 13.395 40 10.22 40c-2.123 0-4.096-.597-5.729-1.617 1.911-1.195 3.357-2.97 4.033-5.047Z" clip-rule="evenodd"/><path fill="#fff" fill-rule="evenodd" d="M30.667 13.393c0-2.697-2.39-4.887-5.334-4.887H14.667c-2.944 0-5.334 2.19-5.334 4.887v9.775c0 2.698 2.39 4.888 5.334 4.888h10.666c2.944 0 5.334-2.19 5.334-4.888v-9.775Z" clip-rule="evenodd"/><path fill="#0076BA" fill-rule="evenodd" d="M17.866 23.46c0-.34.256-.635.617-.713.36-.078.733.081.899.385l2.751 5.043h-4.267V23.46Zm4.267-10.362c0 .34-.255.636-.616.714-.361.078-.733-.082-.9-.386l-2.75-5.042h4.266v4.714Z" clip-rule="evenodd"/><path fill="#0076BA" d="M29.705 13.703c2.805 0 5.078-2.084 5.078-4.654s-2.273-4.654-5.078-4.654c-2.804 0-5.078 2.084-5.078 4.654s2.274 4.654 5.078 4.654Z"/><path fill="#E44436" d="M29.705 12.226c1.915 0 3.467-1.422 3.467-3.177 0-1.754-1.552-3.177-3.467-3.177-1.914 0-3.466 1.423-3.466 3.177 0 1.755 1.552 3.177 3.466 3.177Z"/></svg>';
+defineCustomElement('sinch-icon-channel-notify', createIconClass(templateHTML));

package/illustrations/create-illustration-class.js

@@ -1,5 +1,5 @@
 import { getIntegerAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateIntegerAttribute, updateLiteralAttribute } from '../utils';
-const illustrationStylesHtml = '<style>:host{display:block}svg{display:block;pointer-events:none}#wrapper{display:flex;width:100%;height:100%;align-items:center;justify-content:center;overflow:hidden}#wrapper>*{flex-shrink:0}:host([valign=top]) #wrapper{align-items:flex-start}:host([valign=bottom]) #wrapper{align-items:flex-end}:host([background=yellow]) #wrapper{background-color:var(--sinch-color-background-yellow)}:host([background=green]) #wrapper{background-color:var(--sinch-color-background-green)}:host([background=blue]) #wrapper{background-color:var(--sinch-color-background-blue)}:host([background=grey]) #wrapper{background-color:var(--sinch-color-background-grey)}:host([background=white]) #wrapper{background-color:var(--sinch-color-background-white)}</style>';
+const illustrationStylesHtml = '<style>:host{display:block}svg{display:block;pointer-events:none}#wrapper{display:flex;width:100%;height:100%;align-items:center;justify-content:center;overflow:hidden}#wrapper>*{flex-shrink:0}:host([valign=top]) #wrapper{align-items:flex-start}:host([valign=bottom]) #wrapper{align-items:flex-end}:host([background=yellow]) #wrapper{background-color:var(--sinch-color-bg-comp-yellow)}:host([background=green]) #wrapper{background-color:var(--sinch-color-bg-comp-green)}:host([background=blue]) #wrapper{background-color:var(--sinch-color-bg-comp-blue)}:host([background=grey]) #wrapper{background-color:var(--sinch-color-bg-primary-contrast)}:host([background=white]) #wrapper{background-color:var(--sinch-color-bg-primary-light)}</style>';
 import { backgroundValues, valignValues } from './utils';
 const DEFAULT_SIZE = 256;
 const MIN_SIZE = 16;