@nectary/components 0.33.0 → 0.35.0

package/dropdown-checkbox-option/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, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;height:40px;padding:4px 10px 4px 6px;align-items:center;gap:6px;user-select:none;cursor:pointer}#text{flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#icon-container{position:relative;width:32px;height:32px}#icon-container::before{content:"";position:absolute;top:7px;left:7px;width:18px;height:18px;border-radius:var(--sinch-shape-radius-xs);pointer-events:none;background-color:var(--sinch-color-snow-100);border:2px solid var(--sinch-color-stormy-300);transition:background-color .1s linear;box-sizing:border-box}#icon-checkmark{position:absolute;left:9px;top:10px;transition:opacity .1s linear;opacity:0;pointer-events:none;fill:var(--sinch-color-snow-100)}:host([checked]:not([checked=false])) #icon-container::before{background-color:var(--sinch-color-tropical-500);border-color:var(--sinch-color-tropical-500)}:host([checked]:not([checked=false])) #icon-checkmark{opacity:1}: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}:host([disabled]:not([disabled=false])) #icon-container::before{border-color:var(--sinch-color-stormy-100)}@media (prefers-reduced-motion){#icon-checkmark,#icon-container::before{transition:none}}</style><div id="wrapper"><div id="icon-container"><svg id="icon-checkmark" width="14" height="11" aria-hidden="true"><path d="M14 1.99999L12.59 0.579987L4.98995 8.17L1.49997 4.5L0.0799694 5.91L4.98995 11L14 1.99999Z"/></svg></div><span id="text"></span></div>';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;height:40px;padding:4px 10px 4px 6px;align-items:center;gap:6px;user-select:none;cursor:pointer}#text{flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#icon-container{position:relative;width:32px;height:32px}#icon-container::before{content:"";position:absolute;top:7px;left:7px;width:18px;height:18px;border-radius:var(--sinch-shape-radius-xs);pointer-events:none;background-color:var(--sinch-color-snow-100);border:2px solid var(--sinch-color-stormy-300);transition:background-color .1s linear;box-sizing:border-box}#icon-checkmark{position:absolute;left:9px;top:10px;transition:opacity .1s linear;opacity:0;pointer-events:none;fill:var(--sinch-color-snow-100)}:host([data-checked]) #icon-container::before{background-color:var(--sinch-color-tropical-500);border-color:var(--sinch-color-tropical-500)}:host([data-checked]) #icon-checkmark{opacity:1}: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}:host([disabled]:not([disabled=false])) #icon-container::before{border-color:var(--sinch-color-stormy-100)}@media (prefers-reduced-motion){#icon-checkmark,#icon-container::before{transition:none}}</style><div id="wrapper"><div id="icon-container"><svg id="icon-checkmark" width="14" height="11" aria-hidden="true"><path d="M14 1.99999L12.59 0.579987L4.98995 8.17L1.49997 4.5L0.0799694 5.91L4.98995 11L14 1.99999Z"/></svg></div><span id="text"></span></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-dropdown-checkbox-option', (_$text = new WeakMap(), class extends NectaryElement {

package/dropdown-checkbox-option/types.d.ts

