@nectary/components 0.29.1 → 0.31.0

package/dialog/index.js

@@ -1,7 +1,7 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$dialog, _$closeButton, _$caption, _isConnected, _onCancel, _onCloseClick, _onBackdropClick, _onCloseReactHandler, _dispatchCloseEvent, _setOpen;
+var _$dialog, _$closeButton, _$caption, _isConnected, _prevOverflowValue, _onCancel, _onCloseClick, _onBackdropClick, _onCloseReactHandler, _dispatchCloseEvent, _setOpen;
 
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 
@@ -15,10 +15,10 @@ import dialogPolyfill from 'dialog-polyfill';
 import '../icon-button';
 import '../icons/close';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute, getReactEventHandler, NectaryElement } from '../utils';
-const templateHTML = '<style>dialog{position:absolute;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px;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 rgba(0,0,0,.1)}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-items:flex-start;margin-bottom:16px}#caption{font:var(--sinch-font-title-m);color:var(--sinch-color-text-default);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}#content-wrapper{min-height:0;overflow:auto;max-height:var(--sinch-dialog-max-height,50vh)}#buttons{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:24px}sinch-icon-button{transform:translate(4px,-4px)}</style><dialog><div id="header"><span id="caption"></span><sinch-icon-button id="close" small tabindex="0"><sinch-icon-close slot="icon"></sinch-icon-close></sinch-icon-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:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px;max-width:var(--sinch-dialog-max-width,512px);max-height:unset;border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;contain:content;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);border:none;box-shadow:var(--sinch-elevation-level-3)}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-items:flex-start;margin-bottom:16px}#caption{font:var(--sinch-font-title-m);color:var(--sinch-color-text-default);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}#content-wrapper{min-height:0;overflow:auto;max-height:var(--sinch-dialog-max-height,50vh)}#buttons{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:24px}sinch-icon-button{transform:translate(4px,-4px)}</style><dialog><div id="header"><span id="caption"></span><sinch-icon-button id="close" small tabindex="0"><sinch-icon-close slot="icon"></sinch-icon-close></sinch-icon-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;
-defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = new WeakMap(), _$caption = new WeakMap(), _isConnected = new WeakMap(), _onCancel = new WeakMap(), _onCloseClick = new WeakMap(), _onBackdropClick = new WeakMap(), _onCloseReactHandler = new WeakMap(), _dispatchCloseEvent = new WeakSet(), _setOpen = new WeakSet(), class extends NectaryElement {
+defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = new WeakMap(), _$caption = new WeakMap(), _isConnected = new WeakMap(), _prevOverflowValue = new WeakMap(), _onCancel = new WeakMap(), _onCloseClick = new WeakMap(), _onBackdropClick = new WeakMap(), _onCloseReactHandler = new WeakMap(), _dispatchCloseEvent = new WeakSet(), _setOpen = new WeakSet(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -46,6 +46,11 @@ defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = n
       value: false
     });
 
