@nectary/components 0.34.0 → 0.36.0

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/types.d.ts

@@ -1,9 +1,13 @@
 import type { TSinchElementReact } from '../types';
 export declare type TSinchHorizontalStepperElement = HTMLElement & {
+    /** Current item index, starting from 1 */
     index: string;
+    /** Current item index, starting from 1 */
     setAttribute(name: 'index', value: string): void;
 };
 export declare type TSinchHorizontalStepperReact = TSinchElementReact<TSinchHorizontalStepperElement> & {
+    /** Current item index, starting from 1 */
     index: string;
+    /** Label that is used for a11y */
     'aria-label': string;
 };

package/horizontal-stepper-item/index.js

@@ -10,7 +10,7 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 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-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;

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

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

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';
-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>';
+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 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,10 +70,32 @@ 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() {
-    return ['disabled'];
+    return ['disabled', 'aria-label'];
   }
 
   attributeChangedCallback(name, _, newVal) {
@@ -43,6 +107,12 @@ defineCustomElement('sinch-icon-button', (_$button = new WeakMap(), class extend
           updateBooleanAttribute(this, 'disabled', isDisabled);
           break;
         }
+
+      case 'aria-label':
+        {
+          updateAttribute(this, 'title', newVal);
+          break;
+        }
     }
   }
 

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

package/inline-alert/index.d.ts

@@ -0,0 +1,17 @@
+import '../icons/report-problem';
+import '../icons/report';
+import '../icons/check-circle';
+import '../icons/info';
+import '../title';
+import '../text';
+import type { TSinchInlineAlertElement, TSinchInlineAlertReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-inline-alert': TSinchInlineAlertReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-inline-alert': TSinchInlineAlertElement;
+    }
+}

package/inline-alert/index.js

