@nectary/components 1.4.0 → 2.0.0

package/spinner/index.js

@@ -1,6 +1,6 @@
 import { defineCustomElement, getLiteralAttribute, NectaryElement, subscribeContext, updateAttribute, updateLiteralAttribute } from '../utils';
 import { assertSize, DEFAULT_SIZE, sizeValues } from '../utils/size';
-const templateHTML = '<style>@keyframes spinner{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}:host{display:block;--sinch-size-icon:var(--sinch-spinner-size-m);--sinch-spinner-thickness:3px}:host([data-size="l"]){--sinch-size-icon:var(--sinch-spinner-size-l);--sinch-spinner-thickness:4px}:host([data-size="m"]){--sinch-size-icon:var(--sinch-spinner-size-m);--sinch-spinner-thickness:3px}:host([data-size="s"]){--sinch-size-icon:var(--sinch-spinner-size-s);--sinch-spinner-thickness:2px}#wrapper{position:relative;height:var(--sinch-size-icon);width:var(--sinch-size-icon)}#bg{position:absolute;inset:1px;border:solid var(--sinch-spinner-thickness) var(--sinch-color-icon);border-radius:50%;opacity:.3}#fg{position:absolute;inset:1px;border:solid var(--sinch-spinner-thickness) transparent;border-bottom-color:var(--sinch-color-icon);border-radius:50%;will-change:transform;animation:1.5s linear infinite spinner;animation-play-state:running}</style><div id="wrapper"><div id="bg"></div><div id="fg"></div></div>';
+const templateHTML = '<style>@keyframes spinner{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}:host{display:block}#spinner-size-l,#spinner-size-m,#spinner-size-s{display:none;will-change:transform}:host([data-size="l"])>#spinner-size-l{display:block;animation:1s linear infinite spinner}:host([data-size="m"])>#spinner-size-m{display:block;animation:1s linear infinite spinner}:host([data-size="s"])>#spinner-size-s{display:block;animation:1s linear infinite spinner}.bg{opacity:.3;stroke:var(--sinch-global-color-icon,var(--sinch-sys-color-text-default))}.fg{stroke:var(--sinch-global-color-icon,var(--sinch-sys-color-text-default))}</style><svg id="spinner-size-l" width="50" height="50" fill="none"><circle class="bg" cx="25" cy="25" r="22" stroke-width="6"/><path class="fg" d="M25 3a22 22 0 0 1 22 22" stroke-width="6" stroke-linecap="round"/></svg><svg id="spinner-size-m" width="24" height="24" fill="none"><circle class="bg" cx="12" cy="12" r="9" stroke-width="4"/><path class="fg" d="M21 12a9 9 0 0 0-9-9" stroke-width="4" stroke-linecap="round"/></svg><svg id="spinner-size-s" width="16" height="16" fill="none"><circle class="bg" cx="8" cy="8" r="6" stroke-width="2"/><path class="fg" d="M14 8a6 6 0 0 0-6-6" stroke-width="2" stroke-linecap="round"/></svg>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-spinner', class extends NectaryElement {

package/table/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:table;font:var(--sinch-font-text-m);color:var(--sinch-color-text-default);--sinch-color-icon:var(--sinch-color-stormy-500)}</style><slot></slot>';
+const templateHTML = '<style>:host{display:table}</style><slot></slot>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-table', class extends NectaryElement {

package/table-body/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:table-row-group}::slotted(sinch-table-row:hover){background-color:var(--sinch-color-tropical-50)}::slotted(sinch-table-row[selected]:not([selected=false])){background-color:var(--sinch-color-tropical-100)}</style><slot></slot>';
+const templateHTML = '<style>:host{display:table-row-group}</style><slot></slot>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-table-body', class extends NectaryElement {

package/table-cell/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getLiteralAttribute, NectaryElement, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:table-cell;vertical-align:top;border-bottom:1px solid var(--sinch-color-snow-600)}#wrapper{display:flex;flex-direction:column;justify-content:center;min-height:48px;box-sizing:border-box;padding:8px}:host([align=end]) #wrapper{text-align:end;align-items:flex-end}:host([align=center]) #wrapper{text-align:center;align-items:center}</style><div id="wrapper"><slot></slot></div>';
+const templateHTML = '<style>:host{display:table-cell;vertical-align:top;border-bottom:1px solid var(--sinch-comp-table-color-cell-default-border-initial)}#wrapper{display:flex;flex-direction:column;justify-content:center;min-height:48px;box-sizing:border-box;padding:8px}:host([align=end]) #wrapper{text-align:end;align-items:flex-end}:host([align=center]) #wrapper{text-align:center;align-items:center}</style><div id="wrapper"><slot></slot></div>';
 import { alignValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/table-head-cell/index.d.ts

@@ -1,3 +1,4 @@
+import '../text';
 import type { TSinchTableHeaderCellElement, TSinchTableHeaderCellReact } from './types';
 declare global {
     namespace JSX {

package/table-head-cell/index.js

@@ -1,6 +1,7 @@
+import '../text';
 import { alignValues } from '../table-cell/utils';
-import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:table-cell;border-bottom:1px solid var(--sinch-color-stormy-200);vertical-align:middle;--sinch-color-icon:var(--sinch-color-stormy-200)}#wrapper{position:relative;display:flex;align-items:center;gap:8px;width:100%;height:100%;padding:8px;box-sizing:border-box;font:var(--sinch-font-title-s);color:var(--sinch-color-stormy-300);--sinch-icon-button-color:var(--sinch-color-stormy-100)}#text{flex-shrink:1;min-width:0;font:var(--sinch-font-title-s);color:var(--sinch-color-stormy-200)}:host([align=center])>#wrapper{justify-content:center}:host([align=end])>#wrapper{justify-content:flex-end}:host(:is([text=""],:not([text]))) #text{display:none}:host([fit]:not([fit=false])){width:1px}</style><div id="wrapper"><slot name="checkbox"></slot><slot name="left"></slot><span id="text"></span><slot name="tooltip"></slot><slot name="right"></slot></div>';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
+const templateHTML = '<style>:host{display:table-cell;border-bottom:1px solid var(--sinch-comp-table-color-head-cell-default-border-initial);vertical-align:middle}#wrapper{position:relative;display:flex;align-items:center;gap:8px;width:100%;height:100%;padding:8px;box-sizing:border-box;--sinch-global-color-icon:var(--sinch-comp-table-color-head-cell-default-icon-initial)}#text{flex-shrink:1;min-width:0;--sinch-global-color-text:var(--sinch-comp-table-color-head-cell-default-text-initial)}#text:empty{display:none}:host([align=center])>#wrapper{justify-content:center}:host([align=end])>#wrapper{justify-content:flex-end}:host([fit]){width:1px}</style><div id="wrapper"><slot name="checkbox"></slot><slot name="left"></slot><sinch-text id="text" type="m"></sinch-text><slot name="tooltip"></slot><slot name="right"></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-table-head-cell', class extends NectaryElement {
@@ -16,15 +17,23 @@ defineCustomElement('sinch-table-head-cell', class extends NectaryElement {
     this.setAttribute('scope', 'col');
   }
   static get observedAttributes() {
-    return ['text'];
+    return ['text', 'fit'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
     switch (name) {
       case 'text':
         {
           this.#$text.textContent = newVal;
           break;
         }
+      case 'fit':
+        {
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+          break;
+        }
     }
   }
   set text(value) {

package/table-row/index.js

@@ -1,5 +1,5 @@
-import { defineCustomElement, getBooleanAttribute, NectaryElement, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:table-row}:host([sticky]) ::slotted(sinch-table-head-cell){position:sticky;top:0;z-index:1;background-color:var(--sinch-color-snow-100)}</style><slot></slot>';
+import { defineCustomElement, getBooleanAttribute, isAttrTrue, NectaryElement, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:table-row;background-color:var(--sinch-comp-table-color-row-default-background-initial)}:host([selected]){background-color:var(--sinch-comp-table-color-row-checked-background-initial)}:host(:hover){background-color:var(--sinch-comp-table-color-row-default-background-hover)}:host([sticky]) ::slotted(sinch-table-head-cell){position:sticky;top:0;z-index:1;background-color:var(--sinch-comp-table-color-row-default-background-sticky)}</style><slot></slot>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-table-row', class extends NectaryElement {
@@ -11,6 +11,22 @@ defineCustomElement('sinch-table-row', class extends NectaryElement {
   connectedCallback() {
     this.setAttribute('role', 'row');
   }
+  static get observedAttributes() {
+    return ['sticky', 'selected'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+    switch (name) {
+      case 'sticky':
+      case 'selected':
+        {
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+          break;
+        }
+    }
+  }
   set sticky(isSticky) {
     updateBooleanAttribute(this, 'sticky', isSticky);
   }

package/tabs/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, getRect, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;width:100%;height:40px;border-bottom:1px solid var(--sinch-color-border-default);box-sizing:border-box}</style><div id="wrapper"><slot></slot></div>';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;width:100%;height:40px;border-bottom:1px solid var(--sinch-comp-tab-color-default-border-initial);box-sizing:border-box}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-tabs', class extends NectaryElement {
@@ -33,9 +33,6 @@ defineCustomElement('sinch-tabs', class extends NectaryElement {
   static get observedAttributes() {
     return ['value'];
   }
-  get nodeName() {
-    return 'select';
-  }
   set value(value) {
     updateAttribute(this, 'value', value);
   }

package/tabs/types.d.ts

@@ -1,5 +1,4 @@
 import type { TRect, TSinchElementReact } from '../types';
-import type { SyntheticEvent } from 'react';
 export type TSinchTabsElement = HTMLElement & {
     /** Value */
     value: string;
@@ -14,8 +13,6 @@ export type TSinchTabsReact = TSinchElementReact<TSinchTabsElement> & {
     value: string;
     /** Label that is used for a11y */
     'aria-label': string;
-    /** @deprecated Change value handler */
-    onChange?: (event: SyntheticEvent<TSinchTabsElement, CustomEvent<string>>) => void;
     /** Change value event */
     'on-change'?: (e: CustomEvent<string>) => void;
 };

package/tabs-icon-option/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#button{all:initial;position:relative;display:flex;flex-direction:column;padding:12px 16px 0;box-sizing:border-box;cursor:pointer;border-top-left-radius:var(--sinch-shape-radius-l);border-top-right-radius:var(--sinch-shape-radius-l);height:39px;--sinch-color-icon:var(--sinch-color-stormy-300);--sinch-size-icon:16px}#button:hover{background-color:var(--sinch-color-tropical-100)}#button:focus-visible::before{content:"";position:absolute;inset:0;bottom:-3px;border:2px solid var(--sinch-color-border-focus);border-top-left-radius:var(--sinch-shape-radius-l);border-top-right-radius:var(--sinch-shape-radius-l);pointer-events:none}#button:disabled{cursor:unset;pointer-events:none;--sinch-color-icon:var(--sinch-color-border-default)}:host([data-checked]) #button{--sinch-color-icon:var(--sinch-color-tropical-500)}:host([data-checked]) #button::after{content:"";position:absolute;left:4px;right:4px;bottom:-1px;pointer-events:none;border-top:2px solid var(--sinch-color-tropical-500)}::slotted(*){display:block}</style><sinch-tooltip id="tooltip" inverted><button id="button"><slot name="icon"></slot></button></sinch-tooltip>';
+const templateHTML = '<style>:host{display:block;outline:0}#button{all:initial;position:relative;display:flex;flex-direction:column;padding:12px 16px 0;box-sizing:border-box;cursor:pointer;background-color:var(--sinch-comp-tab-color-default-background-initial);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);height:39px;--sinch-global-color-icon:var(--sinch-comp-tab-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-tab-size-icon)}#button:hover{background-color:var(--sinch-comp-tab-color-default-background-hover)}#button:focus-visible::before{content:"";position:absolute;inset:0;bottom:-3px;border:2px solid var(--sinch-comp-tab-color-default-outline-focus);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);pointer-events:none}#button:disabled{cursor:unset;pointer-events:none;--sinch-global-color-icon:var(--sinch-comp-tab-color-disabled-icon-initial)}:host([data-checked]) #button{--sinch-global-color-icon:var(--sinch-comp-tab-color-checked-icon-initial)}:host([data-checked]) #button::after{content:"";position:absolute;left:4px;right:4px;bottom:-1px;pointer-events:none;border-top:2px solid var(--sinch-comp-tab-color-checked-border-initial)}::slotted(*){display:block}</style><sinch-tooltip id="tooltip"><button id="button"><slot name="icon"></slot></button></sinch-tooltip>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-tabs-icon-option', class extends NectaryElement {
@@ -46,7 +46,9 @@ defineCustomElement('sinch-tabs-icon-option', class extends NectaryElement {
         }
       case 'disabled':
         {
-          this.#$button.disabled = isAttrTrue(newVal);
+          const isDisabled = isAttrTrue(newVal);
+          this.#$button.disabled = isDisabled;
+          updateBooleanAttribute(this, name, isDisabled);
           break;
         }
       case 'aria-label':

package/tabs-option/index.js

@@ -1,6 +1,6 @@
 import '../text';
 import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}#button{all:initial;position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 16px;box-sizing:border-box;cursor:pointer;border-top-left-radius:var(--sinch-shape-radius-l);border-top-right-radius:var(--sinch-shape-radius-l);height:39px;color:var(--sinch-color-stormy-300);--sinch-color-icon:var(--sinch-color-stormy-300);--sinch-size-icon:16px}#button:hover{background-color:var(--sinch-color-tropical-100)}#button:focus-visible::before{content:"";position:absolute;inset:0;bottom:-3px;border:2px solid var(--sinch-color-border-focus);border-top-left-radius:var(--sinch-shape-radius-l);border-top-right-radius:var(--sinch-shape-radius-l);pointer-events:none}#button:disabled{cursor:unset;pointer-events:none;color:var(--sinch-color-border-default);--sinch-color-icon:var(--sinch-color-border-default)}:host([data-checked]) #button{color:var(--sinch-color-tropical-500);--sinch-color-icon:var(--sinch-color-tropical-500)}:host([data-checked]) #button::after{content:"";position:absolute;left:4px;right:4px;bottom:-1px;pointer-events:none;border-top:2px solid var(--sinch-color-tropical-500)}#text{flex-shrink:1;flex-basis:auto;min-width:0}::slotted(*){display:block}</style><button id="button"><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text></button>';
+const templateHTML = '<style>:host{display:block}#button{all:initial;position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 16px;box-sizing:border-box;cursor:pointer;background-color:var(--sinch-comp-tab-color-default-background-initial);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);height:39px;--sinch-global-color-text:var(--sinch-comp-tab-color-default-text-initial);--sinch-global-color-icon:var(--sinch-comp-tab-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-tab-size-icon)}#button:hover{background-color:var(--sinch-comp-tab-color-default-background-hover)}#button:focus-visible::before{content:"";position:absolute;inset:0;bottom:-3px;border:2px solid var(--sinch-comp-tab-color-default-outline-focus);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);pointer-events:none}#button:disabled{cursor:unset;pointer-events:none;--sinch-global-color-text:var(--sinch-comp-tab-color-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-tab-color-disabled-icon-initial)}:host([data-checked]) #button{--sinch-global-color-text:var(--sinch-comp-tab-color-checked-text-initial);--sinch-global-color-icon:var(--sinch-comp-tab-color-checked-icon-initial)}:host([data-checked]) #button::after{content:"";position:absolute;left:4px;right:4px;bottom:-1px;pointer-events:none;border-top:2px solid var(--sinch-comp-tab-color-checked-border-initial)}#text{flex-shrink:1;flex-basis:auto;min-width:0;--sinch-comp-text-font:var(--sinch-comp-tab-font-label)}::slotted(*){display:block}</style><button id="button"><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text></button>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-tabs-option', class extends NectaryElement {
@@ -23,6 +23,30 @@ defineCustomElement('sinch-tabs-option', class extends NectaryElement {
   static get observedAttributes() {
     return ['data-checked', 'disabled', 'text'];
   }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+    switch (name) {
+      case 'text':
+        {
+          this.#$text.textContent = newVal;
+          break;
+        }
+      case 'data-checked':
+        {
+          updateExplicitBooleanAttribute(this, 'aria-selected', isAttrTrue(newVal));
+          break;
+        }
+      case 'disabled':
+        {
+          const isDisabled = isAttrTrue(newVal);
+          this.#$button.disabled = isDisabled;
+          updateBooleanAttribute(this, name, isDisabled);
+          break;
+        }
+    }
+  }
   set value(value) {
     updateAttribute(this, 'value', value);
   }
@@ -41,25 +65,6 @@ defineCustomElement('sinch-tabs-option', class extends NectaryElement {
   get text() {
     return getAttribute(this, 'text', '');
   }
-  attributeChangedCallback(name, _, newVal) {
-    switch (name) {
-      case 'text':
-        {
-          this.#$text.textContent = newVal;
-          break;
-        }
-      case 'data-checked':
-        {
-          updateExplicitBooleanAttribute(this, 'aria-selected', isAttrTrue(newVal));
-          break;
-        }
-      case 'disabled':
-        {
-          this.#$button.disabled = isAttrTrue(newVal);
-          break;
-        }
-    }
-  }
   get focusable() {
     return true;
   }

package/tag/index.js

@@ -1,6 +1,6 @@
 import '../text';
-import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:24px;padding:0 9px;border-radius:12px;background-color:var(--sinch-tag-color-default-bg);color:var(--sinch-tag-color-default-fg);box-sizing:border-box;user-select:none;--sinch-color-icon:var(--sinch-tag-color-default-fg);--sinch-size-icon:16px}#text{flex:1}:host([small]:not([small=false])) #wrapper{height:20px;border-radius:10px;padding:0 8px}::slotted(*){margin-left:-4px}</style><div id="wrapper"><slot name="icon"></slot><sinch-text id="text" type="xs" ellipsis></sinch-text></div>';
+import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, isAttrTrue } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:var(--sinch-comp-tag-size-container-m);padding:0 9px;border-radius:var(--sinch-comp-tag-shape-radius);background-color:var(--sinch-comp-tag-color-default-background);box-sizing:border-box;user-select:none;--sinch-global-color-text:var(--sinch-comp-tag-color-default-foreground);--sinch-global-color-icon:var(--sinch-comp-tag-color-default-foreground);--sinch-global-size-icon:var(--sinch-comp-tag-size-icon-m)}:host([small]) #wrapper{height:var(--sinch-comp-tag-size-container-s);padding:0 8px;--sinch-global-size-icon:var(--sinch-comp-tag-size-icon-s)}#text{flex:1;--sinch-comp-text-font:var(--sinch-comp-tag-font-size-m-label)}:host([small]) #text{--sinch-comp-text-font:var(--sinch-comp-tag-font-size-s-label)}::slotted(*){margin-left:-4px}</style><div id="wrapper"><slot name="icon"></slot><sinch-text id="text" type="s" ellipsis></sinch-text></div>';
 import { assertTagColor, getTagColorBg, getTagColorFg } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -37,9 +37,12 @@ defineCustomElement('sinch-tag', class extends NectaryElement {
     updateBooleanAttribute(this, 'small', isSmall);
   }
   static get observedAttributes() {
-    return ['text', 'color'];
+    return ['text', 'color', 'small'];
   }
-  attributeChangedCallback(name, _, newVal) {
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
     switch (name) {
       case 'color':
         {
@@ -51,6 +54,11 @@ defineCustomElement('sinch-tag', class extends NectaryElement {
           this.#$text.textContent = newVal;
           break;
         }
+      case 'small':
+        {
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+          break;
+        }
     }
   }
   #updateColor() {
@@ -65,12 +73,12 @@ defineCustomElement('sinch-tag', class extends NectaryElement {
       const bg = getTagColorBg(colorName);
       const fg = getTagColorFg(colorName);
       this.#$wrapper.style.setProperty('background-color', bg);
-      this.#$wrapper.style.setProperty('color', fg);
-      this.#$wrapper.style.setProperty('--sinch-color-icon', fg);
+      this.#$wrapper.style.setProperty('--sinch-global-color-text', fg);
+      this.#$wrapper.style.setProperty('--sinch-global-color-icon', fg);
     } else {
       this.#$wrapper.style.removeProperty('background-color');
-      this.#$wrapper.style.removeProperty('color');
-      this.#$wrapper.style.removeProperty('--sinch-color-icon');
+      this.#$wrapper.style.removeProperty('--sinch-global-color-text');
+      this.#$wrapper.style.removeProperty('--sinch-global-color-icon');
     }
   }
 });

package/tag/utils.js

@@ -1,11 +1,11 @@
 export const getTagColorBg = id => {
-  return `var(--sinch-tag-color-${id}-bg)`;
+  return `var(--sinch-comp-tag-color-${id}-background)`;
 };
 export const getTagColorFg = id => {
-  return `var(--sinch-tag-color-${id}-fg)`;
+  return `var(--sinch-comp-tag-color-${id}-foreground)`;
 };
 export const assertTagColor = (root, id) => {
-  if (id === null || window.getComputedStyle(root).getPropertyValue(`--sinch-tag-color-${id}-bg`).length === 0) {
+  if (id === null || window.getComputedStyle(root).getPropertyValue(`--sinch-comp-tag-color-${id}-background`).length === 0) {
     throw new Error(`Invalid sinch-tag color name: ${id}`);
   }
 };

package/text/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getBooleanAttribute, updateBooleanAttribute, NectaryElement, getLiteralAttribute, updateLiteralAttribute, isAttrTrue } from '../utils';
-const templateHTML = '<style>:host{display:block;font:var(--sinch-font-text-m);font-style:inherit;font-weight:inherit;text-decoration:inherit}:host([inline]:not([inline=false])){display:inline}:host([type="s"]){font:var(--sinch-font-text-s)}:host([type=xs]){font:var(--sinch-font-text-xs)}:host([type=xxs]){font:var(--sinch-font-text-xxs)}:host([emphasized]:not([emphasized=false])){font-weight:var(--sinch-font-weight-emphasized)}:host([ellipsis]:not([ellipsis=false])){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--sinch-text-white-space:nowrap}</style><slot></slot>';
+const templateHTML = '<style>:host{display:block;font:var(--sinch-comp-text-font);color:var(--sinch-global-color-text,var(--sinch-sys-color-text-default));--sinch-comp-text-font:var(--sinch-sys-font-body-m)}:host([inline]){display:inline}:host([type="s"]){--sinch-comp-text-font:var(--sinch-sys-font-body-s)}:host([type=xs]){--sinch-comp-text-font:var(--sinch-sys-font-body-xs)}:host([type=xxs]){--sinch-comp-text-font:var(--sinch-sys-font-body-xxs)}:host([type="m"][emphasized]){--sinch-comp-text-font:var(--sinch-sys-font-body-emphasize)}:host([type="s"][emphasized]){--sinch-comp-text-font:var(--sinch-sys-font-body-emphasize-s)}:host([ellipsis]){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--sinch-global-text-white-space:nowrap}</style><slot></slot>';
 import { assertType, typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -10,7 +10,33 @@ defineCustomElement('sinch-text', class extends NectaryElement {
     shadowRoot.appendChild(template.content.cloneNode(true));
   }
   connectedCallback() {
-    this.setAttribute('role', getBooleanAttribute(this, 'inline') ? 'text' : 'paragraph');
+    this.#updateRole();
+  }
+  static get observedAttributes() {
+    return ['type', 'inline', 'ellipsis', 'emphasized'];
+  }
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'type':
+        {
+          if ('production' !== 'production') {
+            assertType(newVal);
+          }
+          break;
+        }
+      case 'inline':
+        {
+          this.#updateRole();
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+          break;
+        }
+      case 'ellipsis':
+      case 'emphasized':
+        {
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+          break;
+        }
+    }
   }
   get type() {
     return getLiteralAttribute(this, typeValues, 'type');
@@ -36,23 +62,7 @@ defineCustomElement('sinch-text', class extends NectaryElement {
   get emphasized() {
     return getBooleanAttribute(this, 'emphasized');
   }
-  static get observedAttributes() {
-    return ['type', 'inline'];
-  }
-  attributeChangedCallback(name, _, newVal) {
-    switch (name) {
-      case 'type':
-        {
-          if ('production' !== 'production') {
-            assertType(newVal);
-          }
-          break;
-        }
-      case 'inline':
-        {
-          this.setAttribute('role', isAttrTrue(newVal) ? 'text' : 'paragraph');
-          break;
-        }
-    }
+  #updateRole() {
+    this.setAttribute('role', getBooleanAttribute(this, 'inline') ? 'text' : 'paragraph');
   }
 });

package/textarea/index.js

@@ -1,6 +1,6 @@
 import { Context, defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
 import { DEFAULT_SIZE } from '../utils/size';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;--sinch-size:var(--sinch-size-m);--sinch-size-icon:var(--sinch-input-icon-size-m);--sinch-shape-radius:var(--sinch-shape-radius-m)}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;box-sizing:border-box;background-color:var(--sinch-color-snow-100);border-radius:var(--sinch-shape-radius);padding-right:2px;padding-bottom:2px;overflow:hidden}#input{all:initial;display:block;font:var(--sinch-font-text-m);color:var(--sinch-color-text-default);resize:none;white-space:pre-wrap;overflow-wrap:break-word;padding:8px 10px 8px 12px}#input::placeholder{font:var(--sinch-font-text-m);color:var(--sinch-color-text-muted);opacity:1}#input:disabled{color:var(--sinch-color-text-disabled);-webkit-text-fill-color:var(--sinch-color-text-disabled)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:focus{border-color:var(--sinch-color-stormy-600)}:host([resizable]:not([resizable=false])) #input{resize:vertical}#border{position:absolute;border:1px solid var(--sinch-color-border-dark);border-radius:var(--sinch-shape-radius);inset:0;pointer-events:none}:host([invalid]:not([invalid=false])) #border{border-color:var(--sinch-color-text-invalid)}#input:focus+#border{border-color:var(--sinch-color-border-focus);border-width:2px}#input:disabled+#border{border-color:var(--sinch-color-snow-500)}#bottom{display:flex;flex-direction:row;align-items:center;gap:8px;padding:8px 10px 10px 12px}#bottom.empty{display:none}</style><div id="wrapper"><textarea id="input"></textarea><div id="border"></div><div id="bottom"><slot name="bottom"></slot></div></div>';
+const templateHTML = '<style>:host{all:initial;display:inline-block;vertical-align:middle}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;box-sizing:border-box;background-color:var(--sinch-comp-textarea-color-default-background-initial);border-radius:var(--sinch-local-shape-radius);padding-right:2px;padding-bottom:2px;overflow:hidden;--sinch-local-shape-radius:var(--sinch-comp-textarea-shape-radius)}#input{all:initial;display:block;font:var(--sinch-comp-textarea-font-input);color:var(--sinch-comp-textarea-color-default-text-initial);resize:none;white-space:pre-wrap;overflow-wrap:break-word;padding:8px 10px 8px 12px;border:none}#input::placeholder{color:var(--sinch-comp-textarea-color-default-text-placeholder);opacity:1}#input:disabled{color:var(--sinch-comp-textarea-color-disabled-text-initial);-webkit-text-fill-color:var(--sinch-comp-textarea-color-disabled-text-initial)}:host([resizable]) #input{resize:vertical}#border{position:absolute;border:1px solid var(--sinch-comp-textarea-color-default-border-initial);border-radius:var(--sinch-local-shape-radius);inset:0;pointer-events:none}:host([invalid]) #border{border-color:var(--sinch-comp-textarea-color-invalid-border-initial)}#input:focus+#border{border-color:var(--sinch-comp-textarea-color-default-border-focus);border-width:2px}#input:disabled+#border{border-color:var(--sinch-comp-textarea-color-disabled-border-initial)}#bottom{display:flex;flex-direction:row;align-items:center;gap:8px;padding:8px 10px 10px 12px}#bottom.empty{display:none}</style><div id="wrapper"><textarea id="input"></textarea><div id="border"></div><div id="bottom"><slot name="bottom"></slot></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-textarea', class extends NectaryElement {
@@ -47,7 +47,7 @@ defineCustomElement('sinch-textarea', class extends NectaryElement {
     this.#controller.abort();
   }
   static get observedAttributes() {
-    return ['value', 'placeholder', 'invalid', 'disabled', 'rows'];
+    return ['value', 'placeholder', 'invalid', 'disabled', 'rows', 'resizable'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
@@ -76,7 +76,9 @@ defineCustomElement('sinch-textarea', class extends NectaryElement {
         }
       case 'invalid':
         {
-          updateExplicitBooleanAttribute(this, 'aria-invalid', isAttrTrue(newVal));
+          const isInvalid = isAttrTrue(newVal);
+          updateExplicitBooleanAttribute(this, 'aria-invalid', isInvalid);
+          updateBooleanAttribute(this, 'invalid', isInvalid);
           break;
         }
       case 'disabled':
@@ -91,11 +93,13 @@ defineCustomElement('sinch-textarea', class extends NectaryElement {
           updateAttribute(this.#$input, 'rows', newVal);
           break;
         }
+      case 'resizable':
+        {
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+          break;
+        }
     }
   }
-  get nodeName() {
-    return 'textarea';
-  }
   set value(value) {
     updateAttribute(this, 'value', value);
   }

package/textarea/types.d.ts

@@ -1,5 +1,4 @@
 import type { TSinchElementReact } from '../types';
-import type { SyntheticEvent } from 'react';
 export type TSinchTextareaElement = HTMLElement & {
     /** Value */
     value: string;
@@ -49,8 +48,6 @@ export type TSinchTextareaReact = TSinchElementReact<TSinchTextareaElement> & {
     rows?: number;
     /** Whether the text field is resizable */
     resizable?: boolean;
-    /** @deprecated Change value handler */
-    onChange?: (e: SyntheticEvent<TSinchTextareaElement, CustomEvent<string>>) => void;
     /** Change value handler */
     'on-change'?: (e: CustomEvent<string>) => void;
     /** Focus handler */

package/tile-control/index.js

@@ -1,5 +1,5 @@
-import { defineCustomElement, getAttribute, getBooleanAttribute, unpackCsv, getFirstCsvValue, getIntegerAttribute, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateIntegerAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0;--sinch-grid-num-columns:1}#wrapper{display:grid;grid-template-columns:repeat(var(--sinch-grid-num-columns),auto);gap:16px;width:fit-content}:host([small]:not([small=false])) #wrapper{gap:8px}:host([cols="2"]){--sinch-grid-num-columns:2}:host([cols="3"]){--sinch-grid-num-columns:3}:host([cols="4"]){--sinch-grid-num-columns:4}:host([cols="5"]){--sinch-grid-num-columns:5}:host([cols="6"]){--sinch-grid-num-columns:6}:host([cols="7"]){--sinch-grid-num-columns:7}:host([cols="8"]){--sinch-grid-num-columns:8}</style><div id="wrapper"><slot></slot></div>';
+import { defineCustomElement, getAttribute, getBooleanAttribute, unpackCsv, getFirstCsvValue, getIntegerAttribute, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateIntegerAttribute, isAttrTrue } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0;--sinch-grid-num-columns:1}#wrapper{display:grid;grid-template-columns:repeat(var(--sinch-grid-num-columns),auto);gap:16px;width:fit-content}:host([small]) #wrapper{gap:8px}:host([cols="2"]){--sinch-grid-num-columns:2}:host([cols="3"]){--sinch-grid-num-columns:3}:host([cols="4"]){--sinch-grid-num-columns:4}:host([cols="5"]){--sinch-grid-num-columns:5}:host([cols="6"]){--sinch-grid-num-columns:6}:host([cols="7"]){--sinch-grid-num-columns:7}:host([cols="8"]){--sinch-grid-num-columns:8}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-tile-control', class extends NectaryElement {
@@ -24,8 +24,27 @@ defineCustomElement('sinch-tile-control', class extends NectaryElement {
   static get observedAttributes() {
     return ['value', 'small', 'multiple'];
   }
-  get nodeName() {
-    return 'select';
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+    switch (name) {
+      case 'value':
+        {
+          this.#onValueChange(newVal ?? '');
+          break;
+        }
+      case 'small':
+        {
+          this.#onSmallChange();
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+          break;
+        }
+      case 'multiple':
+        {
+          this.#onValueChange(this.value);
+        }
+    }
   }
   set value(value) {
     updateAttribute(this, 'value', value);
@@ -51,27 +70,6 @@ defineCustomElement('sinch-tile-control', class extends NectaryElement {
   get cols() {
     return getIntegerAttribute(this, 'cols', 1);
   }
-  attributeChangedCallback(name, oldVal, newVal) {
-    if (oldVal === newVal) {
-      return;
-    }
-    switch (name) {
-      case 'value':
-        {
-          this.#onValueChange(newVal ?? '');
-          break;
-        }
-      case 'small':
-        {
-          this.#onSmallChange();
-          break;
-        }
-      case 'multiple':
-        {
-          this.#onValueChange(this.value);
-        }
-    }
-  }
   #onSlotChange = () => {
     this.#onValueChange(this.value);
     this.#onSmallChange();

package/tile-control/types.d.ts

@@ -1,5 +1,4 @@
 import type { TSinchElementReact } from '../types';
-import type { SyntheticEvent } from 'react';
 export type TSinchTileControlElement = HTMLElement & {
     /** Value */
     value: string;
@@ -31,8 +30,6 @@ export type TSinchTileControlReact = TSinchElementReact<TSinchTileControlElement
     cols: number;
     /** Label that is used for a11y */
     'aria-label': string;
-    /** @deprecated Change value handler */
-    onChange?: (event: SyntheticEvent<TSinchTileControlElement, CustomEvent<string>>) => void;
     /** Change value handler */
     'on-change'?: (e: CustomEvent<string>) => void;
 };

package/tile-control-option/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}button{all:initial;position:relative;display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box;width:88px;height:88px;padding:16px 8px 8px;border-radius:var(--sinch-shape-radius-l);background-color:var(--sinch-color-snow-100);box-shadow:var(--sinch-elevation-leve-1);cursor:pointer}:host([data-small])>button{width:64px;height:64px;border-radius:var(--sinch-shape-radius-m);padding:12px 4px 4px}button::before{content:"";position:absolute;left:0;top:0;bottom:0;right:0;border:1px solid var(--sinch-color-snow-700);border-radius:var(--sinch-shape-radius-l);pointer-events:none}:host([data-small])>button::before{border-radius:var(--sinch-shape-radius-m)}button:focus-visible::after{position:absolute;content:"";left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;padding:2px;border:2px solid var(--sinch-color-border-focus);border-radius:calc(var(--sinch-shape-radius-l) + 4px);pointer-events:none}:host([data-small])>button:focus-visible::after{border-radius:calc(var(--sinch-shape-radius-m) + 4px)}button:enabled:hover{background-color:var(--sinch-color-tropical-100)}button:enabled:hover::before{border-color:var(--sinch-color-tropical-100)}:host([data-checked])>button:enabled,button:enabled:active{box-shadow:var(--sinch-elevation-level-0)}:host([data-checked])>button:enabled::before,button:enabled:active::before{border-width:2px;border-color:var(--sinch-color-stormy-500)}button:disabled{cursor:initial}button:disabled>#icon,button:disabled>#text{opacity:.5}#text{display:inline-block;min-height:20px;text-align:center;font:var(--sinch-font-text-xs);color:var(--sinch-color-stormy-500);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#icon{width:32px;height:32px;align-self:center;--sinch-size-icon:32px;--sinch-color-icon:var(--sinch-color-stormy-500)}:host([data-small]) #icon{width:24px;height:24px;--sinch-size-icon:24px}button>*{pointer-events:none}</style><button><div id="icon"><slot name="icon"></slot></div><span id="text"></span></button>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}button{all:initial;position:relative;display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box;width:var(--sinch-local-size);height:var(--sinch-local-size);padding:16px 8px 8px;border-radius:var(--sinch-local-shape-radius);background-color:var(--sinch-local-color-background);box-shadow:var(--sinch-local-shadow);cursor:pointer;--sinch-local-color-background:var(--sinch-comp-tile-control-color-default-background-initial);--sinch-local-color-border:var(--sinch-comp-tile-control-color-default-border-initial);--sinch-local-color-text:var(--sinch-comp-tile-control-color-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-tile-control-color-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-tile-control-shadow-initial);--sinch-local-shape-radius:var(--sinch-comp-tile-control-shape-radius-l);--sinch-local-size:88px;--sinch-local-size-icon:var(--sinch-comp-tile-control-size-m-icon)}button::before{content:"";position:absolute;inset:0;border:1px solid var(--sinch-local-color-border);border-radius:var(--sinch-local-shape-radius);pointer-events:none}button:focus-visible::after{position:absolute;content:"";inset:-4px;padding:2px;border:2px solid var(--sinch-comp-tile-control-color-default-outline-focus);border-radius:calc(var(--sinch-local-shape-radius) + 4px);pointer-events:none}:host([data-small])>button{padding:12px 4px 4px;--sinch-local-shape-radius:var(--sinch-comp-tile-control-shape-radius-s);--sinch-local-size:64px;--sinch-local-size-icon:var(--sinch-comp-tile-control-size-s-icon)}button:enabled:hover{--sinch-local-color-background:var(--sinch-comp-tile-control-color-default-background-hover);--sinch-local-color-border:var(--sinch-comp-tile-control-color-default-border-hover);--sinch-local-shadow:var(--sinch-comp-tile-control-shadow-hover)}:host([data-checked])>button:enabled,button:enabled:active{--sinch-local-color-background:var(--sinch-comp-tile-control-color-checked-background-initial);--sinch-local-color-border:var(--sinch-comp-tile-control-color-checked-border-initial);--sinch-local-color-text:var(--sinch-comp-tile-control-color-checked-text-initial);--sinch-local-color-icon:var(--sinch-comp-tile-control-color-checked-icon-initial);--sinch-local-shadow:var(--sinch-comp-tile-control-shadow-active)}:host([data-checked])>button:enabled::before,button:enabled:active::before{border-width:2px}button:disabled{cursor:initial;--sinch-local-color-background:var(--sinch-comp-tile-control-color-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-tile-control-color-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-tile-control-color-disabled-text-initial);--sinch-local-color-icon:var(--sinch-comp-tile-control-color-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-tile-control-shadow-disabled)}#text{display:inline-block;min-height:20px;text-align:center;font:var(--sinch-comp-tile-control-font-label);color:var(--sinch-local-color-text);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#icon{width:var(--sinch-local-size-icon);height:var(--sinch-local-size-icon);align-self:center;--sinch-global-size-icon:var(--sinch-local-size-icon);--sinch-global-color-icon:var(--sinch-local-color-icon)}</style><button><div id="icon"><slot name="icon"></slot></div><span id="text"></span></button>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-tile-control-option', class extends NectaryElement {