+    _classPrivateFieldInitSpec(this, _prevOverflowValue, {
+      writable: true,
+      value: ''
+    });
+
     _classPrivateFieldInitSpec(this, _onCancel, {
       writable: true,
       value: e => {
@@ -67,10 +72,16 @@ defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = n
     _classPrivateFieldInitSpec(this, _onBackdropClick, {
       writable: true,
       value: e => {
+        if (e.target !== _classPrivateFieldGet(this, _$dialog)) {
+          return;
+        }
+
         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;
 
         if (!isInside) {
+          e.stopPropagation();
+
           _classPrivateMethodGet(this, _dispatchCloseEvent, _dispatchCloseEvent2).call(this);
         }
       }
@@ -132,7 +143,8 @@ defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = n
     _classPrivateFieldGet(this, _$closeButton).addEventListener('click', _classPrivateFieldGet(this, _onCloseClick));
 
     this.addEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
-    this.addEventListener('click', _classPrivateFieldGet(this, _onBackdropClick));
+
+    _classPrivateFieldGet(this, _$dialog).addEventListener('click', _classPrivateFieldGet(this, _onBackdropClick));
 
     _classPrivateFieldGet(this, _$dialog).addEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
 
@@ -147,7 +159,8 @@ defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = n
     _classPrivateFieldGet(this, _$closeButton).removeEventListener('click', _classPrivateFieldGet(this, _onCloseClick));
 
     this.removeEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
-    this.removeEventListener('click', _classPrivateFieldGet(this, _onBackdropClick));
+
+    _classPrivateFieldGet(this, _$dialog).removeEventListener('click', _classPrivateFieldGet(this, _onBackdropClick));
 
     _classPrivateFieldGet(this, _$dialog).removeEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
 
@@ -174,8 +187,13 @@ function _setOpen2(isOpen) {
   if (isOpen) {
     if (!getBooleanAttribute(_classPrivateFieldGet(this, _$dialog), 'open')) {
       _classPrivateFieldGet(this, _$dialog).showModal();
+
+      _classPrivateFieldSet(this, _prevOverflowValue, document.body.style.overflow);
+
+      document.body.style.overflow = 'hidden';
     }
   } else {
     _classPrivateFieldGet(this, _$dialog).close?.();
+    document.body.style.overflow = _classPrivateFieldGet(this, _prevOverflowValue);
   }
 }

package/dropdown-checkbox-option/index.js

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

package/icon-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, isAttrTrue, NectaryElement, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}button{all:initial;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:48px;height:48px;border-radius:4px;border:1px solid transparent;background-color:transparent;cursor:pointer;--sinch-size-icon:24px;--sinch-color-icon:var(--sinch-icon-button-color, var(--sinch-color-stormy-500))}button:focus{border-color:var(--sinch-color-stormy-500)}button:hover{background-color:var(--sinch-color-snow-500)}button:active{background-color:var(--sinch-color-snow-600)}button:disabled{background-color:transparent;cursor:initial;--sinch-color-spinner-bg:var(--sinch-color-snow-200);--sinch-color-spinner-fg:var(--sinch-color-stormy-200);--sinch-color-icon:var(--sinch-color-stormy-100)}:host([small]:not([small=false]))>button{width:32px;height:32px}button>*{pointer-events:none}</style><button><slot name="icon"></slot></button>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}button{all:initial;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:48px;height:48px;border-radius:var(--sinch-shape-radius-s);border:1px solid transparent;background-color:transparent;cursor:pointer;--sinch-size-icon:24px;--sinch-color-icon:var(--sinch-icon-button-color, var(--sinch-color-stormy-500))}button:focus{border-color:var(--sinch-color-stormy-500)}button:hover{background-color:var(--sinch-color-snow-500)}button:active{background-color:var(--sinch-color-snow-600)}button:disabled{background-color:transparent;cursor:initial;--sinch-color-spinner-bg:var(--sinch-color-snow-200);--sinch-color-spinner-fg:var(--sinch-color-stormy-200);--sinch-color-icon:var(--sinch-color-stormy-100)}:host([small]:not([small=false]))>button{width:32px;height:32px}button>*{pointer-events:none}</style><button><slot name="icon"></slot></button>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-icon-button', (_$button = new WeakMap(), class extends NectaryElement {

package/icons/create-icon-class.d.ts

@@ -1,307 +1 @@
-export declare const createIconClass: (templateHTML: string) => {
-    new (): {
-        $svg: SVGElement;
-        connectedCallback(): void;
-        attachShadow(options?: Partial<ShadowRootInit> | undefined): ShadowRoot;
-        accessKey: string;
-        readonly accessKeyLabel: string;
-        autocapitalize: string;
-        dir: string;
-        draggable: boolean;
-        hidden: boolean;
-        innerText: string;
-        lang: string;
-        readonly offsetHeight: number;
-        readonly offsetLeft: number;
-        readonly offsetParent: Element | null;
-        readonly offsetTop: number;
-        readonly offsetWidth: number;
-        outerText: string;
-        spellcheck: boolean;
-        title: string;
-        translate: boolean;
-        attachInternals(): ElementInternals;
-        click(): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
-        removeEventListener<K_1 extends keyof HTMLElementEventMap>(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
-        readonly attributes: NamedNodeMap;
-        readonly classList: DOMTokenList;
-        className: string;
-        readonly clientHeight: number;
-        readonly clientLeft: number;
-        readonly clientTop: number;
-        readonly clientWidth: number;
-        id: string;
-        readonly localName: string;
-        readonly namespaceURI: string | null;
-        onfullscreenchange: ((this: Element, ev: Event) => any) | null;
-        onfullscreenerror: ((this: Element, ev: Event) => any) | null;
-        outerHTML: string;
-        readonly ownerDocument: Document;
-        readonly part: DOMTokenList;
-        readonly prefix: string | null;
-        readonly scrollHeight: number;
-        scrollLeft: number;
-        scrollTop: number;
-        readonly scrollWidth: number;
-        readonly shadowRoot: ShadowRoot | null;
-        slot: string;
-        readonly tagName: string;
-        closest<K_2 extends keyof HTMLElementTagNameMap>(selector: K_2): HTMLElementTagNameMap[K_2] | null;
-        closest<K_3 extends keyof SVGElementTagNameMap>(selector: K_3): SVGElementTagNameMap[K_3] | null;
-        closest<E extends Element = Element>(selectors: string): E | null;
-        getAttribute(qualifiedName: string): string | null;
-        getAttributeNS(namespace: string | null, localName: string): string | null;
-        getAttributeNames(): string[];
-        getAttributeNode(qualifiedName: string): Attr | null;
-        getAttributeNodeNS(namespace: string | null, localName: string): Attr | null;
-        getBoundingClientRect(): DOMRect;
-        getClientRects(): DOMRectList;
-        getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;
-        getElementsByTagName<K_4 extends keyof HTMLElementTagNameMap>(qualifiedName: K_4): HTMLCollectionOf<HTMLElementTagNameMap[K_4]>;
-        getElementsByTagName<K_5 extends keyof SVGElementTagNameMap>(qualifiedName: K_5): HTMLCollectionOf<SVGElementTagNameMap[K_5]>;
-        getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;
-        getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;
-        getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;
-        getElementsByTagNameNS(namespace: string | null, localName: string): HTMLCollectionOf<Element>;
-        hasAttribute(qualifiedName: string): boolean;
-        hasAttributeNS(namespace: string | null, localName: string): boolean;
-        hasAttributes(): boolean;
-        hasPointerCapture(pointerId: number): boolean;
-        insertAdjacentElement(where: InsertPosition, element: Element): Element | null;
-        insertAdjacentHTML(position: InsertPosition, text: string): void;
-        insertAdjacentText(where: InsertPosition, data: string): void;
-        matches(selectors: string): boolean;
-        releasePointerCapture(pointerId: number): void;
-        removeAttribute(qualifiedName: string): void;
-        removeAttributeNS(namespace: string | null, localName: string): void;
-        removeAttributeNode(attr: Attr): Attr;
-        requestFullscreen(options?: FullscreenOptions | undefined): Promise<void>;
-        requestPointerLock(): void;
-        scroll(options?: ScrollToOptions | undefined): void;
-        scroll(x: number, y: number): void;
-        scrollBy(options?: ScrollToOptions | undefined): void;
-        scrollBy(x: number, y: number): void;
-        scrollIntoView(arg?: boolean | ScrollIntoViewOptions | undefined): void;
-        scrollTo(options?: ScrollToOptions | undefined): void;
-        scrollTo(x: number, y: number): void;
-        setAttribute(qualifiedName: string, value: string): void;
-        setAttributeNS(namespace: string | null, qualifiedName: string, value: string): void;
-        setAttributeNode(attr: Attr): Attr | null;
-        setAttributeNodeNS(attr: Attr): Attr | null;
-        setPointerCapture(pointerId: number): void;
-        toggleAttribute(qualifiedName: string, force?: boolean | undefined): boolean;
-        webkitMatchesSelector(selectors: string): boolean;
-        readonly baseURI: string;
-        readonly childNodes: NodeListOf<ChildNode>;
-        readonly firstChild: ChildNode | null;
-        readonly isConnected: boolean;
-        readonly lastChild: ChildNode | null;
-        readonly nextSibling: ChildNode | null;
-        readonly nodeName: string;
-        readonly nodeType: number;
-        nodeValue: string | null;
-        readonly parentElement: HTMLElement | null;
-        readonly parentNode: ParentNode | null;
-        readonly previousSibling: ChildNode | null;
-        textContent: string | null;
-        appendChild<T extends Node>(node: T): T;
-        cloneNode(deep?: boolean | undefined): Node;
-        compareDocumentPosition(other: Node): number;
-        contains(other: Node | null): boolean;
-        getRootNode(options?: GetRootNodeOptions | undefined): Node;
-        hasChildNodes(): boolean;
-        insertBefore<T_1 extends Node>(node: T_1, child: Node | null): T_1;
-        isDefaultNamespace(namespace: string | null): boolean;
-        isEqualNode(otherNode: Node | null): boolean;
-        isSameNode(otherNode: Node | null): boolean;
-        lookupNamespaceURI(prefix: string | null): string | null;
-        lookupPrefix(namespace: string | null): string | null;
-        normalize(): void;
-        removeChild<T_2 extends Node>(child: T_2): T_2;
-        replaceChild<T_3 extends Node>(node: Node, child: T_3): T_3;
-        readonly ATTRIBUTE_NODE: number;
-        readonly CDATA_SECTION_NODE: number;
-        readonly COMMENT_NODE: number;
-        readonly DOCUMENT_FRAGMENT_NODE: number;
-        readonly DOCUMENT_NODE: number;
-        readonly DOCUMENT_POSITION_CONTAINED_BY: number;
-        readonly DOCUMENT_POSITION_CONTAINS: number;
-        readonly DOCUMENT_POSITION_DISCONNECTED: number;
-        readonly DOCUMENT_POSITION_FOLLOWING: number;
-        readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: number;
-        readonly DOCUMENT_POSITION_PRECEDING: number;
-        readonly DOCUMENT_TYPE_NODE: number;
-        readonly ELEMENT_NODE: number;
-        readonly ENTITY_NODE: number;
-        readonly ENTITY_REFERENCE_NODE: number;
-        readonly NOTATION_NODE: number;
-        readonly PROCESSING_INSTRUCTION_NODE: number;
-        readonly TEXT_NODE: number;
-        dispatchEvent(event: Event): boolean;
-        ariaAtomic: string | null;
-        ariaAutoComplete: string | null;
-        ariaBusy: string | null;
-        ariaChecked: string | null;
-        ariaColCount: string | null;
-        ariaColIndex: string | null;
-        ariaColSpan: string | null;
-        ariaCurrent: string | null;
-        ariaDisabled: string | null;
-        ariaExpanded: string | null;
-        ariaHasPopup: string | null;
-        ariaHidden: string | null;
-        ariaKeyShortcuts: string | null;
-        ariaLabel: string | null;
-        ariaLevel: string | null;
-        ariaLive: string | null;
-        ariaModal: string | null;
-        ariaMultiLine: string | null;
-        ariaMultiSelectable: string | null;
-        ariaOrientation: string | null;
-        ariaPlaceholder: string | null;
-        ariaPosInSet: string | null;
-        ariaPressed: string | null;
-        ariaReadOnly: string | null;
-        ariaRequired: string | null;
-        ariaRoleDescription: string | null;
-        ariaRowCount: string | null;
-        ariaRowIndex: string | null;
-        ariaRowSpan: string | null;
-        ariaSelected: string | null;
-        ariaSetSize: string | null;
-        ariaSort: string | null;
-        ariaValueMax: string | null;
-        ariaValueMin: string | null;
-        ariaValueNow: string | null;
-        ariaValueText: string | null;
-        animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions | undefined): Animation;
-        getAnimations(options?: GetAnimationsOptions | undefined): Animation[];
-        after(...nodes: (string | Node)[]): void;
-        before(...nodes: (string | Node)[]): void;
-        remove(): void;
-        replaceWith(...nodes: (string | Node)[]): void;
-        innerHTML: string;
-        readonly nextElementSibling: Element | null;
-        readonly previousElementSibling: Element | null;
-        readonly childElementCount: number;
-        readonly children: HTMLCollection;
-        readonly firstElementChild: Element | null;
-        readonly lastElementChild: Element | null;
-        append(...nodes: (string | Node)[]): void;
-        prepend(...nodes: (string | Node)[]): void;
-        querySelector<K_6 extends keyof HTMLElementTagNameMap>(selectors: K_6): HTMLElementTagNameMap[K_6] | null;
-        querySelector<K_7 extends keyof SVGElementTagNameMap>(selectors: K_7): SVGElementTagNameMap[K_7] | null;
-        querySelector<E_1 extends Element = Element>(selectors: string): E_1 | null;
-        querySelectorAll<K_8 extends keyof HTMLElementTagNameMap>(selectors: K_8): NodeListOf<HTMLElementTagNameMap[K_8]>;
-        querySelectorAll<K_9 extends keyof SVGElementTagNameMap>(selectors: K_9): NodeListOf<SVGElementTagNameMap[K_9]>;
-        querySelectorAll<E_2 extends Element = Element>(selectors: string): NodeListOf<E_2>;
-        replaceChildren(...nodes: (string | Node)[]): void;
-        readonly assignedSlot: HTMLSlotElement | null;
-        oncopy: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
-        oncut: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
-        onpaste: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
-        readonly style: CSSStyleDeclaration;
-        contentEditable: string;
-        enterKeyHint: string;
-        inputMode: string;
-        readonly isContentEditable: boolean;
-        onabort: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
-        onanimationcancel: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
-        onanimationend: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
-        onanimationiteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
-        onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
-        onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-        onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
-        oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        oncanplaythrough: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-        onclose: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        oncontextmenu: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-        oncuechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        ondblclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-        ondrag: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
-        ondragend: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
-        ondragenter: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
-        ondragleave: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
-        ondragover: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
-        ondragstart: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
-        ondrop: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
-        ondurationchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onemptied: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onended: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onerror: OnErrorEventHandler;
-        onfocus: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
-        onformdata: ((this: GlobalEventHandlers, ev: FormDataEvent) => any) | null;
-        ongotpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-        oninput: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        oninvalid: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onkeydown: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
-        onkeypress: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
-        onkeyup: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
-        onload: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onloadeddata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onloadedmetadata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onloadstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onlostpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-        onmousedown: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-        onmouseenter: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-        onmouseleave: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-        onmousemove: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-        onmouseout: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-        onmouseover: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-        onmouseup: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-        onpause: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onplaying: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onpointercancel: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-        onpointerdown: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-        onpointerenter: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-        onpointerleave: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-        onpointermove: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-        onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-        onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-        onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-        onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent<EventTarget>) => any) | null;
-        onratechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
-        onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onsecuritypolicyviolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null;
-        onseeked: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onseeking: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onselect: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onselectionchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onselectstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onslotchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onstalled: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onsubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null;
-        onsuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        ontimeupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        ontoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
-        ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
-        ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
-        ontouchstart?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
-        ontransitioncancel: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
-        ontransitionend: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
-        ontransitionrun: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
-        ontransitionstart: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
-        onvolumechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onwaiting: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onwebkitanimationend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onwebkitanimationiteration: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onwebkitanimationstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onwebkittransitionend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onwheel: ((this: GlobalEventHandlers, ev: WheelEvent) => any) | null;
-        autofocus: boolean;
-        readonly dataset: DOMStringMap;
-        nonce?: string | undefined;
-        tabIndex: number;
-        blur(): void;
-        focus(options?: FocusOptions | undefined): void;
-    };
-};
+export declare const createIconClass: (templateHTML: string) => CustomElementConstructor;

package/icons/keyboard-double-arrow-left/index.d.ts

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

package/icons/keyboard-double-arrow-left/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M18.29 17.29a.996.996 0 0 0 0-1.41L14.42 12l3.88-3.88a.996.996 0 1 0-1.41-1.41L12.3 11.3a.996.996 0 0 0 0 1.41l4.59 4.59c.38.38 1.01.38 1.4-.01z"/><path d="M11.7 17.29a.996.996 0 0 0 0-1.41L7.83 12l3.88-3.88a.996.996 0 1 0-1.41-1.41L5.71 11.3a.996.996 0 0 0 0 1.41l4.59 4.59c.38.38 1.01.38 1.4-.01z"/></svg>';
+defineCustomElement('sinch-icon-keyboard-double-arrow-left', createIconClass(templateHTML));

package/icons/keyboard-double-arrow-right/index.d.ts

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

package/icons/keyboard-double-arrow-right/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5.7 6.71a.996.996 0 0 0 0 1.41L9.58 12 5.7 15.88a.996.996 0 1 0 1.41 1.41l4.59-4.59a.996.996 0 0 0 0-1.41L7.12 6.71c-.39-.39-1.03-.39-1.42 0z"/><path d="M12.29 6.71a.996.996 0 0 0 0 1.41L16.17 12l-3.88 3.88a.996.996 0 1 0 1.41 1.41l4.59-4.59a.996.996 0 0 0 0-1.41L13.7 6.7c-.38-.38-1.02-.38-1.41.01z"/></svg>';
+defineCustomElement('sinch-icon-keyboard-double-arrow-right', createIconClass(templateHTML));

package/icons-branded/ai/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchIconBrandedElement, TSinchIconBrandedReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-icon-branded-ai': TSinchIconBrandedReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-icon-branded-ai': TSinchIconBrandedElement;
+    }
+}

