@nectary/components 1.4.0 → 2.1.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/index.js

@@ -10,7 +10,9 @@ defineCustomElement('sinch-action-menu', class extends NectaryElement {
   #controller = null;
   constructor() {
     super();
-    const shadowRoot = this.attachShadow();
+    const shadowRoot = this.attachShadow({
+      delegatesFocus: false
+    });
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$optionSlot = shadowRoot.querySelector('slot');
     this.#$listbox = shadowRoot.querySelector('#listbox');
@@ -65,6 +67,7 @@ defineCustomElement('sinch-action-menu', class extends NectaryElement {
     this.#selectOption(null);
   };
   #onListboxClick = e => {
+    this.focus();
     if (isSinchActionMenuOption(e.target)) {
       this.#selectOption(e.target);
     }
@@ -87,6 +90,7 @@ defineCustomElement('sinch-action-menu', class extends NectaryElement {
   #handleKeydown(e) {
     switch (e.code) {
       case 'Enter':
+      case 'Space':
         {
           const $opt = this.#findSelectedOption();
           if ($opt !== null) {

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 { assertType, typeValues } from './utils';
+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 { 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();
@@ -37,18 +34,10 @@ defineCustomElement('sinch-alert', class extends NectaryElement {
     updateAttribute(this, 'text', value);
   }
   static get observedAttributes() {
-    return ['text', 'type'];
+    return ['text'];
   }
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
-      case 'type':
-        {
-          if ('production' !== 'production') {
-            assertType(newVal);
-          }
-          this.#updateIcon();
-          break;
-        }
       case 'text':
         {
           updateAttribute(this.#$text, 'text', newVal);
@@ -56,10 +45,4 @@ defineCustomElement('sinch-alert', class extends NectaryElement {
         }
     }
   }
-  #updateIcon() {
-    if (!this.isConnected) {
-      return;
-    }
-    updateAttribute(this.#$icon, 'name', getCssVar(this, `--sinch-alert-icon-${this.type}`));
-  }
 });

package/alert/utils.d.ts

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

package/alert/utils.js

@@ -1,6 +1 @@
-export const typeValues = ['info', 'warn', 'error'];
-export const assertType = value => {
-  if (value === null || !typeValues.includes(value)) {
-    throw new Error(`sinch-alert: invalid type attribute: ${value}`);
-  }
-};
+export const typeValues = ['info', 'warn', 'error'];

package/avatar/index.js

@@ -1,7 +1,7 @@
 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>';
-import { assertAvatarColor, assertStatus, getAvatarColorBg, getAvatarColorFg, statusValues } from './utils';
+import { DEFAULT_SIZE, sizeValues } from '../utils/size';
+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 { getAvatarColorBg, getAvatarColorFg, statusValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-avatar', class extends NectaryElement {
@@ -51,7 +51,7 @@ defineCustomElement('sinch-avatar', class extends NectaryElement {
     updateLiteralAttribute(this, statusValues, 'status', value);
   }
   static get observedAttributes() {
-    return ['alt', 'src', 'status', 'size', 'color'];
+    return ['alt', 'src', 'color'];
   }
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
@@ -66,23 +66,10 @@ defineCustomElement('sinch-avatar', class extends NectaryElement {
           this.#$image.src = newVal ?? '';
           break;
         }
-      case 'size':
-        {
-          if ('production' !== 'production') {
-            assertSize(newVal, 'sinch-avatar');
-          }
-          break;
-        }
-      case 'status':
-        {
-          if ('production' !== 'production') {
-            assertStatus(newVal);
-          }
-          break;
-        }
       case 'color':
         {
           this.#updateColor();
+          break;
         }
     }
   }
@@ -92,9 +79,6 @@ defineCustomElement('sinch-avatar', class extends NectaryElement {
     }
     const colorName = this.color;
     if (colorName !== null && colorName.length > 0) {
-      if ('production' !== 'production') {
-        assertAvatarColor(this, colorName);
-      }
       const bg = getAvatarColorBg(colorName);
       const fg = getAvatarColorFg(colorName);
       this.#$circle.style.setProperty('background-color', bg);

package/avatar/utils.d.ts

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

package/avatar/utils.js

@@ -1,20 +1,7 @@
 export const statusValues = ['online', 'busy', 'away', 'offline'];
-export const assertStatus = value => {
-  if (value === null || value.length === 0) {
-    return;
-  }
-  if (!statusValues.includes(value)) {
-    throw new Error(`sinch-avatar: invalid status attribute: ${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)`;
-};
-export const assertAvatarColor = (root, id) => {
-  if (id === null || window.getComputedStyle(root).getPropertyValue(`--sinch-avatar-color-${id}-bg`).length === 0) {
-    throw new Error(`Invalid sinch-avatar color name: ${id}`);
-  }
+  return `var(--sinch-comp-avatar-container-color-${id}-foreground)`;
 };

package/badge/index.js

@@ -1,7 +1,7 @@
-import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getRect, 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';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
+import { 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: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 { modeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-badge', class extends NectaryElement {
@@ -20,13 +20,44 @@ 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':
+        {
+          this.#updatePosition();
+          break;
+        }
+      case 'mode':
+        {
+          this.#updatePosition();
+          break;
+        }
+      case 'hidden':
+        {
+          this.#updatePosition();
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+          break;
+        }
+    }
+  }
   get text() {
     return getAttribute(this, 'text', '');
   }
@@ -45,12 +76,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 +94,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

@@ -1,8 +1,2 @@
 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

@@ -1,17 +1 @@
-export const modeValues = ['square', 'circle'];
-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}`);
-  }
-};
+export const modeValues = ['square', 'circle'];