@@ -2,11 +2,9 @@ import type { TSinchElementReact } from '../types';
 export declare type TSinchDropdownCheckboxOptionElement = HTMLElement & {
     value: string;
     text: string;
-    checked: boolean;
     disabled: boolean;
     setAttribute(name: 'value', value: string): void;
     setAttribute(name: 'text', value: string): void;
-    setAttribute(name: 'checked', value: ''): void;
     setAttribute(name: 'disabled', value: ''): void;
 };
 export declare type TSinchDropdownCheckboxOptionReact = TSinchElementReact<TSinchDropdownCheckboxOptionElement> & {

package/dropdown-radio-option/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, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;height:40px;padding:4px 10px 4px 6px;align-items:center;gap:6px;user-select:none;cursor:pointer}#text{flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#icon-container{position:relative;width:32px;height:32px}#icon-container::before{content:"";position:absolute;top:6px;left:6px;width:20px;height:20px;border-radius:50%;pointer-events:none;background-color:var(--sinch-color-snow-100);border:2px solid var(--sinch-color-stormy-300);transition:background-color .1s linear;box-sizing:border-box}#icon-knob{position:absolute;left:11px;top:11px;width:10px;height:10px;border-radius:50%;transition:opacity .1s linear;opacity:0;background-color:var(--sinch-color-tropical-500);pointer-events:none}:host([checked]:not([checked=false])) #icon-container::before{border-color:var(--sinch-color-tropical-500)}:host([checked]:not([checked=false])) #icon-knob{opacity:1}: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}:host([disabled]:not([disabled=false])) #icon-container::before{border-color:var(--sinch-color-stormy-100)}@media (prefers-reduced-motion){#icon-container::before,#icon-knob{transition:none}}</style><div id="wrapper"><div id="icon-container"><div id="icon-knob"></div></div><span id="text"></span></div>';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;height:40px;padding:4px 10px 4px 6px;align-items:center;gap:6px;user-select:none;cursor:pointer}#text{flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#icon-container{position:relative;width:32px;height:32px}#icon-container::before{content:"";position:absolute;top:6px;left:6px;width:20px;height:20px;border-radius:50%;pointer-events:none;background-color:var(--sinch-color-snow-100);border:2px solid var(--sinch-color-stormy-300);transition:background-color .1s linear;box-sizing:border-box}#icon-knob{position:absolute;left:11px;top:11px;width:10px;height:10px;border-radius:50%;transition:opacity .1s linear;opacity:0;background-color:var(--sinch-color-tropical-500);pointer-events:none}:host([data-checked]) #icon-container::before{border-color:var(--sinch-color-tropical-500)}:host([data-checked]) #icon-knob{opacity:1}: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}:host([disabled]:not([disabled=false])) #icon-container::before{border-color:var(--sinch-color-stormy-100)}@media (prefers-reduced-motion){#icon-container::before,#icon-knob{transition:none}}</style><div id="wrapper"><div id="icon-container"><div id="icon-knob"></div></div><span id="text"></span></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-dropdown-radio-option', (_$text = new WeakMap(), class extends NectaryElement {

package/dropdown-radio-option/types.d.ts

@@ -2,11 +2,9 @@ import type { TSinchElementReact } from '../types';
 export declare type TSinchDropdownRadioOptionElement = HTMLElement & {
     value: string;
     text: string;
-    checked: boolean;
     disabled: boolean;
     setAttribute(name: 'value', value: string): void;
     setAttribute(name: 'text', value: string): void;
-    setAttribute(name: 'checked', value: ''): void;
     setAttribute(name: 'disabled', value: ''): void;
 };
 export declare type TSinchDropdownRadioOptionReact = TSinchElementReact<TSinchDropdownRadioOptionElement> & {

package/dropdown-text-option/index.js

@@ -7,7 +7,7 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 
 import '../icons/check';
 import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;height:40px;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;--sinch-size-icon:24px}#content{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:hover)>#wrapper,:host([data-selected])>#wrapper{background-color:var(--sinch-color-snow-500)}#check{display:none;margin-right:-6px}:host([checked]:not([checked=false])) #check{display:block}:host([disabled]:not([disabled=false]))>#wrapper{color:var(--sinch-color-stormy-100);cursor:initial;--sinch-color-icon:var(--sinch-color-stormy-100)}::slotted(*){margin-left:-6px}</style><div id="wrapper"><slot name="icon"></slot><span id="content"></span><sinch-icon-check id="check"></sinch-icon-check></div>';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;height:40px;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;--sinch-size-icon:24px}#content{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:hover)>#wrapper,:host([data-selected])>#wrapper{background-color:var(--sinch-color-snow-500)}#check{display:none;margin-right:-6px}:host([data-checked]) #check{display:block}:host([disabled]:not([disabled=false]))>#wrapper{color:var(--sinch-color-stormy-100);cursor:initial;--sinch-color-icon:var(--sinch-color-stormy-100)}::slotted(*){margin-left:-6px}</style><div id="wrapper"><slot name="icon"></slot><span id="content"></span><sinch-icon-check id="check"></sinch-icon-check></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 

package/dropdown-text-option/types.d.ts