package/icons-branded/ai/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true"><path d="M23 26.6c-1.5-.08-2.71-1.3-2.71-2.8 0-1.5 1.2-2.72 2.71-2.8v-2c-2.61.08-4.71 2.2-4.71 4.8 0 2.6 2.1 4.72 4.71 4.8v-2Z" class="accent"/><path d="M23 36.93c-.32-.05-.63-.16-.86-.39-.29-.29-.46-.68-.46-1.09v-.14a3.1 3.1 0 0 0-.58-1.74c-.37-.51-.87-.89-1.41-1.08-.4-.17-.83-.26-1.25-.26-.19 0-.37.02-.56.05-.62.11-1.18.4-1.63.84l-.08.08a1.585 1.585 0 0 1-2.57-.5 1.518 1.518 0 0 1 .34-1.68l.09-.09c.44-.45.73-1 .84-1.62.1-.54.05-1.1-.14-1.61-.01-.1-.04-.2-.08-.29-.24-.56-.64-1.03-1.15-1.36-.5-.33-1.1-.5-1.71-.5h-.22c-.42 0-.82-.17-1.12-.46a1.536 1.536 0 0 1 .01-2.18c.29-.29.7-.46 1.12-.46h.12c.61 0 1.2-.18 1.71-.51s.91-.81 1.14-1.35c.25-.57.33-1.2.22-1.81-.11-.61-.4-1.17-.85-1.63l-.09-.07c-.15-.14-.26-.31-.34-.5-.07-.19-.11-.39-.11-.59 0-.2.04-.4.12-.59.08-.19.19-.36.34-.5a1.585 1.585 0 0 1 2.23 0l.08.08c.45.44 1.01.72 1.63.83.54.1 1.1.05 1.62-.13.1-.01.2-.04.29-.07.56-.24 1.04-.63 1.38-1.14.34-.51.52-1.09.52-1.71v-.21c0-.41.16-.8.46-1.09.25-.26.59-.38.95-.41v-2c-.87.04-1.73.36-2.37.99-.68.67-1.05 1.56-1.05 2.51v.21c0 .21-.06.42-.18.6-.1.14-.22.25-.36.34-.08.01-.17.04-.25.07-.21.09-.43.12-.66.08-.22-.05-.42-.15-.58-.3l-.07-.07a3.73 3.73 0 0 0-1.16-.77 3.585 3.585 0 0 0-3.89.77c-.34.33-.6.72-.78 1.15-.18.43-.27.89-.27 1.36 0 .47.09.93.27 1.36.18.43.44.82.78 1.15l.07.07c.16.16.26.36.3.57.04.21.01.43-.08.64-.09.2-.23.37-.41.48-.18.12-.4.18-.62.19h-.12c-.95 0-1.85.37-2.52 1.03C8.37 22.16 8 23.05 8 24s.37 1.84 1.05 2.51c.67.67 1.57 1.04 2.52 1.04h.22c.22 0 .43.06.62.18.14.09.26.21.34.35.01.08.04.17.07.25.09.2.12.42.08.63-.04.22-.14.41-.29.56l-.08.08c-.33.33-.6.72-.78 1.15-.18.43-.27.89-.27 1.36 0 .47.09.93.27 1.36.18.43.44.82.78 1.15a3.585 3.585 0 0 0 5.05 0l.07-.07c.16-.16.36-.26.59-.3.22-.04.45-.01.72.1.21.08.39.21.53.4.13.18.2.39.21.59v.11c0 .95.37 1.84 1.05 2.51.61.6 1.41.95 2.26 1.01v-2.04H23Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M25 13a4 4 0 0 1 8 0v.897c3.224-.002 5.776 2.928 5.212 6.198A4.725 4.725 0 0 1 42 24.725V25a5.002 5.002 0 0 1-3.9 4.879c.123 2.809-2.17 5.264-5.1 5.194A4 4 0 0 1 25 35V13Zm12.66 14.927c-.33-.814-.836-1.491-1.509-1.992-.888-.66-1.986-.954-3.168-.935l.034 2c.83-.014 1.473.192 1.94.54.462.344.832.884 1.021 1.689a1 1 0 0 0 .012.046c.56 2-1.038 3.95-3.11 3.79l-.536-.041A1.249 1.249 0 0 0 31 34.268V35a2 2 0 1 1-4 0V21.322c.917.588 1.993.708 3 .708v-2c-.941 0-1.557-.132-1.985-.435-.39-.275-.789-.811-1.015-2.013V13a2 2 0 1 1 4 0v1.666c0 .788.703 1.392 1.483 1.271 2.286-.351 4.216 1.695 3.731 3.957l-.128.599a1.248 1.248 0 0 0 1.211 1.51A2.723 2.723 0 0 1 40 24.725V25a3.001 3.001 0 0 1-2.34 2.927Z"/></svg>';
+defineCustomElement('sinch-icon-branded-ai', createIconClass(templateHTML));

