@nectary/components 0.18.0 → 0.20.0

package/accordion-item/index.js

@@ -9,7 +9,7 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 
 import '../icon/keyboard-arrow-down';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute, 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-4);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>';
 export const isAccordionItemElement = element => {
   return element instanceof Element && element.tagName === 'SINCH-ACCORDION-ITEM';
 };

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 } 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:4px;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}#title{display:none;font:var(--sinch-font-title-4);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])) #title{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="title"></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:4px;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}#title{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])) #title{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="title"></p><p id="text"></p><slot name="button"></slot></div><slot name="close"></slot></div>';
 const typeValues = ['info', 'success', 'warn', 'error'];
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/avatar/index.js

@@ -9,7 +9,7 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 
 import '../icon/cancel';
 import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:32px;height:32px;font:var(--sinch-font-title-5);line-height:30px;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;overflow:hidden}: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:40px;height:40px;font:var(--sinch-font-title-4);line-height:38px}:host([size="s"]) #wrapper{width:24px;height:24px;font:var(--sinch-font-extra-small-text);line-height:22px}#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}:host([src]:not([src=""])) #image{display:block}</style><div id="wrapper"><span id="text"></span><img id="image" alt=""/></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>';
 const backgroundValues = ['grey', 'yellow', 'blue'];
 const sizeValues = ['l', 'm', 's'];
 const template = document.createElement('template');

package/avatar-badge/index.d.ts

@@ -0,0 +1,18 @@
+import '../icon/cancel';
+import type { TSinchElementReact } from '../types';
+export declare type TSinchAvatarBadgeElement = HTMLElement & {
+    text: string;
+};
+export declare type TSinchAvatarBadgeReact = TSinchElementReact<TSinchAvatarBadgeElement> & {
+    text: string;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-avatar-badge': TSinchAvatarBadgeReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-avatar-badge': TSinchAvatarBadgeElement;
+    }
+}

package/avatar-badge/index.js

@@ -0,0 +1,55 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$text;
+
+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 '../icon/cancel';
+import { defineCustomElement, getAttribute, setClass, updateAttribute } from '../utils';
+const templateHTML = '<style>#text{width:var(--sinch-avatar-badge-size);height:var(--sinch-avatar-badge-size);border:1px solid var(--sinch-color-snow-100);border-radius:calc(var(--sinch-avatar-badge-size)/ 2);text-align:center;box-sizing:border-box;color:var(--sinch-color-snow-100);font:var(--sinch-avatar-badge-font);background-color:var(--sinch-color-raspberry-500)}#text.long{width:fit-content;padding:0 calc(var(--sinch-avatar-badge-size)/ 4)}</style><div id="text"></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-avatar-badge', (_$text = new WeakMap(), class extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$text, {
+      writable: true,
+      value: void 0
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'closed'
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#text'));
+  }
+
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+
+  static get observedAttributes() {
+    return ['text'];
+  }
+
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'text':
+        {
+          _classPrivateFieldGet(this, _$text).textContent = newVal;
+          setClass(_classPrivateFieldGet(this, _$text), 'long', newVal !== null && newVal.length > 1);
+          break;
+        }
+    }
+  }
+
+}));

package/avatar-status/index.d.ts

@@ -0,0 +1,21 @@
+import '../icon/cancel';
+import type { TSinchElementReact } from '../types';
+declare const colorValues: readonly ["red", "yellow", "green", "grey"];
+export declare type TSinchAvatarStatusColor = typeof colorValues[number];
+export declare type TSinchAvatarStatusElement = HTMLElement & {
+    color: TSinchAvatarStatusColor;
+};
+export declare type TSinchAvatarStatusReact = TSinchElementReact<TSinchAvatarStatusElement> & {
+    color: TSinchAvatarStatusColor;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-avatar-status': TSinchAvatarStatusReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-avatar-status': TSinchAvatarStatusElement;
+    }
+}
+export {};

package/avatar-status/index.js

@@ -0,0 +1,49 @@
+import '../icon/cancel';
+import { defineCustomElement, getLiteralAttribute, updateLiteralAttribute } from '../utils';
+const templateHTML = '<style>#circle{width:10px;height:10px;border:1px solid var(--sinch-color-snow-100);border-radius:50%;box-sizing:border-box}:host([color=grey]) #circle{background-color:var(--sinch-color-snow-600)}:host([color=yellow]) #circle{background-color:var(--sinch-color-honey-500)}:host([color=red]) #circle{background-color:var(--sinch-color-raspberry-500)}:host([color=green]) #circle{background-color:var(--sinch-color-grass-400)}</style><div id="circle"></div>';
+const colorValues = ['red', 'yellow', 'green', 'grey'];
+
+const assertColor = value => {
+  if (value === null || !colorValues.includes(value)) {
+    throw new Error(`sinch-avatar-status: invalid color attribute: ${value}`);
+  }
+};
+
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-avatar-status', class extends HTMLElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({
+      mode: 'closed'
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback() {
+    assertColor(this.getAttribute('color'));
+  }
+
+  static get observedAttributes() {
+    return ['color'];
+  }
+
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'color':
+        {
+          assertColor(newVal);
+          break;
+        }
+    }
+  }
+
+  get color() {
+    return getLiteralAttribute(this, colorValues, 'color');
+  }
+
+  set color(value) {
+    updateLiteralAttribute(this, colorValues, 'color', value);
+  }
+
+});

