@nectary/components 0.28.0 → 0.29.1

package/accordion/index.d.ts

@@ -1,14 +1,4 @@
-import type { TSinchElementReact } from '../types';
-import type { SyntheticEvent } from 'react';
-export declare type TSinchAccordionElement = HTMLElement & {
-    value: string;
-    multiple: boolean;
-};
-export declare type TSinchAccordionReact = TSinchElementReact<TSinchAccordionElement> & {
-    multiple?: boolean;
-    value: string;
-    onChange: (e: SyntheticEvent<TSinchAccordionElement, CustomEvent<string>>) => void;
-};
+import type { TSinchAccordionElement, TSinchAccordionReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/accordion/index.js

@@ -39,7 +39,7 @@ defineCustomElement('sinch-accordion', (_$slot = new WeakMap(), _onSlotChange =
         e.stopPropagation();
         const $elem = e.target;
         const value = e.detail;
-        const result = this.multiple ? updateCsv(this.value, value, !$elem.checked) : $elem.checked ? '' : value;
+        const result = this.multiple ? updateCsv(this.value, value, !getBooleanAttribute($elem, 'checked')) : getBooleanAttribute($elem, 'checked') ? '' : value;
         this.dispatchEvent(new CustomEvent('change', {
           detail: result,
           bubbles: true

package/accordion/types.d.ts

@@ -0,0 +1,14 @@
+import type { TSinchElementReact } from '../types';
+import type { SyntheticEvent } from 'react';
+export declare type TSinchAccordionElement = HTMLElement & {
+    value: string;
+    multiple: boolean;
+    addEventListener(type: 'change', listener: (e: CustomEvent<string>) => void): void;
+    setAttribute(name: 'value', value: string): void;
+    setAttribute(name: 'multiple', value: ''): void;
+};
+export declare type TSinchAccordionReact = TSinchElementReact<TSinchAccordionElement> & {
+    multiple?: boolean;
+    value: string;
+    onChange: (e: SyntheticEvent<TSinchAccordionElement, CustomEvent<string>>) => void;
+};

package/accordion/types.js

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

package/accordion-item/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 '../icons/keyboard-arrow-down';
-import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, 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-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>';
 import { statusValues } from './utils';
 const template = document.createElement('template');
@@ -81,14 +81,6 @@ defineCustomElement('sinch-accordion-item', (_$button = new WeakMap(), _$buttonC
     return getAttribute(this, 'label', '');
   }
 
-  set checked(isChecked) {
-    updateBooleanAttribute(this, 'checked', isChecked);
-  }
-
-  get checked() {
-    return getBooleanAttribute(this, 'checked');
-  }
-
   set disabled(isDisabled) {
     updateBooleanAttribute(this, 'disabled', isDisabled);
   }
@@ -129,7 +121,7 @@ defineCustomElement('sinch-accordion-item', (_$button = new WeakMap(), _$buttonC
 
       case 'checked':
         {
-          updateAttribute(_classPrivateFieldGet(this, _$button), 'aria-expanded', isAttrTrue(newVal));
+          updateExplicitBooleanAttribute(_classPrivateFieldGet(this, _$button), 'aria-expanded', isAttrTrue(newVal));
           break;
         }
 

package/accordion-item/types.d.ts

@@ -1,16 +1,19 @@
 import type { TSinchElementReact } from '../types';
 import type { statusValues } from './utils';
-import type { FocusEvent } from 'react';
 export declare type TSinchAccordionStatusType = typeof statusValues[number];
 export declare type TSinchAccordionItemElement = HTMLElement & {
     value: string;
     label: string;
     optionalText: string | null;
     disabled: boolean;
-    checked: boolean;
     status: TSinchAccordionStatusType | null;
     focus(): void;
     blur(): void;
+    setAttribute(name: 'value', value: string): void;
+    setAttribute(name: 'label', value: string): void;
+    setAttribute(name: 'optionaltext', value: string): void;
+    setAttribute(name: 'disabled', value: ''): void;
+    setAttribute(name: 'status', value: TSinchAccordionStatusType): void;
 };
 export declare type TSinchAccordionItemReact = TSinchElementReact<TSinchAccordionItemElement> & {
     value: string;
@@ -18,6 +21,4 @@ export declare type TSinchAccordionItemReact = TSinchElementReact<TSinchAccordio
     optionalText?: string;
     disabled?: boolean;
     status?: TSinchAccordionStatusType;
-    onFocus?: (e: FocusEvent<TSinchAccordionItemElement>) => void;
-    onBlur?: (e: FocusEvent<TSinchAccordionItemElement>) => void;
 };

package/action-menu/index.d.ts

@@ -1,22 +1,5 @@
 import '../popover';
-import type { TSinchPopoverOrientation } from '../popover';
-import type { TRect, TSinchElementReact } from '../types';
-import type { SyntheticEvent } from 'react';
-export declare type TSinchActionMenuElement = HTMLElement & {
-    open: boolean;
-    orientation: TSinchPopoverOrientation;
-    maxVisibleItems: number | null;
-    readonly dropdownRect: TRect;
-    focus(): void;
-    blur(): void;
-};
-export declare type TSinchActionMenuReact = TSinchElementReact<TSinchActionMenuElement> & {
-    open: boolean;
-    orientation?: TSinchPopoverOrientation;
-    maxVisibleItems?: number;
-    'aria-label': string;
-    onClose: (event: SyntheticEvent<TSinchActionMenuElement, CustomEvent<void>>) => void;
-};
+import type { TSinchActionMenuElement, TSinchActionMenuReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/action-menu/index.js

@@ -237,7 +237,7 @@ function _getPrevOption2() {
 function _selectOption2($option) {
   for (const $op of _classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).call(this)) {
     const isSelected = $op === $option;
-    $op.selected = isSelected;
+    updateBooleanAttribute($op, 'selected', isSelected);
 
     if (isSelected) {
       $op.focus();
@@ -257,7 +257,7 @@ function _getOptionElements2() {
 
 function _findSelectedOption2(elements) {
   for (const el of elements) {
-    if (el.selected) {
+    if (getBooleanAttribute(el, 'selected')) {
       return el;
     }
   }

package/action-menu/types.d.ts

@@ -0,0 +1,20 @@
+import type { TSinchPopoverOrientation } from '../popover/types';
+import type { TRect, TSinchElementReact } from '../types';
+import type { SyntheticEvent } from 'react';
+export declare type TSinchActionMenuElement = HTMLElement & {
+    open: boolean;
+    orientation: TSinchPopoverOrientation;
+    maxVisibleItems: number | null;
+    readonly dropdownRect: TRect;
+    addEventListener(type: 'close', listener: (e: CustomEvent<void>) => void): void;
+    setAttribute(name: 'open', value: ''): void;
+    setAttribute(name: 'orientation', value: TSinchPopoverOrientation): void;
+    setAttribute(name: 'maxvisibleitems', value: string): void;
+};
+export declare type TSinchActionMenuReact = TSinchElementReact<TSinchActionMenuElement> & {
+    open: boolean;
+    orientation?: TSinchPopoverOrientation;
+    maxVisibleItems?: number;
+    'aria-label': string;
+    onClose: (event: SyntheticEvent<TSinchActionMenuElement, CustomEvent<void>>) => void;
+};

package/action-menu/types.js

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

package/action-menu-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 } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{all:initial;display:flex;position:relative;box-sizing:border-box;height:40px;width:100%;padding:6px 12px;align-items:center;gap:12px;user-select:none;cursor:pointer;font:inherit;color:inherit;--sinch-size-icon:24px}#content{flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#wrapper:focus,:host(:hover)>#wrapper{background-color:var(--sinch-color-snow-500)}:host([disabled]:not([disabled=false]))>#wrapper{color:var(--sinch-color-stormy-100);cursor:initial;--sinch-color-icon:var(--sinch-color-stormy-100)}</style><button id="wrapper"><slot name="icon"></slot><span id="content"></span></button>';
+const templateHTML = '<style>:host{display:block}#wrapper{all:initial;display:flex;position:relative;box-sizing:border-box;height:40px;width:100%;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;font:inherit;color:inherit;--sinch-size-icon:24px}#content{flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#wrapper:focus,:host(:hover)>#wrapper{background-color:var(--sinch-color-snow-500)}:host([disabled]:not([disabled=false]))>#wrapper{color:var(--sinch-color-stormy-100);cursor:initial;--sinch-color-icon:var(--sinch-color-stormy-100)}::slotted(*){margin-left:-6px}</style><button id="wrapper"><slot name="icon"></slot><span id="content"></span></button>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-action-menu-option', (_$button = new WeakMap(), _$content = new WeakMap(), class ActionMenuOption extends NectaryElement {
@@ -76,14 +76,6 @@ defineCustomElement('sinch-action-menu-option', (_$button = new WeakMap(), _$con
     return getBooleanAttribute(this, 'disabled');
   }
 
-  set selected(isSelected) {
-    updateBooleanAttribute(this, 'data-selected', isSelected);
-  }
-
-  get selected() {
-    return getBooleanAttribute(this, 'data-selected');
-  }
-
   focus() {
     _classPrivateFieldGet(this, _$button).focus();
   }

package/action-menu-option/types.d.ts

@@ -1,17 +1,14 @@
 import type { TSinchElementReact } from '../types';
-import type { FocusEvent, MouseEvent } from 'react';
 export declare type TSinchActionMenuOptionElement = HTMLElement & {
     text: string;
-    selected: boolean;
     disabled: boolean;
     focus(): void;
     blur(): void;
+    setAttribute(name: 'text', value: string): void;
+    setAttribute(name: 'disabled', value: ''): void;
 };
 export declare type TSinchActionMenuOptionReact = TSinchElementReact<TSinchActionMenuOptionElement> & {
     text: string;
     disabled?: boolean;
     'aria-label': string;
-    onClick: (e: MouseEvent<TSinchActionMenuOptionElement>) => void;
-    onFocus?: (e: FocusEvent<TSinchActionMenuOptionElement>) => void;
-    onBlur?: (e: FocusEvent<TSinchActionMenuOptionElement>) => void;
 };

package/alert/index.d.ts

@@ -1,18 +1,4 @@
-import type { TSinchElementReact } from '../types';
-declare const typeValues: readonly ["info", "success", "warn", "error"];
-export declare type TSinchAlertType = typeof typeValues[number];
-export declare type TSinchAlertElement = HTMLElement & {
-    type: TSinchAlertType;
-    text: string;
-    title: string;
-    multiline: boolean;
-};
-export declare type TSinchAlertReact = TSinchElementReact<TSinchAlertElement> & {
-    type: TSinchAlertType;
-    text: string;
-    title?: string;
-    multiline?: boolean;
-};
+import type { TSinchAlertElement, TSinchAlertReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -23,4 +9,3 @@ declare global {
         'sinch-alert': TSinchAlertElement;
     }
 }
-export {};

package/alert/index.js

@@ -1,18 +1,18 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$text, _$title;
+var _$text, _$caption;
 
 function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
 
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 
 import { defineCustomElement, getBooleanAttribute, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, NectaryElement } 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-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 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}#caption{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])) #caption{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="caption"></p><p id="text"></p><slot name="button"></slot></div><slot name="close"></slot></div>';
+import { typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-alert', (_$text = new WeakMap(), _$title = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-alert', (_$text = new WeakMap(), _$caption = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -21,7 +21,7 @@ defineCustomElement('sinch-alert', (_$text = new WeakMap(), _$title = new WeakMa
       value: void 0
     });
 
-    _classPrivateFieldInitSpec(this, _$title, {
+    _classPrivateFieldInitSpec(this, _$caption, {
       writable: true,
       value: void 0
     });
@@ -31,7 +31,7 @@ defineCustomElement('sinch-alert', (_$text = new WeakMap(), _$title = new WeakMa
 
     _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#text'));
 
-    _classPrivateFieldSet(this, _$title, shadowRoot.querySelector('#title'));
+    _classPrivateFieldSet(this, _$caption, shadowRoot.querySelector('#caption'));
   }
 
   get type() {
@@ -50,12 +50,12 @@ defineCustomElement('sinch-alert', (_$text = new WeakMap(), _$title = new WeakMa
     updateAttribute(this, 'text', value);
   }
 
-  get title() {
-    return getAttribute(this, 'title', '');
+  get caption() {
+    return getAttribute(this, 'caption', '');
   }
 
-  set title(value) {
-    updateAttribute(this, 'title', value);
+  set caption(value) {
+    updateAttribute(this, 'caption', value);
   }
 
   get multiline() {
@@ -67,7 +67,7 @@ defineCustomElement('sinch-alert', (_$text = new WeakMap(), _$title = new WeakMa
   }
 
   static get observedAttributes() {
-    return ['text', 'title'];
+    return ['text', 'caption'];
   }
 
   attributeChangedCallback(name, _, newVal) {
@@ -78,9 +78,9 @@ defineCustomElement('sinch-alert', (_$text = new WeakMap(), _$title = new WeakMa
           break;
         }
 
-      case 'title':
+      case 'caption':
         {
-          _classPrivateFieldGet(this, _$title).textContent = newVal;
+          _classPrivateFieldGet(this, _$caption).textContent = newVal;
           break;
         }
     }

package/alert/types.d.ts

@@ -0,0 +1,19 @@
+import type { TSinchElementReact } from '../types';
+import type { typeValues } from './utils';
+export declare type TSinchAlertType = typeof typeValues[number];
+export declare type TSinchAlertElement = HTMLElement & {
+    type: TSinchAlertType;
+    text: string;
+    caption: string;
+    multiline: boolean;
+    setAttribute(name: 'type', value: TSinchAlertType): void;
+    setAttribute(name: 'text', value: string): void;
+    setAttribute(name: 'caption', value: string): void;
+    setAttribute(name: 'multiline', value: ''): void;
+};
+export declare type TSinchAlertReact = TSinchElementReact<TSinchAlertElement> & {
+    type: TSinchAlertType;
+    text: string;
+    caption?: string;
+    multiline?: boolean;
+};

package/alert/types.js

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

package/alert/utils.d.ts

@@ -0,0 +1 @@
+export declare const typeValues: readonly ["info", "success", "warn", "error"];

package/alert/utils.js

@@ -0,0 +1 @@
+export const typeValues = ['info', 'success', 'warn', 'error'];

package/alert-button/index.d.ts

@@ -1,16 +1,4 @@
-import type { TSinchElementReact } from '../types';
-import type { FocusEvent, MouseEvent } from 'react';
-export declare type TSinchAlertButtonElement = HTMLElement & {
-    text: string;
-    focus(): void;
-    blur(): void;
-};
-export declare type TSinchAlertButtonReact = TSinchElementReact<TSinchAlertButtonElement> & {
-    text: string;
-    onClick?: (e: MouseEvent<TSinchAlertButtonElement>) => void;
-    onFocus?: (e: FocusEvent<TSinchAlertButtonElement>) => void;
-    onBlur?: (e: FocusEvent<TSinchAlertButtonElement>) => void;
-};
+import type { TSinchAlertButtonElement, TSinchAlertButtonReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/alert-button/types.d.ts

@@ -0,0 +1,10 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchAlertButtonElement = HTMLElement & {
+    text: string;
+    focus(): void;
+    blur(): void;
+    setAttribute(name: 'text', value: string): void;
+};
+export declare type TSinchAlertButtonReact = TSinchElementReact<TSinchAlertButtonElement> & {
+    text: string;
+};

package/alert-button/types.js

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

package/alert-close/index.d.ts

@@ -1,15 +1,5 @@
 import '../icons/close';
-import type { TSinchElementReact } from '../types';
-import type { FocusEvent, MouseEvent } from 'react';
-export declare type TSinchAlertCloseElement = HTMLElement & {
-    focus(): void;
-    blur(): void;
-};
-export declare type TSinchAlertCloseReact = TSinchElementReact<TSinchAlertCloseElement> & {
-    onClick?: (e: MouseEvent<TSinchAlertCloseElement>) => void;
-    onFocus?: (e: FocusEvent<TSinchAlertCloseElement>) => void;
-    onBlur?: (e: FocusEvent<TSinchAlertCloseElement>) => void;
-};
+import type { TSinchAlertCloseElement, TSinchAlertCloseReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/alert-close/types.d.ts

@@ -0,0 +1,6 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchAlertCloseElement = HTMLElement & {
+    focus(): void;
+    blur(): void;
+};
+export declare type TSinchAlertCloseReact = TSinchElementReact<TSinchAlertCloseElement>;

package/alert-close/types.js

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

package/avatar/index.d.ts

@@ -1,20 +1,4 @@
-import type { TSinchElementReact } from '../types';
-declare const backgroundValues: readonly ["grey", "yellow", "blue"];
-declare const sizeValues: readonly ["l", "m", "s"];
-export declare type TSinchAvatarBackground = typeof backgroundValues[number];
-export declare type TSinchAvatarSize = typeof sizeValues[number];
-export declare type TSinchAvatarElement = HTMLElement & {
-    alt: string;
-    src: string | null;
-    background: TSinchAvatarBackground;
-    size: TSinchAvatarSize;
-};
-export declare type TSinchAvatarReact = TSinchElementReact<TSinchAvatarElement> & {
-    alt: string;
-    src?: string;
-    background?: TSinchAvatarBackground;
-    size?: TSinchAvatarSize;
-};
+import type { TSinchAvatarElement, TSinchAvatarReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -25,4 +9,3 @@ declare global {
         'sinch-avatar': TSinchAvatarElement;
     }
 }
-export {};

package/avatar/index.js

@@ -9,8 +9,7 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 
 import { defineCustomElement, getAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateLiteralAttribute } from '../utils';
 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'];
+import { backgroundValues, sizeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-avatar', (_$text = new WeakMap(), _$image = new WeakMap(), class extends NectaryElement {

package/avatar/types.d.ts

@@ -0,0 +1,20 @@
+import type { TSinchElementReact } from '../types';
+import type { backgroundValues, sizeValues } from './utils';
+export declare type TSinchAvatarBackground = typeof backgroundValues[number];
+export declare type TSinchAvatarSize = typeof sizeValues[number];
+export declare type TSinchAvatarElement = HTMLElement & {
+    alt: string;
+    src: string | null;
+    background: TSinchAvatarBackground;
+    size: TSinchAvatarSize;
+    setAttribute(name: 'alt', value: string): void;
+    setAttribute(name: 'src', value: string): void;
+    setAttribute(name: 'background', value: TSinchAvatarBackground): void;
+    setAttribute(name: 'size', value: TSinchAvatarSize): void;
+};
+export declare type TSinchAvatarReact = TSinchElementReact<TSinchAvatarElement> & {
+    alt: string;
+    src?: string;
+    background?: TSinchAvatarBackground;
+    size?: TSinchAvatarSize;
+};

package/avatar/types.js

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

package/avatar/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const backgroundValues: readonly ["grey", "yellow", "blue"];
+export declare const sizeValues: readonly ["l", "m", "s"];

package/avatar/utils.js

@@ -0,0 +1,2 @@
+export const backgroundValues = ['grey', 'yellow', 'blue'];
+export const sizeValues = ['l', 'm', 's'];

package/avatar-badge/index.d.ts

@@ -1,10 +1,4 @@
-import type { TSinchElementReact } from '../types';
-export declare type TSinchAvatarBadgeElement = HTMLElement & {
-    text: string;
-};
-export declare type TSinchAvatarBadgeReact = TSinchElementReact<TSinchAvatarBadgeElement> & {
-    text: string;
-};
+import type { TSinchAvatarBadgeElement, TSinchAvatarBadgeReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/avatar-badge/types.d.ts

@@ -0,0 +1,8 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchAvatarBadgeElement = HTMLElement & {
+    text: string;
+    setAttribute(name: 'text', value: string): void;
+};
+export declare type TSinchAvatarBadgeReact = TSinchElementReact<TSinchAvatarBadgeElement> & {
+    text: string;
+};

package/avatar-badge/types.js

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

package/avatar-status/index.d.ts

@@ -1,12 +1,4 @@
-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;
-};
+import type { TSinchAvatarStatusElement, TSinchAvatarStatusReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -17,4 +9,3 @@ declare global {
         'sinch-avatar-status': TSinchAvatarStatusElement;
     }
 }
-export {};

package/avatar-status/index.js

@@ -1,13 +1,6 @@
 import { defineCustomElement, getLiteralAttribute, NectaryElement, 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}`);
-  }
-};
-
+import { assertColor, colorValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-avatar-status', class extends NectaryElement {

package/avatar-status/types.d.ts

@@ -0,0 +1,10 @@
+import type { TSinchElementReact } from '../types';
+import type { colorValues } from './utils';
+export declare type TSinchAvatarStatusColor = typeof colorValues[number];
+export declare type TSinchAvatarStatusElement = HTMLElement & {
+    color: TSinchAvatarStatusColor;
+    setAttribute(name: 'color', value: TSinchAvatarStatusColor): void;
+};
+export declare type TSinchAvatarStatusReact = TSinchElementReact<TSinchAvatarStatusElement> & {
+    color: TSinchAvatarStatusColor;
+};

package/avatar-status/types.js

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

package/avatar-status/utils.d.ts

@@ -0,0 +1,5 @@
+import type { TSinchAvatarStatusColor } from './types';
+export declare const colorValues: readonly ["red", "yellow", "green", "grey"];
+declare type TAssertColor = (value: string | null) => asserts value is TSinchAvatarStatusColor;
+export declare const assertColor: TAssertColor;
+export {};

package/avatar-status/utils.js

@@ -0,0 +1,6 @@
+export const colorValues = ['red', 'yellow', 'green', 'grey'];
+export const assertColor = value => {
+  if (value === null || !colorValues.includes(value)) {
+    throw new Error(`sinch-avatar-status: invalid color attribute: ${value}`);
+  }
+};