package/icons-branded/chat/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchIconBrandedElement, TSinchIconBrandedReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-icon-branded-chat': TSinchIconBrandedReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-icon-branded-chat': TSinchIconBrandedElement;
+    }
+}

package/icons-branded/chat/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true"><path d="M10 35c0-2.2 1.7-4 4-4 1.4 0 2.7.7 3.3 1.8l-1.1.6c-.4-.8-1.2-1.2-2.2-1.2-1.7 0-2.8 1.2-2.8 2.8 0 1.6 1.1 2.8 2.8 2.8 1 0 1.8-.5 2.2-1.2l1.1.6c-.6 1.1-1.9 1.8-3.3 1.8-2.3 0-4-1.8-4-4Zm14.5-3.8v7.7h-1.3v-3.3H20v3.3h-1.3v-7.7H20v3.2h3.3v-3.2h1.2Zm6.3 6.1h-3.3l-.5 1.6h-1.4l2.8-7.7h1.5l2.8 7.7h-1.4l-.5-1.6Zm-.4-1.2-1.2-3.5-1.2 3.5h2.4Zm7.9-3.7h-2.2v6.5h-1.3v-6.5h-2.2v-1.2h5.6v1.2h.1Z"/><path class="accent" d="M17.2 14c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9Zm2.1.9c.5 0 .9-.4.9-.9s-.4-.9-.9-.9-.9.4-.9.9.4.9.9.9Zm3.8-.9c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M13.6 8.1c-.5 0-.9.2-1.3.5s-.5.8-.5 1.3v7.8c0 .5.2.9.5 1.3.3.3.8.5 1.3.5h1.2v3.4l4.8-2.8 1.2-.7H25c.5 0 .9-.2 1.3-.5.3-.3.5-.8.5-1.3v-4.2h6c.2 0 .3.1.4.2.1.1.2.3.2.4v7.8c0 .2-.1.3-.2.4-.1.1-.3.2-.4.2h-2.4V25L26 22.5h-4.5c-.2 0-.3-.1-.4-.2-.1-.1-.2-.3-.2-.4v-1l-1.2.7v.3c0 .5.2.9.5 1.3.3.3.8.5 1.3.5h4.2l5.9 3.4v-3.4h1.2c.5 0 .9-.2 1.3-.5.3-.3.5-.8.5-1.3v-7.8c0-.5-.2-.9-.5-1.3-.3-.3-.8-.5-1.3-.5h-6V9.9c0-.5-.2-.9-.5-1.3-.3-.3-.8-.5-1.3-.5H13.6Zm12 9.6V9.9c0-.2-.1-.3-.2-.4-.1-.1-.3-.2-.4-.2H13.6c-.2 0-.3.1-.4.2-.1.1-.2.3-.2.4v7.8c0 .2.1.3.2.4.1.1.3.2.4.2H16v2.6l3.6-2.1.8-.5H25c.2 0 .3-.1.4-.2.1-.1.2-.2.2-.4Z"/></svg>';
+defineCustomElement('sinch-icon-branded-chat', createIconClass(templateHTML));