package/button/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, isAttrTrue, updateBooleanAttribute, updateAttribute, updateLiteralAttribute } 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;display:flex;align-items:center;justify-content:center;gap:15px;box-sizing:border-box;width:100%;height:48px;padding:12px;border-radius:4px;font:var(--sinch-font-title-4);color:var(--sinch-color-button-text);background-color:var(--sinch-color-button-background);box-shadow:0 0 0 1px var(--sinch-color-button-border) inset;cursor:pointer;--sinch-size-icon:24px}button:focus{background-color:var(--sinch-color-button-background-focus);box-shadow:0 0 0 2px var(--sinch-color-button-border-focus) inset}button:hover{background-color:var(--sinch-color-button-background-hover);box-shadow:0 0 0 1px var(--sinch-color-button-border-hover) inset}button:active{background-color:var(--sinch-color-button-background-active);box-shadow:0 0 0 2px var(--sinch-color-button-border-active) inset}button:disabled{color:var(--sinch-color-button-text-disabled);background-color:var(--sinch-color-button-background-disabled);box-shadow:0 0 0 1px var(--sinch-color-button-border-disabled) inset;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>*{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;--sinch-size-icon:16px}:host([text]:not([text=""])[small]:not([small=false])) button{padding:8px 16px}</style><button><slot name="icon"></slot><span id="text"></span></button>';
+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;display:flex;align-items:center;justify-content:center;gap:15px;box-sizing:border-box;width:100%;height:48px;padding:12px;border-radius:4px;font:var(--sinch-font-title-s);color:var(--sinch-color-button-text);background-color:var(--sinch-color-button-background);box-shadow:0 0 0 1px var(--sinch-color-button-border) inset;cursor:pointer;--sinch-size-icon:24px}button:focus{background-color:var(--sinch-color-button-background-focus);box-shadow:0 0 0 2px var(--sinch-color-button-border-focus) inset}button:hover{background-color:var(--sinch-color-button-background-hover);box-shadow:0 0 0 1px var(--sinch-color-button-border-hover) inset}button:active{background-color:var(--sinch-color-button-background-active);box-shadow:0 0 0 2px var(--sinch-color-button-border-active) inset}button:disabled{color:var(--sinch-color-button-text-disabled);background-color:var(--sinch-color-button-background-disabled);box-shadow:0 0 0 1px var(--sinch-color-button-border-disabled) inset;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>*{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;--sinch-size-icon:16px}:host([text]:not([text=""])[small]:not([small=false])) button{padding:8px 16px}</style><button><slot name="icon"></slot><span id="text"></span></button>';
 const buttonTypes = ['primary', 'secondary', 'cta-primary', 'cta-secondary', 'destructive'];
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/card/index.js

@@ -10,7 +10,7 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 import { isSinchCardButtonElement } from '../card-button';
 import { isSinchCardLinkElement } from '../card-link';
 import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, setClass } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative}#card-body{padding:24px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px;background-color:var(--sinch-color-snow-100);border-radius:8px;border:1px solid var(--sinch-color-snow-700)}#illustration-wrapper{display:none;flex-direction:column;align-items:center;border-top-left-radius:8px;border-top-right-radius:8px;overflow:hidden;background-color:var(--sinch-color-stormy-500);height:240px}#illustration-wrapper.active{display:flex}#illustration-wrapper.active+#card-body{border-top-left-radius:0;border-top-right-radius:0;border-top:none}#label{margin:0;font:var(--sinch-font-title-5);color:var(--sinch-color-stormy-300);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#label:empty{display:none}#header{display:flex;flex-direction:row;align-items:center;gap:8px;--sinch-size-icon:48px}#title{font:var(--sinch-font-title-3);color:var(--sinch-color-stormy-500);flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#description{margin:0;font:var(--sinch-font-body);color:var(--sinch-color-stormy-500);flex:1;min-height:0;max-height:120px;overflow-y:auto}#description:empty{display:none}:host([disabled]:not([disabled=false])) :is(#illustration-wrapper,#description,#header,#label){opacity:.6}::slotted(sinch-card-button),::slotted(sinch-card-link){margin-top:20px;align-self:flex-start;max-width:100%}</style><div id="wrapper"><div id="illustration-wrapper"><slot name="illustration"></slot></div><div id="card-body"><p id="label"></p><div id="header"><slot name="icon"></slot><span id="title"></span></div><p id="description"></p><slot name="action"></slot></div></div>';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative}#card-body{padding:24px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px;background-color:var(--sinch-color-snow-100);border-radius:8px;border:1px solid var(--sinch-color-snow-700)}#illustration-wrapper{display:none;flex-direction:column;align-items:center;border-top-left-radius:8px;border-top-right-radius:8px;overflow:hidden;background-color:var(--sinch-color-stormy-500);height:240px}#illustration-wrapper.active{display:flex}#illustration-wrapper.active+#card-body{border-top-left-radius:0;border-top-right-radius:0;border-top:none}#label{margin:0;font:var(--sinch-font-title-xs);color:var(--sinch-color-stormy-300);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#label:empty{display:none}#header{display:flex;flex-direction:row;align-items:center;gap:8px;--sinch-size-icon:48px}#title{font:var(--sinch-font-title-m);color:var(--sinch-color-stormy-500);flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#description{margin:0;font:var(--sinch-font-body);color:var(--sinch-color-stormy-500);flex:1;min-height:0;max-height:120px;overflow-y:auto}#description:empty{display:none}:host([disabled]:not([disabled=false])) :is(#illustration-wrapper,#description,#header,#label){opacity:.6}::slotted(sinch-card-button),::slotted(sinch-card-link){margin-top:20px;align-self:flex-start;max-width:100%}</style><div id="wrapper"><div id="illustration-wrapper"><slot name="illustration"></slot></div><div id="card-body"><p id="label"></p><div id="header"><slot name="icon"></slot><span id="title"></span></div><p id="description"></p><slot name="action"></slot></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-card', (_$text = new WeakMap(), _$label = new WeakMap(), _$title = new WeakMap(), _$illustrationSlot = new WeakMap(), _$actionSlot = new WeakMap(), _$illustrationSlotWrapper = new WeakMap(), _onIllustrationSlotChange = new WeakMap(), _updateDisabledAttributeInChildren = new WeakMap(), class extends HTMLElement {

package/chat/index.d.ts

@@ -0,0 +1,13 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchChatElement = HTMLElement & {};
+export declare type TSinchChatReact = TSinchElementReact<TSinchChatElement> & {};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-chat': TSinchChatReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-chat': TSinchChatElement;
+    }
+}

package/chat/index.js

@@ -0,0 +1,15 @@
+import { defineCustomElement } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;gap:32px;box-sizing:border-box;width:100%}</style><div id="wrapper"><slot></slot></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-chat', class extends HTMLElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({
+      mode: 'closed',
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+});

package/chat-avatar/index.d.ts

@@ -0,0 +1,21 @@
+import '../avatar';
+import type { TSinchAvatarElement, TSinchAvatarReact } from '../avatar';
+import type { TSinchElementReact } from '../types';
+export declare type TSinchChatAvatarElement = HTMLElement & {
+    alt: TSinchAvatarElement['alt'];
+    src: TSinchAvatarElement['src'];
+};
+export declare type TSinchChatAvatarReact = TSinchElementReact<TSinchChatAvatarElement> & {
+    alt: TSinchAvatarReact['alt'];
+    src?: TSinchAvatarReact['src'];
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-chat-avatar': TSinchChatAvatarReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-chat-avatar': TSinchChatAvatarElement;
+    }
+}

package/chat-avatar/index.js

@@ -0,0 +1,69 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$avatar;
+
+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 '../avatar';
+import { defineCustomElement, getAttribute, updateAttribute } from '../utils';
+const templateHTML = '<style>sinch-avatar{display:block}</style><sinch-avatar background="blue" size="l"></sinch-avatar>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-chat-avatar', (_$avatar = new WeakMap(), class extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$avatar, {
+      writable: true,
+      value: void 0
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'closed',
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$avatar, shadowRoot.querySelector('sinch-avatar'));
+  }
+
+  static get observedAttributes() {
+    return ['src', 'alt'];
+  }
+
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'src':
+        {
+          updateAttribute(_classPrivateFieldGet(this, _$avatar), 'src', newVal);
+          break;
+        }
+
+      case 'alt':
+        {
+          updateAttribute(_classPrivateFieldGet(this, _$avatar), 'alt', newVal);
+          break;
+        }
+    }
+  }
+
+  get src() {
+    return getAttribute(this, 'src', null);
+  }
+
+  set src(value) {
+    updateAttribute(this, 'src', value);
+  }
+
+  get alt() {
+    return getAttribute(this, 'alt', '');
+  }
+
+  set alt(value) {
+    updateAttribute(this, 'alt', value);
+  }
+
+}));

