@nectary/components 0.48.2 → 1.0.0

package/accordion/types.d.ts

@@ -1,6 +1,6 @@
 import type { TSinchElementReact } from '../types';
 import type { SyntheticEvent } from 'react';
-export declare type TSinchAccordionElement = HTMLElement & {
+export type TSinchAccordionElement = HTMLElement & {
     /** Value */
     value: string;
     /** Allows to expand multiple items simultanously */
@@ -12,7 +12,7 @@ export declare type TSinchAccordionElement = HTMLElement & {
     /** Allows to expand multiple items simultanously */
     setAttribute(name: 'multiple', value: ''): void;
 };
-export declare type TSinchAccordionReact = TSinchElementReact<TSinchAccordionElement> & {
+export type TSinchAccordionReact = TSinchElementReact<TSinchAccordionElement> & {
     /** Value */
     value: string;
     multiple?: boolean;

package/accordion-item/index.d.ts

@@ -1,4 +1,4 @@
-import '../icons/keyboard-arrow-down';
+import '../icon';
 import type { TSinchAccordionItemElement, TSinchAccordionItemReact } from './types';
 declare global {
     namespace JSX {

package/accordion-item/index.js

@@ -1,11 +1,12 @@
-import '../icons/keyboard-arrow-down';
-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);--sinch-color-icon:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button:disabled{cursor:initial;color:var(--sinch-color-stormy-100);--sinch-color-icon: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-feedback-success-icon)}:host([status=warn]) #button::before{content:"";background-color:var(--sinch-color-feedback-warning-icon)}:host([status=error]) #button::before{content:"";background-color:var(--sinch-color-feedback-invalid-icon)}:host([status=info]) #button::before{content:"";background-color:var(--sinch-color-feedback-info-icon)}#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-text-m);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-text-s);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 '../icon';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getCssVar, 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);--sinch-color-icon:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button:disabled{cursor:initial;color:var(--sinch-color-stormy-100);--sinch-color-icon: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-feedback-success-icon)}:host([status=warn]) #button::before{content:"";background-color:var(--sinch-color-feedback-warning-icon)}:host([status=error]) #button::before{content:"";background-color:var(--sinch-color-feedback-invalid-icon)}:host([status=info]) #button::before{content:"";background-color:var(--sinch-color-feedback-info-icon)}#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-text-m);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-text-s);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 id="dropdown-icon"></sinch-icon></button><div id="content" role="region" aria-labelledby="button"><slot name="content"></slot></div></div>';
 import { statusValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-accordion-item', class extends NectaryElement {
   #$button;
+  #$icon;
   #$buttonContent;
   #$optionalText;
   constructor() {
@@ -13,11 +14,13 @@ defineCustomElement('sinch-accordion-item', class extends NectaryElement {
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$button = shadowRoot.querySelector('#button');
+    this.#$icon = shadowRoot.querySelector('#dropdown-icon');
     this.#$buttonContent = shadowRoot.querySelector('#title');
     this.#$optionalText = shadowRoot.querySelector('#optional');
   }
   connectedCallback() {
     this.#$button.addEventListener('click', this.#onButtonClick);
+    updateAttribute(this.#$icon, 'name', getCssVar(this, '--sinch-accordion-item-icon-dropdown'));
   }
   disconnectedCallback() {
     this.#$button.removeEventListener('click', this.#onButtonClick);

package/accordion-item/types.d.ts

@@ -1,6 +1,6 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchAccordionStatusType = 'info' | 'success' | 'warn' | 'error';
-export declare type TSinchAccordionItemElement = HTMLElement & {
+export type TSinchAccordionStatusType = 'info' | 'success' | 'warn' | 'error';
+export type TSinchAccordionItemElement = HTMLElement & {
     /** Value */
     value: string;
     /** Label */
@@ -22,7 +22,7 @@ export declare type TSinchAccordionItemElement = HTMLElement & {
     /** Disabled */
     setAttribute(name: 'disabled', value: ''): void;
 };
-export declare type TSinchAccordionItemReact = TSinchElementReact<TSinchAccordionItemElement> & {
+export type TSinchAccordionItemReact = TSinchElementReact<TSinchAccordionItemElement> & {
     /** Value */
     value: string;
     /** Label */

package/action-menu/index.js

@@ -159,7 +159,6 @@ defineCustomElement('sinch-action-menu', class extends NectaryElement {
     const hasRows = this.hasAttribute('rows');
     for (const $op of this.#getOptionElements()) {
       const isSelected = $op === $option;
-
       updateBooleanAttribute($op, 'data-selected', isSelected);
       if (isSelected && hasRows) {
         $op.scrollIntoView?.({

package/action-menu/types.d.ts

@@ -1,11 +1,11 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchActionMenuElement = HTMLElement & {
+export type TSinchActionMenuElement = HTMLElement & {
     /** How many rows to show and scroll the rest */
     rows: number | null;
     /** How many rows to show and scroll the rest */
     setAttribute(name: 'rows', value: string): void;
 };
-export declare type TSinchActionMenuReact = TSinchElementReact<TSinchActionMenuElement> & {
+export type TSinchActionMenuReact = TSinchElementReact<TSinchActionMenuElement> & {
     /** How many rows to show and scroll the rest */
     rows?: number;
     /** Label that is used for a11y */

package/action-menu-option/index.js

@@ -1,6 +1,6 @@
 import '../text';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-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;color:var(--sinch-color-text-default);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:24px}#content{flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:hover:not([disabled]))>#wrapper,:host([data-selected])>#wrapper{background-color:var(--sinch-color-snow-400)}:host([disabled])>#wrapper{cursor:initial;pointer-events:none;color:var(--sinch-color-text-disabled);--sinch-color-icon:var(--sinch-color-stormy-100)}::slotted(*){margin-left:-6px}</style><div id="wrapper"><slot name="icon"></slot><sinch-text id="content" type="m" ellipsis></sinch-text></div>';
+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;color:var(--sinch-color-text-default);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:24px}#content{flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([disabled])>#wrapper{cursor:initial;pointer-events:none;color:var(--sinch-color-text-disabled);--sinch-color-icon:var(--sinch-color-stormy-100)}:host(:hover:not([disabled]))>#wrapper,:host([data-selected])>#wrapper{background-color:var(--sinch-color-snow-400)}::slotted(*){margin-left:-6px}</style><div id="wrapper"><slot name="icon"></slot><sinch-text id="content" type="m" ellipsis></sinch-text></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-action-menu-option', class ActionMenuOption extends NectaryElement {

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

@@ -1,5 +1,5 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchActionMenuOptionElement = HTMLElement & {
+export type TSinchActionMenuOptionElement = HTMLElement & {
     /** Display text */
     text: string;
     /** Disabled state */
@@ -11,7 +11,7 @@ export declare type TSinchActionMenuOptionElement = HTMLElement & {
     /** Disabled state */
     setAttribute(name: 'disabled', value: ''): void;
 };
-export declare type TSinchActionMenuOptionReact = TSinchElementReact<TSinchActionMenuOptionElement> & {
+export type TSinchActionMenuOptionReact = TSinchElementReact<TSinchActionMenuOptionElement> & {
     /** Display text */
     text: string;
     /** Disabled state */

package/alert/index.d.ts

@@ -1,6 +1,5 @@
-import '../icons/report-problem';
-import '../icons/report';
-import '../icons/info';
+import '../icon';
+import '../rich-text';
 import '../text';
 import type { TSinchAlertElement, TSinchAlertReact } from './types';
 declare global {

package/alert/index.js

@@ -1,22 +1,28 @@
-import '../icons/report-problem';
-import '../icons/report';
-import '../icons/info';
+import '../icon';
+import '../rich-text';
 import '../text';
-import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;gap:8px;align-items:center;padding:8px 16px;box-sizing:border-box;width:100%;min-height:48px}#text{color:var(--sinch-color-stormy-500);flex:1;min-width:0}#icon-error,#icon-info,#icon-warn{display:none}:host([type=warn]) #wrapper{background-color:var(--sinch-color-feedback-warning-bg)}:host([type=error]) #wrapper{background-color:var(--sinch-color-feedback-invalid-bg)}:host([type=info]) #wrapper{background-color:var(--sinch-color-feedback-info-bg)}:host([type=warn]) #icon-warn{display:block;--sinch-color-icon:var(--sinch-color-feedback-warning-icon)}:host([type=error]) #icon-error{display:block;--sinch-color-icon:var(--sinch-color-feedback-invalid-icon)}:host([type=info]) #icon-info{display:block;--sinch-color-icon:var(--sinch-color-feedback-info-icon)}</style><div id="wrapper"><sinch-icon-info id="icon-info"></sinch-icon-info><sinch-icon-report-problem id="icon-warn"></sinch-icon-report-problem><sinch-icon-report id="icon-error"></sinch-icon-report><sinch-text id="text" type="m"></sinch-text><slot name="action"></slot><slot name="close"></slot></div>';
+import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, getCssVar } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;gap:8px;align-items:center;padding:8px 16px;box-sizing:border-box;width:100%;min-height:48px}#text{display:flex;flex-direction:column;gap:8px;color:var(--sinch-color-stormy-500);flex:1;min-width:0}:host([type=warn]) #wrapper{background-color:var(--sinch-color-feedback-warning-bg)}:host([type=error]) #wrapper{background-color:var(--sinch-color-feedback-invalid-bg)}:host([type=info]) #wrapper{background-color:var(--sinch-color-feedback-info-bg)}:host([type=warn]) #icon{--sinch-color-icon:var(--sinch-color-feedback-warning-icon)}:host([type=error]) #icon{--sinch-color-icon:var(--sinch-color-feedback-invalid-icon)}:host([type=info]) #icon{--sinch-color-icon:var(--sinch-color-feedback-info-icon)}</style><div id="wrapper"><sinch-icon id="icon"></sinch-icon><sinch-rich-text id="text"></sinch-rich-text><slot name="action"></slot><slot name="close"></slot></div>';
 import { assertType, typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-alert', class extends NectaryElement {
   #$text;
+  #$icon;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$text = shadowRoot.querySelector('#text');
+    this.#$icon = shadowRoot.querySelector('#icon');
   }
   connectedCallback() {
+    super.connectedCallback();
     this.setAttribute('role', 'alert');
+    this.#updateIcon();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
   }
   get type() {
     return getLiteralAttribute(this, typeValues, 'type');
@@ -40,13 +46,20 @@ defineCustomElement('sinch-alert', class extends NectaryElement {
           if ('production' !== 'production') {
             assertType(newVal);
           }
+          this.#updateIcon();
           break;
         }
       case 'text':
         {
-          this.#$text.textContent = newVal;
+          updateAttribute(this.#$text, 'text', newVal);
           break;
         }
     }
   }
+  #updateIcon() {
+    if (!this.isConnected) {
+      return;
+    }
+    updateAttribute(this.#$icon, 'name', getCssVar(this, `--sinch-alert-icon-${this.type}`));
+  }
 });

package/alert/types.d.ts

@@ -1,6 +1,6 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchAlertType = 'info' | 'warn' | 'error';
-export declare type TSinchAlertElement = HTMLElement & {
+export type TSinchAlertType = 'info' | 'warn' | 'error';
+export type TSinchAlertElement = HTMLElement & {
     /** Type */
     type: TSinchAlertType;
     /** Text */
@@ -10,7 +10,7 @@ export declare type TSinchAlertElement = HTMLElement & {
     /** Text */
     setAttribute(name: 'text', value: string): void;
 };
-export declare type TSinchAlertReact = TSinchElementReact<TSinchAlertElement> & {
+export type TSinchAlertReact = TSinchElementReact<TSinchAlertElement> & {
     /** Type */
     type: TSinchAlertType;
     /** Text */

package/alert/utils.d.ts

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

package/avatar/types.d.ts

@@ -1,7 +1,7 @@
 import type { TSinchElementReact } from '../types';
 import type { TSinchSize } from '../utils/size';
-export declare type TSinchAvatarStatus = 'online' | 'busy' | 'away' | 'offline';
-export declare type TSinchAvatarElement = HTMLElement & {
+export type TSinchAvatarStatus = 'online' | 'busy' | 'away' | 'offline';
+export type TSinchAvatarElement = HTMLElement & {
     /** Image source */
     src: string | null;
     /** Alt text */
@@ -23,7 +23,7 @@ export declare type TSinchAvatarElement = HTMLElement & {
     /** Status */
     setAttribute(name: 'status', value: TSinchAvatarStatus): void;
 };
-export declare type TSinchAvatarReact = TSinchElementReact<TSinchAvatarElement> & {
+export type TSinchAvatarReact = TSinchElementReact<TSinchAvatarElement> & {
     /** Image source */
     src?: string;
     /** Alt text */

package/avatar/utils.d.ts

@@ -1,6 +1,6 @@
 import type { TSinchAvatarStatus } from './types';
 export declare const statusValues: readonly TSinchAvatarStatus[];
-declare type TAssertStatus = (value: string | null) => asserts value is TSinchAvatarStatus;
+type TAssertStatus = (value: string | null) => asserts value is TSinchAvatarStatus;
 export declare const assertStatus: TAssertStatus;
 export declare const getAvatarColorBg: (id: string) => string;
 export declare const getAvatarColorFg: (id: string) => string;

package/badge/types.d.ts

@@ -1,7 +1,7 @@
 import type { TRect, TSinchElementReact } from '../types';
 import type { TSinchSize } from '../utils/size';
-export declare type TSinchBadgeMode = 'square' | 'circle';
-export declare type TSinchBadgeElement = HTMLElement & {
+export type TSinchBadgeMode = 'square' | 'circle';
+export type TSinchBadgeElement = HTMLElement & {
     /** Text */
     text: string;
     /** Size */
@@ -24,7 +24,7 @@ export declare type TSinchBadgeElement = HTMLElement & {
     /** Hidden */
     setAttribute(name: 'hidden', value: ''): void;
 };
-export declare type TSinchBadgeReact = TSinchElementReact<TSinchBadgeElement> & {
+export type TSinchBadgeReact = TSinchElementReact<TSinchBadgeElement> & {
     /** Text */
     text: string;
     /** Size */

package/badge/utils.d.ts

@@ -1,6 +1,6 @@
 import type { TSinchBadgeMode } from './types';
 export declare const modeValues: readonly TSinchBadgeMode[];
-declare type TAssertMode = (value: string | null) => asserts value is TSinchBadgeMode;
+type TAssertMode = (value: string | null) => asserts value is TSinchBadgeMode;
 export declare const assertMode: TAssertMode;
 export declare const getBadgeColorBg: (id: string) => string;
 export declare const getBadgeColorFg: (id: string) => string;

package/button/types.d.ts

@@ -1,7 +1,7 @@
 import type { TSinchElementReact } from '../types';
 import type { TSinchSize } from '../utils/size';
-export declare type TSinchButtonType = 'primary' | 'secondary' | 'tertiary' | 'cta-primary' | 'cta-secondary' | 'destructive';
-export declare type TSinchButtonElement = HTMLElement & {
+export type TSinchButtonType = 'primary' | 'secondary' | 'tertiary' | 'cta-primary' | 'cta-secondary' | 'destructive';
+export type TSinchButtonElement = HTMLElement & {
     /** Type, `primary` by default */
     type: TSinchButtonType;
     /** Size, `m` by default */
@@ -25,7 +25,7 @@ export declare type TSinchButtonElement = HTMLElement & {
     /** Disabled */
     setAttribute(attr: 'disabled', value: ''): void;
 };
-export declare type TSinchButtonReact = TSinchElementReact<TSinchButtonElement> & {
+export type TSinchButtonReact = TSinchElementReact<TSinchButtonElement> & {
     /** Type, `primary` by default */
     type?: TSinchButtonType;
     /** Size, `m` by default */

package/button/utils.d.ts

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

package/card/index.js

@@ -22,6 +22,7 @@ defineCustomElement('sinch-card', class extends NectaryElement {
   }
   connectedCallback() {
     this.#$illustrationSlot.addEventListener('slotchange', this.#onIllustrationSlotChange);
+    this.#onIllustrationSlotChange();
   }
   disconnectedCallback() {
     this.#$illustrationSlot.removeEventListener('slotchange', this.#onIllustrationSlotChange);

package/card/types.d.ts

@@ -1,5 +1,5 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchCardElement = HTMLElement & {
+export type TSinchCardElement = HTMLElement & {
     /** Text */
     text: string;
     /** Caption */
@@ -17,7 +17,7 @@ export declare type TSinchCardElement = HTMLElement & {
     /** Disabled */
     setAttribute(name: 'disabled', value: ''): void;
 };
-export declare type TSinchCardReact = TSinchElementReact<TSinchCardElement> & {
+export type TSinchCardReact = TSinchElementReact<TSinchCardElement> & {
     /** Text */
     text: string;
     /** Caption */

package/card-container/types.d.ts

@@ -1,3 +1,3 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchCardContainerElement = HTMLElement;
-export declare type TSinchCardContainerReact = TSinchElementReact<TSinchCardContainerElement>;
+export type TSinchCardContainerElement = HTMLElement;
+export type TSinchCardContainerReact = TSinchElementReact<TSinchCardContainerElement>;

package/chat/types.d.ts

@@ -1,3 +1,3 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchChatElement = HTMLElement;
-export declare type TSinchChatReact = TSinchElementReact<TSinchChatElement>;
+export type TSinchChatElement = HTMLElement;
+export type TSinchChatReact = TSinchElementReact<TSinchChatElement>;

package/chat-block/types.d.ts

@@ -1,6 +1,6 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchChatBlockType = 'customer' | 'agent' | 'agent-prev';
-export declare type TSinchChatBlockElement = HTMLElement & {
+export type TSinchChatBlockType = 'customer' | 'agent' | 'agent-prev';
+export type TSinchChatBlockElement = HTMLElement & {
     /** Type */
     type: TSinchChatBlockType | null;
     /** First name */
@@ -18,7 +18,7 @@ export declare type TSinchChatBlockElement = HTMLElement & {
     /** Timestamp */
     setAttribute(name: 'timestamp', value: string): void;
 };
-export declare type TSinchChatBlockReact = TSinchElementReact<TSinchChatBlockElement> & {
+export type TSinchChatBlockReact = TSinchElementReact<TSinchChatBlockElement> & {
     /** Type */
     type: TSinchChatBlockType;
     /** First name */

package/chat-bubble/index.d.ts

@@ -1,7 +1,4 @@
-import '../icons/query-builder';
-import '../icons/check';
-import '../icons/done-all';
-import '../icons/error-outline';
+import '../icon';
 import type { TSinchChatBubbleElement, TSinchChatBubbleReact } from './types';
 declare global {
     namespace JSX {

package/chat-bubble/index.js

@@ -1,22 +1,28 @@
-import '../icons/query-builder';
-import '../icons/check';
-import '../icons/done-all';
-import '../icons/error-outline';
-import { defineCustomElement, getAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;padding:12px 16px;border-radius:16px;max-width:595px;box-sizing:border-box}:host([data-type=customer])>#wrapper{background-color:var(--sinch-color-snow-500);border-top-left-radius:0}:host([data-type=agent-prev])>#wrapper{background-color:var(--sinch-color-snow-700);border-top-right-radius:0}:host([data-type=agent])>#wrapper{background-color:var(--sinch-color-honey-200);border-top-right-radius:0}#text{font:var(--sinch-font-text-m);color:var(--sinch-color-stormy-500)}sinch-icon-check,sinch-icon-done-all,sinch-icon-error-outline,sinch-icon-query-builder{display:none;position:absolute;right:16px;bottom:12px;--sinch-size-icon:16px;--sinch-color-icon:var(--sinch-color-stormy-500)}:host([status=sending]) sinch-icon-query-builder{display:block}:host([status=sent]) sinch-icon-check{display:block}:host([status=received]) sinch-icon-done-all{display:block}:host([status=seen]) sinch-icon-done-all{display:block;--sinch-color-icon:var(--sinch-color-feedback-success-icon)}:host([status=error]) sinch-icon-error-outline{display:block;--sinch-color-icon:var(--sinch-color-feedback-invalid-icon)}:host([status]:not([status=""])) #wrapper{padding-right:42px}</style><div id="wrapper"><span id="text"></span><sinch-icon-query-builder></sinch-icon-query-builder><sinch-icon-check></sinch-icon-check><sinch-icon-done-all></sinch-icon-done-all><sinch-icon-error-outline></sinch-icon-error-outline></div>';
+import '../icon';
+import { defineCustomElement, getAttribute, getCssVar, getLiteralAttribute, NectaryElement, updateAttribute, updateLiteralAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;padding:12px 16px;border-radius:16px;max-width:595px;box-sizing:border-box}:host([data-type=customer])>#wrapper{background-color:var(--sinch-color-snow-500);border-top-left-radius:0}:host([data-type=agent-prev])>#wrapper{background-color:var(--sinch-color-snow-700);border-top-right-radius:0}:host([data-type=agent])>#wrapper{background-color:var(--sinch-color-honey-200);border-top-right-radius:0}#text{font:var(--sinch-font-text-m);color:var(--sinch-color-stormy-500)}#icon{display:none;position:absolute;right:16px;bottom:12px;--sinch-size-icon:16px;--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-icon-font-variation-settings:var(--sinch-chat-icon-font-variation-settings)}:host([status=error]) #icon,:host([status=received]) #icon,:host([status=seen]) #icon,:host([status=sending]) #icon,:host([status=sent]) #icon{display:block}:host([status=seen]) #icon{--sinch-color-icon:var(--sinch-color-feedback-success-icon)}:host([status=error]) #icon{--sinch-color-icon:var(--sinch-color-feedback-invalid-icon)}:host([status]:not([status=""])) #wrapper{padding-right:42px}</style><div id="wrapper"><span id="text"></span><sinch-icon id="icon"></sinch-icon></div>';
 import { statusValues, typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-chat-bubble', class extends NectaryElement {
   #$text;
+  #$icon;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$text = shadowRoot.querySelector('#text');
+    this.#$icon = shadowRoot.querySelector('#icon');
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.#updateIcon();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
   }
   static get observedAttributes() {
-    return ['text'];
+    return ['text', 'status'];
   }
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
@@ -25,6 +31,11 @@ defineCustomElement('sinch-chat-bubble', class extends NectaryElement {
           this.#$text.textContent = newVal;
           break;
         }
+      case 'status':
+        {
+          this.#updateIcon();
+          break;
+        }
     }
   }
   set text(value) {
@@ -42,4 +53,11 @@ defineCustomElement('sinch-chat-bubble', class extends NectaryElement {
   get status() {
     return getLiteralAttribute(this, statusValues, 'status', null);
   }
+  #updateIcon() {
+    if (!this.isConnected) {
+      return;
+    }
+    const status = this.status;
+    updateAttribute(this.#$icon, 'name', status !== null ? getCssVar(this, `--sinch-chat-icon-${status}`) : null);
+  }
 });

package/chat-bubble/types.d.ts

@@ -1,7 +1,7 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchChatBubbleType = 'customer' | 'agent' | 'agent-prev';
-export declare type TSinchChatBubbleStatus = 'sending' | 'sent' | 'received' | 'seen' | 'error';
-export declare type TSinchChatBubbleElement = HTMLElement & {
+export type TSinchChatBubbleType = 'customer' | 'agent' | 'agent-prev';
+export type TSinchChatBubbleStatus = 'sending' | 'sent' | 'received' | 'seen' | 'error';
+export type TSinchChatBubbleElement = HTMLElement & {
     readonly type: TSinchChatBubbleType | null;
     /** Text */
     text: string;
@@ -12,7 +12,7 @@ export declare type TSinchChatBubbleElement = HTMLElement & {
     /** Status */
     setAttribute(name: 'status', value: TSinchChatBubbleStatus): void;
 };
-export declare type TSinchChatBubbleReact = TSinchElementReact<TSinchChatBubbleElement> & {
+export type TSinchChatBubbleReact = TSinchElementReact<TSinchChatBubbleElement> & {
     /** Text */
     text: string;
     /** Status */

package/checkbox/types.d.ts

@@ -1,30 +1,52 @@
 import type { TSinchElementReact } from '../types';
 import type { SyntheticEvent } from 'react';
-export declare type TSinchCheckboxElement = HTMLElement & {
+export type TSinchCheckboxElement = HTMLElement & {
+    /** Value */
     checked: boolean;
+    /** Indeterminate */
     indeterminate: boolean;
+    /** Disabled */
     disabled: boolean;
+    /** Invalid */
     invalid: boolean;
+    /** Text */
     text: string | null;
+    /** Change value event */
     addEventListener(type: '-change', listener: (e: CustomEvent<boolean>) => void): void;
+    /** Focus event */
     addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
+    /** Blur event */
     addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
+    /** Checked */
     setAttribute(name: 'checked', value: ''): void;
+    /** Indeterminate */
     setAttribute(name: 'indeterminate', value: ''): void;
+    /** Disabled */
     setAttribute(name: 'disabled', value: ''): void;
+    /** Invalid */
     setAttribute(name: 'invalid', value: ''): void;
+    /** Text */
     setAttribute(name: 'text', value: string): void;
 };
-export declare type TSinchCheckboxReact = TSinchElementReact<TSinchCheckboxElement> & {
+export type TSinchCheckboxReact = TSinchElementReact<TSinchCheckboxElement> & {
+    /** Checked */
     checked?: boolean;
+    /** Indeterminate */
     indeterminate?: boolean;
+    /** Disabled */
     disabled?: boolean;
+    /** Invalid */
     invalid?: boolean;
+    /** Text */
     text?: string;
+    /** Label that is used for a11y – might be different from `label` */
     'aria-label': string;
     /** @deprecated */
     onChange?: (event: SyntheticEvent<TSinchCheckboxElement, CustomEvent<boolean>>) => void;
+    /** Change value handler */
     'on-change'?: (e: CustomEvent<boolean>) => void;
+    /** Focus handler */
     'on-focus'?: (e: CustomEvent<void>) => void;
+    /** Blur handler */
     'on-blur'?: (e: CustomEvent<void>) => void;
 };

package/chip/index.d.ts

@@ -1,5 +1,5 @@
 import '../text';
-import '../icons/cancel';
+import '../icon';
 import type { TSinchChipElement, TSinchChipReact } from './types';
 declare global {
     namespace JSX {

package/chip/index.js

@@ -1,13 +1,14 @@
 import '../text';
-import '../icons/cancel';
-import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, getReactEventHandler } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#button{all:initial;position:relative;display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:24px;padding:0 5px 0 9px;border-radius:12px;background-color:var(--sinch-chip-color-default-bg);color:var(--sinch-chip-color-default-fg);box-sizing:border-box;cursor:pointer;--sinch-color-icon:var(--sinch-chip-color-default-fg);--sinch-size-icon:16px}#button:focus-visible::after{content:"";position:absolute;inset:-4px;border-radius:16px;border:2px solid var(--sinch-color-border-focus);pointer-events:none}#text{flex:1}:host([small]:not([small=false])) #button{height:20px;border-radius:10px;padding:0 3px 0 7px}:host([small]:not([small=false])) #button:focus-visible::after{border-radius:14px}::slotted(*){margin-left:-4px}</style><button id="button"><slot name="icon"></slot><sinch-text id="text" type="xs" ellipsis></sinch-text><sinch-icon-cancel id="close"></sinch-icon-cancel></button>';
+import '../icon';
+import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, getReactEventHandler, getCssVar } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#button{all:initial;position:relative;display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:24px;padding:0 5px 0 9px;border-radius:12px;background-color:var(--sinch-chip-color-default-bg);color:var(--sinch-chip-color-default-fg);box-sizing:border-box;cursor:pointer;--sinch-color-icon:var(--sinch-chip-color-default-fg);--sinch-size-icon:16px}#button:focus-visible::after{content:"";position:absolute;inset:-4px;border-radius:16px;border:2px solid var(--sinch-color-border-focus);pointer-events:none}#text{flex:1}:host([small]:not([small=false])) #button{height:20px;border-radius:10px;padding:0 3px 0 7px}:host([small]:not([small=false])) #button:focus-visible::after{border-radius:14px}::slotted(*){margin-left:-4px}</style><button id="button"><slot name="icon"></slot><sinch-text id="text" type="xs" ellipsis></sinch-text><sinch-icon id="icon-close"></sinch-icon></button>';
 import { assertChipColor, getChipColorBg, getChipColorFg } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-chip', class extends NectaryElement {
   #$text;
   #$button;
+  #$iconClose;
   #controller = null;
   constructor() {
     super();
@@ -15,6 +16,7 @@ defineCustomElement('sinch-chip', class extends NectaryElement {
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$button = shadowRoot.querySelector('#button');
     this.#$text = shadowRoot.querySelector('#text');
+    this.#$iconClose = shadowRoot.querySelector('#icon-close');
   }
   connectedCallback() {
     super.connectedCallback();
@@ -41,6 +43,7 @@ defineCustomElement('sinch-chip', class extends NectaryElement {
     this.addEventListener('-blur', this.#onBlurReactHandler, {
       signal
     });
+    updateAttribute(this.#$iconClose, 'name', getCssVar(this, '--sinch-chip-icon-close'));
     this.#updateColor();
   }
   disconnectedCallback() {

package/chip/types.d.ts

@@ -1,5 +1,5 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchChipElement = HTMLElement & {
+export type TSinchChipElement = HTMLElement & {
     /** Text */
     text: string;
     /** Color, gray by default */
@@ -19,7 +19,7 @@ export declare type TSinchChipElement = HTMLElement & {
     /** Small */
     setAttribute(name: 'small', value: ''): void;
 };
-export declare type TSinchChipReact = TSinchElementReact<TSinchChipElement> & {
+export type TSinchChipReact = TSinchElementReact<TSinchChipElement> & {
     /** Text */
     text: string;
     /** Color, gray by default */

package/{icons/text-rotate-up → code-tag}/index.d.ts

@@ -1,11 +1,11 @@
-import type { TSinchIconElement, TSinchIconReact } from '../types';
+import type { TSinchCodeTagElement, TSinchCodeTagReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-icon-text-rotate-up': TSinchIconReact;
+            'sinch-code-tag': TSinchCodeTagReact;
         }
     }
     interface HTMLElementTagNameMap {
-        'sinch-icon-text-rotate-up': TSinchIconElement;
+        'sinch-code-tag': TSinchCodeTagElement;
     }
 }