@@ -0,0 +1,154 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$text, _$caption, _$closeWrapper, _$closeSlot, _$actionWrapper, _$actionSlot, _onCloseSlotChange, _onActionSlotChange;
+
+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/report-problem';
+import '../icons/report';
+import '../icons/check-circle';
+import '../icons/info';
+import '../title';
+import '../text';
+import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, setClass } from '../utils';
+const templateHTML = '<style>#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:16px;border-radius:var(--sinch-shape-radius-l);background-color:var(--sinch-color-alert-info-background);box-sizing:border-box;width:100%}#body-wrapper{display:flex;flex-direction:column;align-items:flex-start;margin-left:8px;min-width:0;flex:1}#caption{color:var(--sinch-color-stormy-500)}#text{color:var(--sinch-color-stormy-500);margin-top:4px}#icon-error,#icon-info,#icon-success,#icon-warn{display:none}:host([type=success]) #wrapper{background-color:var(--sinch-color-success-200)}:host([type=warn]) #wrapper{background-color:var(--sinch-color-warning-200)}:host([type=error]) #wrapper{background-color:var(--sinch-color-error-200)}:host([type=info]) #wrapper{background-color:var(--sinch-color-informative-200)}:host([type=success]) #icon-success{display:block;--sinch-color-icon:var(--sinch-color-success-500)}:host([type=warn]) #icon-warn{display:block;--sinch-color-icon:var(--sinch-color-warning-500)}:host([type=error]) #icon-error{display:block;--sinch-color-icon:var(--sinch-color-error-500)}:host([type=info]) #icon-info{display:block;--sinch-color-icon:var(--sinch-color-informative-500)}#action{display:flex;margin-top:16px;min-width:0}#action.empty{display:none}#close{margin-left:16px}#close.empty{display:none}</style><div id="wrapper"><sinch-icon-info id="icon-info"></sinch-icon-info><sinch-icon-check-circle id="icon-success"></sinch-icon-check-circle><sinch-icon-report-problem id="icon-warn"></sinch-icon-report-problem><sinch-icon-report id="icon-error"></sinch-icon-report><div id="body-wrapper"><sinch-title id="caption" level="3" type="s"></sinch-title><sinch-text id="text" type="m"></sinch-text><div id="action"><slot name="action"></slot></div></div><div id="close"><slot name="close"></slot></div></div>';
+import { assertType, typeValues } from './utils';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-inline-alert', (_$text = new WeakMap(), _$caption = new WeakMap(), _$closeWrapper = new WeakMap(), _$closeSlot = new WeakMap(), _$actionWrapper = new WeakMap(), _$actionSlot = new WeakMap(), _onCloseSlotChange = new WeakMap(), _onActionSlotChange = new WeakMap(), class extends NectaryElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$text, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$caption, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$closeWrapper, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$closeSlot, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$actionWrapper, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$actionSlot, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _onCloseSlotChange, {
+      writable: true,
+      value: () => {
+        setClass(_classPrivateFieldGet(this, _$closeWrapper), 'empty', _classPrivateFieldGet(this, _$closeSlot).assignedElements().length === 0);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onActionSlotChange, {
+      writable: true,
+      value: () => {
+        setClass(_classPrivateFieldGet(this, _$actionWrapper), 'empty', _classPrivateFieldGet(this, _$actionSlot).assignedElements().length === 0);
+      }
+    });
+
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#text'));
+
+    _classPrivateFieldSet(this, _$caption, shadowRoot.querySelector('#caption'));
+
+    _classPrivateFieldSet(this, _$closeWrapper, shadowRoot.querySelector('#close'));
+
+    _classPrivateFieldSet(this, _$closeSlot, shadowRoot.querySelector('slot[name="close"]'));
+
+    _classPrivateFieldSet(this, _$actionWrapper, shadowRoot.querySelector('#action'));
+
+    _classPrivateFieldSet(this, _$actionSlot, shadowRoot.querySelector('slot[name="action"]'));
+  }
+
+  connectedCallback() {
+    this.setAttribute('aria-atomic', 'true');
+    this.setAttribute('aria-live', 'polite');
+
+    _classPrivateFieldGet(this, _$closeSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onCloseSlotChange));
+
+    _classPrivateFieldGet(this, _$actionSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onActionSlotChange));
+
+    _classPrivateFieldGet(this, _onCloseSlotChange).call(this);
+
+    _classPrivateFieldGet(this, _onActionSlotChange).call(this);
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$closeSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onCloseSlotChange));
+
+    _classPrivateFieldGet(this, _$actionSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onActionSlotChange));
+  }
+
+  get type() {
+    return getLiteralAttribute(this, typeValues, 'type');
+  }
+
+  set type(value) {
+    updateLiteralAttribute(this, typeValues, 'type', value);
+  }
+
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+
+  get caption() {
+    return getAttribute(this, 'caption', '');
+  }
+
+  set caption(value) {
+    updateAttribute(this, 'caption', value);
+  }
+
+  static get observedAttributes() {
+    return ['text', 'caption', 'type'];
+  }
+
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'type':
+        {
+          assertType(newVal);
+          break;
+        }
+
+      case 'text':
+        {
+          _classPrivateFieldGet(this, _$text).textContent = newVal;
+          break;
+        }
+
+      case 'caption':
+        {
+          updateAttribute(_classPrivateFieldGet(this, _$caption), 'text', newVal);
+          break;
+        }
+    }
+  }
+
+}));

package/inline-alert/types.d.ts

@@ -0,0 +1,15 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchInlineAlertType = 'info' | 'success' | 'warn' | 'error';
+export declare type TSinchInlineAlertElement = HTMLElement & {
+    type: TSinchInlineAlertType;
+    text: string;
+    caption: string;
+    setAttribute(name: 'type', value: TSinchInlineAlertType): void;
+    setAttribute(name: 'text', value: string): void;
+    setAttribute(name: 'caption', value: string): void;
+};
+export declare type TSinchInlineAlertReact = TSinchElementReact<TSinchInlineAlertElement> & {
+    type: TSinchInlineAlertType;
+    text: string;
+    caption: string;
+};

package/inline-alert/utils.d.ts

@@ -0,0 +1,5 @@
+import type { TSinchInlineAlertType } from './types';
+export declare const typeValues: readonly TSinchInlineAlertType[];
+declare type TAssertType = (value: string | null) => asserts value is TSinchInlineAlertType;
+export declare const assertType: TAssertType;
+export {};

package/inline-alert/utils.js

@@ -0,0 +1,6 @@
+export const typeValues = ['info', 'success', 'warn', 'error'];
+export const assertType = value => {
+  if (value === null || !typeValues.includes(value)) {
+    throw new Error(`sinch-inline-alert: invalid type attribute: ${value}`);
+  }
+};

package/input/index.d.ts

@@ -1,4 +1,3 @@
-import '../stop-events';
 import type { TSinchInputElement, TSinchInputReact } from './types';
 declare global {
     namespace JSX {