@nectary/components 0.29.1 → 0.30.0

package/illustration/create-illustration-class.d.ts

@@ -1,310 +1 @@
-export declare const createIllustrationClass: (templateHTML: string) => {
-    new (): {
-        $svg: SVGElement;
-        size: number;
-        connectedCallback(): void;
-        attributeChangedCallback(name: string, _: string | null, newVal: string | null): 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;
-    };
-    readonly observedAttributes: string[];
-};
+export declare const createIllustrationClass: (templateHTML: string) => CustomElementConstructor;

package/illustration/create-illustration-class.js

@@ -1,11 +1,12 @@
-import { getIntegerAttribute, NectaryElement, updateAttribute, updateIntegerAttribute } from '../utils';
-const illustrationStylesHtml = '<style>:host{display:inline-block;vertical-align:middle}svg{display:block;pointer-events:none}</style>';
+import { getIntegerAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateIntegerAttribute, updateLiteralAttribute } from '../utils';
+const illustrationStylesHtml = '<style>svg{display:block;pointer-events:none}#wrapper{display:flex;width:100%;height:100%;align-items:center;justify-content:center;overflow:hidden}#wrapper>*{flex-shrink:0}:host([valign=top]) #wrapper{align-items:flex-start}:host([valign=bottom]) #wrapper{align-items:flex-end}:host([background=yellow]) #wrapper{background-color:var(--sinch-color-background-yellow)}:host([background=green]) #wrapper{background-color:var(--sinch-color-background-green)}:host([background=blue]) #wrapper{background-color:var(--sinch-color-background-blue)}:host([background=grey]) #wrapper{background-color:var(--sinch-color-background-grey)}:host([background=white]) #wrapper{background-color:var(--sinch-color-background-white)}</style>';
+import { backgroundValues, valignValues } from './utils';
 const DEFAULT_SIZE = 256;
 const MIN_SIZE = 16;
 const MAX_SIZE = 2048;
 export const createIllustrationClass = templateHTML => {
   const template = document.createElement('template');
-  template.innerHTML = illustrationStylesHtml + templateHTML;
+  template.innerHTML = `${illustrationStylesHtml}<div id="wrapper">${templateHTML}</div>`;
   return class extends NectaryElement {
     constructor() {
       super();
@@ -26,6 +27,22 @@ export const createIllustrationClass = templateHTML => {
       return getIntegerAttribute(this, 'size', DEFAULT_SIZE);
     }
 
+    get background() {
+      return getLiteralAttribute(this, backgroundValues, 'background', null);
+    }
+
+    set background(value) {
+      updateLiteralAttribute(this, backgroundValues, 'background', value);
+    }
+
+    get valign() {
+      return getLiteralAttribute(this, valignValues, 'valign', null);
+    }
+
+    set valign(value) {
+      updateLiteralAttribute(this, valignValues, 'valign', value);
+    }
+
     connectedCallback() {
       updateAttribute(this.$svg, 'preserveAspectRatio', 'xMinYMin meet');
 

package/illustration/phone-and-cat/index.js

@@ -1,4 +1,4 @@
 import { defineCustomElement } from '../../utils';
 import { createIllustrationClass } from '../create-illustration-class';
-const templateHTML = '<svg viewBox="0 0 868 800"><g clip-path="url(#a)"><path d="M743.029 800a65.073 65.073 0 0 1-53.216-27.573 65.073 65.073 0 0 1-8.106-59.384c5.049-14.202 10.693-26.125 17.244-36.43a16.512 16.512 0 0 1 10.349-7.26 16.52 16.52 0 0 1 17.112 6.636 16.528 16.528 0 0 1 2.747 12.34 16.528 16.528 0 0 1-2.331 6.009c-5.205 8.187-9.786 17.932-14.002 29.789a32.047 32.047 0 0 0 33.77 42.64c.093 0 .187-.02.281-.027a31.99 31.99 0 0 0 24.058-16.208l10.086-18.181a58.267 58.267 0 0 1 77.436-23.645 16.526 16.526 0 0 1 5.133 3.949 16.538 16.538 0 0 1 3.219 5.62 16.516 16.516 0 0 1-16.974 21.708 16.524 16.524 0 0 1-6.23-1.769 25.243 25.243 0 0 0-33.704 10.161l-10.088 18.184a65.081 65.081 0 0 1-49.516 33.037l-.404.041a65.03 65.03 0 0 1-6.864.363Z" fill="#F2A068"/><path d="M21.409 0h323.305a20.795 20.795 0 0 1 20.773 20.773V232.84H21.409A20.793 20.793 0 0 1 .636 212.063V20.773A20.793 20.793 0 0 1 21.409 0" fill="#007171"/><path d="M222.723 274.478H21.416a20.79 20.79 0 0 0-20.78 20.775v83.553h222.087a20.795 20.795 0 0 0 20.773-20.773v-62.78a20.796 20.796 0 0 0-20.773-20.775Z" fill="#FFBE3C"/><path d="M168.062 337.607c6.056 0 10.965-4.909 10.965-10.966 0-6.056-4.909-10.965-10.965-10.965-6.057 0-10.966 4.909-10.966 10.965 0 6.057 4.909 10.966 10.966 10.966Zm-45.997 0c6.056 0 10.965-4.909 10.965-10.966 0-6.056-4.909-10.965-10.965-10.965s-10.966 4.909-10.966 10.965c0 6.057 4.91 10.966 10.966 10.966Zm-45.992 0c6.056 0 10.965-4.909 10.965-10.966 0-6.056-4.91-10.965-10.965-10.965-6.057 0-10.966 4.909-10.966 10.965 0 6.057 4.91 10.966 10.966 10.966ZM275.57 92.165H90.555a5.386 5.386 0 0 1 0-10.771H275.57a5.386 5.386 0 1 1 0 10.771Zm-92.537 59.28H90.555a5.386 5.386 0 0 1 0-10.772h92.478a5.386 5.386 0 0 1 0 10.772Z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M615.675 402.718S506.567 240.893 512.588 287.271c10.022 77.194-28.652 55.324-28.549 143.141l131.636-27.694Z" fill="#FFD03C"/><path d="M277.401 386.038c3.642 5.698 6.05 11.584 6.768 17.594.717 6.009-.089 12.206-2.169 18.991l-1.732 5.513a59.046 59.046 0 0 0-1.677 6.901 63.145 63.145 0 0 0-1.008 14.117c.364 9.405 2.681 18.401 6.01 26.604l.286.701.42.72a16513.683 16513.683 0 0 0 38.013 64.194l19.116 32.031 19.213 31.974a10.593 10.593 0 0 0 14.477 3.621 10.592 10.592 0 0 0 3.739-14.447l-18.9-32.161-18.999-32.098a10513.726 10513.726 0 0 0-38.217-64.073l.709 1.419c-2.644-6.398-4.289-12.942-4.57-19.342a42.001 42.001 0 0 1 .612-9.467c.27-1.557.634-3.096 1.09-4.609l.818-2.742.882-3.08c2.308-8.338 3.82-18.177 2.031-27.827a53.554 53.554 0 0 0-4.341-13.764 61.473 61.473 0 0 0-7.372-11.782 9.387 9.387 0 0 0-12.851-1.906 9.391 9.391 0 0 0-2.458 12.758l.114.171-.004-.011Z" fill="#894915"/><path fill-rule="evenodd" clip-rule="evenodd" d="m413.954 576.288 29.177-60.157a30.487 30.487 0 0 1 19.292-16.079 38.811 38.811 0 0 1 45.387 54.136l-46.18 96.655 28.823 45.069h-71.817a47.175 47.175 0 0 1-42.602-26.915l-93.433-196.475a29.248 29.248 0 0 1 9.154-36.183l22.281-16.292 99.918 156.241Zm391.608-43.01a40.67 40.67 0 0 0-39.183-23.337l-9.69.564a40.68 40.68 0 0 0-38.301 41.27 40.68 40.68 0 0 0 5.493 19.756c19.347 33.317 43.264 74.49 60.566 104.293a40 40 0 0 0 27.069 19.203 40.01 40.01 0 0 0 32.249-7.837 39.705 39.705 0 0 0 11.425-48.074L805.571 533.28l-.009-.002Z" fill="#894915"/><path fill-rule="evenodd" clip-rule="evenodd" d="M377.824 344.949a12.204 12.204 0 0 0-11.115-7.168h-78.603a4.447 4.447 0 0 0-4.052 6.281l69.304 152.996a4.445 4.445 0 0 0 4.049 2.612h77.034a8.69 8.69 0 0 0 8.662-8.045 8.688 8.688 0 0 0-.751-4.223c-14.487-31.99-53.076-117.177-64.528-142.453Z" fill="#666"/><path fill-rule="evenodd" clip-rule="evenodd" d="M362.697 337.781h-74.443a12.207 12.207 0 0 0-10.253 5.589 12.196 12.196 0 0 0-.861 11.646l62.278 137.486a12.195 12.195 0 0 0 11.114 7.168h85.497l-73.332-161.889Z" fill="#CCC"/><path d="m306.957 436.433 69.078 1.008a9.722 9.722 0 0 0 .527-19.439l-69.027-2.755a10.6 10.6 0 0 0-.845 21.179h.267" fill="#894915"/><path d="m311.941 433.234 50.786-38.74a8.576 8.576 0 0 0-9.958-13.954l-53.145 35.442a10.605 10.605 0 1 0 12.317 17.252" fill="#894915"/><path d="m312.976 454.594 70.035.094a9.428 9.428 0 0 0 6.592-2.705 9.428 9.428 0 0 0 .24-13.192 9.429 9.429 0 0 0-6.49-2.943l-69.993-2.445a10.6 10.6 0 0 0-.741 21.187h.357" fill="#894915"/><path d="m318.832 472.223 69.075-.122a8.792 8.792 0 0 0 8.82-8.581 8.796 8.796 0 0 0-8.392-8.999l-68.986-3.485a10.604 10.604 0 0 0-11.189 10.048 10.594 10.594 0 0 0 2.745 7.668 10.596 10.596 0 0 0 7.374 3.457c.174 0 .38.014.553.014" fill="#894915"/><path d="m724.223 600.317-.616 95.556H418.485l69.064-149.989-46.043-26.175 46.507-100.311a50.8 50.8 0 0 1 45.514-29.433l169.531-1.917 22.393 22.361-.172 26.205 26.89-17.037 59.448 126.764-84.071 59.019-3.323-5.043Z" fill="#E83452"/><path d="M557.319 352.94a62.209 62.209 0 0 1-6.19-1.828 78.44 78.44 0 0 1-52.411-74.512l.299-65.106a78.392 78.392 0 0 1 11.777-41.066c16.146-25.985 45.044-40.056 75.404-36.729a78.44 78.44 0 0 1 70.058 78.517l-.285 65.113a78.75 78.75 0 0 1-15.324 46.262l8.24 43.835c4.301 14.496 9.597 21.436 21.433 21.436h6.444l-89.524 62.401a22.706 22.706 0 0 1-22.125 2.154 22.985 22.985 0 0 1-13.714-21.766 22.98 22.98 0 0 1 2.06-8.804c8.156-17.366 18.911-40.673 22.597-50.455 2.957-7.847-4.497-15.538-12.929-18.296a78.337 78.337 0 0 1-5.372-1.044c-.164 0-.331-.016-.498-.021l.057-.085.003-.006Z" fill="#894915"/><path d="M499.89 206.638c0-24.892 20.624-44.973 45.718-44.079 23.903.85 42.501 21.22 42.501 45.137v99.733c0 40.975 47.148 94.857 109.757 94.857 51.326 0 93.148-45.871 93.148-91.582 0-14.608-4.84-31.442-10.612-46.326a61.775 61.775 0 0 0-57.687-39.679v-.046a25.351 25.351 0 0 1-24.403-18.508c-5.425-19.304-13.939-47.59-18.822-53.627-13.175-16.298-29.999-19.136-42.958-18.19-12.567.925-25.066-3.231-34.731-11.318-12.074-10.093-31.682-20.741-59.108-18.081-54.897 5.331-81.467 68.801-42.803 102.806v-1.097Z" fill="#FFD03C"/><path d="m544.235 648.578 6.06-20.583c1.713-5.689 8.482-8.984 14.852-7.083 1.193.357 2.32.907 3.336 1.627a12.68 12.68 0 0 1 9.775-1.639c5.338 1.264 8.788 5.656 8.542 10.367a12.568 12.568 0 0 1 6.359 1.129c4.837 2.267 7.083 7.365 5.666 12.067l-.361 1.2c.08.018.16.027.229.046 6.156 1.457 9.809 7.083 8.164 12.546l-4.853 16.146-65.538-3.35s6.009-16.477 7.769-22.473" fill="#842306"/><path fill-rule="evenodd" clip-rule="evenodd" d="M794.51 319.469h.023s-3.59-16.909-6.663-31.407a6.855 6.855 0 0 0-12.933-1.417l-13.4 29.451-37.492-1.081-6.66-31.407a6.852 6.852 0 0 0-5.957-5.377 6.85 6.85 0 0 0-4.129.853 6.85 6.85 0 0 0-2.85 3.108l-36.989 81.247a28.247 28.247 0 0 0-1.444 19.494 28.259 28.259 0 0 0 11.557 15.766l3.581 2.371-121.276 262.123 194.176-24.87 16.098-41.198a493.41 493.41 0 0 0 30.635-235.66c-1.849-16.132-3.942-30.832-6.277-41.996Z" fill="#F2A068"/><path d="M297.328 363.199a6.942 6.942 0 1 0 0-13.884 6.942 6.942 0 0 0 0 13.884Z" fill="#666"/><path d="M789.706 625.226 663.321 642.93a49.191 49.191 0 0 1-16.109-.409l-11.708-2.251a49.199 49.199 0 0 0-32.134 4.744c-14.519 7.59-35.929 17.781-46.17 17.781h-17.535c-7.445 0-13.939 5.736-14.167 13.178a13.59 13.59 0 0 0 3.83 9.88 13.6 13.6 0 0 0 9.759 4.131h28.909c2.248 0 4.487.27 6.67.805l10.669 2.614a77.667 77.667 0 0 0 18.476 2.23h217.714l-31.832-70.407h.013Z" fill="#894915"/><path d="M532.62 303.419c1.787.351 3.608.504 5.429.457a25.29 25.29 0 0 0 17.014-7.209 2.774 2.774 0 0 0 .83-1.981 2.77 2.77 0 0 0-.83-1.981 2.853 2.853 0 0 0-4.005 0 19.426 19.426 0 0 1-26.552.644 2.857 2.857 0 0 0-4.001.192 2.773 2.773 0 0 0-.467 3.088 2.8 2.8 0 0 0 .661.877c3.375 3 7.492 5.041 11.923 5.909" fill="#842306"/></g><defs><clipPath id="a"><path fill="#fff" transform="translate(.636)" d="M0 0h867.101v800H0z"/></clipPath></defs></svg>';
+const templateHTML = '<svg viewBox="0 0 868 800"><path d="M743.029 800a65.073 65.073 0 0 1-53.216-27.573 65.073 65.073 0 0 1-8.106-59.384c5.049-14.202 10.693-26.125 17.244-36.43a16.512 16.512 0 0 1 10.349-7.26 16.52 16.52 0 0 1 17.112 6.636 16.528 16.528 0 0 1 2.747 12.34 16.528 16.528 0 0 1-2.331 6.009c-5.205 8.187-9.786 17.932-14.002 29.789a32.047 32.047 0 0 0 33.77 42.64c.093 0 .187-.02.281-.027a31.99 31.99 0 0 0 24.058-16.208l10.086-18.181a58.267 58.267 0 0 1 77.436-23.645 16.526 16.526 0 0 1 5.133 3.949 16.538 16.538 0 0 1 3.219 5.62 16.516 16.516 0 0 1-16.974 21.708 16.524 16.524 0 0 1-6.23-1.769 25.243 25.243 0 0 0-33.704 10.161l-10.088 18.184a65.081 65.081 0 0 1-49.516 33.037l-.404.041a65.03 65.03 0 0 1-6.864.363Z" fill="#F2A068"/><path d="M21.409 0h323.305a20.795 20.795 0 0 1 20.773 20.773V232.84H21.409A20.793 20.793 0 0 1 .636 212.063V20.773A20.793 20.793 0 0 1 21.409 0" fill="#007171"/><path d="M222.723 274.478H21.416a20.79 20.79 0 0 0-20.78 20.775v83.553h222.087a20.795 20.795 0 0 0 20.773-20.773v-62.78a20.796 20.796 0 0 0-20.773-20.775Z" fill="#FFBE3C"/><path d="M168.062 337.607c6.056 0 10.965-4.909 10.965-10.966 0-6.056-4.909-10.965-10.965-10.965-6.057 0-10.966 4.909-10.966 10.965 0 6.057 4.909 10.966 10.966 10.966Zm-45.997 0c6.056 0 10.965-4.909 10.965-10.966 0-6.056-4.909-10.965-10.965-10.965s-10.966 4.909-10.966 10.965c0 6.057 4.91 10.966 10.966 10.966Zm-45.992 0c6.056 0 10.965-4.909 10.965-10.966 0-6.056-4.91-10.965-10.965-10.965-6.057 0-10.966 4.909-10.966 10.965 0 6.057 4.91 10.966 10.966 10.966ZM275.57 92.165H90.555a5.386 5.386 0 0 1 0-10.771H275.57a5.386 5.386 0 1 1 0 10.771Zm-92.537 59.28H90.555a5.386 5.386 0 0 1 0-10.772h92.478a5.386 5.386 0 0 1 0 10.772Z" fill="#fff"/><path d="M615.675 402.718S506.567 240.893 512.588 287.271c10.022 77.194-28.652 55.324-28.549 143.141l131.636-27.694Z" fill="#FFD03C"/><path d="M277.401 386.038c3.642 5.698 6.05 11.584 6.768 17.594.717 6.009-.089 12.206-2.169 18.991l-1.732 5.513a59.046 59.046 0 0 0-1.677 6.901 63.145 63.145 0 0 0-1.008 14.117c.364 9.405 2.681 18.401 6.01 26.604l.286.701.42.72a16513.683 16513.683 0 0 0 38.013 64.194l19.116 32.031 19.213 31.974a10.593 10.593 0 0 0 14.477 3.621 10.592 10.592 0 0 0 3.738-14.447l-18.899-32.161-18.999-32.098a10513.726 10513.726 0 0 0-38.217-64.073l.709 1.419c-2.644-6.398-4.289-12.942-4.57-19.342a42.001 42.001 0 0 1 .612-9.467c.27-1.557.634-3.096 1.09-4.609l.818-2.742.882-3.08c2.308-8.338 3.82-18.177 2.031-27.827a53.554 53.554 0 0 0-4.341-13.764 61.473 61.473 0 0 0-7.372-11.782 9.387 9.387 0 0 0-12.851-1.906 9.391 9.391 0 0 0-2.458 12.758l.114.171-.004-.011Z" fill="#894915"/><path d="m413.954 576.288 29.177-60.157a30.487 30.487 0 0 1 19.292-16.079 38.811 38.811 0 0 1 45.387 54.136l-46.18 96.655 28.823 45.069h-71.817a47.175 47.175 0 0 1-42.602-26.915l-93.433-196.475a29.248 29.248 0 0 1 9.154-36.183l22.281-16.292 99.918 156.241Zm391.608-43.01a40.67 40.67 0 0 0-39.183-23.337l-9.69.564a40.68 40.68 0 0 0-38.301 41.27 40.68 40.68 0 0 0 5.493 19.756c19.347 33.317 43.264 74.49 60.566 104.293a40 40 0 0 0 27.069 19.203 40.01 40.01 0 0 0 32.249-7.837 39.705 39.705 0 0 0 11.425-48.074L805.571 533.28l-.009-.002Z" fill="#894915"/><path d="M377.824 344.949a12.204 12.204 0 0 0-11.115-7.168h-78.603a4.447 4.447 0 0 0-4.052 6.281l69.304 152.996a4.445 4.445 0 0 0 4.049 2.612h77.034a8.69 8.69 0 0 0 8.662-8.045 8.688 8.688 0 0 0-.751-4.223c-14.487-31.99-53.076-117.177-64.528-142.453Z" fill="#666"/><path d="M362.697 337.781h-74.443a12.207 12.207 0 0 0-10.253 5.589 12.196 12.196 0 0 0-.861 11.646l62.278 137.486a12.195 12.195 0 0 0 11.114 7.168h85.497l-73.332-161.889Z" fill="#CCC"/><path d="m306.957 436.433 69.078 1.008a9.722 9.722 0 0 0 .527-19.439l-69.027-2.755a10.6 10.6 0 0 0-.845 21.179h.267" fill="#894915"/><path d="m311.941 433.234 50.786-38.74a8.576 8.576 0 0 0-9.958-13.954l-53.145 35.442a10.605 10.605 0 1 0 12.317 17.252Z" fill="#894915"/><path d="m312.976 454.594 70.035.094a9.428 9.428 0 0 0 6.592-2.705 9.428 9.428 0 0 0 .24-13.192 9.429 9.429 0 0 0-6.49-2.943l-69.993-2.445a10.6 10.6 0 0 0-.741 21.187h.357" fill="#894915"/><path d="m318.832 472.223 69.075-.122a8.792 8.792 0 0 0 8.82-8.581 8.796 8.796 0 0 0-8.392-8.999l-68.986-3.485a10.604 10.604 0 0 0-11.189 10.048 10.594 10.594 0 0 0 2.745 7.668 10.596 10.596 0 0 0 7.374 3.457c.174 0 .38.014.553.014Z" fill="#894915"/><path d="m724.223 600.317-.616 95.556H418.485l69.064-149.989-46.043-26.175 46.507-100.311a50.8 50.8 0 0 1 45.514-29.433l169.531-1.917 22.393 22.361-.172 26.205 26.89-17.037 59.448 126.764-84.071 59.019-3.323-5.043Z" fill="#E83452"/><path d="M557.319 352.94a62.209 62.209 0 0 1-6.19-1.828 78.44 78.44 0 0 1-52.411-74.512l.299-65.106a78.392 78.392 0 0 1 11.777-41.066c16.146-25.985 45.044-40.056 75.404-36.729a78.44 78.44 0 0 1 70.058 78.517l-.285 65.113a78.75 78.75 0 0 1-15.324 46.262l8.24 43.835c4.301 14.496 9.597 21.436 21.433 21.436h6.444l-89.524 62.401a22.706 22.706 0 0 1-22.125 2.154 22.985 22.985 0 0 1-13.714-21.766 22.98 22.98 0 0 1 2.06-8.804c8.156-17.366 18.911-40.673 22.597-50.455 2.957-7.847-4.497-15.538-12.929-18.296a77.74 77.74 0 0 1-5.372-1.045c-.164 0-.331-.015-.498-.02l.057-.085.003-.006Z" fill="#894915"/><path d="M499.89 206.638c0-24.892 20.624-44.973 45.718-44.079 23.903.85 42.501 21.22 42.501 45.137v99.733c0 40.975 47.148 94.857 109.757 94.857 51.326 0 93.148-45.871 93.148-91.582 0-14.608-4.84-31.442-10.612-46.326a61.775 61.775 0 0 0-57.687-39.679v-.046a25.351 25.351 0 0 1-24.403-18.508c-5.425-19.304-13.939-47.59-18.822-53.627-13.175-16.298-29.999-19.136-42.958-18.19-12.567.925-25.066-3.231-34.731-11.318-12.074-10.093-31.682-20.741-59.108-18.081-54.897 5.331-81.467 68.801-42.803 102.806v-1.097Z" fill="#FFD03C"/><path d="m544.235 648.578 6.06-20.583c1.713-5.689 8.482-8.984 14.852-7.083 1.193.357 2.32.907 3.336 1.627a12.68 12.68 0 0 1 9.775-1.639c5.338 1.264 8.788 5.656 8.542 10.367a12.568 12.568 0 0 1 6.359 1.129c4.837 2.267 7.083 7.365 5.666 12.067l-.361 1.2c.08.018.16.027.229.046 6.156 1.457 9.809 7.083 8.164 12.546l-4.853 16.146-65.538-3.35s6.009-16.477 7.769-22.473Z" fill="#842306"/><path d="M794.51 319.469h.023s-3.59-16.909-6.663-31.407a6.855 6.855 0 0 0-12.933-1.417l-13.4 29.451-37.492-1.081-6.66-31.407a6.852 6.852 0 0 0-5.957-5.377 6.85 6.85 0 0 0-4.129.853 6.85 6.85 0 0 0-2.85 3.108l-36.989 81.247a28.247 28.247 0 0 0-1.444 19.494 28.259 28.259 0 0 0 11.557 15.766l3.581 2.371-121.276 262.123 194.176-24.87 16.098-41.198a493.41 493.41 0 0 0 30.635-235.66c-1.849-16.132-3.942-30.832-6.277-41.996Z" fill="#F2A068"/><path d="M297.328 363.199a6.942 6.942 0 1 0 0-13.884 6.942 6.942 0 0 0 0 13.884Z" fill="#666"/><path d="M789.707 625.226 663.321 642.93a49.191 49.191 0 0 1-16.109-.409l-11.708-2.251a49.199 49.199 0 0 0-32.134 4.744c-14.519 7.59-35.929 17.781-46.17 17.781h-17.535c-7.445 0-13.939 5.736-14.167 13.178a13.59 13.59 0 0 0 3.83 9.88 13.6 13.6 0 0 0 9.759 4.131h28.909c2.248 0 4.487.27 6.67.805l10.669 2.614a77.667 77.667 0 0 0 18.476 2.23h217.714l-31.832-70.407h.014Z" fill="#894915"/><path d="M532.62 303.419c1.787.351 3.608.504 5.429.457a25.29 25.29 0 0 0 17.014-7.209 2.774 2.774 0 0 0 .83-1.981 2.77 2.77 0 0 0-.83-1.981 2.853 2.853 0 0 0-4.005 0 19.426 19.426 0 0 1-26.552.644 2.857 2.857 0 0 0-4.001.192 2.773 2.773 0 0 0-.467 3.088 2.8 2.8 0 0 0 .661.877c3.375 3 7.492 5.041 11.923 5.909" fill="#842306"/></svg>';
 defineCustomElement('sinch-illustration-phone-and-cat', createIllustrationClass(templateHTML));

package/illustration/types.d.ts

@@ -1,8 +1,16 @@
 import type { TSinchElementReact } from '../types';
+export declare type TSinchIllustrationBackground = 'grey' | 'green' | 'blue' | 'yellow' | 'white';
+export declare type TSinchIllustrationVAlign = 'top' | 'center' | 'bottom';
 export declare type TSinchIllustrationElement = HTMLElement & {
     size: number;
+    background: TSinchIllustrationBackground | null;
+    valign: TSinchIllustrationVAlign | null;
     setAttribute(name: 'size', value: string): void;
+    setAttribute(name: 'background', value: TSinchIllustrationBackground): void;
+    setAttribute(name: 'valign', value: TSinchIllustrationVAlign): void;
 };
 export declare type TSinchIllustrationReact = TSinchElementReact<TSinchIllustrationElement> & {
     size?: number;
+    background?: TSinchIllustrationBackground;
+    valign?: TSinchIllustrationVAlign;
 };

package/illustration/utils.d.ts

@@ -0,0 +1,3 @@
+import type { TSinchIllustrationBackground, TSinchIllustrationVAlign } from './types';
+export declare const backgroundValues: TSinchIllustrationBackground[];
+export declare const valignValues: TSinchIllustrationVAlign[];

package/illustration/utils.js

@@ -0,0 +1,2 @@
+export const backgroundValues = ['blue', 'grey', 'green', 'yellow', 'white'];
+export const valignValues = ['top', 'center', 'bottom'];

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, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, 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);background-color:var(--sinch-color-snow-100)}#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 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-wrapper{display:flex;flex-direction:row;align-items:center;gap:4px;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:var(--sinch-shape-radius-s);width:100%;height:48px;margin:2px 0;padding:0 8px;background-color:var(--sinch-color-snow-100)}#input{all:initial;flex:1;min-width:0;height:48px;padding:0 4px;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=""]):not([disabled])) #input-wrapper{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><div id="input-wrapper"><input id="input" type="text"/><slot name="right"></slot></div><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
 import { inputTypes } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/input/types.d.ts

@@ -1,9 +1,8 @@
 import type { TSinchElementReact } from '../types';
-import type { inputTypes } from './utils';
 import type { SyntheticEvent } from 'react';
-export declare type TTextInputType = typeof inputTypes[number];
+export declare type TSinchInputType = 'text' | 'password';
 export declare type TSinchInputElement = HTMLElement & {
-    type: TTextInputType;
+    type: TSinchInputType;
     value: string;
     label: string;
     placeholder: string | null;
@@ -17,7 +16,7 @@ export declare type TSinchInputElement = HTMLElement & {
     focus(): void;
     blur(): void;
     addEventListener(type: 'change', listener: (e: CustomEvent<string>) => void): void;
-    setAttribute(name: 'type', value: TTextInputType): void;
+    setAttribute(name: 'type', value: TSinchInputType): void;
     setAttribute(name: 'value', value: string): void;
     setAttribute(name: 'label', value: string): void;
     setAttribute(name: 'placeholder', value: string): void;
@@ -27,7 +26,7 @@ export declare type TSinchInputElement = HTMLElement & {
     setAttribute(name: 'disabled', value: ''): void;
 };
 export declare type TSinchInputReact = TSinchElementReact<TSinchInputElement> & {
-    type?: TTextInputType;
+    type?: TSinchInputType;
     value: string;
     label: string;
     placeholder?: string;

package/input/utils.d.ts

@@ -1 +1,2 @@
-export declare const inputTypes: readonly ["text", "password"];
+import type { TSinchInputType } from './types';
+export declare const inputTypes: readonly TSinchInputType[];

package/link/index.js

@@ -8,8 +8,8 @@ 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 '../icons/cancel';
-import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:inline;outline:0}a{font:var(--sinch-font-body);font-size:inherit;line-height:inherit;color:var(--sinch-color-text-link);fill:var(--sinch-color-text-link)}svg{display:none;transform:translateY(.15em);margin-left:.4em;width:.8em;pointer-events:none}a:hover{color:var(--sinch-color-tropical-600);fill:var(--sinch-color-tropical-600)}:host([disabled]:not([disabled=false])) a{color:var(--sinch-color-tropical-200);pointer-events:none;cursor:initial;fill:var(--sinch-color-tropical-200)}:host([external]:not([external=false])) svg{display:inline-block}</style><a><span></span> <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M14.222 14.222H1.778V1.778H8V0H1.778C.79 0 0 .8 0 1.778v12.444C0 15.2.791 16 1.778 16h12.444C15.2 16 16 15.2 16 14.222V8h-1.778v6.222ZM9.778 0v1.778h3.19l-8.737 8.738 1.253 1.253 8.738-8.738v3.191H16V0H9.778Z"/></svg></a>';
+import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, isAttrTrue } from '../utils';
+const templateHTML = '<style>:host{display:inline;outline:0}a{font:var(--sinch-font-body);font-size:inherit;line-height:inherit;color:var(--sinch-color-text-link);fill:var(--sinch-color-text-link);--sinch-size-icon:1em}#icon{display:none;margin-left:.2em;vertical-align:-.25em}a:hover{color:var(--sinch-color-tropical-600);fill:var(--sinch-color-tropical-600)}:host([disabled]:not([disabled=false])) a{color:var(--sinch-color-tropical-200);pointer-events:none;cursor:initial;fill:var(--sinch-color-tropical-200)}:host([external]:not([external=false])) #icon{display:inline-block}</style><a><span id="content"></span><sinch-icon-open-in-new id="icon"></sinch-icon-open-in-new></a>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-link', (_$anchor = new WeakMap(), _$text = new WeakMap(), class extends NectaryElement {
@@ -31,7 +31,7 @@ defineCustomElement('sinch-link', (_$anchor = new WeakMap(), _$text = new WeakMa
 
     _classPrivateFieldSet(this, _$anchor, shadowRoot.querySelector('a'));
 
-    _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('span'));
+    _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#content'));
   }
 
   get text() {
@@ -67,7 +67,7 @@ defineCustomElement('sinch-link', (_$anchor = new WeakMap(), _$text = new WeakMa
   }
 
   static get observedAttributes() {
-    return ['text', 'href'];
+    return ['text', 'href', 'external', 'disabled'];
   }
 
   attributeChangedCallback(name, _, newVal) {
@@ -78,11 +78,25 @@ defineCustomElement('sinch-link', (_$anchor = new WeakMap(), _$text = new WeakMa
           break;
         }
 
+      case 'disabled':
+        {
+          updateBooleanAttribute(this, 'disabled', isAttrTrue(newVal));
+          break;
+        }
+
       case 'href':
         {
           updateAttribute(_classPrivateFieldGet(this, _$anchor), 'href', newVal);
           break;
         }
+
+      case 'external':
+        {
+          const isExternal = isAttrTrue(newVal);
+          updateAttribute(_classPrivateFieldGet(this, _$anchor), 'target', isExternal ? '_blank' : null);
+          updateBooleanAttribute(this, 'external', isExternal);
+          break;
+        }
     }
   }
 

package/link/types.d.ts

@@ -4,8 +4,6 @@ export declare type TSinchLinkElement = HTMLElement & {
     href: string;
     disabled: boolean;
     external: boolean;
-    focus(): void;
-    blur(): void;
     setAttribute(name: 'text', value: string): void;
     setAttribute(name: 'href', value: string): void;
     setAttribute(name: 'disabled', value: ''): void;