@nectary/components 0.34.0 → 0.35.0

package/accordion/index.js

@@ -1,7 +1,7 @@
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$slot, _onSlotChange, _onOptionChange, _onValueChange;
+var _$slot, _onSlotChange, _onOptionChange, _onValueChange, _onChangeReactHandler;
 
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 
@@ -11,11 +11,11 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 
 function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
 
-import { defineCustomElement, getAttribute, getBooleanAttribute, getCsvSet, getFirstCsvValue, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getCsvSet, getFirstCsvValue, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv } from '../utils';
 const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:100%}::slotted(sinch-accordion-item){flex-shrink:1}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-accordion', (_$slot = new WeakMap(), _onSlotChange = new WeakMap(), _onOptionChange = new WeakMap(), _onValueChange = new WeakSet(), class extends NectaryElement {
+defineCustomElement('sinch-accordion', (_$slot = new WeakMap(), _onSlotChange = new WeakMap(), _onOptionChange = new WeakMap(), _onValueChange = new WeakSet(), _onChangeReactHandler = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -39,21 +39,28 @@ defineCustomElement('sinch-accordion', (_$slot = new WeakMap(), _onSlotChange =
         e.stopPropagation();
         const $elem = e.target;
         const value = e.detail;
-        const result = this.multiple ? updateCsv(this.value, value, !getBooleanAttribute($elem, 'checked')) : getBooleanAttribute($elem, 'checked') ? '' : value;
+        const result = this.multiple ? updateCsv(this.value, value, !getBooleanAttribute($elem, 'data-checked')) : getBooleanAttribute($elem, 'data-checked') ? '' : value;
         this.dispatchEvent(new CustomEvent('change', {
           detail: result,
           bubbles: true
         }));
+        this.dispatchEvent(new CustomEvent('-change', {
+          detail: result
+        }));
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onChangeReactHandler, {
+      writable: true,
+      value: e => {
+        getReactEventHandler(this, 'on-change')?.(e);
       }
     });
 
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    shadowRoot.addEventListener('change', _classPrivateFieldGet(this, _onOptionChange));
 
     _classPrivateFieldSet(this, _$slot, shadowRoot.querySelector('slot'));
-
-    _classPrivateFieldGet(this, _$slot).addEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
   }
 
   static get observedAttributes() {
@@ -62,6 +69,20 @@ defineCustomElement('sinch-accordion', (_$slot = new WeakMap(), _onSlotChange =
 
   connectedCallback() {
     this.setAttribute('aria-label', 'accordion');
+
+    _classPrivateFieldGet(this, _$slot).addEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
+
+    _classPrivateFieldGet(this, _$slot).addEventListener('option-change', _classPrivateFieldGet(this, _onOptionChange));
+
+    this.addEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$slot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
+
+    _classPrivateFieldGet(this, _$slot).removeEventListener('option-change', _classPrivateFieldGet(this, _onOptionChange));
+
+    this.removeEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
   }
 
   get nodeName() {
@@ -85,6 +106,10 @@ defineCustomElement('sinch-accordion', (_$slot = new WeakMap(), _onSlotChange =
   }
 
   attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+
     switch (name) {
       case 'value':
         {
@@ -103,14 +128,14 @@ function _onValueChange2(csv) {
 
     for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
       const isChecked = !getBooleanAttribute($option, 'disabled') && values.has(getAttribute($option, 'value', ''));
-      updateBooleanAttribute($option, 'checked', isChecked);
+      updateBooleanAttribute($option, 'data-checked', isChecked);
     }
   } else {
     const value = getFirstCsvValue(csv);
 
     for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
       const isChecked = !getBooleanAttribute($option, 'disabled') && value === getAttribute($option, 'value', '');
-      updateBooleanAttribute($option, 'checked', isChecked);
+      updateBooleanAttribute($option, 'data-checked', isChecked);
     }
   }
 }

package/accordion/types.d.ts

@@ -3,12 +3,13 @@ import type { SyntheticEvent } from 'react';
 export declare type TSinchAccordionElement = HTMLElement & {
     value: string;
     multiple: boolean;
-    addEventListener(type: 'change', listener: (e: CustomEvent<string>) => void): void;
+    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
     setAttribute(name: 'value', value: string): void;
     setAttribute(name: 'multiple', value: ''): void;
 };
 export declare type TSinchAccordionReact = TSinchElementReact<TSinchAccordionElement> & {
     multiple?: boolean;
     value: string;
-    onChange: (e: SyntheticEvent<TSinchAccordionElement, CustomEvent<string>>) => void;
+    onChange?: (e: SyntheticEvent<TSinchAccordionElement, CustomEvent<string>>) => void;
+    'on-change'?: (e: CustomEvent<string>) => void;
 };

package/accordion-item/index.js

@@ -9,7 +9,7 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 
 import '../icons/keyboard-arrow-down';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0;min-height:48px}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;height:100%;box-sizing:border-box;overflow:hidden;border-bottom:1px solid var(--sinch-color-stormy-200);--sinch-size-icon:16px}#button{all:initial;cursor:pointer;display:flex;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:48px;padding:12px 8px;font:var(--sinch-font-title-s);color:var(--sinch-color-text-default);fill:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button:disabled{cursor:initial;color:var(--sinch-color-stormy-100);fill:var(--sinch-color-stormy-100)}#button::before{width:8px;height:8px;border-radius:50%;margin-left:2px;margin-right:8px}:host([status=success]) #button::before{content:"";background-color:var(--sinch-color-success-500)}:host([status=warn]) #button::before{content:"";background-color:var(--sinch-color-warning-500)}:host([status=error]) #button::before{content:"";background-color:var(--sinch-color-error-500)}:host([status=info]) #button::before{content:"";background-color:var(--sinch-color-informative-500)}#title{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#content{display:none;overflow-y:auto;flex-shrink:1;min-height:0;padding:0 8px 18px;font:var(--sinch-font-body);color:var(--sinch-color-text-default)}#dropdown-icon{--sinch-size-icon:24px}#button[aria-expanded=true]>#dropdown-icon{transform:rotate(180deg)}#button[aria-expanded=true]+#content{display:block}#optional{font:var(--sinch-font-small-text);color:var(--sinch-color-stormy-300)}</style><div id="wrapper"><button id="button" aria-controls="content" aria-expanded="false"><slot name="icon"></slot><span id="title"></span> <span id="optional"></span><sinch-icon-keyboard-arrow-down id="dropdown-icon"></sinch-icon-keyboard-arrow-down></button><div id="content" role="region" aria-labelledby="button"><slot name="content"></slot></div></div>';
+const templateHTML = '<style>:host{display:block;outline:0;min-height:48px}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;height:100%;box-sizing:border-box;overflow:hidden;border-bottom:1px solid var(--sinch-color-stormy-200);--sinch-size-icon:16px}#button{all:initial;cursor:pointer;display:flex;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:48px;padding:12px 8px;font:var(--sinch-font-title-s);color:var(--sinch-color-text-default);fill:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button:disabled{cursor:initial;color:var(--sinch-color-stormy-100);fill:var(--sinch-color-stormy-100)}#button::before{width:8px;height:8px;border-radius:50%;margin-left:2px;margin-right:8px}:host([status=success]) #button::before{content:"";background-color:var(--sinch-color-success-500)}:host([status=warn]) #button::before{content:"";background-color:var(--sinch-color-warning-500)}:host([status=error]) #button::before{content:"";background-color:var(--sinch-color-error-500)}:host([status=info]) #button::before{content:"";background-color:var(--sinch-color-informative-500)}#title{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#content{display:none;overflow-y:auto;flex-shrink:1;min-height:0;padding:0 8px 18px;font:var(--sinch-font-body);color:var(--sinch-color-text-default)}#dropdown-icon{--sinch-size-icon:24px}#button[aria-expanded=true]>#dropdown-icon{transform:rotate(180deg)}#button[aria-expanded=true]+#content{display:block}#optional{font:var(--sinch-font-small-text);color:var(--sinch-color-stormy-300)}</style><div id="wrapper"><button id="button" aria-controls="content" aria-expanded="false"><slot name="icon"></slot><span id="title"></span><span id="optional"></span><sinch-icon-keyboard-arrow-down id="dropdown-icon"></sinch-icon-keyboard-arrow-down></button><div id="content" role="region" aria-labelledby="button"><slot name="content"></slot></div></div>';
 import { statusValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -36,7 +36,7 @@ defineCustomElement('sinch-accordion-item', (_$button = new WeakMap(), _$buttonC
       writable: true,
       value: e => {
         e.stopPropagation();
-        this.dispatchEvent(new CustomEvent('change', {
+        this.dispatchEvent(new CustomEvent('option-change', {
           bubbles: true,
           detail: this.value
         }));
@@ -62,7 +62,7 @@ defineCustomElement('sinch-accordion-item', (_$button = new WeakMap(), _$buttonC
   }
 
   static get observedAttributes() {
-    return ['label', 'disabled', 'checked', 'optionaltext'];
+    return ['label', 'disabled', 'data-checked', 'optionaltext'];
   }
 
   set value(value) {
@@ -106,6 +106,10 @@ defineCustomElement('sinch-accordion-item', (_$button = new WeakMap(), _$buttonC
   }
 
   attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+
     switch (name) {
       case 'label':
         {
@@ -119,7 +123,7 @@ defineCustomElement('sinch-accordion-item', (_$button = new WeakMap(), _$buttonC
           break;
         }
 
-      case 'checked':
+      case 'data-checked':
         {
           updateExplicitBooleanAttribute(_classPrivateFieldGet(this, _$button), 'aria-expanded', isAttrTrue(newVal));
           break;

package/action-menu/index.js

@@ -93,16 +93,15 @@ defineCustomElement('sinch-action-menu', (_$optionSlot = new WeakMap(), _$listbo
     _classPrivateFieldInitSpec(this, _onClose, {
       writable: true,
       value: () => {
-        this.dispatchEvent(new CustomEvent('close', {
-          bubbles: true
-        }));
+        this.dispatchEvent(new CustomEvent('-close'));
       }
     });
 
     _classPrivateFieldInitSpec(this, _onReactClose, {
       writable: true,
-      value: () => {
+      value: e => {
         getReactEventHandler(this, 'onClose')?.();
+        getReactEventHandler(this, 'on-close')?.(e);
       }
     });
 
@@ -118,11 +117,11 @@ defineCustomElement('sinch-action-menu', (_$optionSlot = new WeakMap(), _$listbo
 
   connectedCallback() {
     this.setAttribute('role', 'listbox');
-    this.addEventListener('close', _classPrivateFieldGet(this, _onReactClose));
+    this.addEventListener('-close', _classPrivateFieldGet(this, _onReactClose));
   }
 
   disconnectedCallback() {
-    this.removeEventListener('close', _classPrivateFieldGet(this, _onReactClose));
+    this.removeEventListener('-close', _classPrivateFieldGet(this, _onReactClose));
   }
 
   static get observedAttributes() {
@@ -178,11 +177,11 @@ defineCustomElement('sinch-action-menu', (_$optionSlot = new WeakMap(), _$listbo
           if (isAttrTrue(newVal)) {
             _classPrivateFieldGet(this, _$popover).addEventListener('keydown', _classPrivateFieldGet(this, _onListboxKeyDown));
 
-            _classPrivateFieldGet(this, _$popover).addEventListener('close', _classPrivateFieldGet(this, _onClose));
+            _classPrivateFieldGet(this, _$popover).addEventListener('-close', _classPrivateFieldGet(this, _onClose));
           } else {
             _classPrivateFieldGet(this, _$popover).removeEventListener('keydown', _classPrivateFieldGet(this, _onListboxKeyDown));
 
-            _classPrivateFieldGet(this, _$popover).removeEventListener('close', _classPrivateFieldGet(this, _onClose));
+            _classPrivateFieldGet(this, _$popover).removeEventListener('-close', _classPrivateFieldGet(this, _onClose));
 
             _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, null);
           }

package/action-menu/types.d.ts

@@ -1,13 +1,12 @@
 import type { TSinchPopoverOrientation } from '../popover/types';
 import type { TRect, TSinchElementReact } from '../types';
-import type { SyntheticEvent } from 'react';
 export declare type TSinchActionMenuElement = HTMLElement & {
     open: boolean;
     orientation: TSinchPopoverOrientation;
     maxVisibleItems: number | null;
     modal: boolean;
     readonly dropdownRect: TRect;
-    addEventListener(type: 'close', listener: (e: CustomEvent<void>) => void): void;
+    addEventListener(type: '-close', listener: (e: CustomEvent<void>) => void): void;
     setAttribute(name: 'open', value: ''): void;
     setAttribute(name: 'orientation', value: TSinchPopoverOrientation): void;
     setAttribute(name: 'maxvisibleitems', value: string): void;
@@ -19,5 +18,6 @@ export declare type TSinchActionMenuReact = TSinchElementReact<TSinchActionMenuE
     maxVisibleItems?: number;
     modal?: boolean;
     'aria-label': string;
-    onClose: (event: SyntheticEvent<TSinchActionMenuElement, CustomEvent<void>>) => void;
+    onClose?: () => void;
+    'on-close'?: (e: CustomEvent<void>) => void;
 };

package/action-menu-option/index.js

@@ -1,17 +1,17 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$wrapper, _$content, _onMouseDown;
+var _$wrapper, _$content, _onClick, _onMouseDown, _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 { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block}#wrapper{all:initial;display:flex;position:relative;box-sizing:border-box;height:40px;width:100%;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;font:inherit;color:inherit;--sinch-size-icon:24px}#content{flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:hover)>#wrapper,:host([data-selected])>#wrapper{background-color:var(--sinch-color-snow-500)}:host([disabled]:not([disabled=false]))>#wrapper{color:var(--sinch-color-stormy-100);cursor:initial;pointer-events:none;--sinch-color-icon:var(--sinch-color-stormy-100)}::slotted(*){margin-left:-6px}</style><div id="wrapper"><slot name="icon"></slot><span id="content"></span></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-action-menu-option', (_$wrapper = new WeakMap(), _$content = new WeakMap(), _onMouseDown = new WeakMap(), class ActionMenuOption extends NectaryElement {
+defineCustomElement('sinch-action-menu-option', (_$wrapper = new WeakMap(), _$content = new WeakMap(), _onClick = new WeakMap(), _onMouseDown = new WeakMap(), _onClickReactHandler = new WeakMap(), class ActionMenuOption extends NectaryElement {
   constructor() {
     super();
 
@@ -25,6 +25,13 @@ defineCustomElement('sinch-action-menu-option', (_$wrapper = new WeakMap(), _$co
       value: void 0
     });
 
+    _classPrivateFieldInitSpec(this, _onClick, {
+      writable: true,
+      value: () => {
+        this.dispatchEvent(new CustomEvent('-click'));
+      }
+    });
+
     _classPrivateFieldInitSpec(this, _onMouseDown, {
       writable: true,
       value: e => {
@@ -34,6 +41,13 @@ defineCustomElement('sinch-action-menu-option', (_$wrapper = new WeakMap(), _$co
       }
     });
 
+    _classPrivateFieldInitSpec(this, _onClickReactHandler, {
+      writable: true,
+      value: e => {
+        getReactEventHandler(this, 'on-click')?.(e);
+      }
+    });
+
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
 
@@ -46,10 +60,16 @@ defineCustomElement('sinch-action-menu-option', (_$wrapper = new WeakMap(), _$co
     this.setAttribute('role', 'option');
 
     _classPrivateFieldGet(this, _$wrapper).addEventListener('mousedown', _classPrivateFieldGet(this, _onMouseDown));
+
+    this.addEventListener('-click', _classPrivateFieldGet(this, _onClickReactHandler));
+    this.addEventListener('click', _classPrivateFieldGet(this, _onClick));
   }
 
   disconnectedCallback() {
     _classPrivateFieldGet(this, _$wrapper).removeEventListener('mousedown', _classPrivateFieldGet(this, _onMouseDown));
+
+    this.removeEventListener('-click', _classPrivateFieldGet(this, _onClickReactHandler));
+    this.removeEventListener('click', _classPrivateFieldGet(this, _onClick));
   }
 
   static get observedAttributes() {

package/action-menu-option/types.d.ts

@@ -2,6 +2,7 @@ import type { TSinchElementReact } from '../types';
 export declare type TSinchActionMenuOptionElement = HTMLElement & {
     text: string;
     disabled: boolean;
+    addEventListener(type: '-click', listener: (e: CustomEvent<void>) => void): void;
     setAttribute(name: 'text', value: string): void;
     setAttribute(name: 'disabled', value: ''): void;
 };
@@ -9,4 +10,5 @@ export declare type TSinchActionMenuOptionReact = TSinchElementReact<TSinchActio
     text: string;
     disabled?: boolean;
     'aria-label': string;
+    'on-click'?: (e: CustomEvent<void>) => void;
 };

package/alert/index.js

@@ -8,7 +8,7 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 
 import { defineCustomElement, getBooleanAttribute, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{--sinch-color-alert-info-background:#D5E5F8;--sinch-color-alert-success-background:#D7F1D8;--sinch-color-alert-warn-background:#FFE8D6;--sinch-color-alert-error-background:#FCD7D4;display:block}#wrapper{display:flex;flex-direction:row;column-gap:12px;align-items:center;position:relative;padding:12px 18px;border-radius:var(--sinch-shape-radius-l);font:var(--sinch-font-body);color:var(--sinch-color-stormy-600);background-color:var(--sinch-color-alert-info-background);box-sizing:border-box;width:100%;min-height:56px}#body-wrapper{display:flex;flex-direction:row;align-items:center;column-gap:12px;flex:1;min-width:0}#caption{display:none;font:var(--sinch-font-title-s);margin:0;margin-bottom:4px}#text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0;flex:1;min-width:0}:is(#icon-info,#icon-success,#icon-warn,#icon-error){display:none}:host([type=success]) #wrapper{background-color:var(--sinch-color-alert-success-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-color-alert-warn-background)}:host([type=error]) #wrapper{background-color:var(--sinch-color-alert-error-background)}:host([type=info]) #wrapper{background-color:var(--sinch-color-alert-info-background)}:host([type=success]) #icon-success{display:block}:host([type=warn]) #icon-warn{display:block}:host([type=error]) #icon-error{display:block}:host(:is([type=info],:not([type]))) #icon-info{display:block}:host([multiline]:not([multiline=false])) #wrapper{align-items:flex-start;padding:16px 18px}:host([multiline]:not([multiline=false])) #body-wrapper{flex-direction:column;align-items:flex-start}:host([multiline]:not([multiline=false])) #caption{display:block}:host([multiline]:not([multiline=false])) :is(#icon-info,#icon-success,#icon-warn,#icon-error){margin-top:2px}:host([multiline]:not([multiline=false])) #text{overflow:unset;text-overflow:unset;white-space:unset}:host([multiline]:not([multiline=false])) ::slotted(sinch-alert-button){margin-top:10px}</style><div id="wrapper"><svg id="icon-info" width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0Zm0 15c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1Zm1-8H9V5h2v2Z" fill="#2071CE"/></svg> <svg id="icon-success" width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0ZM7.29 14.29 3.7 10.7a.996.996 0 1 1 1.41-1.41L8 12.17l6.88-6.88a.996.996 0 1 1 1.41 1.41L8.7 14.29a.996.996 0 0 1-1.41 0Z" fill="#2E8540"/></svg> <svg id="icon-warn" width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M2.47 18h15.06c1.54 0 2.5-1.67 1.73-3L11.73 1.99c-.77-1.33-2.69-1.33-3.46 0L.74 15c-.77 1.33.19 3 1.73 3ZM10 11c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1Zm1 4H9v-2h2v2Z" fill="#FF8C34"/></svg> <svg id="icon-error" width="20" height="20" viewBox="0 0 18 18" aria-hidden="true"><path d="M12.32 0H5.68c-.26 0-.52.11-.7.29L.29 4.98c-.18.18-.29.44-.29.7v6.63c0 .27.11.52.29.71l4.68 4.68c.19.19.45.3.71.3h6.63c.27 0 .52-.11.71-.29l4.68-4.68a.99.99 0 0 0 .29-.71V5.68c0-.27-.11-.52-.29-.71L13.02.29c-.18-.18-.44-.29-.7-.29ZM9 14.3c-.72 0-1.3-.58-1.3-1.3 0-.72.58-1.3 1.3-1.3.72 0 1.3.58 1.3 1.3 0 .72-.58 1.3-1.3 1.3ZM9 10c-.55 0-1-.45-1-1V5c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1Z" fill="#E31C3D"/></svg><div id="body-wrapper"><p id="caption"></p><p id="text"></p><slot name="button"></slot></div><slot name="close"></slot></div>';
+const templateHTML = '<style>:host{--sinch-color-alert-info-background:#D5E5F8;--sinch-color-alert-success-background:#D7F1D8;--sinch-color-alert-warn-background:#FFE8D6;--sinch-color-alert-error-background:#FCD7D4;display:block}#wrapper{display:flex;flex-direction:row;column-gap:12px;align-items:center;position:relative;padding:12px 18px;border-radius:var(--sinch-shape-radius-l);font:var(--sinch-font-body);color:var(--sinch-color-stormy-600);background-color:var(--sinch-color-alert-info-background);box-sizing:border-box;width:100%;min-height:56px}#body-wrapper{display:flex;flex-direction:row;align-items:center;column-gap:12px;flex:1;min-width:0}#caption{display:none;font:var(--sinch-font-title-s);margin:0;margin-bottom:4px}#text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0;flex:1;min-width:0}:is(#icon-info,#icon-success,#icon-warn,#icon-error){display:none}:host([type=success]) #wrapper{background-color:var(--sinch-color-alert-success-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-color-alert-warn-background)}:host([type=error]) #wrapper{background-color:var(--sinch-color-alert-error-background)}:host([type=info]) #wrapper{background-color:var(--sinch-color-alert-info-background)}:host([type=success]) #icon-success{display:block}:host([type=warn]) #icon-warn{display:block}:host([type=error]) #icon-error{display:block}:host(:is([type=info],:not([type]))) #icon-info{display:block}:host([multiline]:not([multiline=false])) #wrapper{align-items:flex-start;padding:16px 18px}:host([multiline]:not([multiline=false])) #body-wrapper{flex-direction:column;align-items:flex-start}:host([multiline]:not([multiline=false])) #caption{display:block}:host([multiline]:not([multiline=false])) :is(#icon-info,#icon-success,#icon-warn,#icon-error){margin-top:2px}:host([multiline]:not([multiline=false])) #text{overflow:unset;text-overflow:unset;white-space:unset}:host([multiline]:not([multiline=false])) ::slotted(sinch-alert-button){margin-top:10px}</style><div id="wrapper"><svg id="icon-info" width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0Zm0 15c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1Zm1-8H9V5h2v2Z" fill="#2071CE"/></svg><svg id="icon-success" width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0ZM7.29 14.29 3.7 10.7a.996.996 0 1 1 1.41-1.41L8 12.17l6.88-6.88a.996.996 0 1 1 1.41 1.41L8.7 14.29a.996.996 0 0 1-1.41 0Z" fill="#2E8540"/></svg><svg id="icon-warn" width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M2.47 18h15.06c1.54 0 2.5-1.67 1.73-3L11.73 1.99c-.77-1.33-2.69-1.33-3.46 0L.74 15c-.77 1.33.19 3 1.73 3ZM10 11c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1Zm1 4H9v-2h2v2Z" fill="#FF8C34"/></svg><svg id="icon-error" width="20" height="20" viewBox="0 0 18 18" aria-hidden="true"><path d="M12.32 0H5.68c-.26 0-.52.11-.7.29L.29 4.98c-.18.18-.29.44-.29.7v6.63c0 .27.11.52.29.71l4.68 4.68c.19.19.45.3.71.3h6.63c.27 0 .52-.11.71-.29l4.68-4.68a.99.99 0 0 0 .29-.71V5.68c0-.27-.11-.52-.29-.71L13.02.29c-.18-.18-.44-.29-.7-.29ZM9 14.3c-.72 0-1.3-.58-1.3-1.3 0-.72.58-1.3 1.3-1.3.72 0 1.3.58 1.3 1.3 0 .72-.58 1.3-1.3 1.3ZM9 10c-.55 0-1-.45-1-1V5c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1Z" fill="#E31C3D"/></svg><div id="body-wrapper"><p id="caption"></p><p id="text"></p><slot name="button"></slot></div><slot name="close"></slot></div>';
 import { typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/avatar/index.js

@@ -8,7 +8,7 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 
 import { defineCustomElement, getAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:40px;height:40px;font:var(--sinch-font-title-s);line-height:38px;color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-700);text-align:center;border-radius:50%;border:1px solid var(--sinch-color-snow-100);box-sizing:border-box;text-transform:uppercase;--sinch-avatar-badge-size:16px;--sinch-avatar-badge-font:700 12px/14px "Gilroy","Arial","sans-serif"}:host([background=blue]) #wrapper{background-color:var(--sinch-color-stormy-500);color:var(--sinch-color-snow-100)}:host([background=yellow]) #wrapper{background-color:var(--sinch-color-honey-500)}:host([size="l"]) #wrapper{width:56px;height:56px;font:var(--sinch-font-title-m);line-height:54px;--sinch-avatar-badge-size:20px;--sinch-avatar-badge-font:700 12px/18px "Gilroy","Arial","sans-serif"}:host([size="s"]) #wrapper{width:24px;height:24px;font:var(--sinch-font-extra-small-text);line-height:22px;--sinch-avatar-badge-size:11px;--sinch-avatar-badge-font:500 8px/9px "Gilroy","Arial","sans-serif"}#text{display:block;width:100%;height:100%;box-sizing:border-box}#image{display:none;width:100%;height:100%;object-fit:contain;position:absolute;left:0;top:0;border-radius:50%}:host([src]:not([src=""])) #image{display:block}::slotted(sinch-avatar-badge){position:absolute;top:-2px;left:calc(100% - 15px)}:host([size="l"]) ::slotted(sinch-avatar-badge){left:calc(100% - 19px)}:host([size="s"]) ::slotted(sinch-avatar-badge){left:calc(100% - 9px)}::slotted(sinch-avatar-status){position:absolute;bottom:-2px;right:-2px}:host([size="l"]) ::slotted(sinch-avatar-status){bottom:2px;right:2px}</style><div id="wrapper"><span id="text"></span> <img id="image" alt=""/><slot name="badge"></slot><slot name="status"></slot></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:40px;height:40px;font:var(--sinch-font-title-s);line-height:38px;color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-700);text-align:center;border-radius:50%;border:1px solid var(--sinch-color-snow-100);box-sizing:border-box;text-transform:uppercase;--sinch-avatar-badge-size:16px;--sinch-avatar-badge-font:700 12px/14px "Gilroy","Arial","sans-serif"}:host([background=blue]) #wrapper{background-color:var(--sinch-color-stormy-500);color:var(--sinch-color-snow-100)}:host([background=yellow]) #wrapper{background-color:var(--sinch-color-honey-500)}:host([size="l"]) #wrapper{width:56px;height:56px;font:var(--sinch-font-title-m);line-height:54px;--sinch-avatar-badge-size:20px;--sinch-avatar-badge-font:700 12px/18px "Gilroy","Arial","sans-serif"}:host([size="s"]) #wrapper{width:24px;height:24px;font:var(--sinch-font-extra-small-text);line-height:22px;--sinch-avatar-badge-size:11px;--sinch-avatar-badge-font:500 8px/9px "Gilroy","Arial","sans-serif"}#text{display:block;width:100%;height:100%;box-sizing:border-box}#image{display:none;width:100%;height:100%;object-fit:contain;position:absolute;left:0;top:0;border-radius:50%}:host([src]:not([src=""])) #image{display:block}::slotted(sinch-avatar-badge){position:absolute;top:-2px;left:calc(100% - 15px)}:host([size="l"]) ::slotted(sinch-avatar-badge){left:calc(100% - 19px)}:host([size="s"]) ::slotted(sinch-avatar-badge){left:calc(100% - 9px)}::slotted(sinch-avatar-status){position:absolute;bottom:-2px;right:-2px}:host([size="l"]) ::slotted(sinch-avatar-status){bottom:2px;right:2px}</style><div id="wrapper"><span id="text"></span><img id="image" alt=""/><slot name="badge"></slot><slot name="status"></slot></div>';
 import { backgroundValues, sizeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/button/index.js

@@ -1,18 +1,18 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$button, _$text;
+var _$button, _$text, _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 { defineCustomElement, getBooleanAttribute, getAttribute, getLiteralAttribute, isAttrTrue, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{--sinch-color-button-background:var(--sinch-color-tropical-500);--sinch-color-button-background-hover:var(--sinch-color-tropical-400);--sinch-color-button-background-focus:var(--sinch-color-tropical-500);--sinch-color-button-background-active:var(--sinch-color-tropical-600);--sinch-color-button-background-disabled:var(--sinch-color-tropical-100);--sinch-color-button-text:var(--sinch-color-text-inverted);--sinch-color-button-text-disabled:var(--sinch-color-text-inverted);--sinch-color-button-border:var(--sinch-color-transparent);--sinch-color-button-border-hover:var(--sinch-color-transparent);--sinch-color-button-border-focus:var(--sinch-color-tropical-700);--sinch-color-button-border-active:var(--sinch-color-transparent);--sinch-color-button-border-disabled:var(--sinch-color-transparent);--sinch-color-spinner-bg:var(--sinch-color-tropical-300);--sinch-color-spinner-fg:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-text-inverted);display:inline-block;vertical-align:middle;outline:0}:host([type=secondary]){--sinch-color-button-background:var(--sinch-color-snow-100);--sinch-color-button-background-hover:var(--sinch-color-tropical-100);--sinch-color-button-background-focus:var(--sinch-color-snow-100);--sinch-color-button-background-active:var(--sinch-color-tropical-100);--sinch-color-button-background-disabled:var(--sinch-color-snow-100);--sinch-color-button-text:var(--sinch-color-tropical-500);--sinch-color-button-text-disabled:var(--sinch-color-tropical-100);--sinch-color-button-border:var(--sinch-color-tropical-500);--sinch-color-button-border-hover:var(--sinch-color-tropical-500);--sinch-color-button-border-focus:var(--sinch-color-tropical-700);--sinch-color-button-border-active:var(--sinch-color-tropical-500);--sinch-color-button-border-disabled:var(--sinch-color-tropical-100);--sinch-color-spinner-bg:var(--sinch-color-tropical-100);--sinch-color-spinner-fg:var(--sinch-color-tropical-500);--sinch-color-icon:var(--sinch-color-tropical-500)}:host([type=secondary]) button:is(:hover,:active){--sinch-color-spinner-bg:var(--sinch-color-tropical-300);--sinch-color-spinner-fg:var(--sinch-color-snow-100)}:host([type=secondary]) button:disabled{--sinch-color-spinner-bg:var(--sinch-color-tropical-200);--sinch-color-spinner-fg:var(--sinch-color-tropical-400)}:host([type=cta-primary]){--sinch-color-button-background:var(--sinch-color-honey-500);--sinch-color-button-background-hover:var(--sinch-color-honey-400);--sinch-color-button-background-focus:var(--sinch-color-honey-500);--sinch-color-button-background-active:var(--sinch-color-honey-600);--sinch-color-button-background-disabled:var(--sinch-color-honey-100);--sinch-color-button-text:var(--sinch-color-text-default);--sinch-color-button-text-disabled:var(--sinch-color-stormy-300);--sinch-color-button-border:var(--sinch-color-transparent);--sinch-color-button-border-hover:var(--sinch-color-transparent);--sinch-color-button-border-focus:var(--sinch-color-text-default);--sinch-color-button-border-active:var(--sinch-color-transparent);--sinch-color-button-border-disabled:var(--sinch-color-transparent);--sinch-color-spinner-bg:var(--sinch-color-honey-700);--sinch-color-spinner-fg:var(--sinch-color-stormy-600);--sinch-color-icon:var(--sinch-color-text-default)}:host([type=cta-primary]) button:disabled{--sinch-color-spinner-bg:var(--sinch-color-snow-100);--sinch-color-spinner-fg:var(--sinch-color-stormy-300)}:host([type=cta-secondary]){--sinch-color-button-background:var(--sinch-color-snow-100);--sinch-color-button-background-hover:var(--sinch-color-snow-500);--sinch-color-button-background-focus:var(--sinch-color-snow-100);--sinch-color-button-background-active:var(--sinch-color-snow-500);--sinch-color-button-background-disabled:var(--sinch-color-snow-100);--sinch-color-button-text:var(--sinch-color-stormy-500);--sinch-color-button-text-disabled:var(--sinch-color-stormy-200);--sinch-color-button-border:var(--sinch-color-stormy-500);--sinch-color-button-border-hover:var(--sinch-color-stormy-500);--sinch-color-button-border-focus:var(--sinch-color-stormy-500);--sinch-color-button-border-active:var(--sinch-color-stormy-500);--sinch-color-button-border-disabled:var(--sinch-color-stormy-200);--sinch-color-spinner-bg:var(--sinch-color-snow-800);--sinch-color-spinner-fg:var(--sinch-color-stormy-600);--sinch-color-icon:var(--sinch-color-stormy-500)}:host([type=cta-secondary]) button:disabled{--sinch-color-spinner-bg:var(--sinch-color-snow-600);--sinch-color-spinner-fg:var(--sinch-color-stormy-200);--sinch-color-icon:var(--sinch-color-stormy-200)}:host([type=destructive]){--sinch-color-button-background:var(--sinch-color-snow-100);--sinch-color-button-background-hover:var(--sinch-color-error-200);--sinch-color-button-background-focus:var(--sinch-color-snow-100);--sinch-color-button-background-active:var(--sinch-color-error-200);--sinch-color-button-background-disabled:var(--sinch-color-snow-100);--sinch-color-button-text:var(--sinch-color-text-invalid);--sinch-color-button-text-disabled:var(--sinch-color-error-200);--sinch-color-button-border:var(--sinch-color-error-500);--sinch-color-button-border-hover:var(--sinch-color-error-500);--sinch-color-button-border-focus:var(--sinch-color-error-800);--sinch-color-button-border-active:var(--sinch-color-error-500);--sinch-color-button-border-disabled:var(--sinch-color-error-200);--sinch-color-spinner-bg:var(--sinch-color-raspberry-100);--sinch-color-spinner-fg:var(--sinch-color-raspberry-500);--sinch-color-icon:var(--sinch-color-text-invalid)}:host([type=destructive]) button:is(:hover,:active){--sinch-color-spinner-bg:var(--sinch-color-raspberry-200);--sinch-color-spinner-fg:var(--sinch-color-raspberry-500)}:host([type=destructive]) button:disabled{--sinch-color-spinner-bg:var(--sinch-color-raspberry-100);--sinch-color-spinner-fg:var(--sinch-color-raspberry-500)}button{all:initial;position:relative;display:flex;align-items:center;justify-content:center;gap:12px;box-sizing:border-box;width:100%;height:48px;padding:12px;border-radius:var(--sinch-shape-radius-s);font:var(--sinch-font-title-s);color:var(--sinch-color-button-text);background-color:var(--sinch-color-button-background);cursor:pointer;--sinch-size-icon:24px}button::before{content:"";position:absolute;left:0;top:0;bottom:0;right:0;border:1px solid var(--sinch-color-button-border);border-radius:var(--sinch-shape-radius-s)}button:focus{background-color:var(--sinch-color-button-background-focus)}button:focus::before{border-color:var(--sinch-color-button-border-focus);border-width:2px}button:hover{background-color:var(--sinch-color-button-background-hover)}button:hover::before{border-color:var(--sinch-color-button-border-hover);border-width:1px}button:active{background-color:var(--sinch-color-button-background-active)}button:active::before{border-color:var(--sinch-color-button-border-active);border-width:2px}button:disabled{color:var(--sinch-color-button-text-disabled);background-color:var(--sinch-color-button-background-disabled);cursor:initial;--sinch-color-spinner-bg:var(--sinch-color-snow-100);--sinch-color-spinner-fg:var(--sinch-color-tropical-200);--sinch-color-icon:var(--sinch-color-button-text-disabled)}button:disabled::before{border-color:var(--sinch-color-button-border-disabled)}button>*{pointer-events:none}#text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:none}:host([text]:not([text=""])) #text{display:initial}:host([text]:not([text=""])) button{padding:12px 24px}:host([small]:not([small=false]))>button{height:32px;padding:8px;line-height:16px;font-size:14px;gap:8px;border-radius:var(--sinch-shape-radius-s);--sinch-size-icon:16px}:host([small]:not([small=false]))>button::before{border-radius:var(--sinch-shape-radius-s)}:host([text]:not([text=""])[small]:not([small=false])) button{padding:8px 16px}</style><button><slot name="left-icon"></slot><span id="text"></span><slot name="right-icon"></slot></button>';
+import { defineCustomElement, getBooleanAttribute, getAttribute, getLiteralAttribute, isAttrTrue, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, getReactEventHandler } from '../utils';
+const templateHTML = '<style>:host{--sinch-color-button-background:var(--sinch-color-tropical-500);--sinch-color-button-background-hover:var(--sinch-color-tropical-400);--sinch-color-button-background-focus:var(--sinch-color-tropical-500);--sinch-color-button-background-active:var(--sinch-color-tropical-600);--sinch-color-button-background-disabled:var(--sinch-color-tropical-100);--sinch-color-button-text:var(--sinch-color-text-inverted);--sinch-color-button-text-disabled:var(--sinch-color-text-inverted);--sinch-color-button-border:var(--sinch-color-transparent);--sinch-color-button-border-hover:var(--sinch-color-transparent);--sinch-color-button-border-focus:var(--sinch-color-tropical-700);--sinch-color-button-border-active:var(--sinch-color-transparent);--sinch-color-button-border-disabled:var(--sinch-color-transparent);--sinch-color-spinner-bg:var(--sinch-color-tropical-300);--sinch-color-spinner-fg:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-text-inverted);display:inline-block;vertical-align:middle;outline:0}:host([type=secondary]){--sinch-color-button-background:var(--sinch-color-snow-100);--sinch-color-button-background-hover:var(--sinch-color-tropical-100);--sinch-color-button-background-focus:var(--sinch-color-snow-100);--sinch-color-button-background-active:var(--sinch-color-tropical-100);--sinch-color-button-background-disabled:var(--sinch-color-snow-100);--sinch-color-button-text:var(--sinch-color-tropical-500);--sinch-color-button-text-disabled:var(--sinch-color-tropical-100);--sinch-color-button-border:var(--sinch-color-tropical-500);--sinch-color-button-border-hover:var(--sinch-color-tropical-500);--sinch-color-button-border-focus:var(--sinch-color-tropical-700);--sinch-color-button-border-active:var(--sinch-color-tropical-500);--sinch-color-button-border-disabled:var(--sinch-color-tropical-100);--sinch-color-spinner-bg:var(--sinch-color-tropical-100);--sinch-color-spinner-fg:var(--sinch-color-tropical-500);--sinch-color-icon:var(--sinch-color-tropical-500)}:host([type=secondary]) button:is(:hover,:active){--sinch-color-spinner-bg:var(--sinch-color-tropical-300);--sinch-color-spinner-fg:var(--sinch-color-snow-100)}:host([type=secondary]) button:disabled{--sinch-color-spinner-bg:var(--sinch-color-tropical-200);--sinch-color-spinner-fg:var(--sinch-color-tropical-400)}:host([type=cta-primary]){--sinch-color-button-background:var(--sinch-color-honey-500);--sinch-color-button-background-hover:var(--sinch-color-honey-400);--sinch-color-button-background-focus:var(--sinch-color-honey-500);--sinch-color-button-background-active:var(--sinch-color-honey-600);--sinch-color-button-background-disabled:var(--sinch-color-honey-100);--sinch-color-button-text:var(--sinch-color-text-default);--sinch-color-button-text-disabled:var(--sinch-color-stormy-300);--sinch-color-button-border:var(--sinch-color-transparent);--sinch-color-button-border-hover:var(--sinch-color-transparent);--sinch-color-button-border-focus:var(--sinch-color-text-default);--sinch-color-button-border-active:var(--sinch-color-transparent);--sinch-color-button-border-disabled:var(--sinch-color-transparent);--sinch-color-spinner-bg:var(--sinch-color-honey-700);--sinch-color-spinner-fg:var(--sinch-color-stormy-600);--sinch-color-icon:var(--sinch-color-text-default)}:host([type=cta-primary]) button:disabled{--sinch-color-spinner-bg:var(--sinch-color-snow-100);--sinch-color-spinner-fg:var(--sinch-color-stormy-300)}:host([type=cta-secondary]){--sinch-color-button-background:var(--sinch-color-snow-100);--sinch-color-button-background-hover:var(--sinch-color-snow-500);--sinch-color-button-background-focus:var(--sinch-color-snow-100);--sinch-color-button-background-active:var(--sinch-color-snow-500);--sinch-color-button-background-disabled:var(--sinch-color-snow-100);--sinch-color-button-text:var(--sinch-color-stormy-500);--sinch-color-button-text-disabled:var(--sinch-color-stormy-200);--sinch-color-button-border:var(--sinch-color-stormy-500);--sinch-color-button-border-hover:var(--sinch-color-stormy-500);--sinch-color-button-border-focus:var(--sinch-color-stormy-500);--sinch-color-button-border-active:var(--sinch-color-stormy-500);--sinch-color-button-border-disabled:var(--sinch-color-stormy-200);--sinch-color-spinner-bg:var(--sinch-color-snow-800);--sinch-color-spinner-fg:var(--sinch-color-stormy-600);--sinch-color-icon:var(--sinch-color-stormy-500)}:host([type=cta-secondary]) button:disabled{--sinch-color-spinner-bg:var(--sinch-color-snow-600);--sinch-color-spinner-fg:var(--sinch-color-stormy-200);--sinch-color-icon:var(--sinch-color-stormy-200)}:host([type=destructive]){--sinch-color-button-background:var(--sinch-color-snow-100);--sinch-color-button-background-hover:var(--sinch-color-error-200);--sinch-color-button-background-focus:var(--sinch-color-snow-100);--sinch-color-button-background-active:var(--sinch-color-error-200);--sinch-color-button-background-disabled:var(--sinch-color-snow-100);--sinch-color-button-text:var(--sinch-color-text-invalid);--sinch-color-button-text-disabled:var(--sinch-color-error-200);--sinch-color-button-border:var(--sinch-color-error-500);--sinch-color-button-border-hover:var(--sinch-color-error-500);--sinch-color-button-border-focus:var(--sinch-color-error-800);--sinch-color-button-border-active:var(--sinch-color-error-500);--sinch-color-button-border-disabled:var(--sinch-color-error-200);--sinch-color-spinner-bg:var(--sinch-color-raspberry-100);--sinch-color-spinner-fg:var(--sinch-color-raspberry-500);--sinch-color-icon:var(--sinch-color-text-invalid)}:host([type=destructive]) button:is(:hover,:active){--sinch-color-spinner-bg:var(--sinch-color-raspberry-200);--sinch-color-spinner-fg:var(--sinch-color-raspberry-500)}:host([type=destructive]) button:disabled{--sinch-color-spinner-bg:var(--sinch-color-raspberry-100);--sinch-color-spinner-fg:var(--sinch-color-raspberry-500)}button{all:initial;position:relative;display:flex;align-items:center;justify-content:center;gap:12px;box-sizing:border-box;width:100%;height:48px;padding:12px;border-radius:var(--sinch-shape-radius-s);font:var(--sinch-font-title-s);color:var(--sinch-color-button-text);background-color:var(--sinch-color-button-background);cursor:pointer;--sinch-size-icon:24px}button::before{content:"";position:absolute;left:0;top:0;bottom:0;right:0;border:1px solid var(--sinch-color-button-border);border-radius:var(--sinch-shape-radius-s);pointer-events:none}button:focus{background-color:var(--sinch-color-button-background-focus)}button:focus::before{border-color:var(--sinch-color-button-border-focus);border-width:2px}button:hover{background-color:var(--sinch-color-button-background-hover)}button:hover::before{border-color:var(--sinch-color-button-border-hover);border-width:1px}button:active{background-color:var(--sinch-color-button-background-active)}button:active::before{border-color:var(--sinch-color-button-border-active);border-width:2px}button:disabled{color:var(--sinch-color-button-text-disabled);background-color:var(--sinch-color-button-background-disabled);cursor:initial;--sinch-color-spinner-bg:var(--sinch-color-snow-100);--sinch-color-spinner-fg:var(--sinch-color-tropical-200);--sinch-color-icon:var(--sinch-color-button-text-disabled)}button:disabled::before{border-color:var(--sinch-color-button-border-disabled)}button>*{pointer-events:none}#text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:none}:host([text]:not([text=""])) #text{display:initial}:host([text]:not([text=""])) button{padding:12px 24px}:host([small]:not([small=false]))>button{height:32px;padding:8px;line-height:16px;font-size:14px;gap:8px;border-radius:var(--sinch-shape-radius-s);--sinch-size-icon:16px}:host([small]:not([small=false]))>button::before{border-radius:var(--sinch-shape-radius-s)}:host([text]:not([text=""])[small]:not([small=false])) button{padding:8px 16px}</style><button><slot name="left-icon"></slot><span id="text"></span><slot name="right-icon"></slot></button>';
 import { buttonTypes } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-button', (_$button = new WeakMap(), _$text = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-button', (_$button = new WeakMap(), _$text = new WeakMap(), _onButtonClick = new WeakMap(), _onButtonFocus = new WeakMap(), _onButtonBlur = new WeakMap(), _onFocusReactHandler = new WeakMap(), _onBlurReactHandler = new WeakMap(), _onClickReactHandler = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -26,6 +26,48 @@ defineCustomElement('sinch-button', (_$button = new WeakMap(), _$text = new Weak
       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));
 
@@ -36,6 +78,28 @@ defineCustomElement('sinch-button', (_$button = new WeakMap(), _$text = new Weak
 
   connectedCallback() {
     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));
+  }
+
+  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));
   }
 
   static get observedAttributes() {

package/button/types.d.ts

@@ -9,6 +9,9 @@ export declare type TSinchButtonElement = HTMLElement & {
     disabled: boolean;
     /** Small */
     small: boolean;
+    addEventListener(type: '-click', listener: (e: CustomEvent<void>) => void): void;
+    addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
+    addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
     /** Type */
     setAttribute(attr: 'type', value: TSinchButtonType): void;
     /** Text content */
@@ -29,4 +32,7 @@ export declare type TSinchButtonReact = TSinchElementReact<TSinchButtonElement>
     disabled?: boolean;
     /** Small */
     small?: boolean;
+    'on-click'?: (e: CustomEvent<void>) => void;
+    'on-focus'?: (e: CustomEvent<void>) => void;
+    'on-blur'?: (e: CustomEvent<void>) => void;
 };