@@ -2,12 +2,10 @@ import type { TSinchElementReact } from '../types';
 export declare type TSinchDropdownTextOptionElement = HTMLElement & {
     value: string;
     text: string;
-    checked: boolean;
     disabled: boolean;
     readonly icon: Element | null;
     setAttribute(name: 'value', value: string): void;
     setAttribute(name: 'text', value: string): void;
-    setAttribute(name: 'checked', value: ''): void;
     setAttribute(name: 'disabled', value: ''): void;
 };
 export declare type TSinchDropdownTextOptionReact = TSinchElementReact<TSinchDropdownTextOptionElement> & {

package/horizontal-stepper/index.d.ts

@@ -0,0 +1,13 @@
+import '../icons/check';
+import '../icons/error-outline';
+import type { TSinchHorizontalStepperElement, TSinchHorizontalStepperReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-horizontal-stepper': TSinchHorizontalStepperReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-horizontal-stepper': TSinchHorizontalStepperElement;
+    }
+}

package/horizontal-stepper/index.js

@@ -0,0 +1,104 @@
+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 {
+  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'));
+  }
+
+  connectedCallback() {
+    this.setAttribute('role', 'progressbar');
+    this.setAttribute('aria-valuemin', '0');
+
+    _classPrivateFieldGet(this, _$itemsSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _updateItems));
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$itemsSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _updateItems));
+  }
+
+  static get observedAttributes() {
+    return ['index'];
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+
+    switch (name) {
+      case 'index':
+        {
+          _classPrivateFieldGet(this, _updateItems).call(this);
+
+          break;
+        }
+    }
+  }
+
+  set index(value) {
+    updateAttribute(this, 'index', value);
+  }
+
+  get index() {
+    return getAttribute(this, 'index', '1');
+  }
+
+}));

package/horizontal-stepper/types.d.ts

@@ -0,0 +1,9 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchHorizontalStepperElement = HTMLElement & {
+    index: string;
+    setAttribute(name: 'index', value: string): void;
+};
+export declare type TSinchHorizontalStepperReact = TSinchElementReact<TSinchHorizontalStepperElement> & {
+    index: string;
+    'aria-label': string;
+};

package/horizontal-stepper/types.js

@@ -0,0 +1 @@
+export {};

package/horizontal-stepper-item/index.d.ts

@@ -0,0 +1,13 @@
+import '../icons/check';
+import '../icons/exclamation';
+import type { TSinchHorizontalStepperItemElement, TSinchHorizontalStepperItemReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-horizontal-stepper-item': TSinchHorizontalStepperItemReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-horizontal-stepper-item': TSinchHorizontalStepperItemElement;
+    }
+}

package/horizontal-stepper-item/index.js

@@ -0,0 +1,100 @@
+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>';
+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 {
+  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'));
+  }
+
+  connectedCallback() {}
+
+  disconnectedCallback() {}
+
+  static get observedAttributes() {
+    return ['label', 'description', 'data-index'];
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case 'label':
+        {
+          _classPrivateFieldGet(this, _$label).textContent = newVal;
+          break;
+        }
+
+      case 'description':
+        {
+          _classPrivateFieldGet(this, _$description).textContent = newVal;
+          break;
+        }
+
+      case 'data-index':
+        {
+          _classPrivateFieldGet(this, _$circleText).textContent = newVal;
+          break;
+        }
+    }
+  }
+
+  set label(value) {
+    updateAttribute(this, 'label', value);
+  }
+
+  get label() {
+    return getAttribute(this, 'label', '');
+  }
+
+  set description(value) {
+    updateAttribute(this, 'description', value);
+  }
+
+  get description() {
+    return getAttribute(this, 'description', '');
+  }
+
+  get status() {
+    return getLiteralAttribute(this, statusValues, 'status', null);
+  }
+
+  set status(value) {
+    updateLiteralAttribute(this, statusValues, 'status', value);
+  }
+
+}));

package/horizontal-stepper-item/types.d.ts

@@ -0,0 +1,15 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchHorizontalStepperStatusType = 'error' | 'skip';
+export declare type TSinchHorizontalStepperItemElement = HTMLElement & {
+    label: string;
+    description: string | null;
+    status: TSinchHorizontalStepperStatusType | null;
+    setAttribute(name: 'label', value: string): void;
+    setAttribute(name: 'description', value: string): void;
+    setAttribute(name: 'status', value: TSinchHorizontalStepperStatusType): void;
+};
+export declare type TSinchHorizontalStepperItemReact = TSinchElementReact<TSinchHorizontalStepperItemElement> & {
+    label: string;
+    description?: string;
+    status?: TSinchHorizontalStepperStatusType;
+};