package/chat-block/index.d.ts

@@ -0,0 +1,24 @@
+import type { TSinchChatBubbleType } from '../chat-bubble';
+import type { TSinchElementReact } from '../types';
+export declare type TSinchChatBlockElement = HTMLElement & {
+    type: TSinchChatBubbleType | null;
+    firstName: string | null;
+    lastName: string | null;
+    timestamp: string | null;
+};
+export declare type TSinchChatBlockReact = TSinchElementReact<TSinchChatBlockElement> & {
+    type: TSinchChatBubbleType;
+    firstName?: string;
+    lastName?: string;
+    timestamp?: string;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-chat-block': TSinchChatBlockReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-chat-block': TSinchChatBlockElement;
+    }
+}

package/chat-block/index.js

@@ -0,0 +1,148 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$firstName, _$lastName, _$timeStamp, _$bubbleSlot, _onBubbleSlotChange, _updateBubbleTypes;
+
+function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
+
+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"); } }
+
+function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
+
+import { typeValues } from '../chat-bubble';
+import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;display:flex;flex-direction:column;gap:4px;align-items:flex-end;padding-left:72px}#stamp{display:flex;gap:4px;margin:0;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-stormy-400)}#avatar{display:none;position:absolute;left:0;top:24px}:host([type=customer])>#wrapper{align-items:flex-start}:host([type=customer]) #avatar{display:block}</style><div id="wrapper"><div id="avatar"><slot name="avatar"></slot></div><p id="stamp"><span id="firstname"></span><span id="lastname"></span>&bull;<span id="time"></span></p><slot name="bubble"></slot></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-chat-block', (_$firstName = new WeakMap(), _$lastName = new WeakMap(), _$timeStamp = new WeakMap(), _$bubbleSlot = new WeakMap(), _onBubbleSlotChange = new WeakMap(), _updateBubbleTypes = new WeakSet(), class extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateMethodInitSpec(this, _updateBubbleTypes);
+
+    _classPrivateFieldInitSpec(this, _$firstName, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$lastName, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$timeStamp, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$bubbleSlot, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _onBubbleSlotChange, {
+      writable: true,
+      value: () => {
+        _classPrivateMethodGet(this, _updateBubbleTypes, _updateBubbleTypes2).call(this);
+      }
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'closed',
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$firstName, shadowRoot.querySelector('#firstname'));
+
+    _classPrivateFieldSet(this, _$lastName, shadowRoot.querySelector('#lastname'));
+
+    _classPrivateFieldSet(this, _$timeStamp, shadowRoot.querySelector('#time'));
+
+    _classPrivateFieldSet(this, _$bubbleSlot, shadowRoot.querySelector('slot[name="bubble"]'));
+  }
+
+  connectedCallback() {
+    _classPrivateFieldGet(this, _$bubbleSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onBubbleSlotChange));
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$bubbleSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onBubbleSlotChange));
+  }
+
+  static get observedAttributes() {
+    return ['firstname', 'lastname', 'timestamp', 'type'];
+  }
+
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'firstname':
+        {
+          _classPrivateFieldGet(this, _$firstName).textContent = newVal;
+          break;
+        }
+
+      case 'lastname':
+        {
+          _classPrivateFieldGet(this, _$lastName).textContent = newVal;
+          break;
+        }
+
+      case 'timestamp':
+        {
+          _classPrivateFieldGet(this, _$timeStamp).textContent = newVal;
+          break;
+        }
+
+      case 'type':
+        {
+          _classPrivateMethodGet(this, _updateBubbleTypes, _updateBubbleTypes2).call(this);
+
+          break;
+        }
+    }
+  }
+
+  set type(value) {
+    updateLiteralAttribute(this, typeValues, 'type', value);
+  }
+
+  get type() {
+    return getLiteralAttribute(this, typeValues, 'type', null);
+  }
+
+  set firstName(value) {
+    updateAttribute(this, 'firstname', value);
+  }
+
+  get firstName() {
+    return getAttribute(this, 'firstname', null);
+  }
+
+  set lastName(value) {
+    updateAttribute(this, 'lastname', value);
+  }
+
+  get lastName() {
+    return getAttribute(this, 'lastname', null);
+  }
+
+  set timestamp(value) {
+    updateAttribute(this, 'timestamp', value);
+  }
+
+  get timestamp() {
+    return getAttribute(this, 'timestamp', null);
+  }
+
+}));
+
+function _updateBubbleTypes2() {
+  const typeValue = getAttribute(this, 'type');
+
+  _classPrivateFieldGet(this, _$bubbleSlot).assignedElements().forEach(el => {
+    updateAttribute(el, 'data-type', typeValue);
+  });
+}

package/chat-bubble/index.d.ts

@@ -0,0 +1,20 @@
+import type { TSinchElementReact } from '../types';
+export declare const typeValues: readonly ["customer", "agent", "agent-prev"];
+export declare type TSinchChatBubbleType = typeof typeValues[number];
+export declare type TSinchChatBubbleElement = HTMLElement & {
+    readonly type: TSinchChatBubbleType | null;
+    text: string;
+};
+export declare type TSinchChatBubbleReact = TSinchElementReact<TSinchChatBubbleElement> & {
+    text: string;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-chat-bubble': TSinchChatBubbleReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-chat-bubble': TSinchChatBubbleElement;
+    }
+}

package/chat-bubble/index.js

@@ -0,0 +1,59 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$text;
+
+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, getLiteralAttribute, updateAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#text{padding:12px 16px;border-radius:16px;font:var(--sinch-font-body);color:var(--sinch-color-stormy-500);margin:0;max-width:595px;box-sizing:border-box}:host([data-type=customer])>#text{background-color:var(--sinch-color-snow-500);border-top-left-radius:0}:host([data-type=agent-prev])>#text{background-color:var(--sinch-color-snow-700);border-top-right-radius:0}:host([data-type=agent])>#text{background-color:var(--sinch-color-honey-200);border-top-right-radius:0}</style><p id="text"></p>';
+export const typeValues = ['customer', 'agent', 'agent-prev'];
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-chat-bubble', (_$text = new WeakMap(), class extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$text, {
+      writable: true,
+      value: void 0
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'closed',
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#text'));
+  }
+
+  static get observedAttributes() {
+    return ['text'];
+  }
+
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'text':
+        {
+          _classPrivateFieldGet(this, _$text).textContent = newVal;
+          break;
+        }
+    }
+  }
+
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+
+  get type() {
+    return getLiteralAttribute(this, typeValues, 'data-type', null);
+  }
+
+}));

