@nectary/components 1.3.3 → 2.0.0

package/accordion/index.js

@@ -24,9 +24,6 @@ defineCustomElement('sinch-accordion', class extends NectaryElement {
     this.#$slot.removeEventListener('option-change', this.#onOptionChange);
     this.removeEventListener('-change', this.#onChangeReactHandler);
   }
-  get nodeName() {
-    return 'select';
-  }
   set value(value) {
     updateAttribute(this, 'value', value);
   }

package/accordion/types.d.ts

@@ -1,5 +1,4 @@
 import type { TSinchElementReact } from '../types';
-import type { SyntheticEvent } from 'react';
 export type TSinchAccordionElement = HTMLElement & {
     /** Value */
     value: string;
@@ -17,8 +16,6 @@ export type TSinchAccordionReact = TSinchElementReact<TSinchAccordionElement> &
     value: string;
     multiple?: boolean;
     /** Allows to expand multiple items simultanously */
-    /** @deprecated */
-    onChange?: (e: SyntheticEvent<TSinchAccordionElement, CustomEvent<string>>) => void;
     /** Change value handler */
     'on-change'?: (e: CustomEvent<string>) => void;
 };

package/accordion-item/index.d.ts

@@ -1,4 +1,6 @@
 import '../icon';
+import '../title';
+import '../text';
 import type { TSinchAccordionItemElement, TSinchAccordionItemReact } from './types';
 declare global {
     namespace JSX {

package/accordion-item/index.js

@@ -1,26 +1,25 @@
 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 '../title';
+import '../text';
+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-comp-accordion-color-default-border-initial)}#button{all:initial;cursor:pointer;display:flex;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:48px;padding:12px 8px;--sinch-global-color-icon:var(--sinch-comp-accordion-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-accordion-size-icon)}#button>*{pointer-events:none}#button:disabled{cursor:initial;--sinch-global-color-icon:var(--sinch-comp-accordion-color-disabled-icon-initial)}#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-comp-accordion-color-default-status-success)}:host([status=warn]) #button::before{content:"";background-color:var(--sinch-comp-accordion-color-default-status-warning)}:host([status=error]) #button::before{content:"";background-color:var(--sinch-comp-accordion-color-default-status-error)}:host([status=info]) #button::before{content:"";background-color:var(--sinch-comp-accordion-color-default-status-info)}#title{flex:1;min-width:0;--sinch-comp-title-font:var(--sinch-comp-accordion-font-title);--sinch-global-color-text:var(--sinch-comp-accordion-color-default-title-initial)}#button:disabled>#title{--sinch-global-color-text:var(--sinch-comp-accordion-color-disabled-title-initial)}#content{display:none;overflow-y:auto;flex-shrink:1;min-height:0;padding:0 8px 18px}#dropdown-icon{transform:rotate(0)}#button[aria-expanded=true]>#dropdown-icon{transform:rotate(180deg)}#button[aria-expanded=true]+#content{display:block}#optional{--sinch-comp-text-font:var(--sinch-comp-accordion-font-optional-text);--sinch-global-color-text:var(--sinch-comp-accordion-color-default-optional-text-initial)}#button:disabled>#optional{--sinch-global-color-text:var(--sinch-comp-accordion-color-disabled-optional-text-initial)}</style><div id="wrapper"><button id="button" aria-controls="content" aria-expanded="false"><slot name="icon"></slot><sinch-title id="title" level="3" type="m" ellipsis></sinch-title><sinch-text id="optional" type="m"></sinch-text><sinch-icon id="dropdown-icon" name="keyboard_arrow_down"></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;
+  #$title;
   #$optionalText;
   constructor() {
     super();
     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.#$title = 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);
@@ -28,6 +27,33 @@ defineCustomElement('sinch-accordion-item', class extends NectaryElement {
   static get observedAttributes() {
     return ['label', 'disabled', 'data-checked', 'optionaltext'];
   }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+    switch (name) {
+      case 'label':
+        {
+          updateAttribute(this.#$title, 'text', newVal);
+          break;
+        }
+      case 'disabled':
+        {
+          this.#$button.disabled = isAttrTrue(newVal);
+          break;
+        }
+      case 'data-checked':
+        {
+          updateExplicitBooleanAttribute(this.#$button, 'aria-expanded', isAttrTrue(newVal));
+          break;
+        }
+      case 'optionaltext':
+        {
+          this.#$optionalText.textContent = newVal;
+          break;
+        }
+    }
+  }
   set value(value) {
     updateAttribute(this, 'value', value);
   }
@@ -58,33 +84,6 @@ defineCustomElement('sinch-accordion-item', class extends NectaryElement {
   get optionalText() {
     return getAttribute(this, 'optionaltext');
   }
-  attributeChangedCallback(name, oldVal, newVal) {
-    if (oldVal === newVal) {
-      return;
-    }
-    switch (name) {
-      case 'label':
-        {
-          this.#$buttonContent.textContent = newVal;
-          break;
-        }
-      case 'disabled':
-        {
-          this.#$button.disabled = isAttrTrue(newVal);
-          break;
-        }
-      case 'data-checked':
-        {
-          updateExplicitBooleanAttribute(this.#$button, 'aria-expanded', isAttrTrue(newVal));
-          break;
-        }
-      case 'optionaltext':
-        {
-          this.#$optionalText.textContent = newVal;
-          break;
-        }
-    }
-  }
   #onButtonClick = e => {
     e.stopPropagation();
     this.dispatchEvent(new CustomEvent('option-change', {

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([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 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;background-color:var(--sinch-comp-action-menu-color-default-background-initial);--sinch-global-color-text:var(--sinch-comp-action-menu-color-default-text-initial);--sinch-global-color-icon:var(--sinch-comp-action-menu-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-action-menu-size-icon)}:host([data-selected])>#wrapper{background-color:var(--sinch-comp-action-menu-color-default-background-selected)}:host(:hover)>#wrapper{background-color:var(--sinch-comp-action-menu-color-default-background-hover)}:host([disabled])>#wrapper{cursor:initial;pointer-events:none;background-color:var(--sinch-comp-action-menu-color-disabled-background-initial);--sinch-global-color-text:var(--sinch-comp-action-menu-color-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-action-menu-color-disabled-icon-initial)}#content{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-action-menu-font-option)}::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 {
@@ -45,7 +45,7 @@ defineCustomElement('sinch-action-menu-option', class ActionMenuOption extends N
         }
       case 'disabled':
         {
-          updateBooleanAttribute(this, 'disabled', isAttrTrue(newVal));
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
           break;
         }
       case 'data-selected':

package/alert/index.js

@@ -1,25 +1,22 @@
 import '../icon';
 import '../rich-text';
 import '../text';
-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 { 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}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-alert-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-alert-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-alert-color-info-default-background)}#icon-error,#icon-info,#icon-warn{display:none}#icon-warn{--sinch-global-color-icon:var(--sinch-comp-alert-color-warning-default-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-alert-color-error-default-icon)}#icon-info{--sinch-global-color-icon:var(--sinch-comp-alert-color-info-default-icon)}:host([type=error]) #icon-error,:host([type=info]) #icon-info,:host([type=warn]) #icon-warn{display:block}#text{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;--sinch-comp-rich-text-font:var(--sinch-comp-alert-font-body)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-alert-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-alert-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-alert-color-info-default-text)}</style><div id="wrapper"><sinch-icon id="icon-info" name="info"></sinch-icon><sinch-icon id="icon-warn" name="report_problem"></sinch-icon><sinch-icon id="icon-error" name="report"></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();
@@ -46,7 +43,6 @@ defineCustomElement('sinch-alert', class extends NectaryElement {
           if ('production' !== 'production') {
             assertType(newVal);
           }
-          this.#updateIcon();
           break;
         }
       case 'text':
@@ -56,10 +52,4 @@ defineCustomElement('sinch-alert', class extends NectaryElement {
         }
     }
   }
-  #updateIcon() {
-    if (!this.isConnected) {
-      return;
-    }
-    updateAttribute(this.#$icon, 'name', getCssVar(this, `--sinch-alert-icon-${this.type}`));
-  }
 });

package/avatar/index.js

@@ -1,6 +1,6 @@
 import { defineCustomElement, getAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateLiteralAttribute } from '../utils';
 import { assertSize, DEFAULT_SIZE, sizeValues } from '../utils/size';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:40px;height:40px;background-color:var(--sinch-color-snow-100);border-radius:50%}#circle{position:relative;width:calc(100% - 2px);height:calc(100% - 2px);left:1px;top:1px;border-radius:50%;-webkit-mask:linear-gradient(#fff,#000);mask:linear-gradient(#fff,#000);background-color:var(--sinch-avatar-color-default-bg);color:var(--sinch-avatar-color-default-fg)}#text{display:block;width:100%;height:100%;font:var(--sinch-font-title-s);line-height:38px;text-transform:uppercase;text-align:center}:host([size="l"]) #wrapper{width:56px;height:56px}:host([size="l"]) #text{font:var(--sinch-font-title-m);line-height:54px}:host([size="s"]) #wrapper{width:24px;height:24px}:host([size="s"]) #text{font:var(--sinch-font-text-xs);line-height:22px}#image{display:none;position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain}:host([src]:not([src=""])) #image{display:block}#status-wrapper{position:absolute;left:calc(85% - 5px);top:calc(85% - 5px);width:10px;height:10px;padding:1px;box-sizing:border-box;border-radius:50%;background-color:var(--sinch-color-snow-100);display:none;pointer-events:none}#status{width:8px;height:8px;border-radius:50%}:host([status=away]) #status-wrapper,:host([status=busy]) #status-wrapper,:host([status=offline]) #status-wrapper,:host([status=online]) #status-wrapper{display:block}:host([status=online]) #status{background-color:var(--sinch-avatar-status-color-online)}:host([status=away]) #status{background-color:var(--sinch-avatar-status-color-away)}:host([status=busy]) #status{background-color:var(--sinch-avatar-status-color-busy)}:host([status=offline]) #status{background-color:var(--sinch-avatar-status-color-offline)}</style><div id="wrapper"><div id="circle"><span id="text"></span><img id="image" alt=""/></div><div id="status-wrapper"><div id="status"></div></div></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:var(--sinch-local-size);height:var(--sinch-local-size);background-color:var(--sinch-comp-avatar-border-color-default-initial);border-radius:var(--sinch-comp-avatar-shape-radius);--sinch-local-size:var(--sinch-comp-avatar-size-m)}:host([size="l"]) #wrapper{--sinch-local-size:var(--sinch-comp-avatar-size-l)}:host([size="s"]) #wrapper{--sinch-local-size:var(--sinch-comp-avatar-size-s)}#text{display:block;width:100%;height:100%;font:var(--sinch-comp-avatar-container-font-size-m-text);line-height:calc(var(--sinch-local-size) - 2px);text-transform:uppercase;text-align:center}:host([size="l"]) #text{font:var(--sinch-comp-avatar-container-font-size-l-text);line-height:calc(var(--sinch-local-size) - 2px)}:host([size="s"]) #text{font:var(--sinch-comp-avatar-container-font-size-s-text);line-height:calc(var(--sinch-local-size) - 2px)}#circle{position:relative;width:calc(100% - 2px);height:calc(100% - 2px);left:1px;top:1px;border-radius:50%;-webkit-mask:linear-gradient(#fff,#000);mask:linear-gradient(#fff,#000);background-color:var(--sinch-comp-avatar-container-color-default-background);color:var(--sinch-comp-avatar-container-color-default-foreground)}#image{display:none;position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain}:host([src]:not([src=""])) #image{display:block}#status-wrapper{position:absolute;left:calc(85% - 5px);top:calc(85% - 5px);width:10px;height:10px;padding:1px;box-sizing:border-box;border-radius:50%;background-color:var(--sinch-comp-avatar-border-color-default-initial);display:none;pointer-events:none}#status{width:8px;height:8px;border-radius:50%}:host([status=away]) #status-wrapper,:host([status=busy]) #status-wrapper,:host([status=offline]) #status-wrapper,:host([status=online]) #status-wrapper{display:block}:host([status=online]) #status{background-color:var(--sinch-comp-avatar-status-color-online-default-background)}:host([status=away]) #status{background-color:var(--sinch-comp-avatar-status-color-away-default-background)}:host([status=busy]) #status{background-color:var(--sinch-comp-avatar-status-color-busy-default-background)}:host([status=offline]) #status{background-color:var(--sinch-comp-avatar-status-color-offline-default-background)}</style><div id="wrapper"><div id="circle"><span id="text"></span><img id="image" alt=""/></div><div id="status-wrapper"><div id="status"></div></div></div>';
 import { assertAvatarColor, assertStatus, getAvatarColorBg, getAvatarColorFg, statusValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/avatar/utils.js

@@ -8,13 +8,13 @@ export const assertStatus = value => {
   }
 };
 export const getAvatarColorBg = id => {
-  return `var(--sinch-avatar-color-${id}-bg)`;
+  return `var(--sinch-comp-avatar-container-color-${id}-background)`;
 };
 export const getAvatarColorFg = id => {
-  return `var(--sinch-avatar-color-${id}-fg)`;
+  return `var(--sinch-comp-avatar-container-color-${id}-foreground)`;
 };
 export const assertAvatarColor = (root, id) => {
-  if (id === null || window.getComputedStyle(root).getPropertyValue(`--sinch-avatar-color-${id}-bg`).length === 0) {
+  if (id === null || window.getComputedStyle(root).getPropertyValue(`--sinch-comp-avatar-container-color-${id}-background`).length === 0) {
     throw new Error(`Invalid sinch-avatar color name: ${id}`);
   }
 };

package/badge/index.js

@@ -1,7 +1,7 @@
-import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getRect, NectaryElement, setClass, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
 import { assertSize, DEFAULT_SIZE, sizeValues } from '../utils/size';
-const templateHTML = '<style>:host{display:inline-flex;flex-direction:column;position:relative}#badge-wrapper{position:absolute;left:0;top:0;width:fit-content;border-radius:11px;padding:1px;pointer-events:none;background-color:var(--sinch-color-snow-100)}#badge{box-sizing:border-box;color:var(--sinch-badge-color-default-fg);background-color:var(--sinch-badge-color-default-bg);width:20px;height:20px;border-radius:10px}#badge.long{width:fit-content;padding:0 5px}#text{display:block;width:100%;height:100%;text-align:center;font-family:var(--sinch-font-mono-family);font-weight:400;font-size:14px;line-height:20px;text-rendering:optimizelegibility}:host([size="m"]) #badge-wrapper{left:calc(100% - 8px);top:-8px}:host([size="m"]) #badge{width:14px;height:14px}:host([size="m"]) #badge.long{width:fit-content;padding:0 3px}:host([size="m"]) #text{font-size:12px;line-height:14px}:host([size="s"]) #badge{width:8px;height:8px;padding:0}:host([size="s"]) #text{display:none}:host([hidden]:not([hidden=false])) #badge-wrapper{display:none}</style><slot id="slot"></slot><div id="badge-wrapper"><div id="badge"><span id="text"></span></div></div>';
-import { assertBadgeColor, assertMode, getBadgeColorBg, getBadgeColorFg, modeValues } from './utils';
+const templateHTML = '<style>:host{display:inline-flex;flex-direction:column;position:relative}#badge-wrapper{position:absolute;left:0;top:0;width:fit-content;border-radius:var(--sinch-comp-badge-shape-radius);padding:1px;pointer-events:none;background-color:var(--sinch-comp-badge-color-border)}#badge{box-sizing:border-box;color:var(--sinch-comp-badge-color-text);background-color:var(--sinch-comp-badge-color-background);width:20px;height:20px;border-radius:var(--sinch-comp-badge-shape-radius)}#badge.long{width:fit-content;padding:0 5px}#text{display:block;width:100%;height:100%;text-align:center;font:var(--sinch-comp-badge-font-size-l);line-height:20px;text-rendering:optimizelegibility}:host([size="m"]) #badge-wrapper{left:calc(100% - 8px);top:-8px}:host([size="m"]) #badge{width:14px;height:14px}:host([size="m"]) #badge.long{width:fit-content;padding:0 3px}:host([size="m"]) #text{font:var(--sinch-comp-badge-font-size-m);line-height:14px}:host([size="s"]) #badge{width:8px;height:8px;padding:0}:host([size="s"]) #text{display:none}:host([hidden]) #badge-wrapper{display:none}</style><slot id="slot"></slot><div id="badge-wrapper"><div id="badge"><span id="text"></span></div></div>';
+import { assertMode, modeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-badge', class extends NectaryElement {
@@ -20,13 +20,50 @@ defineCustomElement('sinch-badge', class extends NectaryElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    this.#updateColor();
     this.#observer.observe(this);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.#observer.unobserve(this);
   }
+  static get observedAttributes() {
+    return ['text', 'size', 'mode', 'hidden'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+    switch (name) {
+      case 'text':
+        {
+          this.#$text.textContent = newVal;
+          setClass(this.#$badge, 'long', newVal !== null && newVal.length > 1);
+          break;
+        }
+      case 'size':
+        {
+          if ('production' !== 'production') {
+            assertSize(newVal, 'sinch-badge');
+          }
+          this.#updatePosition();
+          break;
+        }
+      case 'mode':
+        {
+          if ('production' !== 'production') {
+            assertMode(newVal);
+          }
+          this.#updatePosition();
+          break;
+        }
+      case 'hidden':
+        {
+          this.#updatePosition();
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+          break;
+        }
+    }
+  }
   get text() {
     return getAttribute(this, 'text', '');
   }
@@ -45,12 +82,6 @@ defineCustomElement('sinch-badge', class extends NectaryElement {
   set mode(value) {
     updateLiteralAttribute(this, modeValues, 'mode', value);
   }
-  get color() {
-    return getAttribute(this, 'color');
-  }
-  set color(value) {
-    updateAttribute(this, 'color', value);
-  }
   get hidden() {
     return getBooleanAttribute(this, 'hidden');
   }
@@ -69,63 +100,6 @@ defineCustomElement('sinch-badge', class extends NectaryElement {
     }
     return getRect(this.#$badgeWrapper);
   }
-  static get observedAttributes() {
-    return ['text', 'size', 'mode', 'color', 'hidden'];
-  }
-  attributeChangedCallback(name, _, newVal) {
-    switch (name) {
-      case 'text':
-        {
-          this.#$text.textContent = newVal;
-          setClass(this.#$badge, 'long', newVal !== null && newVal.length > 1);
-          break;
-        }
-      case 'size':
-        {
-          if ('production' !== 'production') {
-            assertSize(newVal, 'sinch-badge');
-          }
-          this.#updatePosition();
-          break;
-        }
-      case 'mode':
-        {
-          if ('production' !== 'production') {
-            assertMode(newVal);
-          }
-          this.#updatePosition();
-          break;
-        }
-      case 'color':
-        {
-          this.#updateColor();
-          break;
-        }
-      case 'hidden':
-        {
-          this.#updatePosition();
-          break;
-        }
-    }
-  }
-  #updateColor() {
-    if (!this.isConnected) {
-      return;
-    }
-    const colorName = this.color;
-    if (colorName !== null && colorName.length > 0) {
-      if ('production' !== 'production') {
-        assertBadgeColor(this, colorName);
-      }
-      const bg = getBadgeColorBg(colorName);
-      const fg = getBadgeColorFg(colorName);
-      this.#$badge.style.setProperty('background-color', bg);
-      this.#$badge.style.setProperty('color', fg);
-    } else {
-      this.#$badge.style.removeProperty('background-color');
-      this.#$badge.style.removeProperty('color');
-    }
-  }
   #updatePosition() {
     if (this.hidden) {
       return;

package/badge/types.d.ts

@@ -8,8 +8,6 @@ export type TSinchBadgeElement = HTMLElement & {
     size: TSinchSize;
     /** Mode, `square` by default */
     mode: TSinchBadgeMode;
-    /** Color */
-    color: string | null;
     /** Hidden */
     hidden: boolean;
     readonly badgeRect: TRect;
@@ -31,8 +29,6 @@ export type TSinchBadgeReact = TSinchElementReact<TSinchBadgeElement> & {
     size?: TSinchSize;
     /** Mode, `square` by default */
     mode?: TSinchBadgeMode;
-    /** Color */
-    color?: string;
     /** Hidden */
     hidden?: boolean;
 };

package/badge/utils.d.ts

@@ -2,7 +2,4 @@ import type { TSinchBadgeMode } from './types';
 export declare const modeValues: readonly 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;
-export declare const assertBadgeColor: (root: Element, id: string | null) => void;
 export {};

package/badge/utils.js

@@ -3,15 +3,4 @@ export const assertMode = value => {
   if (value === null || !modeValues.includes(value)) {
     throw new Error(`sinch-badge: invalid mode attribute: ${value}`);
   }
-};
-export const getBadgeColorBg = id => {
-  return `var(--sinch-badge-color-${id}-bg)`;
-};
-export const getBadgeColorFg = id => {
-  return `var(--sinch-badge-color-${id}-fg)`;
-};
-export const assertBadgeColor = (root, id) => {
-  if (id === null || window.getComputedStyle(root).getPropertyValue(`--sinch-badge-color-${id}-bg`).length === 0) {
-    throw new Error(`Invalid sinch-badge color name: ${id}`);
-  }
 };

package/button/index.js

@@ -1,6 +1,6 @@
 import { defineCustomElement, getBooleanAttribute, getAttribute, isAttrTrue, updateBooleanAttribute, updateAttribute, NectaryElement, getReactEventHandler, getLiteralAttribute, updateLiteralAttribute, Context, subscribeContext } from '../utils';
 import { assertSize, DEFAULT_SIZE, sizeValues } from '../utils/size';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;--sinch-size:var(--sinch-size-m);--sinch-size-icon:var(--sinch-button-icon-size-m);--sinch-shape-radius:var(--sinch-shape-radius-m);--sinch-button-font:var(--sinch-button-font-m)}:host([data-size="l"]){--sinch-size:var(--sinch-size-l);--sinch-size-icon:var(--sinch-button-icon-size-l);--sinch-shape-radius:var(--sinch-shape-radius-l);--sinch-button-font:var(--sinch-button-font-l)}:host([data-size="m"]){--sinch-size:var(--sinch-size-m);--sinch-size-icon:var(--sinch-button-icon-size-m);--sinch-shape-radius:var(--sinch-shape-radius-m);--sinch-button-font:var(--sinch-button-font-m)}:host([data-size="s"]){--sinch-size:var(--sinch-size-s);--sinch-size-icon:var(--sinch-button-icon-size-s);--sinch-shape-radius:var(--sinch-shape-radius-s);--sinch-button-font:var(--sinch-button-font-s)}:host([type=primary]){--sinch-button-color-background:var(--sinch-button-primary-color-background);--sinch-button-color-background-hover:var(--sinch-button-primary-color-background-hover);--sinch-button-color-background-active:var(--sinch-button-primary-color-background-active);--sinch-button-color-background-disabled:var(--sinch-button-primary-color-background-disabled);--sinch-button-color-border:var(--sinch-button-primary-color-border);--sinch-button-color-border-hover:var(--sinch-button-primary-color-border-hover);--sinch-button-color-border-active:var(--sinch-button-primary-color-border-active);--sinch-button-color-border-disabled:var(--sinch-button-primary-color-border-disabled);--sinch-button-color-text:var(--sinch-button-primary-color-text);--sinch-button-color-text-hover:var(--sinch-button-primary-color-text-hover);--sinch-button-color-text-active:var(--sinch-button-primary-color-text-active);--sinch-button-color-text-disabled:var(--sinch-button-primary-color-text-disabled);--sinch-button-color-icon:var(--sinch-button-primary-color-icon);--sinch-button-color-icon-hover:var(--sinch-button-primary-color-icon-hover);--sinch-button-color-icon-active:var(--sinch-button-primary-color-icon-active);--sinch-button-color-icon-disabled:var(--sinch-button-primary-color-icon-disabled);--sinch-button-mix-blend-mode:var(--sinch-button-primary-mix-blend-mode);--sinch-elevation-level:var(--sinch-elevation-level-1)}:host([type=secondary]){--sinch-button-color-background:var(--sinch-button-secondary-color-background);--sinch-button-color-background-hover:var(--sinch-button-secondary-color-background-hover);--sinch-button-color-background-active:var(--sinch-button-secondary-color-background-active);--sinch-button-color-background-disabled:var(--sinch-button-secondary-color-background-disabled);--sinch-button-color-border:var(--sinch-button-secondary-color-border);--sinch-button-color-border-hover:var(--sinch-button-secondary-color-border-hover);--sinch-button-color-border-active:var(--sinch-button-secondary-color-border-active);--sinch-button-color-border-disabled:var(--sinch-button-secondary-color-border-disabled);--sinch-button-color-text:var(--sinch-button-secondary-color-text);--sinch-button-color-text-hover:var(--sinch-button-secondary-color-text-hover);--sinch-button-color-text-active:var(--sinch-button-secondary-color-text-active);--sinch-button-color-text-disabled:var(--sinch-button-secondary-color-text-disabled);--sinch-button-color-icon:var(--sinch-button-secondary-color-icon);--sinch-button-color-icon-hover:var(--sinch-button-secondary-color-icon-hover);--sinch-button-color-icon-active:var(--sinch-button-secondary-color-icon-active);--sinch-button-color-icon-disabled:var(--sinch-button-secondary-color-icon-disabled);--sinch-button-mix-blend-mode:var(--sinch-button-secondary-mix-blend-mode);--sinch-elevation-level:var(--sinch-elevation-level-1)}:host([type=tertiary]){--sinch-button-color-background:var(--sinch-button-tertiary-color-background);--sinch-button-color-background-hover:var(--sinch-button-tertiary-color-background-hover);--sinch-button-color-background-active:var(--sinch-button-tertiary-color-background-active);--sinch-button-color-background-disabled:var(--sinch-button-tertiary-color-background-disabled);--sinch-button-color-border:var(--sinch-button-tertiary-color-border);--sinch-button-color-border-hover:var(--sinch-button-tertiary-color-border-hover);--sinch-button-color-border-active:var(--sinch-button-tertiary-color-border-active);--sinch-button-color-border-disabled:var(--sinch-button-tertiary-color-border-disabled);--sinch-button-color-text:var(--sinch-button-tertiary-color-text);--sinch-button-color-text-hover:var(--sinch-button-tertiary-color-text-hover);--sinch-button-color-text-active:var(--sinch-button-tertiary-color-text-active);--sinch-button-color-text-disabled:var(--sinch-button-tertiary-color-text-disabled);--sinch-button-color-icon:var(--sinch-button-tertiary-color-icon);--sinch-button-color-icon-hover:var(--sinch-button-tertiary-color-icon-hover);--sinch-button-color-icon-active:var(--sinch-button-tertiary-color-icon-active);--sinch-button-color-icon-disabled:var(--sinch-button-tertiary-color-icon-disabled);--sinch-button-mix-blend-mode:var(--sinch-button-tertiary-mix-blend-mode);--sinch-elevation-level:var(--sinch-elevation-level-0)}:host([type=cta-primary]){--sinch-button-color-background:var(--sinch-button-cta-primary-color-background);--sinch-button-color-background-hover:var(--sinch-button-cta-primary-color-background-hover);--sinch-button-color-background-active:var(--sinch-button-cta-primary-color-background-active);--sinch-button-color-background-disabled:var(--sinch-button-cta-primary-color-background-disabled);--sinch-button-color-border:var(--sinch-button-cta-primary-color-border);--sinch-button-color-border-hover:var(--sinch-button-cta-primary-color-border-hover);--sinch-button-color-border-active:var(--sinch-button-cta-primary-color-border-active);--sinch-button-color-border-disabled:var(--sinch-button-cta-primary-color-border-disabled);--sinch-button-color-text:var(--sinch-button-cta-primary-color-text);--sinch-button-color-text-hover:var(--sinch-button-cta-primary-color-text-hover);--sinch-button-color-text-active:var(--sinch-button-cta-primary-color-text-active);--sinch-button-color-text-disabled:var(--sinch-button-cta-primary-color-text-disabled);--sinch-button-color-icon:var(--sinch-button-cta-primary-color-icon);--sinch-button-color-icon-hover:var(--sinch-button-cta-primary-color-icon-hover);--sinch-button-color-icon-active:var(--sinch-button-cta-primary-color-icon-active);--sinch-button-color-icon-disabled:var(--sinch-button-cta-primary-color-icon-disabled);--sinch-button-mix-blend-mode:var(--sinch-button-cta-primary-mix-blend-mode);--sinch-elevation-level:var(--sinch-elevation-level-1)}:host([type=cta-secondary]){--sinch-button-color-background:var(--sinch-button-cta-secondary-color-background);--sinch-button-color-background-hover:var(--sinch-button-cta-secondary-color-background-hover);--sinch-button-color-background-active:var(--sinch-button-cta-secondary-color-background-active);--sinch-button-color-background-disabled:var(--sinch-button-cta-secondary-color-background-disabled);--sinch-button-color-border:var(--sinch-button-cta-secondary-color-border);--sinch-button-color-border-hover:var(--sinch-button-cta-secondary-color-border-hover);--sinch-button-color-border-active:var(--sinch-button-cta-secondary-color-border-active);--sinch-button-color-border-disabled:var(--sinch-button-cta-secondary-color-border-disabled);--sinch-button-color-text:var(--sinch-button-cta-secondary-color-text);--sinch-button-color-text-hover:var(--sinch-button-cta-secondary-color-text-hover);--sinch-button-color-text-active:var(--sinch-button-cta-secondary-color-text-active);--sinch-button-color-text-disabled:var(--sinch-button-cta-secondary-color-text-disabled);--sinch-button-color-icon:var(--sinch-button-cta-secondary-color-icon);--sinch-button-color-icon-hover:var(--sinch-button-cta-secondary-color-icon-hover);--sinch-button-color-icon-active:var(--sinch-button-cta-secondary-color-icon-active);--sinch-button-color-icon-disabled:var(--sinch-button-cta-secondary-color-icon-disabled);--sinch-button-mix-blend-mode:var(--sinch-button-cta-secondary-mix-blend-mode);--sinch-elevation-level:var(--sinch-elevation-level-1)}:host([type=destructive]){--sinch-button-color-background:var(--sinch-button-destructive-color-background);--sinch-button-color-background-hover:var(--sinch-button-destructive-color-background-hover);--sinch-button-color-background-active:var(--sinch-button-destructive-color-background-active);--sinch-button-color-background-disabled:var(--sinch-button-destructive-color-background-disabled);--sinch-button-color-border:var(--sinch-button-destructive-color-border);--sinch-button-color-border-hover:var(--sinch-button-destructive-color-border-hover);--sinch-button-color-border-active:var(--sinch-button-destructive-color-border-active);--sinch-button-color-border-disabled:var(--sinch-button-destructive-color-border-disabled);--sinch-button-color-text:var(--sinch-button-destructive-color-text);--sinch-button-color-text-hover:var(--sinch-button-destructive-color-text-hover);--sinch-button-color-text-active:var(--sinch-button-destructive-color-text-active);--sinch-button-color-text-disabled:var(--sinch-button-destructive-color-text-disabled);--sinch-button-color-icon:var(--sinch-button-destructive-color-icon);--sinch-button-color-icon-hover:var(--sinch-button-destructive-color-icon-hover);--sinch-button-color-icon-active:var(--sinch-button-destructive-color-icon-active);--sinch-button-color-icon-disabled:var(--sinch-button-destructive-color-icon-disabled);--sinch-button-mix-blend-mode:var(--sinch-button-destructive-mix-blend-mode);--sinch-elevation-level:var(--sinch-elevation-level-1)}#button{all:initial;display:block;position:relative;width:100%;height:var(--sinch-size);font:var(--sinch-button-font);color:var(--sinch-button-color-text);cursor:pointer;--sinch-color-icon:var(--sinch-button-color-icon)}#button::before{content:"";position:absolute;inset:0;background-color:var(--sinch-button-color-background);border:1px solid var(--sinch-button-color-border);border-radius:var(--sinch-shape-radius);box-shadow:var(--sinch-elevation-level);pointer-events:none;mix-blend-mode:var(--sinch-button-mix-blend-mode)}#button:focus-visible::after{position:absolute;content:"";inset:-3px;border:2px solid var(--sinch-color-border-focus);border-radius:calc(var(--sinch-shape-radius) + 3px);pointer-events:none}#button:disabled{color:var(--sinch-button-color-text-disabled);cursor:initial;--sinch-color-icon:var(--sinch-button-color-icon-disabled)}#button:disabled::before{background-color:var(--sinch-button-color-background-disabled);border-color:var(--sinch-button-color-border-disabled);box-shadow:var(--sinch-elevation-level-0)}#button:enabled:hover{--sinch-color-icon:var(--sinch-button-color-icon-hover)}#button:enabled:hover::before{background-color:var(--sinch-button-color-background-hover);border-color:var(--sinch-button-color-border-hover)}#button:enabled:active{--sinch-color-icon:var(--sinch-button-color-icon-active)}#button:enabled:active::before{background-color:var(--sinch-button-color-background-active);border-color:var(--sinch-button-color-border-active);border-width:2px;box-shadow:var(--sinch-elevation-level-0)}#content{position:relative;display:flex;align-items:center;justify-content:center;gap:.75em;width:100%;height:100%;padding:0 1em;box-sizing:border-box;pointer-events:none}#text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex-shrink:1;min-width:0}</style><button id="button"><div id="content"><slot name="left-icon"></slot><span id="text"></span><slot name="right-icon"></slot></div></button>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#button{all:initial;display:block;position:relative;width:100%;height:var(--sinch-local-size);cursor:pointer;--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-m);--sinch-local-font:var(--sinch-comp-button-font-size-m-text);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-m);--sinch-global-color-icon:var(--sinch-local-color-icon)}#button:disabled{cursor:initial}:host([data-size="l"])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-l);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-l);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-l);--sinch-local-font:var(--sinch-comp-button-font-size-l-text)}:host([data-size="m"])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-m);--sinch-local-font:var(--sinch-comp-button-font-size-m-text)}:host([data-size="s"])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-s);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-s);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-s);--sinch-local-font:var(--sinch-comp-button-font-size-s-text)}:host([type=primary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-primary-default-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-primary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-primary-default-icon-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-primary-default-outilne-focus);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-initial)}:host([type=secondary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-secondary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-secondary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-secondary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-initial)}:host([type=tertiary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-tertiary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-tertiary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-tertiary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-tertiary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-tertiary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-tertiary-initial)}:host([type=cta-primary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-primary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-cta-primary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-cta-primary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-cta-primary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-initial)}:host([type=cta-secondary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-secondary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-cta-secondary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-cta-secondary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-cta-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-initial)}:host([type=destructive])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-danger-default-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-danger-default-text-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-danger-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-destructive-initial)}:host([type=primary])>#button:disabled{--sinch-local-color-background:var(--sinch-comp-button-color-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-primary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-primary-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-primary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-disabled)}:host([type=secondary])>#button:disabled{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-secondary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-secondary-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-secondary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-disabled)}:host([type=tertiary])>#button:disabled{--sinch-local-color-background:var(--sinch-comp-button-color-tertiary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-tertiary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-tertiary-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-tertiary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-tertiary-disabled)}:host([type=cta-primary])>#button:disabled{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-primary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-cta-primary-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-cta-primary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-disabled)}:host([type=cta-secondary])>#button:disabled{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-secondary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-cta-secondary-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-cta-secondary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-disabled)}:host([type=destructive])>#button:disabled{--sinch-local-color-background:var(--sinch-comp-button-color-danger-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-danger-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-danger-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-danger-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-disabled)}:host([type=primary])>#button:focus{--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-focus)}:host([type=secondary])>#button:focus{--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-focus)}:host([type=tertiary])>#button:focus{--sinch-local-shadow:var(--sinch-comp-button-shadow-tertiary-focus)}:host([type=cta-primary])>#button:focus{--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-focus)}:host([type=cta-secondary])>#button:focus{--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-focus)}:host([type=destructive])>#button:focus{--sinch-local-shadow:var(--sinch-comp-button-shadow-destructive-focus)}:host([type=primary])>#button:enabled:hover{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-hover)}:host([type=primary])>#button:enabled:active{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-active)}:host([type=secondary])>#button:enabled:hover{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-hover)}:host([type=secondary])>#button:enabled:active{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-active)}:host([type=tertiary])>#button:enabled:hover{--sinch-local-color-background:var(--sinch-comp-button-color-tertiary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-tertiary-hover)}:host([type=tertiary])>#button:enabled:active{--sinch-local-color-background:var(--sinch-comp-button-color-tertiary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-tertiary-active)}:host([type=cta-primary])>#button:enabled:hover{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-hover)}:host([type=cta-primary])>#button:enabled:active{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-active)}:host([type=cta-secondary])>#button:enabled:hover{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-hover)}:host([type=cta-secondary])>#button:enabled:active{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-active)}:host([type=destructive])>#button:enabled:hover{--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-hover)}:host([type=destructive])>#button:enabled:active{--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-active)}#button::before{content:"";position:absolute;inset:0;background-color:var(--sinch-local-color-background);border:1px solid var(--sinch-local-color-border);border-radius:var(--sinch-local-shape-radius);box-shadow:var(--sinch-local-shadow);pointer-events:none}#button:active::before{border-width:2px}#button:focus-visible::after{position:absolute;content:"";inset:-3px;border:2px solid var(--sinch-local-color-outline-focus);border-radius:calc(var(--sinch-local-shape-radius) + 3px);pointer-events:none}#content{position:relative;display:flex;align-items:center;justify-content:center;gap:.75em;width:100%;height:100%;padding:0 1em;box-sizing:border-box;pointer-events:none}#text{font:var(--sinch-local-font);color:var(--sinch-local-color-text);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex-shrink:1;min-width:0}</style><button id="button"><div id="content"><slot name="left-icon"></slot><span id="text"></span><slot name="right-icon"></slot></div></button>';
 import { assertType, typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/button/types.d.ts

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

package/card/index.js

@@ -1,7 +1,7 @@
 import '../title';
 import '../text';
-import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, setClass, NectaryElement, isAttrTrue, getRect } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{border-radius:var(--sinch-shape-radius-l);border:1px solid var(--sinch-color-snow-700);background-color:var(--sinch-color-snow-100);box-shadow:var(--sinch-elevation-level-0);overflow:hidden}:host(:hover) #wrapper{box-shadow:var(--sinch-elevation-level-1)}#card-body{padding:24px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px}#illustration-wrapper{display:none;overflow:hidden;height:240px}#illustration-wrapper.active{display:block}#label{color:var(--sinch-color-stormy-300)}#label:empty{display:none}#header{display:flex;flex-direction:row;align-items:center;gap:8px;--sinch-size-icon:48px}#caption{color:var(--sinch-color-stormy-500);flex:1;min-width:0}#description{color:var(--sinch-color-stormy-500);flex:1;min-height:0;max-height:120px;overflow-y:auto}#description:empty{display:none}:host([disabled]:not([disabled=false])) :is(#illustration-wrapper,#description,#header,#label){opacity:.6}slot[name=action]::slotted(*){margin-top:20px;align-self:flex-start;max-width:100%}:host([draggable=true]) #header{cursor:grab}</style><div id="wrapper"><div id="illustration-wrapper"><slot name="illustration"></slot></div><div id="card-body"><sinch-text id="label" type="s" emphasized ellipsis></sinch-text><div id="header"><slot name="icon"></slot><sinch-title id="caption" type="m" level="3" ellipsis></sinch-title></div><sinch-text id="description" type="m"></sinch-text><slot name="action"></slot></div></div>';
+import { defineCustomElement, getBooleanAttribute, getAttribute, updateAttribute, setClass, NectaryElement, isAttrTrue, getRect } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{border-radius:var(--sinch-comp-card-shape-radius);border:1px solid var(--sinch-comp-card-color-white-default-border-initial);background-color:var(--sinch-comp-card-color-white-default-background-initial);box-shadow:var(--sinch-comp-card-shadow-initial);overflow:hidden}:host(:hover) #wrapper{box-shadow:var(--sinch-comp-card-shadow-hover)}#card-body{padding:24px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px}#illustration-wrapper{display:none;overflow:hidden;height:240px}#illustration-wrapper.active{display:block}#label{--sinch-comp-text-font:var(--sinch-comp-card-font-label);--sinch-global-color-text:var(--sinch-comp-card-color-white-default-text-title)}#label:empty{display:none}#header{display:flex;flex-direction:row;align-items:center;gap:8px;--sinch-global-size-icon:var(--sinch-comp-card-size-icon)}#caption{flex:1;min-width:0;--sinch-comp-title-font:var(--sinch-comp-card-font-title);--sinch-global-color-text:var(--sinch-comp-card-color-white-default-text-title)}#description{flex:1;min-height:0;max-height:120px;overflow-y:auto;--sinch-comp-text-font:var(--sinch-comp-card-font-description);--sinch-global-color-text:var(--sinch-comp-card-color-white-default-text-description)}#description:empty{display:none}slot[name=action]::slotted(*){margin-top:20px;align-self:flex-start;max-width:100%}:host([draggable=true]) #header{cursor:grab}</style><div id="wrapper"><div id="illustration-wrapper"><slot name="illustration"></slot></div><div id="card-body"><sinch-text id="label" type="s" emphasized ellipsis></sinch-text><div id="header"><slot name="icon"></slot><sinch-title id="caption" type="m" level="3" ellipsis></sinch-title></div><sinch-text id="description" type="m"></sinch-text><slot name="action"></slot></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-card', class extends NectaryElement {
@@ -47,10 +47,10 @@ defineCustomElement('sinch-card', class extends NectaryElement {
     this.#controller.abort();
   }
   static get observedAttributes() {
-    return ['text', 'label', 'caption', 'disabled', 'draggable'];
+    return ['text', 'label', 'caption', 'draggable'];
   }
-  attributeChangedCallback(name, prevVal, newVal) {
-    if (prevVal === newVal) {
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
       return;
     }
     switch (name) {
@@ -69,11 +69,6 @@ defineCustomElement('sinch-card', class extends NectaryElement {
           updateAttribute(this.#$caption, 'text', newVal);
           break;
         }
-      case 'disabled':
-        {
-          updateBooleanAttribute(this, 'disabled', isAttrTrue(newVal));
-          break;
-        }
       case 'draggable':
         {
           const isDraggingEnabled = isAttrTrue(newVal);
@@ -105,12 +100,6 @@ defineCustomElement('sinch-card', class extends NectaryElement {
   get label() {
     return getAttribute(this, 'label', '');
   }
-  set disabled(isDisabled) {
-    updateBooleanAttribute(this, 'disabled', isDisabled);
-  }
-  get disabled() {
-    return getBooleanAttribute(this, 'disabled');
-  }
   get dragRect() {
     return this.#isDraggingSubscribed ? getRect(this.#$header) : null;
   }

package/card/types.d.ts

@@ -6,8 +6,6 @@ export type TSinchCardElement = HTMLElement & {
     caption: string;
     /** Label */
     label: string | null;
-    /** Disabled */
-    disabled: boolean;
     readonly dragRect: TRect | null;
     /** Text */
     setAttribute(name: 'text', value: string): void;
@@ -15,8 +13,6 @@ export type TSinchCardElement = HTMLElement & {
     setAttribute(name: 'caption', value: string): void;
     /** Label */
     setAttribute(name: 'label', value: string): void;
-    /** Disabled */
-    setAttribute(name: 'disabled', value: ''): void;
     /** Draggable */
     setAttribute(name: 'draggable', value: ''): void;
 };
@@ -27,8 +23,6 @@ export type TSinchCardReact = TSinchElementReact<TSinchCardElement> & {
     caption: string;
     /** Label */
     label?: string;
-    /** Disabled */
-    disabled?: boolean;
     /** Draggable */
     draggable?: boolean;
 };

package/card-container/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{height:100%;padding:20px 0;box-sizing:border-box;background-color:var(--sinch-color-snow-100);border-radius:var(--sinch-shape-radius-l);border:1px solid var(--sinch-color-snow-700);font:var(--sinch-font-text-m)}#scroll{overflow:auto;height:100%;box-sizing:border-box;padding:4px 24px}</style><div id="wrapper"><div id="scroll"><slot></slot></div></div>';
+const templateHTML = '<style>:host{display:block}#wrapper{height:100%;padding:20px 0;box-sizing:border-box;background-color:var(--sinch-comp-card-color-white-default-background-initial);border-radius:var(--sinch-comp-card-shape-radius);border:1px solid var(--sinch-comp-card-color-white-default-border-initial)}#scroll{overflow:auto;height:100%;box-sizing:border-box;padding:4px 24px}</style><div id="wrapper"><div id="scroll"><slot></slot></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-card-container', class extends NectaryElement {

package/chat-block/index.js

@@ -1,6 +1,6 @@
 import { typeValues } from '../chat-bubble/utils';
 import { defineCustomElement, getAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;display:flex;flex-direction:column;gap:4px;align-items:flex-end;padding-left:72px}#stamp{display:flex;gap:4px;margin:0;font:var(--sinch-font-text-xs);color:var(--sinch-color-stormy-400)}#avatar{display:none;position:absolute;left:0;top:24px}:host([type=customer])>#wrapper{align-items:flex-start}:host([type=customer]) #avatar{display:block}</style><div id="wrapper"><div id="avatar"><slot name="avatar"></slot></div><p id="stamp"><span id="firstname"></span><span id="lastname"></span>&bull;<span id="time"></span></p><slot name="bubble"></slot></div>';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;display:flex;flex-direction:column;gap:4px;align-items:flex-end;padding-left:72px}#stamp{display:flex;gap:4px;margin:0;font:var(--sinch-sys-font-body-xs);color:var(--sinch-sys-color-text-default)}#avatar{display:none;position:absolute;left:0;top:24px}:host([type=customer])>#wrapper{align-items:flex-start}:host([type=customer]) #avatar{display:block}</style><div id="wrapper"><div id="avatar"><slot name="avatar"></slot></div><p id="stamp"><span id="firstname"></span><span id="lastname"></span>&bull;<span id="time"></span></p><slot name="bubble"></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-chat-block', class extends NectaryElement {