package/horizontal-stepper-item/types.js

@@ -0,0 +1 @@
+export {};

package/horizontal-stepper-item/utils.d.ts

@@ -0,0 +1,2 @@
+import type { TSinchHorizontalStepperStatusType } from './types';
+export declare const statusValues: TSinchHorizontalStepperStatusType[];

package/horizontal-stepper-item/utils.js

@@ -0,0 +1 @@
+export const statusValues = ['skip', 'error'];

package/icon-button/index.js

@@ -1,17 +1,17 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$button;
+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 { defineCustomElement, getBooleanAttribute, isAttrTrue, NectaryElement, updateBooleanAttribute } from '../utils';
+import { defineCustomElement, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, 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;box-sizing:border-box;width:48px;height:48px;border-radius:var(--sinch-shape-radius-s);border:1px solid transparent;background-color:transparent;cursor:pointer;--sinch-size-icon:24px;--sinch-color-icon:var(--sinch-icon-button-color, var(--sinch-color-stormy-500))}button:focus-visible::before{position:absolute;content:"";left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;padding:2px;border:1px solid var(--sinch-color-aqua-400);border-radius:calc(var(--sinch-shape-radius-s) + 2px)}@supports not selector(:focus-visible){button:focus::before{position:absolute;content:"";left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;padding:2px;border:1px solid var(--sinch-color-aqua-400);border-radius:calc(var(--sinch-shape-radius-s) + 2px)}}button:hover{background-color:var(--sinch-color-snow-500)}button:active{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}button>*{pointer-events:none}</style><button><slot name="icon"></slot></button>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-icon-button', (_$button = new WeakMap(), class extends NectaryElement {
+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 {
   constructor() {
     super();
 
@@ -20,6 +20,48 @@ defineCustomElement('sinch-icon-button', (_$button = new WeakMap(), class extend
       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));
 
@@ -28,6 +70,28 @@ defineCustomElement('sinch-icon-button', (_$button = new WeakMap(), class extend
 
   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/icon-button/types.d.ts

@@ -2,6 +2,9 @@ import type { TSinchElementReact } from '../types';
 export declare type TSinchIconButtonElement = HTMLElement & {
     disabled: boolean;
     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;
     setAttribute(name: 'disabled', value: ''): void;
     setAttribute(name: 'small', value: ''): void;
 };
@@ -9,4 +12,7 @@ export declare type TSinchIconButtonReact = TSinchElementReact<TSinchIconButtonE
     'aria-label': string;
     disabled?: boolean;
     small?: boolean;
+    'on-click'?: (e: CustomEvent<void>) => void;
+    'on-focus'?: (e: CustomEvent<void>) => void;
+    'on-blur'?: (e: CustomEvent<void>) => void;
 };

package/icons/create-icon-class.js

@@ -1,5 +1,5 @@
 import { NectaryElement, updateAttribute } from '../utils';
-const iconStylesHtml = '<style>:host{display:inline-block;vertical-align:middle}svg{display:block;fill:var(--sinch-color-icon,--sinch-color-text-default);height:var(--sinch-size-icon,24px)}</style>';
+const iconStylesHtml = '<style>:host{display:inline-block;vertical-align:middle}svg{display:block;pointer-events:none;fill:var(--sinch-color-icon,--sinch-color-text-default);height:var(--sinch-size-icon,24px)}</style>';
 export const createIconClass = templateHTML => {
   const template = document.createElement('template');
   template.innerHTML = iconStylesHtml + templateHTML;

package/icons/exclamation/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchIconElement, TSinchIconReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-icon-exclamation': TSinchIconReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-icon-exclamation': TSinchIconElement;
+    }
+}

package/icons/exclamation/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M11 14V5h2v9Zm0 5v-2h2v2Z"/></svg>';
+defineCustomElement('sinch-icon-exclamation', createIconClass(templateHTML));

package/icons-branded/create-icon-class.js

@@ -1,5 +1,5 @@
-import { getBooleanAttribute, getIntegerAttribute, NectaryElement, updateAttribute, updateBooleanAttribute, updateIntegerAttribute } from '../utils';
-const iconStylesHtml = '<style>:host{display:inline-block;vertical-align:middle}svg{display:block;fill:var(--sinch-color-stormy-500)}.accent{fill:var(--sinch-color-text-link)}:host([inverted]:not([inverted=false])) svg{fill:var(--sinch-color-snow-100)}:host([inverted]:not([inverted=false])) .accent{fill:var(--sinch-color-honey-500)}</style>';
+import { attrValueToPixels, getBooleanAttribute, getIntegerAttribute, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
+const iconStylesHtml = '<style>:host{display:inline-block;vertical-align:middle}svg{display:block;pointer-events:none;fill:var(--sinch-color-stormy-500);height:var(--sinch-size-icon,48px)}.accent{fill:var(--sinch-color-text-link)}:host([inverted]:not([inverted=false])) svg{fill:var(--sinch-color-snow-100)}:host([inverted]:not([inverted=false])) .accent{fill:var(--sinch-color-honey-500)}</style>';
 const DEFAULT_SIZE = 48;
 const MIN_SIZE = 4;
 const MAX_SIZE = 256;
@@ -36,17 +36,13 @@ export const createIconClass = templateHTML => {
 
     connectedCallback() {
       updateAttribute(this.$svg, 'preserveAspectRatio', 'xMinYMin meet');
-
-      if (!this.hasAttribute('size')) {
-        updateAttribute(this, 'size', DEFAULT_SIZE);
-      }
     }
 
     attributeChangedCallback(name, _, newVal) {
       switch (name) {
         case 'size':
           {
-            updateIntegerAttribute(this.$svg, 'height', newVal, {
+            this.$svg.style.height = attrValueToPixels(newVal, {
               min: MIN_SIZE,
               max: MAX_SIZE
             });

package/icons-branded/types.d.ts

@@ -1,11 +1,14 @@
 import type { TSinchElementReact } from '../types';
 export declare type TSinchIconBrandedElement = HTMLElement & {
+    /** @deprecated */
     size: number;
     inverted: boolean;
+    /** @deprecated */
     setAttribute(name: 'size', value: string): void;
     setAttribute(name: 'inverted', value: ''): void;
 };
 export declare type TSinchIconBrandedReact = TSinchElementReact<TSinchIconBrandedElement> & {
+    /** @deprecated */
     size?: number;
     inverted?: boolean;
 };

package/icons-channel/create-icon-class.js

@@ -1,5 +1,5 @@
-import { getIntegerAttribute, NectaryElement, updateAttribute, updateIntegerAttribute } from '../utils';
-const iconStylesHtml = '<style>:host{display:inline-block;vertical-align:middle}svg{display:block;pointer-events:none}</style>';
+import { attrValueToPixels, getIntegerAttribute, NectaryElement, updateAttribute } from '../utils';
+const iconStylesHtml = '<style>:host{display:inline-block;vertical-align:middle}svg{display:block;pointer-events:none;height:var(--sinch-size-icon,48px)}</style>';
 const DEFAULT_SIZE = 48;
 const MIN_SIZE = 4;
 const MAX_SIZE = 256;
@@ -28,17 +28,13 @@ export const createIconClass = templateHTML => {
 
     connectedCallback() {
       updateAttribute(this.$svg, 'preserveAspectRatio', 'xMinYMin meet');
-
-      if (!this.hasAttribute('size')) {
-        updateAttribute(this, 'size', DEFAULT_SIZE);
-      }
     }
 
     attributeChangedCallback(name, _, newVal) {
       switch (name) {
         case 'size':
           {
-            updateIntegerAttribute(this.$svg, 'height', newVal, {
+            this.$svg.style.height = attrValueToPixels(newVal, {
               min: MIN_SIZE,
               max: MAX_SIZE
             });

package/icons-channel/types.d.ts

@@ -1,8 +1,11 @@
 import type { TSinchElementReact } from '../types';
 export declare type TSinchIconChannelElement = HTMLElement & {
+    /** @deprecated */
     size: number;
+    /** @deprecated */
     setAttribute(name: 'size', value: string): void;
 };
 export declare type TSinchIconChannelReact = TSinchElementReact<TSinchIconChannelElement> & {
+    /** @deprecated */
     size?: number;
 };