package/dialog/index.js

@@ -15,7 +15,7 @@ import dialogPolyfill from 'dialog-polyfill';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute } from '../utils';
 import '../icon-button';
 import '../icon/close';
-const templateHTML = '<style>dialog{position:absolute;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px;width:100%;max-width:512px;border-radius:4px;box-sizing:border-box;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);border:none;box-shadow:1px 2px 8px rgb(0 0 0 / 10%)}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.55}dialog::backdrop{background-color:#000;opacity:.55}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}#header{display:flex;flex-direction:row;justify-content:space-between;align-content:center;margin-bottom:16px}#caption{font:var(--sinch-font-title-3);color:var(--sinch-color-text-default)}#content-wrapper{max-height:50vh;overflow-y:auto}#close{all:initial;cursor:pointer;--sinch-size-icon:24px}#buttons{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:24px}</style><dialog><div id="header"><span id="caption"></span> <button id="close"><sinch-icon-close></sinch-icon-close></button></div><div id="content-wrapper"><slot name="content"></slot></div><div id="buttons"><slot name="buttons"></slot></div></dialog>';
+const templateHTML = '<style>dialog{position:absolute;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px;width:100%;max-width:512px;border-radius:4px;box-sizing:border-box;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);border:none;box-shadow:1px 2px 8px rgb(0 0 0 / 10%)}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.55}dialog::backdrop{background-color:#000;opacity:.55}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}#header{display:flex;flex-direction:row;justify-content:space-between;align-content:center;margin-bottom:16px}#caption{font:var(--sinch-font-title-m);color:var(--sinch-color-text-default)}#content-wrapper{max-height:50vh;overflow-y:auto}#close{all:initial;cursor:pointer;--sinch-size-icon:24px}#buttons{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:24px}</style><dialog><div id="header"><span id="caption"></span> <button id="close"><sinch-icon-close></sinch-icon-close></button></div><div id="content-wrapper"><slot name="content"></slot></div><div id="buttons"><slot name="buttons"></slot></div></dialog>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 
@@ -78,7 +78,6 @@ defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = n
     _classPrivateFieldInitSpec(this, _onBackdropClick, {
       writable: true,
       value: e => {
-        e.stopPropagation();
         const rect = this.dialogRect;
         const isInside = e.x >= rect.x && e.x < rect.x + rect.width && e.y >= rect.y && e.y < rect.y + rect.height;
 
@@ -187,7 +186,9 @@ function _dispatchCloseEvent2() {
 
 function _setOpen2(isOpen) {
   if (isOpen) {
-    _classPrivateFieldGet(this, _$dialog).showModal();
+    if (!getBooleanAttribute(_classPrivateFieldGet(this, _$dialog), 'open')) {
+      _classPrivateFieldGet(this, _$dialog).showModal();
+    }
   } else {
     _classPrivateFieldGet(this, _$dialog).close();
   }

package/dropdown/index.js

@@ -285,7 +285,9 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
 
 function _setOpen2(isOpen) {
   if (isOpen) {
-    _classPrivateFieldGet(this, _$listbox).showModal();
+    if (!getBooleanAttribute(_classPrivateFieldGet(this, _$listbox), 'open')) {
+      _classPrivateFieldGet(this, _$listbox).showModal();
+    }
   } else {
     _classPrivateFieldGet(this, _$listbox).close();
   }

package/index.d.ts

@@ -139,3 +139,10 @@ import './search-option';
 import './segment';
 import './segment-collapse';
 import './avatar';
+import './avatar-badge';
+import './avatar-status';
+import './chat-avatar';
+import './chat-bubble';
+import './chat-block';
+import './chat';
+import './title';

package/index.js

@@ -138,4 +138,11 @@ import './search';
 import './search-option';
 import './segment';
 import './segment-collapse';
-import './avatar';
+import './avatar';
+import './avatar-badge';
+import './avatar-status';
+import './chat-avatar';
+import './chat-bubble';
+import './chat-block';
+import './chat';
+import './title';

package/input/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, getLiteralAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{width:100%;box-sizing:border-box}#input{all:initial;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:4px;width:100%;height:48px;margin:2px 0;padding:0 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto)}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#input:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:focus{border-color:var(--sinch-color-stormy-600)}#input[type=password]{font-size:1.5em;letter-spacing:.1em}:host([invalidtext]:not([invalidtext=""])) #input:not(:disabled){border-color:var(--sinch-color-text-invalid)}#bottom,#top{display:flex;align-items:baseline}#top{height:24px}#bottom{height:20px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-4);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted)}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid)}::slotted(sinch-help-tooltip){align-self:center;margin:0 8px}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])){--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><slot name="tooltip"></slot><span id="optional"></span></div><input id="input" type="text"/><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{width:100%;box-sizing:border-box}#input{all:initial;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:4px;width:100%;height:48px;margin:2px 0;padding:0 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto)}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#input:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:focus{border-color:var(--sinch-color-stormy-600)}#input[type=password]{font-size:1.5em;letter-spacing:.1em}:host([invalidtext]:not([invalidtext=""])) #input:not(:disabled){border-color:var(--sinch-color-text-invalid)}#bottom,#top{display:flex;align-items:baseline}#top{height:24px}#bottom{height:20px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted)}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid)}::slotted(sinch-help-tooltip){align-self:center;margin:0 8px}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])){--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><slot name="tooltip"></slot><span id="optional"></span></div><input id="input" type="text"/><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
 const inputTypes = ['text', 'password'];
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "0.18.0",
+  "version": "0.20.0",
   "files": [
     "theme.css",
     "**/*/*.js",

package/search/index.d.ts

@@ -8,6 +8,9 @@ export declare type TSinchSearchElement = HTMLElement & {
     label: string | null;
     placeholder: string | null;
     maxVisibleItems: number | null;
+    selectionStart: HTMLInputElement['selectionStart'];
+    selectionEnd: HTMLInputElement['selectionEnd'];
+    selectionDirection: HTMLInputElement['selectionDirection'];
     readonly dropdownRect: TRect;
     focus(): void;
     blur(): void;

package/search/index.js

@@ -1,7 +1,7 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$label, _$input, _selectionStart, _selectionEnd, _$optionSlot, _$listbox, _$clear, _onInput, _onValueChange, _onClearMouseDown, _onClear, _onInputFocus, _onInputBlur, _onListboxClick, _onListboxKeyPress, _onListboxKeyDown, _onOptionSlotChange, _onExpand, _onCollapse, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _selectOption, _getOptionElements;
+var _$label, _$input, _selectionStart, _selectionEnd, _$optionSlot, _$listbox, _$clear, _isPendingDk, _onCompositionStart, _onInput, _onValueChange, _onClearMouseDown, _onClear, _onInputFocus, _onInputBlur, _onListboxClick, _onListboxKeyPress, _onListboxKeyDown, _onOptionSlotChange, _onExpand, _onCollapse, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _selectOption, _getOptionElements;
 
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 
@@ -13,7 +13,7 @@ function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(
 
 import { isSearchOptionElement } from '../search-option';
 import { attrValueToPixels, defineCustomElement, getAttribute, getIntegerAttribute, getRect, updateAttribute, updateIntegerAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:100%;box-sizing:border-box;--sinch-size-icon:24px}#label{display:none;font:var(--sinch-font-title-4);color:var(--sinch-color-text-default);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;height:24px;margin-bottom:2px}#input{all:initial;display:block;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:4px;width:100%;height:48px;padding:0 44px;padding-right:12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto)}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#input:focus{border-color:var(--sinch-color-stormy-600)}#icon-search{position:absolute;left:12px;top:12px;pointer-events:none;--sinch-color-icon:var(--sinch-color-stormy-500)}#clear{position:absolute;right:8px;top:8px;display:none;--sinch-color-icon:red}#clear:focus{--sinch-color-icon:var(--sinch-color-stormy-500)}:host([value]:not([value=""])) #clear{display:flex}:host([value]:not([value=""])) #input{padding-right:44px}#listbox{display:none;position:absolute;z-index:1;left:0;top:calc(100% + 8px);width:100%;box-sizing:border-box;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:1px 2px 4px rgb(0 0 0 / 15%);overflow-y:auto;contain:content}:host([aria-expanded=true]) #listbox{display:block}:host([label]:not([label=""])) #label{display:block}</style><label id="label" for="input"></label><div id="wrapper"><input id="input" type="text"/><sinch-icon-search id="icon-search"></sinch-icon-search><sinch-icon-button id="clear" small><sinch-icon-close id="icon-close" slot="icon"></sinch-icon-close></sinch-icon-button><div id="listbox"><slot name="option"></slot></div></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:100%;box-sizing:border-box;--sinch-size-icon:24px}#label{display:none;font:var(--sinch-font-title-s);color:var(--sinch-color-text-default);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;height:24px;margin-bottom:2px}#input{all:initial;display:block;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:4px;width:100%;height:48px;padding:0 44px;padding-right:12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto)}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#input:focus{border-color:var(--sinch-color-stormy-600)}#icon-search{position:absolute;left:12px;top:12px;pointer-events:none;--sinch-color-icon:var(--sinch-color-stormy-500)}#clear{position:absolute;right:8px;top:8px;display:none;--sinch-color-icon:red}#clear:focus{--sinch-color-icon:var(--sinch-color-stormy-500)}:host([value]:not([value=""])) #clear{display:flex}:host([value]:not([value=""])) #input{padding-right:44px}#listbox{display:none;position:absolute;z-index:1;left:0;top:calc(100% + 8px);width:100%;box-sizing:border-box;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:1px 2px 4px rgb(0 0 0 / 15%);overflow-y:auto;contain:content}:host([aria-expanded=true]) #listbox{display:block}:host([label]:not([label=""])) #label{display:block}</style><label id="label" for="input"></label><div id="wrapper"><input id="input" type="text"/><sinch-icon-search id="icon-search"></sinch-icon-search><sinch-icon-button id="clear" small><sinch-icon-close id="icon-close" slot="icon"></sinch-icon-close></sinch-icon-button><div id="listbox"><slot name="option"></slot></div></div>';
 import '../icon/search';
 import '../icon/close';
 import '../icon-button';
@@ -31,7 +31,7 @@ const findSelectedOption = elements => {
 
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-search', (_$label = new WeakMap(), _$input = new WeakMap(), _selectionStart = new WeakMap(), _selectionEnd = new WeakMap(), _$optionSlot = new WeakMap(), _$listbox = new WeakMap(), _$clear = new WeakMap(), _onInput = new WeakMap(), _onValueChange = new WeakSet(), _onClearMouseDown = new WeakMap(), _onClear = new WeakMap(), _onInputFocus = new WeakMap(), _onInputBlur = new WeakMap(), _onListboxClick = new WeakMap(), _onListboxKeyPress = new WeakMap(), _onListboxKeyDown = new WeakMap(), _onOptionSlotChange = new WeakMap(), _onExpand = new WeakSet(), _onCollapse = new WeakSet(), _getFirstOption = new WeakSet(), _getLastOption = new WeakSet(), _getNextOption = new WeakSet(), _getPrevOption = new WeakSet(), _selectOption = new WeakSet(), _getOptionElements = new WeakSet(), class extends HTMLElement {
+defineCustomElement('sinch-search', (_$label = new WeakMap(), _$input = new WeakMap(), _selectionStart = new WeakMap(), _selectionEnd = new WeakMap(), _$optionSlot = new WeakMap(), _$listbox = new WeakMap(), _$clear = new WeakMap(), _isPendingDk = new WeakMap(), _onCompositionStart = new WeakMap(), _onInput = new WeakMap(), _onValueChange = new WeakSet(), _onClearMouseDown = new WeakMap(), _onClear = new WeakMap(), _onInputFocus = new WeakMap(), _onInputBlur = new WeakMap(), _onListboxClick = new WeakMap(), _onListboxKeyPress = new WeakMap(), _onListboxKeyDown = new WeakMap(), _onOptionSlotChange = new WeakMap(), _onExpand = new WeakSet(), _onCollapse = new WeakSet(), _getFirstOption = new WeakSet(), _getLastOption = new WeakSet(), _getNextOption = new WeakSet(), _getPrevOption = new WeakSet(), _selectOption = new WeakSet(), _getOptionElements = new WeakSet(), class extends HTMLElement {
   constructor() {
     super();
 
@@ -88,6 +88,18 @@ defineCustomElement('sinch-search', (_$label = new WeakMap(), _$input = new Weak
       value: void 0
     });
 
+    _classPrivateFieldInitSpec(this, _isPendingDk, {
+      writable: true,
+      value: false
+    });
+
+    _classPrivateFieldInitSpec(this, _onCompositionStart, {
+      writable: true,
+      value: () => {
+        _classPrivateFieldSet(this, _isPendingDk, true);
+      }
+    });
+
     _classPrivateFieldInitSpec(this, _onInput, {
       writable: true,
       value: e => {
@@ -229,6 +241,8 @@ defineCustomElement('sinch-search', (_$label = new WeakMap(), _$input = new Weak
 
     _classPrivateFieldGet(this, _$input).addEventListener('input', _classPrivateFieldGet(this, _onInput));
 
+    _classPrivateFieldGet(this, _$input).addEventListener('compositionstart', _classPrivateFieldGet(this, _onCompositionStart));
+
     _classPrivateFieldGet(this, _$input).addEventListener('focus', _classPrivateFieldGet(this, _onInputFocus));
 
     _classPrivateFieldGet(this, _$input).addEventListener('blur', _classPrivateFieldGet(this, _onInputBlur));
@@ -249,6 +263,8 @@ defineCustomElement('sinch-search', (_$label = new WeakMap(), _$input = new Weak
   disconnectedCallback() {
     _classPrivateFieldGet(this, _$input).removeEventListener('input', _classPrivateFieldGet(this, _onInput));
 
+    _classPrivateFieldGet(this, _$input).removeEventListener('compositionstart', _classPrivateFieldGet(this, _onCompositionStart));
+
     _classPrivateFieldGet(this, _$input).removeEventListener('focus', _classPrivateFieldGet(this, _onInputFocus));
 
     _classPrivateFieldGet(this, _$input).removeEventListener('blur', _classPrivateFieldGet(this, _onInputBlur));
@@ -314,6 +330,30 @@ defineCustomElement('sinch-search', (_$label = new WeakMap(), _$input = new Weak
     return getRect(_classPrivateFieldGet(this, _$listbox));
   }
 
+  get selectionStart() {
+    return _classPrivateFieldGet(this, _$input).selectionStart;
+  }
+
+  set selectionStart(value) {
+    _classPrivateFieldGet(this, _$input).selectionStart = value;
+  }
+
+  get selectionEnd() {
+    return _classPrivateFieldGet(this, _$input).selectionEnd;
+  }
+
+  set selectionEnd(value) {
+    _classPrivateFieldGet(this, _$input).selectionEnd = value;
+  }
+
+  get selectionDirection() {
+    return _classPrivateFieldGet(this, _$input).selectionDirection;
+  }
+
+  set selectionDirection(value) {
+    _classPrivateFieldGet(this, _$input).selectionDirection = value;
+  }
+
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
       case 'value':
@@ -384,7 +424,12 @@ function _onValueChange2(nextValue) {
     const prevSelectionEnd = _classPrivateFieldGet(this, _selectionEnd);
 
     const isPrevCursorEnd = prevSelectionStart === prevSelectionEnd && prevSelectionStart === prevValue.length;
-    _classPrivateFieldGet(this, _$input).value = prevValue;
+
+    if (!_classPrivateFieldGet(this, _isPendingDk)) {
+      _classPrivateFieldGet(this, _$input).value = prevValue;
+    }
+
+    _classPrivateFieldSet(this, _isPendingDk, false);
 
     if (!isPrevCursorEnd) {
       _classPrivateFieldGet(this, _$input).setSelectionRange(prevSelectionStart, prevSelectionEnd);

package/segment/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, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;width:100%;border-radius:4px;box-sizing:border-box;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);border:none;box-shadow:1px 2px 8px rgb(0 0 0 / 10%)}#header{position:relative;display:flex;flex-direction:row;align-items:center;gap:16px;height:32px;padding:24px 32px 16px;--sinch-size-icon:32px}#caption{font:var(--sinch-font-title-2);color:var(--sinch-color-text-default);flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#content-wrapper{padding:0 32px}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;padding:16px 32px 24px}#info{position:relative;display:flex;flex-direction:row;align-items:center;gap:16px;z-index:1}:host([collapsed]:not([collapsed=false])) :is(#content-wrapper,#action){display:none}:host([collapsed]:not([collapsed=false])) #header{padding-bottom:24px}</style><div id="wrapper"><div id="header"><slot name="icon"></slot><span id="caption"></span><div id="info"><slot name="info"></slot></div><slot name="collapse"></slot></div><div id="content-wrapper"><slot name="content"></slot></div><div id="action"><slot name="action"></slot></div></div>';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;width:100%;border-radius:4px;box-sizing:border-box;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);border:none;box-shadow:1px 2px 8px rgb(0 0 0 / 10%)}#header{position:relative;display:flex;flex-direction:row;align-items:center;gap:16px;height:32px;padding:24px 32px 16px;--sinch-size-icon:32px}#caption{font:var(--sinch-font-title-l);color:var(--sinch-color-text-default);flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#content-wrapper{padding:0 32px}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;padding:16px 32px 24px}#info{position:relative;display:flex;flex-direction:row;align-items:center;gap:16px;z-index:1}:host([collapsed]:not([collapsed=false])) :is(#content-wrapper,#action){display:none}:host([collapsed]:not([collapsed=false])) #header{padding-bottom:24px}</style><div id="wrapper"><div id="header"><slot name="icon"></slot><span id="caption"></span><div id="info"><slot name="info"></slot></div><slot name="collapse"></slot></div><div id="content-wrapper"><slot name="content"></slot></div><div id="action"><slot name="action"></slot></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-segment', (_$caption = new WeakMap(), class extends HTMLElement {

package/select/index.js

@@ -15,7 +15,7 @@ import { isDropdownOptionElement } from '../dropdown-option';
 import '../select-option';
 import '../dropdown';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute, updateIntegerAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{position:relative}sinch-dropdown{display:block}#button{all:initial;display:flex;align-items:center;gap:8px;border:1px solid var(--sinch-color-stormy-200);border-radius:4px;box-sizing:border-box;width:100%;height:48px;margin:2px 0;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);cursor:pointer}#button:focus{border-color:var(--sinch-color-stormy-600)}#dropdown-icon{fill:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button[data-unselected]{color:var(--sinch-color-text-muted)}#button:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100);cursor:initial}#button:disabled #dropdown-icon{fill:var(--sinch-color-stormy-100)}:host([invalidtext]:not([invalidtext=""])) #button:not(:disabled){border-color:var(--sinch-color-text-invalid)}#content{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#bottom,#top{display:flex;align-items:baseline}#top{height:24px}#bottom{height:20px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-4);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted)}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid)}::slotted(sinch-help-tooltip){align-self:center;margin:0 8px}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])){--sinch-color-icon:var(--sinch-color-stormy-100)}#listbox{position:absolute;left:0;top:0;padding-top:74px;width:100%;display:none;list-style:none;outline:0;z-index:1}#listbox-body{font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);border:1px solid var(--sinch-color-stormy-500);border-top-width:0;border-bottom-left-radius:2px;border-bottom-right-radius:2px;width:100%;box-sizing:border-box;box-shadow:1px 2px 4px rgb(0 0 0 / 15%);overflow-y:auto}#button[aria-expanded=true]~#listbox{display:block}</style><div id="wrapper"><div id="top"><label id="label" for="dropdown"></label><slot name="tooltip"></slot><span id="optional"></span></div><sinch-dropdown id="dropdown"><button slot="target" id="button"><span id="content"></span> <svg id="dropdown-icon" width="12" height="8" aria-hidden="true"><path d="M1.41.59 6 5.17 10.59.59 12 2 6 8 0 2 1.41.59Z"/></svg></button><slot name="option" slot="option"></slot></sinch-dropdown><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{position:relative}sinch-dropdown{display:block}#button{all:initial;display:flex;align-items:center;gap:8px;border:1px solid var(--sinch-color-stormy-200);border-radius:4px;box-sizing:border-box;width:100%;height:48px;margin:2px 0;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);cursor:pointer}#button:focus{border-color:var(--sinch-color-stormy-600)}#dropdown-icon{fill:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button[data-unselected]{color:var(--sinch-color-text-muted)}#button:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100);cursor:initial}#button:disabled #dropdown-icon{fill:var(--sinch-color-stormy-100)}:host([invalidtext]:not([invalidtext=""])) #button:not(:disabled){border-color:var(--sinch-color-text-invalid)}#content{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#bottom,#top{display:flex;align-items:baseline}#top{height:24px}#bottom{height:20px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted)}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid)}::slotted(sinch-help-tooltip){align-self:center;margin:0 8px}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])){--sinch-color-icon:var(--sinch-color-stormy-100)}#listbox{position:absolute;left:0;top:0;padding-top:74px;width:100%;display:none;list-style:none;outline:0;z-index:1}#listbox-body{font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);border:1px solid var(--sinch-color-stormy-500);border-top-width:0;border-bottom-left-radius:2px;border-bottom-right-radius:2px;width:100%;box-sizing:border-box;box-shadow:1px 2px 4px rgb(0 0 0 / 15%);overflow-y:auto}#button[aria-expanded=true]~#listbox{display:block}</style><div id="wrapper"><div id="top"><label id="label" for="dropdown"></label><slot name="tooltip"></slot><span id="optional"></span></div><sinch-dropdown id="dropdown"><button slot="target" id="button"><span id="content"></span> <svg id="dropdown-icon" width="12" height="8" aria-hidden="true"><path d="M1.41.59 6 5.17 10.59.59 12 2 6 8 0 2 1.41.59Z"/></svg></button><slot name="option" slot="option"></slot></sinch-dropdown><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _$dropdown = new WeakMap(), _$optionSlot = new WeakMap(), _updateButtonContent = new WeakSet(), _onValueChange = new WeakMap(), _getOptionWithValue = new WeakSet(), _onLabelClick = new WeakMap(), class extends HTMLElement {

package/table-head-cell/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, getLiteralAttribute, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:table-cell;border-bottom:1px solid var(--sinch-color-stormy-200);height:48px;vertical-align:middle;padding:0 6px;--sinch-color-icon:var(--sinch-color-stormy-200)}:host(:first-child){padding-left:8px}:host(:last-child){padding-right:8px}#wrapper{position:relative;width:100%;height:100%;box-sizing:border-box;font:var(--sinch-font-title-4);color:var(--sinch-color-stormy-300);display:flex;align-items:center;gap:4px}#text{flex-shrink:1;min-width:0;font:var(--sinch-font-title-4);color:var(--sinch-color-stormy-200);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([align=center])>#wrapper{justify-content:center}:host([align=end]) #text{margin-left:auto}:host(:is([text=""],:not([text])))>#wrapper{display:none}:host([fit]:not([fit=false])){width:1px}::slotted(sinch-help-tooltip){position:relative;z-index:1}</style><slot name="checkbox"></slot><div id="wrapper"><span id="text"></span><slot name="tooltip"></slot><slot name="sort"></slot></div>';
+const templateHTML = '<style>:host{display:table-cell;border-bottom:1px solid var(--sinch-color-stormy-200);height:48px;vertical-align:middle;padding:0 6px;--sinch-color-icon:var(--sinch-color-stormy-200)}:host(:first-child){padding-left:8px}:host(:last-child){padding-right:8px}#wrapper{position:relative;width:100%;height:100%;box-sizing:border-box;font:var(--sinch-font-title-s);color:var(--sinch-color-stormy-300);display:flex;align-items:center;gap:4px}#text{flex-shrink:1;min-width:0;font:var(--sinch-font-title-s);color:var(--sinch-color-stormy-200);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([align=center])>#wrapper{justify-content:center}:host([align=end]) #text{margin-left:auto}:host(:is([text=""],:not([text])))>#wrapper{display:none}:host([fit]:not([fit=false])){width:1px}::slotted(sinch-help-tooltip){position:relative;z-index:1}</style><slot name="checkbox"></slot><div id="wrapper"><span id="text"></span><slot name="tooltip"></slot><slot name="sort"></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 const alignValues = ['start', 'center', 'end'];

package/tabs-option/index.js

@@ -7,7 +7,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, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}*{pointer-events:none}#wrapper{display:flex;flex-direction:row;align-items:center;gap:12px;position:relative;width:100%;height:42px;padding:8px 20px;box-sizing:border-box;box-shadow:0 1px 0 0 var(--sinch-color-stormy-100);color:var(--sinch-color-stormy-500);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:16px}#content{font:var(--sinch-font-title-4);flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([checked]) #wrapper{box-shadow:0 2px 0 0 var(--sinch-color-stormy-500)}input{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer}:host([disabled]:not([disabled=false])) #wrapper{color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}input:disabled{cursor:unset}</style><div id="wrapper"><slot name="icon"></slot><label for="input" id="content" aria-hidden="true"></label> <input id="input" type="radio" aria-hidden="true"/></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}*{pointer-events:none}#wrapper{display:flex;flex-direction:row;align-items:center;gap:12px;position:relative;width:100%;height:42px;padding:8px 20px;box-sizing:border-box;box-shadow:0 1px 0 0 var(--sinch-color-stormy-100);color:var(--sinch-color-stormy-500);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:16px}#content{font:var(--sinch-font-title-s);flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([checked]) #wrapper{box-shadow:0 2px 0 0 var(--sinch-color-stormy-500)}input{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer}:host([disabled]:not([disabled=false])) #wrapper{color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}input:disabled{cursor:unset}</style><div id="wrapper"><slot name="icon"></slot><label for="input" id="content" aria-hidden="true"></label> <input id="input" type="radio" aria-hidden="true"/></div>';
 export const isTabsOptionElement = element => {
   return element instanceof Element && element.tagName === 'SINCH-TABS-OPTION';
 };

package/textarea/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, getIntegerAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{width:100%;box-sizing:border-box}#input{all:initial;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:4px;width:100%;margin:2px 0;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto);resize:none}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#input:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:focus{border-color:var(--sinch-color-stormy-600)}:host([resizable]:not([resizable=false])) #input{resize:vertical}:host([invalidtext]:not([invalidtext=""])) #input:not(:disabled){border-color:var(--sinch-color-text-invalid)}#bottom,#top{display:flex;align-items:baseline}#top{height:24px}#bottom{height:20px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-4);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted)}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid)}::slotted(sinch-help-tooltip){align-self:center;margin:0 8px}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])){--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><slot name="tooltip"></slot><span id="optional"></span></div><textarea id="input"></textarea><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{width:100%;box-sizing:border-box}#input{all:initial;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:4px;width:100%;margin:2px 0;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto);resize:none}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#input:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:focus{border-color:var(--sinch-color-stormy-600)}:host([resizable]:not([resizable=false])) #input{resize:vertical}:host([invalidtext]:not([invalidtext=""])) #input:not(:disabled){border-color:var(--sinch-color-text-invalid)}#bottom,#top{display:flex;align-items:baseline}#top{height:24px}#bottom{height:20px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted)}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid)}::slotted(sinch-help-tooltip){align-self:center;margin:0 8px}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])){--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><slot name="tooltip"></slot><span id="optional"></span></div><textarea id="input"></textarea><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _selectionStart = new WeakMap(), _selectionEnd = new WeakMap(), _isPendingDk = new WeakMap(), _onCompositionStart = new WeakMap(), _onInput = new WeakMap(), class extends HTMLElement {

package/theme.css

@@ -70,11 +70,11 @@
   --sinch-color-bolt-200: #FFE6B3;
   --sinch-color-transparent: transparent;
   --sinch-font-hero: 700 56px/72px "Gilroy", "Arial", "sans-serif";
-  --sinch-font-title-1: 600 40px/48px "Gilroy", "Arial", "sans-serif";
-  --sinch-font-title-2: 600 24px/32px "Gilroy", "Arial", "sans-serif";
-  --sinch-font-title-3: 600 20px/24px "Gilroy", "Arial", "sans-serif";
-  --sinch-font-title-4: 600 16px/24px "Gilroy", "Arial", "sans-serif";
-  --sinch-font-title-5: 700 14px/22px "Gilroy", "Arial", "sans-serif";
+  --sinch-font-title-xl: 600 40px/48px "Gilroy", "Arial", "sans-serif";
+  --sinch-font-title-l: 600 24px/32px "Gilroy", "Arial", "sans-serif";
+  --sinch-font-title-m: 600 20px/24px "Gilroy", "Arial", "sans-serif";
+  --sinch-font-title-s: 600 16px/24px "Gilroy", "Arial", "sans-serif";
+  --sinch-font-title-xs: 600 14px/22px "Gilroy", "Arial", "sans-serif";
   --sinch-font-body: 400 16px/24px "Gilroy", "Arial", "sans-serif";
   --sinch-font-emphasized-body: 600 16px/24px "Gilroy", "Arial", "sans-serif";
   --sinch-font-small-text: 400 14px/22px "Gilroy", "Arial", "sans-serif";

package/title/index.d.ts

@@ -0,0 +1,26 @@
+import '../icon/cancel';
+import type { TSinchElementReact } from '../types';
+declare const typeValues: readonly ["xl", "l", "m", "s", "xs"];
+declare const levelValues: readonly ["1", "2", "3", "4", "5", "6"];
+export declare type TSinchTitleType = typeof typeValues[number];
+export declare type TSinchTitleLevel = typeof levelValues[number];
+export declare type TSinchTitleElement = HTMLElement & {
+    text: string;
+    type: TSinchTitleType;
+};
+export declare type TSinchTitleReact = TSinchElementReact<TSinchTitleElement> & {
+    text: string;
+    type: TSinchTitleType;
+    'aria-level': TSinchTitleLevel;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-title': TSinchTitleReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-title': TSinchTitleElement;
+    }
+}
+export {};

package/title/index.js

@@ -0,0 +1,96 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$text;
+
+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 '../icon/cancel';
+import { defineCustomElement, getAttribute, updateAttribute, updateLiteralAttribute, getLiteralAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block}:host([type=xl])>*{font:var(--sinch-font-title-xl)}:host([type="l"])>*{font:var(--sinch-font-title-l)}:host([type="m"])>*{font:var(--sinch-font-title-m)}:host([type="s"])>*{font:var(--sinch-font-title-s)}:host([type=xs])>*{font:var(--sinch-font-title-xs)}</style><span id="text"></span>';
+const typeValues = ['xl', 'l', 'm', 's', 'xs'];
+const levelValues = ['1', '2', '3', '4', '5', '6'];
+
+const assertLevel = value => {
+  if (value === null || !levelValues.includes(value)) {
+    throw new Error(`sinch-title: invalid aria-level attribute: ${value}`);
+  }
+};
+
+const assertType = value => {
+  if (value === null || !typeValues.includes(value)) {
+    throw new Error(`sinch-title: invalid type attribute: ${value}`);
+  }
+};
+
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-title', (_$text = new WeakMap(), class extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$text, {
+      writable: true,
+      value: void 0
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'closed',
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#text'));
+  }
+
+  connectedCallback() {
+    this.setAttribute('role', 'heading');
+    assertLevel(this.getAttribute('aria-level'));
+    assertType(this.getAttribute('type'));
+  }
+
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+
+  set type(value) {
+    updateLiteralAttribute(this, typeValues, 'type', value);
+  }
+
+  get type() {
+    return getLiteralAttribute(this, typeValues, 'type');
+  }
+
+  static get observedAttributes() {
+    return ['text', 'type', 'aria-level'];
+  }
+
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'text':
+        {
+          _classPrivateFieldGet(this, _$text).textContent = newVal;
+          break;
+        }
+
+      case 'aria-level':
+        {
+          assertLevel(newVal);
+          break;
+        }
+
+      case 'type':
+        {
+          assertType(newVal);
+          break;
+        }
+    }
+  }
+
+}));

package/utils.d.ts

@@ -12,7 +12,7 @@ export declare function getAttribute($element: Element, attrName: string, defaul
 export declare function getAttribute($element: Element, attrName: string, defaultValue: string): string;
 export declare const isLiteralValue: <T extends readonly string[]>(literals: T, value: string | null | undefined) => value is T[number];
 export declare const updateLiteralAttribute: <T extends readonly string[]>($element: Element, literals: T, attrName: string, attrValue: string | null | undefined) => void;
-export declare function getLiteralAttribute<T extends readonly string[]>($element: Element, literals: T, attrName: string): T[number] | undefined;
+export declare function getLiteralAttribute<T extends readonly string[]>($element: Element, literals: T, attrName: string): T[number];
 export declare function getLiteralAttribute<T extends readonly string[]>($element: Element, literals: T, attrName: string, defaultValue: null): T[number] | null;
 export declare function getLiteralAttribute<T extends readonly string[]>($element: Element, literals: T, attrName: string, defaultValue: T[number]): T[number];
 declare type TRange = {

package/utils.js

@@ -66,7 +66,16 @@ export const updateLiteralAttribute = ($element, literals, attrName, attrValue)
 };
 export function getLiteralAttribute($element, literals, attrName, defaultValue) {
   const attrValue = $element.getAttribute(attrName);
-  return isLiteralValue(literals, attrValue) ? attrValue : defaultValue;
+
+  if (isLiteralValue(literals, attrValue)) {
+    return attrValue;
+  }
+
+  if (typeof defaultValue === 'undefined') {
+    throw new Error(`Invalid attribute value: ${attrName} = ${attrValue}`);
+  }
+
+  return defaultValue;
 }
 
 const applyRange = (value, range) => {