@nectary/components 1.3.3 → 2.0.0

package/file-status/index.js

@@ -1,28 +1,25 @@
 import '../spinner';
 import '../icon';
 import '../text';
-import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, updateBooleanAttribute, getCssVar } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:12px 16px;box-sizing:border-box;min-height:48px;min-width:148px;background-color:var(--sinch-color-bg-primary-contrast);border-radius:var(--sinch-shape-radius-m)}:host([type=error]) #wrapper{background-color:var(--sinch-color-feedback-invalid-bg)}#content-wrapper{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;min-height:24px;margin-left:16px;color:var(--sinch-color-stormy-500)}#icon,#icon-loading{display:none;--sinch-color-icon:var(--sinch-color-stormy-500)}#action{display:flex;gap:4px;height:32px;margin-top:-4px;margin-bottom:-4px}:host([type=error]) #icon,:host([type=loading]) #icon-loading,:host([type=pending]) #icon,:host([type=progress]) #icon,:host([type=success]) #icon{display:block}:host([type=success]) #icon{--sinch-color-icon:var(--sinch-color-feedback-success-icon)}:host([type=error]) #icon{--sinch-color-icon:var(--sinch-color-feedback-invalid-icon)}</style><div id="wrapper"><sinch-spinner id="icon-loading" size="m"></sinch-spinner><sinch-icon id="icon"></sinch-icon><div id="content-wrapper"><sinch-text id="filename" type="m" ellipsis></sinch-text><slot name="content"></slot></div><div id="action"><slot name="action"></slot></div></div>';
+import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:12px 16px;box-sizing:border-box;min-height:48px;min-width:148px;border-radius:var(--sinch-comp-file-status-shape-radius)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-file-status-color-error-background)}:host([type=success]) #wrapper{background-color:var(--sinch-comp-file-status-color-success-background)}:host([type=pending]) #wrapper{background-color:var(--sinch-comp-file-status-color-pending-background)}:host([type=progress]) #wrapper{background-color:var(--sinch-comp-file-status-color-progress-background)}:host([type=loading]) #wrapper{background-color:var(--sinch-comp-file-status-color-loading-background)}#content-wrapper{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;min-height:24px;margin-left:16px}:host([type=error]) #filename{--sinch-global-color-text:var(--sinch-comp-file-status-color-error-text)}:host([type=success]) #filename{--sinch-global-color-text:var(--sinch-comp-file-status-color-success-text)}:host([type=pending]) #filename{--sinch-global-color-text:var(--sinch-comp-file-status-color-pending-text)}:host([type=progress]) #filename{--sinch-global-color-text:var(--sinch-comp-file-status-color-progress-text)}:host([type=loading]) #filename{--sinch-global-color-text:var(--sinch-comp-file-status-color-loading-text)}#action{display:flex;gap:4px;height:32px;margin-top:-4px;margin-bottom:-4px}#icon-error,#icon-loading,#icon-pending,#icon-progress,#icon-success{display:none}#icon-pending{--sinch-global-color-icon:var(--sinch-comp-file-status-color-pending-icon)}#icon-success{--sinch-global-color-icon:var(--sinch-comp-file-status-color-success-icon)}#icon-progress{--sinch-global-color-icon:var(--sinch-comp-file-status-color-progress-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-file-status-color-error-icon)}#icon-loading{--sinch-global-color-icon:var(--sinch-comp-file-status-color-loading-icon)}:host([type=error]) #icon-error,:host([type=loading]) #icon-loading,:host([type=pending]) #icon-pending,:host([type=progress]) #icon-progress,:host([type=success]) #icon-success{display:block}</style><div id="wrapper"><sinch-spinner id="icon-loading" size="m"></sinch-spinner><sinch-icon id="icon-pending" name="pending_actions"></sinch-icon><sinch-icon id="icon-success" name="check_circle"></sinch-icon><sinch-icon id="icon-progress" name="text_snippet"></sinch-icon><sinch-icon id="icon-error" name="report"></sinch-icon><div id="content-wrapper"><sinch-text id="filename" type="m" ellipsis></sinch-text><slot name="content"></slot></div><div id="action"><slot name="action"></slot></div></div>';
 import { assertType, typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-file-status', class extends NectaryElement {
   #$filename;
   #$contentSlot;
-  #$icon;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$filename = shadowRoot.querySelector('#filename');
     this.#$contentSlot = shadowRoot.querySelector('slot[name="content"]');
-    this.#$icon = shadowRoot.querySelector('#icon');
   }
   connectedCallback() {
     super.connectedCallback();
     this.#$contentSlot.addEventListener('slotchange', this.#onContentSlotChange);
     this.#onContentSlotChange();
-    this.#updateIcon();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -53,7 +50,6 @@ defineCustomElement('sinch-file-status', class extends NectaryElement {
           if ('production' !== 'production') {
             assertType(newVal);
           }
-          this.#updateIcon();
           break;
         }
       case 'filename':
@@ -63,16 +59,6 @@ defineCustomElement('sinch-file-status', class extends NectaryElement {
         }
     }
   }
-  #updateIcon() {
-    if (!this.isConnected) {
-      return;
-    }
-    const type = this.type;
-    if (type === 'loading') {
-      return;
-    }
-    updateAttribute(this.#$icon, 'name', getCssVar(this, `--sinch-file-status-icon-${type}`));
-  }
   #onContentSlotChange = () => {
     updateBooleanAttribute(this.#$filename, 'emphasized', this.#$contentSlot.assignedElements().length > 0);
   };

package/flag/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getAttribute, NectaryElement, updateAttribute } from '../utils';
-const templateHTML = '<style>:host{display:contents}#image{pointer-events:none;width:var(--sinch-size-icon,48px);height:var(--sinch-size-icon,48px);object-fit:contain}</style><img id="image" src="" alt="" loading="lazy"/>';
+const templateHTML = '<style>:host{display:contents}#image{pointer-events:none;width:var(--sinch-global-size-icon,48px);height:var(--sinch-global-size-icon,48px);object-fit:contain}</style><img id="image" src="" alt="" loading="lazy"/>';
 import { getFlagUrl } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/grid/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{--sinch-grid-gutter:24px;--sinch-grid-margin:32px;--sinch-grid-num-columns:12;display:grid;grid-template-columns:repeat(var(--sinch-grid-num-columns),minmax(0,1fr));grid-column-gap:var(--sinch-grid-gutter);grid-row-gap:var(--sinch-grid-gutter);padding:var(--sinch-grid-margin)}@media only screen and (max-width:1439px){:host{--sinch-grid-gutter:24px;--sinch-grid-margin:24px;--sinch-grid-num-columns:12}}@media only screen and (max-width:1023px){:host{--sinch-grid-gutter:24px;--sinch-grid-margin:24px;--sinch-grid-num-columns:8}}@media only screen and (max-width:767px){:host{--sinch-grid-gutter:16px;--sinch-grid-margin:16px;--sinch-grid-num-columns:4}}</style><slot name="item"></slot>';
+const templateHTML = '<style>:host{--sinch-comp-grid-gutter:24px;--sinch-comp-grid-margin:32px;--sinch-comp-grid-num-columns:12;display:grid;grid-template-columns:repeat(var(--sinch-comp-grid-num-columns),minmax(0,1fr));grid-column-gap:var(--sinch-comp-grid-gutter);grid-row-gap:var(--sinch-comp-grid-gutter);padding:var(--sinch-comp-grid-margin)}@media only screen and (max-width:1439px){:host{--sinch-comp-grid-gutter:24px;--sinch-comp-grid-margin:24px;--sinch-comp-grid-num-columns:12}}@media only screen and (max-width:1023px){:host{--sinch-comp-grid-gutter:24px;--sinch-comp-grid-margin:24px;--sinch-comp-grid-num-columns:8}}@media only screen and (max-width:767px){:host{--sinch-comp-grid-gutter:16px;--sinch-comp-grid-margin:16px;--sinch-comp-grid-num-columns:4}}</style><slot name="item"></slot>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-grid', class extends NectaryElement {

package/help-tooltip/index.js

@@ -1,11 +1,10 @@
 import '../tooltip';
 import '../icon';
-import { defineCustomElement, getAttribute, getBooleanAttribute, getCssVar, getIntegerAttribute, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute, updateIntegerAttribute } from '../utils';
-const templateHTML = '<style>:host{display:contents}#icon{--sinch-size-icon:18px;--sinch-icon-font-variation-settings:var(--sinch-help-tooltip-icon-font-variation-settings)}</style><sinch-tooltip><sinch-icon id="icon"></sinch-icon></sinch-tooltip>';
+import { defineCustomElement, getAttribute, getIntegerAttribute, getReactEventHandler, NectaryElement, updateAttribute, updateIntegerAttribute } from '../utils';
+const templateHTML = '<style>:host{display:contents;--sinch-comp-help-tooltip-color-icon:var(--sinch-sys-color-text-default)}#icon{--sinch-global-size-icon:18px;--sinch-global-color-icon:var(--sinch-comp-help-tooltip-color-icon);--sinch-comp-icon-font-variation-settings:"FILL" 0}</style><sinch-tooltip type="fast"><sinch-icon id="icon" name="help"></sinch-icon></sinch-tooltip>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-help-tooltip', class extends NectaryElement {
-  #$icon;
   #$tooltip;
   #controller = null;
   constructor() {
@@ -13,7 +12,6 @@ defineCustomElement('sinch-help-tooltip', class extends NectaryElement {
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$tooltip = shadowRoot.querySelector('sinch-tooltip');
-    this.#$icon = shadowRoot.querySelector('#icon');
   }
   connectedCallback() {
     super.connectedCallback();
@@ -25,14 +23,13 @@ defineCustomElement('sinch-help-tooltip', class extends NectaryElement {
     this.#$tooltip.addEventListener('-hide', this.#onTooltipHide, options);
     this.addEventListener('-show', this.#onTooltipShowReactHandler, options);
     this.addEventListener('-hide', this.#onTooltipHideReactHandler, options);
-    updateAttribute(this.#$icon, 'name', getCssVar(this, '--sinch-help-tooltip-icon-help'));
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.#controller.abort();
   }
   static get observedAttributes() {
-    return ['text', 'width', 'orientation', 'inverted'];
+    return ['text', 'width', 'orientation'];
   }
   attributeChangedCallback(name, _, newVal) {
     updateAttribute(this.#$tooltip, name, newVal);
@@ -49,12 +46,6 @@ defineCustomElement('sinch-help-tooltip', class extends NectaryElement {
   set width(value) {
     updateIntegerAttribute(this, 'width', value);
   }
-  get inverted() {
-    return getBooleanAttribute(this, 'inverted');
-  }
-  set inverted(isInverted) {
-    updateBooleanAttribute(this, 'inverted', isInverted);
-  }
   get orientation() {
     return getAttribute(this, 'orientation', 'top');
   }

package/horizontal-stepper/index.js

@@ -1,5 +1,5 @@
 import { clampNumber, defineCustomElement, getAttribute, getIntegerAttribute, NectaryElement, updateAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;display:flex;flex-direction:row;gap:28px;width:fit-content}#progress{position:absolute;height:1px;background-color:var(--sinch-color-snow-700);left:72px;right:72px;top:16px;transform:translateY(-50%)}#bar{position:absolute;height:1px;background-color:var(--sinch-color-stormy-400);left:0;top:0}</style><div id="wrapper"><div id="progress"><div id="bar"></div></div><slot></slot></div>';
+const templateHTML = '<style>:host{display:block;outline:0;--sinch-comp-horizontal-stepper-color-background-default:var(--sinch-sys-color-container-contrast-primary-default);--sinch-comp-horizontal-stepper-color-background-visited-skip:var(--sinch-sys-color-container-contrast-primary-default);--sinch-comp-horizontal-stepper-color-background-active:var(--sinch-ref-color-main-stormy-400);--sinch-comp-horizontal-stepper-color-background-visited:var(--sinch-ref-color-main-snow-700);--sinch-comp-horizontal-stepper-color-background-visited-error:var(--sinch-sys-color-feedback-invalid-background);--sinch-comp-horizontal-stepper-color-border-default:transparent;--sinch-comp-horizontal-stepper-color-border-visited-skip:var(--sinch-ref-color-main-stormy-400);--sinch-comp-horizontal-stepper-color-border-active:transparent;--sinch-comp-horizontal-stepper-color-border-visited:var(--sinch-ref-color-main-stormy-400);--sinch-comp-horizontal-stepper-color-border-visited-error:var(--sinch-ref-color-main-stormy-400);--sinch-comp-horizontal-stepper-color-icon-default:var(--sinch-ref-color-main-stormy-700);--sinch-comp-horizontal-stepper-color-icon-visited-skip:var(--sinch-ref-color-main-stormy-700);--sinch-comp-horizontal-stepper-color-icon-active:var(--sinch-ref-color-main-snow-100);--sinch-comp-horizontal-stepper-color-icon-visited:var(--sinch-ref-color-main-stormy-700);--sinch-comp-horizontal-stepper-color-icon-visited-error:var(--sinch-ref-color-main-stormy-700);--sinch-comp-horizontal-stepper-color-label:var(--sinch-sys-color-text-default);--sinch-comp-horizontal-stepper-color-description:var(--sinch-sys-color-text-muted);--sinch-comp-horizontal-stepper-color-progress:var(--sinch-ref-color-main-snow-700);--sinch-comp-horizontal-stepper-color-progress-visited:var(--sinch-ref-color-main-stormy-400)}#wrapper{position:relative;display:flex;flex-direction:row;gap:28px;width:fit-content}#progress{position:absolute;height:1px;background-color:var(--sinch-comp-horizontal-stepper-color-progress);left:72px;right:72px;top:16px;transform:translateY(-50%)}#bar{position:absolute;height:1px;background-color:var(--sinch-comp-horizontal-stepper-color-progress-visited);left:0;top:0}</style><div id="wrapper"><div id="progress"><div id="bar"></div></div><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-horizontal-stepper', class extends NectaryElement {

package/horizontal-stepper-item/index.d.ts

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

package/horizontal-stepper-item/index.js

@@ -1,6 +1,8 @@
 import '../icon';
-import { defineCustomElement, getAttribute, getCssVars, getLiteralAttribute, NectaryElement, updateAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{width:144px;min-height:64px;display:flex;flex-direction:column}#circle{position:relative;display:flex;align-items:center;justify-content:center;align-self:center;width:32px;height:32px;background-color:var(--sinch-color-snow-700);font:var(--sinch-font-title-s);line-height:32px;text-align:center;color:var(--sinch-color-stormy-500);border:1px solid transparent;border-radius:50%;box-sizing:border-box;--sinch-size-icon:20px}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-stormy-500);text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-top:8px}#description{font:var(--sinch-font-text-xs);color:var(--sinch-color-stormy-300);text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#icon-error,#icon-success{display:none}:host([data-progress=active]) #circle{color:var(--sinch-color-snow-100);background-color:var(--sinch-color-stormy-400)}:host([data-progress=done]) #circle{border-color:var(--sinch-color-stormy-400)}:host([data-progress=done]:not([status])) #icon-success{display:block}:host([data-progress=done][status=error]) #circle{background-color:var(--sinch-color-feedback-invalid-bg);border-color:var(--sinch-color-stormy-400)}:host([data-progress=done][status=error]) #icon-error{display:block}:host([data-progress=done]:not([status=skip])) #circle-text{display:none}</style><div id="wrapper"><div id="circle" aria-hidden="true"><sinch-icon id="icon-success"></sinch-icon><sinch-icon id="icon-error"></sinch-icon><span id="circle-text"></span></div><span id="label"></span><span id="description"></span></div>';
+import '../title';
+import '../text';
+import { defineCustomElement, getAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateLiteralAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{width:144px;min-height:64px;display:flex;flex-direction:column}#circle{position:relative;display:flex;align-items:center;justify-content:center;align-self:center;width:32px;height:32px;background-color:var(--sinch-local-color-background);font:var(--sinch-sys-font-desktop-title-s);line-height:32px;text-align:center;color:var(--sinch-local-color-text);border:1px solid var(--sinch-local-color-border);border-radius:50%;box-sizing:border-box;--sinch-local-color-background:var(--sinch-comp-horizontal-stepper-color-background-default);--sinch-local-color-border:var(--sinch-comp-horizontal-stepper-color-border-default);--sinch-local-color-text:var(--sinch-comp-horizontal-stepper-color-icon-default);--sinch-local-color-icon:var(--sinch-comp-horizontal-stepper-color-icon-default);--sinch-global-size-icon:20px}:host([data-progress=active]) #circle{--sinch-local-color-background:var(--sinch-comp-horizontal-stepper-color-background-active);--sinch-local-color-border:var(--sinch-comp-horizontal-stepper-color-border-active);--sinch-local-color-text:var(--sinch-comp-horizontal-stepper-color-icon-active);--sinch-local-color-icon:var(--sinch-comp-horizontal-stepper-color-icon-active)}:host([data-progress=done]) #circle{--sinch-local-color-background:var(--sinch-comp-horizontal-stepper-color-background-visited);--sinch-local-color-border:var(--sinch-comp-horizontal-stepper-color-border-visited);--sinch-local-color-text:var(--sinch-comp-horizontal-stepper-color-icon-visited);--sinch-local-color-icon:var(--sinch-comp-horizontal-stepper-color-icon-visited)}:host([data-progress=done][status=error]) #circle{--sinch-local-color-background:var(--sinch-comp-horizontal-stepper-color-background-visited-error);--sinch-local-color-border:var(--sinch-comp-horizontal-stepper-color-border-visited-error);--sinch-local-color-text:var(--sinch-comp-horizontal-stepper-color-icon-visited-error);--sinch-local-color-icon:var(--sinch-comp-horizontal-stepper-color-icon-visited-error)}:host([data-progress=done][status=skip]) #circle{--sinch-local-color-background:var(--sinch-comp-horizontal-stepper-color-background-visited-skip);--sinch-local-color-border:var(--sinch-comp-horizontal-stepper-color-border-visited-skip);--sinch-local-color-text:var(--sinch-comp-horizontal-stepper-color-icon-visited-skip);--sinch-local-color-icon:var(--sinch-comp-horizontal-stepper-color-icon-visited-skip)}#icon-error,#icon-success{display:none}:host([data-progress=done]:not([status])) #icon-success{display:block}:host([data-progress=done][status=error]) #icon-error{display:block}:host([data-progress=done]:not([status=skip])) #circle-text{display:none}#label{text-align:center;margin-top:8px;--sinch-global-color-text:var(--sinch-comp-horizontal-stepper-color-label)}#description{text-align:center;--sinch-global-color-text:var(--sinch-comp-horizontal-stepper-color-description)}</style><div id="wrapper"><div id="circle" aria-hidden="true"><sinch-icon id="icon-success" name="check"></sinch-icon><sinch-icon id="icon-error" name="exclamation"></sinch-icon><span id="circle-text"></span></div><sinch-title id="label" type="s" ellipsis></sinch-title><sinch-text id="description" type="xs" ellipsis></sinch-text></div>';
 import { statusValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -8,8 +10,6 @@ defineCustomElement('sinch-horizontal-stepper-item', class extends NectaryElemen
   #$label;
   #$description;
   #$circleText;
-  #$iconSuccess;
-  #$iconError;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -17,22 +17,18 @@ defineCustomElement('sinch-horizontal-stepper-item', class extends NectaryElemen
     this.#$label = shadowRoot.querySelector('#label');
     this.#$description = shadowRoot.querySelector('#description');
     this.#$circleText = shadowRoot.querySelector('#circle-text');
-    this.#$iconSuccess = shadowRoot.querySelector('#icon-success');
-    this.#$iconError = shadowRoot.querySelector('#icon-error');
-  }
-  connectedCallback() {
-    const [successName, errorName] = getCssVars(this, ['--sinch-horizontal-stepper-icon-success', '--sinch-horizontal-stepper-icon-error']);
-    updateAttribute(this.#$iconSuccess, 'name', successName);
-    updateAttribute(this.#$iconError, 'name', errorName);
   }
   static get observedAttributes() {
     return ['label', 'description', 'data-index'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
     switch (name) {
       case 'label':
         {
-          this.#$label.textContent = newVal;
+          updateAttribute(this.#$label, 'text', newVal);
           break;
         }
       case 'description':

package/icon/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getAttribute, NectaryElement, updateAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block}#icon{display:block;font-family:var(--sinch-icon-font-family);font-weight:var(--sinch-icon-font-weight);font-size:var(--sinch-size-icon, 24px);font-feature-settings:var(--sinch-icon-font-feature-settings);font-variation-settings:var(--sinch-icon-font-variation-settings);-webkit-font-smoothing:antialiased;line-height:1;white-space:nowrap;width:var(--sinch-size-icon,24px);height:var(--sinch-size-icon,24px);color:var(--sinch-color-icon,var(--sinch-color-stormy-500));user-select:none}</style><span id="icon" role="img"></span>';
+const templateHTML = '<style>:host{display:inline-block}#icon{display:block;font-family:var(--sinch-comp-icon-font-family);font-weight:var(--sinch-comp-icon-font-weight);font-size:var(--sinch-global-size-icon, 24px);font-feature-settings:var(--sinch-comp-icon-font-feature-settings);font-variation-settings:var(--sinch-comp-icon-font-variation-settings);-webkit-font-smoothing:antialiased;line-height:1;white-space:nowrap;width:var(--sinch-global-size-icon,24px);height:var(--sinch-global-size-icon,24px);color:var(--sinch-global-color-icon,var(--sinch-sys-color-text-default));user-select:none}</style><span id="icon" role="img"></span>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-icon', class extends NectaryElement {

package/icon-button/index.js

@@ -1,7 +1,7 @@
 import '../tooltip';
 import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, subscribeContext, updateAttribute, updateBooleanAttribute, updateLiteralAttribute, Context, getAttribute } from '../utils';
 import { assertSizeEx, DEFAULT_SIZE, sizeExValues } from '../utils/size';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-size:var(--sinch-size-m);--sinch-size-icon:var(--sinch-icon-button-icon-size-m);--sinch-shape-radius:var(--sinch-shape-radius-m)}#button{all:initial;position:relative;display:flex;align-items:center;justify-content:center;width:var(--sinch-size);height:var(--sinch-size);cursor:pointer;contain:size;--sinch-color-icon:var(--sinch-icon-button-color-icon)}:host([data-size="l"]){--sinch-size:var(--sinch-size-l);--sinch-size-icon:var(--sinch-icon-button-icon-size-l);--sinch-shape-radius:var(--sinch-shape-radius-l)}:host([data-size="m"]){--sinch-size:var(--sinch-size-m);--sinch-size-icon:var(--sinch-icon-button-icon-size-m);--sinch-shape-radius:var(--sinch-shape-radius-m)}:host([data-size="s"]){--sinch-size:var(--sinch-size-s);--sinch-size-icon:var(--sinch-icon-button-icon-size-s);--sinch-shape-radius:var(--sinch-shape-radius-s)}:host([data-size=xs]){--sinch-size:var(--sinch-size-xs);--sinch-size-icon:var(--sinch-icon-button-icon-size-xs);--sinch-shape-radius:var(--sinch-shape-radius-xs)}:host([type=primary]){--sinch-icon-button-color-background:var(--sinch-icon-button-primary-color-background);--sinch-icon-button-color-background-hover:var(--sinch-icon-button-primary-color-background-hover);--sinch-icon-button-color-background-active:var(--sinch-icon-button-primary-color-background-active);--sinch-icon-button-color-background-disabled:var(--sinch-icon-button-primary-color-background-disabled);--sinch-icon-button-color-border:var(--sinch-icon-button-primary-color-border);--sinch-icon-button-color-border-hover:var(--sinch-icon-button-primary-color-border-hover);--sinch-icon-button-color-border-active:var(--sinch-icon-button-primary-color-border-active);--sinch-icon-button-color-border-disabled:var(--sinch-icon-button-primary-color-border-disabled);--sinch-icon-button-color-icon:var(--sinch-icon-button-primary-color-icon);--sinch-icon-button-color-icon-hover:var(--sinch-icon-button-primary-color-icon-hover);--sinch-icon-button-color-icon-active:var(--sinch-icon-button-primary-color-icon-active);--sinch-icon-button-color-icon-disabled:var(--sinch-icon-button-primary-color-icon-disabled);--sinch-icon-button-mix-blend-mode:var(--sinch-icon-button-primary-mix-blend-mode);--sinch-elevation-level:var(--sinch-elevation-level-1)}:host([type=secondary]){--sinch-icon-button-color-background:var(--sinch-icon-button-secondary-color-background);--sinch-icon-button-color-background-hover:var(--sinch-icon-button-secondary-color-background-hover);--sinch-icon-button-color-background-active:var(--sinch-icon-button-secondary-color-background-active);--sinch-icon-button-color-background-disabled:var(--sinch-icon-button-secondary-color-background-disabled);--sinch-icon-button-color-border:var(--sinch-icon-button-secondary-color-border);--sinch-icon-button-color-border-hover:var(--sinch-icon-button-secondary-color-border-hover);--sinch-icon-button-color-border-active:var(--sinch-icon-button-secondary-color-border-active);--sinch-icon-button-color-border-disabled:var(--sinch-icon-button-secondary-color-border-disabled);--sinch-icon-button-color-icon:var(--sinch-icon-button-secondary-color-icon);--sinch-icon-button-color-icon-hover:var(--sinch-icon-button-secondary-color-icon-hover);--sinch-icon-button-color-icon-active:var(--sinch-icon-button-secondary-color-icon-active);--sinch-icon-button-color-icon-disabled:var(--sinch-icon-button-secondary-color-icon-disabled);--sinch-icon-button-mix-blend-mode:var(--sinch-icon-button-secondary-mix-blend-mode);--sinch-elevation-level:var(--sinch-elevation-level-1)}:host([type=tertiary]){--sinch-icon-button-color-background:var(--sinch-icon-button-tertiary-color-background);--sinch-icon-button-color-background-hover:var(--sinch-icon-button-tertiary-color-background-hover);--sinch-icon-button-color-background-active:var(--sinch-icon-button-tertiary-color-background-active);--sinch-icon-button-color-background-disabled:var(--sinch-icon-button-tertiary-color-background-disabled);--sinch-icon-button-color-border:var(--sinch-icon-button-tertiary-color-border);--sinch-icon-button-color-border-hover:var(--sinch-icon-button-tertiary-color-border-hover);--sinch-icon-button-color-border-active:var(--sinch-icon-button-tertiary-color-border-active);--sinch-icon-button-color-border-disabled:var(--sinch-icon-button-tertiary-color-border-disabled);--sinch-icon-button-color-icon:var(--sinch-icon-button-tertiary-color-icon);--sinch-icon-button-color-icon-hover:var(--sinch-icon-button-tertiary-color-icon-hover);--sinch-icon-button-color-icon-active:var(--sinch-icon-button-tertiary-color-icon-active);--sinch-icon-button-color-icon-disabled:var(--sinch-icon-button-tertiary-color-icon-disabled);--sinch-icon-button-mix-blend-mode:var(--sinch-icon-button-tertiary-mix-blend-mode);--sinch-elevation-level:var(--sinch-elevation-level-0)}#button::before{content:"";position:absolute;inset:0;border-radius:var(--sinch-shape-radius);border:1px solid var(--sinch-icon-button-color-border);background-color:var(--sinch-icon-button-color-background);box-shadow:var(--sinch-elevation-level);pointer-events:none;mix-blend-mode:var(--sinch-icon-button-mix-blend-mode)}#button:focus-visible::after{content:"";position:absolute;inset:-3px;border:2px solid var(--sinch-color-border-focus);border-radius:calc(var(--sinch-shape-radius) + 3px);pointer-events:none}#button:disabled{cursor:initial;--sinch-color-icon:var(--sinch-icon-button-color-icon-disabled)}#button:disabled::before{background-color:var(--sinch-icon-button-color-background-disabled);border-color:var(--sinch-icon-button-color-border-disabled);box-shadow:var(--sinch-elevation-level-0)}#button:enabled:hover{--sinch-color-icon:var(--sinch-icon-button-color-icon-hover)}#button:enabled:hover::before{background-color:var(--sinch-icon-button-color-background-hover);border-color:var(--sinch-icon-button-color-border-hover)}#button:enabled:active{--sinch-color-icon:var(--sinch-icon-button-color-icon-active)}#button:enabled:active::before{background-color:var(--sinch-icon-button-color-background-active);border-color:var(--sinch-icon-button-color-border-active);box-shadow:var(--sinch-elevation-level-0)}#content{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%}#button *{pointer-events:none}</style><sinch-tooltip id="tooltip" inverted><button id="button"><div id="content"><slot name="icon"></slot></div></button></sinch-tooltip>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#button{all:initial;display:block;position:relative;width:var(--sinch-local-size);height:var(--sinch-local-size);cursor:pointer;contain:size;--sinch-global-color-icon:var(--sinch-local-color-icon)}#button:disabled{cursor:initial}:host([data-size="l"]) #button{--sinch-local-size:var(--sinch-comp-icon-button-size-container-l);--sinch-global-size-icon:var(--sinch-comp-icon-button-size-icon-l);--sinch-local-shape-radius:var(--sinch-comp-icon-button-shape-radius-size-l)}#button,:host([data-size="m"]) #button{--sinch-local-size:var(--sinch-comp-icon-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-icon-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-icon-button-shape-radius-size-m)}:host([data-size="s"]) #button{--sinch-local-size:var(--sinch-comp-icon-button-size-container-s);--sinch-global-size-icon:var(--sinch-comp-icon-button-size-icon-s);--sinch-local-shape-radius:var(--sinch-comp-icon-button-shape-radius-size-s)}:host([data-size=xs]) #button{--sinch-local-size:var(--sinch-comp-icon-button-size-container-xs);--sinch-global-size-icon:var(--sinch-comp-icon-button-size-icon-xs);--sinch-local-shape-radius:var(--sinch-comp-icon-button-shape-radius-size-xs)}:host([type=primary]) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-icon-button-color-primary-default-border-initial);--sinch-local-color-icon:var(--sinch-comp-icon-button-color-primary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-primary-initial);--sinch-local-color-outline:var(--sinch-comp-icon-button-color-primary-default-outline-focus)}:host([type=secondary]) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-icon-button-color-secondary-default-border-initial);--sinch-local-color-icon:var(--sinch-comp-icon-button-color-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-secondary-initial);--sinch-local-color-outline:var(--sinch-comp-icon-button-color-secondary-default-outline-focus)}#button,:host([type=tertiary]) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-tertiary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-icon-button-color-tertiary-default-border-initial);--sinch-local-color-icon:var(--sinch-comp-icon-button-color-tertiary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-tertiary-initial);--sinch-local-color-outline:var(--sinch-comp-icon-button-color-tertiary-default-outline-focus)}:host([type=primary]) #button:disabled{--sinch-local-color-background:var(--sinch-comp-icon-button-color-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-icon-button-color-primary-disabled-border-initial);--sinch-local-color-icon:var(--sinch-comp-icon-button-color-primary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-primary-disabled)}:host([type=secondary]) #button:disabled{--sinch-local-color-background:var(--sinch-comp-icon-button-color-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-icon-button-color-secondary-disabled-border-initial);--sinch-local-color-icon:var(--sinch-comp-icon-button-color-secondary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-secondary-disabled)}#button:disabled,:host([type=tertiary]) #button:disabled{--sinch-local-color-background:var(--sinch-comp-icon-button-color-tertiary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-icon-button-color-tertiary-disabled-border-initial);--sinch-local-color-icon:var(--sinch-comp-icon-button-color-tertiary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-tertiary-disabled)}:host([type=primary]) #button:focus{--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-primary-focus)}:host([type=secondary]) #button:focus{--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-secondary-focus)}#button:focus,:host([type=tertiary]) #button:focus{--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-tertiary-focus)}:host([type=primary]) #button:enabled:hover{--sinch-local-color-background:var(--sinch-comp-icon-button-color-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-primary-hover)}:host([type=secondary]) #button:enabled:hover{--sinch-local-color-background:var(--sinch-comp-icon-button-color-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-secondary-hover)}#button:enabled:hover,:host([type=tertiary]) #button:enabled:hover{--sinch-local-color-background:var(--sinch-comp-icon-button-color-tertiary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-tertiary-hover)}:host([type=primary]) #button:enabled:active{--sinch-local-color-background:var(--sinch-comp-icon-button-color-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-primary-active)}:host([type=secondary]) #button:enabled:active{--sinch-local-color-background:var(--sinch-comp-icon-button-color-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-secondary-active)}#button:enabled:active,:host([type=tertiary]) #button:enabled:active{--sinch-local-color-background:var(--sinch-comp-icon-button-color-tertiary-default-background-active);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-tertiary-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:focus-visible::after{content:"";position:absolute;inset:-3px;border:2px solid var(--sinch-local-color-outline);border-radius:calc(var(--sinch-local-shape-radius) + 3px);pointer-events:none}#content{position:relative;display:flex;align-items:center;justify-content:center;width:var(100%);height:var(100%)}</style><sinch-tooltip id="tooltip"><button id="button"><div id="content"><slot name="icon"></slot></div></button></sinch-tooltip>';
 import { assertType, typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/inline-alert/index.js

@@ -2,13 +2,12 @@ import '../icon';
 import '../rich-text';
 import '../text';
 import '../title';
-import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, setClass, getCssVar } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:16px;border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;width:100%}#body-wrapper{display:flex;flex-direction:column;align-items:flex-start;margin-left:8px;min-width:0;flex:1}#caption{color:var(--sinch-color-stormy-500);align-self:stretch}#text{display:flex;flex-direction:column;gap:8px;color:var(--sinch-color-stormy-500);margin-top:4px;align-self:stretch}:host([type=success]) #wrapper{background-color:var(--sinch-color-feedback-success-bg)}: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=success]) #icon{--sinch-color-icon:var(--sinch-color-feedback-success-icon)}: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)}#action{display:flex;margin-top:16px;min-width:0}#action.empty{display:none}#close{margin-left:16px}#close.empty{display:none}</style><div id="wrapper"><sinch-icon id="icon"></sinch-icon><div id="body-wrapper"><sinch-title id="caption" level="3" type="s" ellipsis></sinch-title><sinch-rich-text id="text"></sinch-rich-text><div id="action"><slot name="action"></slot></div></div><div id="close"><slot name="close"></slot></div></div>';
+import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, setClass } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:16px;border-radius:var(--sinch-comp-inline-alert-shape-radius);box-sizing:border-box;width:100%}:host([type=success]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-success-default-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-info-default-background)}#icon-error,#icon-info,#icon-success,#icon-warn{display:none}#icon-success{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-success-default-icon)}#icon-warn{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-warning-default-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-error-default-icon)}#icon-info{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-info-default-icon)}:host([type=error]) #icon-error,:host([type=info]) #icon-info,:host([type=success]) #icon-success,:host([type=warn]) #icon-warn{display:block}#body-wrapper{display:flex;flex-direction:column;align-items:flex-start;margin-left:8px;min-width:0;flex:1}#caption{align-self:stretch;--sinch-comp-title-font:var(--sinch-comp-inline-alert-font-title)}:host([type=success]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-success-default-text)}:host([type=warn]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-warning-default-text)}:host([type=error]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-error-default-text)}:host([type=info]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-info-default-text)}#text{display:flex;flex-direction:column;gap:8px;margin-top:4px;align-self:stretch;--sinch-comp-rich-text-font:var(--sinch-comp-inline-alert-font-body)}:host([type=success]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-success-default-text)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-info-default-text)}#action{display:flex;margin-top:16px;min-width:0}#action.empty{display:none}#close{margin-left:16px}#close.empty{display:none}</style><div id="wrapper"><sinch-icon id="icon-info" name="info"></sinch-icon><sinch-icon id="icon-success" name="check_circle"></sinch-icon><sinch-icon id="icon-warn" name="report_problem"></sinch-icon><sinch-icon id="icon-error" name="report"></sinch-icon><div id="body-wrapper"><sinch-title id="caption" level="3" type="s" ellipsis></sinch-title><sinch-rich-text id="text"></sinch-rich-text><div id="action"><slot name="action"></slot></div></div><div id="close"><slot name="close"></slot></div></div>';
 import { assertType, typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-inline-alert', class extends NectaryElement {
-  #$icon;
   #$text;
   #$caption;
   #$closeWrapper;
@@ -19,7 +18,6 @@ defineCustomElement('sinch-inline-alert', class extends NectaryElement {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$icon = shadowRoot.querySelector('#icon');
     this.#$text = shadowRoot.querySelector('#text');
     this.#$caption = shadowRoot.querySelector('#caption');
     this.#$closeWrapper = shadowRoot.querySelector('#close');
@@ -35,31 +33,12 @@ defineCustomElement('sinch-inline-alert', class extends NectaryElement {
     this.#$actionSlot.addEventListener('slotchange', this.#onActionSlotChange);
     this.#onCloseSlotChange();
     this.#onActionSlotChange();
-    this.#updateIcon();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.#$closeSlot.removeEventListener('slotchange', this.#onCloseSlotChange);
     this.#$actionSlot.removeEventListener('slotchange', this.#onActionSlotChange);
   }
-  get type() {
-    return getLiteralAttribute(this, typeValues, 'type');
-  }
-  set type(value) {
-    updateLiteralAttribute(this, typeValues, 'type', value);
-  }
-  get text() {
-    return getAttribute(this, 'text', '');
-  }
-  set text(value) {
-    updateAttribute(this, 'text', value);
-  }
-  get caption() {
-    return getAttribute(this, 'caption', '');
-  }
-  set caption(value) {
-    updateAttribute(this, 'caption', value);
-  }
   static get observedAttributes() {
     return ['text', 'caption', 'type'];
   }
@@ -70,7 +49,6 @@ defineCustomElement('sinch-inline-alert', class extends NectaryElement {
           if ('production' !== 'production') {
             assertType(newVal);
           }
-          this.#updateIcon();
           break;
         }
       case 'text':
@@ -85,11 +63,23 @@ defineCustomElement('sinch-inline-alert', class extends NectaryElement {
         }
     }
   }
-  #updateIcon() {
-    if (!this.isConnected) {
-      return;
-    }
-    updateAttribute(this.#$icon, 'name', getCssVar(this, `--sinch-inline-alert-icon-${this.type}`));
+  get type() {
+    return getLiteralAttribute(this, typeValues, 'type');
+  }
+  set type(value) {
+    updateLiteralAttribute(this, typeValues, 'type', value);
+  }
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+  get caption() {
+    return getAttribute(this, 'caption', '');
+  }
+  set caption(value) {
+    updateAttribute(this, 'caption', value);
   }
   #onCloseSlotChange = () => {
     setClass(this.#$closeWrapper, 'empty', this.#$closeSlot.assignedElements().length === 0);

package/input/index.d.ts

@@ -1,6 +1,3 @@
-import '../icon-button';
-import '../icon';
-import '../stop-events';
 import type { TSinchInputElement, TSinchInputReact } from './types';
 declare global {
     namespace JSX {

package/input/index.js

@@ -1,16 +1,11 @@
-import '../icon-button';
-import '../icon';
-import '../stop-events';
-import { Context, defineCustomElement, getAttribute, getBooleanAttribute, getCssVar, getLiteralAttribute, getReactEventHandler, getRect, isAttrTrue, NectaryElement, setClass, subscribeContext, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute } from '../utils';
+import { Context, defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, setClass, subscribeContext, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute } from '../utils';
 import { assertSize, DEFAULT_SIZE, sizeValues } from '../utils/size';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}:host([data-size="l"]){--sinch-size:var(--sinch-size-l);--sinch-size-icon:var(--sinch-input-icon-size-l);--sinch-shape-radius:var(--sinch-shape-radius-l)}:host([data-size="m"]){--sinch-size:var(--sinch-size-m);--sinch-size-icon:var(--sinch-input-icon-size-m);--sinch-shape-radius:var(--sinch-shape-radius-m)}:host([data-size="s"]){--sinch-size:var(--sinch-size-s);--sinch-size-icon:var(--sinch-input-icon-size-s);--sinch-shape-radius:var(--sinch-shape-radius-s)}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;border-radius:var(--sinch-shape-radius);width:100%;height:var(--sinch-size);background-color:var(--sinch-color-bg-primary-light)}#input{all:initial;flex:1;min-width:0;height:100%;padding:0 12px 0 40px;font:var(--sinch-font-text-m);color:var(--sinch-color-text-default)}#input::placeholder{font:var(--sinch-font-text-m);color:var(--sinch-color-text-muted);opacity:1}#border{position:absolute;border:1px solid var(--sinch-color-border-dark);border-radius:var(--sinch-shape-radius);inset:0;pointer-events:none}#input:disabled{color:var(--sinch-color-text-disabled);-webkit-text-fill-color:var(--sinch-color-text-disabled)}:host([data-size="s"]) #input{padding-left:32px}:host([invalid]:not([invalid=false]):not([disabled])) #border{border-color:var(--sinch-color-text-invalid)}#input:disabled::placeholder{color:var(--sinch-color-text-disabled)}#input:disabled+#border{border-color:var(--sinch-color-border-disabled)}#input:focus+#border{border-color:var(--sinch-color-border-focus);border-width:2px}#input[type=password]{font-size:1.5em;letter-spacing:.1em}#icon-wrapper{position:relative;height:100%}#icon{position:absolute;display:flex;align-items:center;left:10px;top:0;bottom:0;pointer-events:none;--sinch-color-icon:var(--sinch-color-stormy-500)}:host([disabled]:not([disabled=false])) #icon{--sinch-color-icon:var(--sinch-color-text-disabled)}#icon-wrapper.empty{display:none}#icon-wrapper.empty~#input{padding-left:12px}#clear-wrapper{margin-left:-10px;margin-right:4px}#clear{display:none;--sinch-icon-button-color-icon:var(--sinch-color-stormy-500)}:host([value]:not([value=""])) #clear[data-focus],:host([value]:not([value=""])) #clear[data-tooltip]{display:block}#right{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;padding-right:4px}#right.empty{display:none}#left{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;padding-left:4px}#left.empty{display:none}</style><div id="wrapper"><div id="left"><slot name="left"></slot></div><div id="icon-wrapper"><div id="icon"><slot name="icon"></slot></div></div><input id="input" type="text"/><div id="border"></div><div id="clear-wrapper"><sinch-stop-events events="keydown"><sinch-icon-button id="clear" aria-label="Clear input value"><sinch-icon id="icon-clear" slot="icon"></sinch-icon></sinch-icon-button></sinch-stop-events></div><div id="right"><slot name="right"></slot></div></div>';
+const templateHTML = '<style>:host{all:initial;display:inline-block;vertical-align:middle}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;border-radius:var(--sinch-local-shape-radius);width:100%;height:var(--sinch-local-size);background-color:var(--sinch-comp-input-color-default-background-initial);--sinch-local-size:var(--sinch-comp-input-size-container-m);--sinch-global-size-icon:var(--sinch-comp-input-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-input-shape-radius-size-m)}:host([data-size="l"])>#wrapper{--sinch-local-size:var(--sinch-comp-input-size-container-l);--sinch-global-size-icon:var(--sinch-comp-input-size-icon-l);--sinch-local-shape-radius:var(--sinch-comp-input-shape-radius-size-l)}:host([data-size="m"])>#wrapper{--sinch-local-size:var(--sinch-comp-input-size-container-m);--sinch-global-size-icon:var(--sinch-comp-input-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-input-shape-radius-size-m)}:host([data-size="s"])>#wrapper{--sinch-local-size:var(--sinch-comp-input-size-container-s);--sinch-global-size-icon:var(--sinch-comp-input-size-icon-s);--sinch-local-shape-radius:var(--sinch-comp-input-shape-radius-size-s)}#input{all:initial;flex:1;flex-basis:0;min-width:0;height:100%;padding:0 12px;font:var(--sinch-comp-input-font-input);color:var(--sinch-comp-input-color-default-text-initial)}#input::placeholder{font:var(--sinch-comp-input-font-placeholder);color:var(--sinch-comp-input-color-default-text-placeholder);opacity:1}#border{position:absolute;border:1px solid var(--sinch-comp-input-color-default-border-initial);border-radius:var(--sinch-local-shape-radius);inset:0;pointer-events:none}#input:disabled{color:var(--sinch-comp-input-color-disabled-text-initial);-webkit-text-fill-color:var(--sinch-comp-input-color-disabled-text-initial)}#input:disabled+#border{border-color:var(--sinch-comp-input-color-disabled-border-initial)}#input:focus+#border{border-color:var(--sinch-comp-input-color-default-border-focus);border-width:2px}:host([invalid]:not(:focus-within)) #input:enabled+#border{border-color:var(--sinch-comp-input-color-invalid-border-initial)}#input[type=password]{font-size:1.5em;letter-spacing:.1em}#icon-wrapper{position:relative;height:100%}#icon{position:absolute;display:flex;align-items:center;left:12px;top:0;bottom:0;pointer-events:none;--sinch-global-color-icon:var(--sinch-comp-input-color-default-icon-initial)}:host([disabled]) #icon{--sinch-global-color-icon:var(--sinch-comp-input-color-disabled-icon-initial)}#icon-wrapper.empty{display:none}#icon-wrapper.empty~#input{padding-left:12px}#icon-wrapper:not(.empty)~#input{padding-left:calc(var(--sinch-global-size-icon) + 20px)}#right{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;padding-right:4px}#right.empty{display:none}#left{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;padding-left:4px}#left.empty{display:none}</style><div id="wrapper"><div id="left"><slot name="left"></slot></div><div id="icon-wrapper"><div id="icon"><slot name="icon"></slot></div></div><input id="input" type="text"/><div id="border"></div><div id="right"><slot name="right"></slot></div></div>';
 import { assertType, inputTypes } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-input', class extends NectaryElement {
   #$input;
-  #$clear;
-  #$iconClear;
   #$iconSlot;
   #$iconWrapper;
   #$rightSlot;
@@ -35,8 +30,6 @@ defineCustomElement('sinch-input', class extends NectaryElement {
     this.#$rightWrapper = shadowRoot.querySelector('#right');
     this.#$leftSlot = shadowRoot.querySelector('slot[name="left"]');
     this.#$leftWrapper = shadowRoot.querySelector('#left');
-    this.#$clear = shadowRoot.querySelector('#clear');
-    this.#$iconClear = shadowRoot.querySelector('#icon-clear');
     this.#$wrapper = shadowRoot.querySelector('#wrapper');
     this.#sizeContext = new Context(this.#$wrapper, 'size');
   }
@@ -53,17 +46,12 @@ defineCustomElement('sinch-input', class extends NectaryElement {
     this.#$input.addEventListener('keydown', this.#onSelectionChange, options);
     this.#$input.addEventListener('focus', this.#onInputFocus, options);
     this.#$input.addEventListener('blur', this.#onInputBlur, options);
-    this.#$clear.addEventListener('click', this.#onClearButtonClick, options);
-    this.#$clear.addEventListener('blur', this.#onClearButtonBlur, options);
-    this.#$clear.addEventListener('-tooltip-show', this.#onClearButtonTooltipShow, options);
-    this.#$clear.addEventListener('-tooltip-hide', this.#onClearButtonTooltipHide, options);
     this.#$iconSlot.addEventListener('slotchange', this.#onIconSlotChange, options);
     this.#$leftSlot.addEventListener('slotchange', this.#onLeftSlotChange, options);
     this.#$rightSlot.addEventListener('slotchange', this.#onRightSlotChange, options);
     this.addEventListener('-change', this.#onChangeReactHandler, options);
     this.addEventListener('-focus', this.#onFocusReactHandler, options);
     this.addEventListener('-blur', this.#onBlurReactHandler, options);
-    updateAttribute(this.#$iconClear, 'name', getCssVar(this, '--sinch-input-icon-clear'));
     this.#sizeContext.listen(this.#controller.signal);
     subscribeContext(this, 'size', this.#onContextSize, this.#controller.signal);
     this.#onIconSlotChange();
@@ -78,7 +66,10 @@ defineCustomElement('sinch-input', class extends NectaryElement {
   static get observedAttributes() {
     return ['type', 'value', 'placeholder', 'invalid', 'disabled', 'size', 'autocomplete', 'data-size'];
   }
-  attributeChangedCallback(name, _, newVal) {
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
     switch (name) {
       case 'type':
         {
@@ -112,14 +103,16 @@ defineCustomElement('sinch-input', class extends NectaryElement {
         }
       case 'invalid':
         {
-          updateExplicitBooleanAttribute(this, 'aria-invalid', isAttrTrue(newVal));
+          const isInvalid = isAttrTrue(newVal);
+          updateExplicitBooleanAttribute(this, 'aria-invalid', isInvalid);
+          updateBooleanAttribute(this, name, isInvalid);
           break;
         }
       case 'disabled':
         {
           const isDisabled = isAttrTrue(newVal);
           this.#$input.disabled = isDisabled;
-          updateBooleanAttribute(this, 'disabled', isDisabled);
+          updateBooleanAttribute(this, name, isDisabled);
           break;
         }
       case 'size':
@@ -137,13 +130,10 @@ defineCustomElement('sinch-input', class extends NectaryElement {
         }
       case 'autocomplete':
         {
-          updateAttribute(this.#$input, 'autocomplete', newVal);
+          updateAttribute(this.#$input, name, newVal);
         }
     }
   }
-  get nodeName() {
-    return 'input';
-  }
   set type(value) {
     updateAttribute(this, 'type', value);
   }
@@ -204,9 +194,6 @@ defineCustomElement('sinch-input', class extends NectaryElement {
   set selectionDirection(value) {
     this.#$input.selectionDirection = value;
   }
-  get clearButtonRect() {
-    return getRect(this.#$clear);
-  }
   get focusable() {
     return true;
   }
@@ -279,14 +266,10 @@ defineCustomElement('sinch-input', class extends NectaryElement {
     setClass(this.#$rightWrapper, 'empty', isEmpty);
   };
   #onInputFocus = () => {
-    this.#$clear.setAttribute('data-focus', '');
     this.dispatchEvent(new CustomEvent('-focus'));
   };
-  #onInputBlur = e => {
+  #onInputBlur = () => {
     this.dispatchEvent(new CustomEvent('-blur'));
-    if (e.relatedTarget !== this.#$clear) {
-      this.#$clear.removeAttribute('data-focus');
-    }
   };
   #onSizeUpdate() {
     if (!this.isConnected) {
@@ -295,23 +278,6 @@ defineCustomElement('sinch-input', class extends NectaryElement {
     const size = this.getAttribute('data-size') ?? DEFAULT_SIZE;
     this.#sizeContext.dispatch(size);
   }
-  #onClearButtonClick = () => {
-    this.#$input.value = '';
-    this.#$input.focus();
-    this.#handleInput();
-  };
-  #onClearButtonBlur = e => {
-    if (e.relatedTarget !== this.#$input) {
-      this.#$clear.removeAttribute('data-focus');
-    }
-  };
-  #onClearButtonTooltipShow = () => {
-    this.#$clear.setAttribute('data-tooltip', '');
-  };
-  #onClearButtonTooltipHide = () => {
-    this.#$input.focus();
-    this.#$clear.removeAttribute('data-tooltip');
-  };
   #onChangeReactHandler = e => {
     getReactEventHandler(this, 'on-change')?.(e);
   };

package/input/types.d.ts

@@ -1,6 +1,5 @@
-import type { TRect, TSinchElementReact } from '../types';
+import type { TSinchElementReact } from '../types';
 import type { TSinchSize } from '../utils/size';
-import type { SyntheticEvent } from 'react';
 export type TSinchInputType = 'text' | 'password';
 export type TSinchInputElement = HTMLElement & {
     /** Text field type, `text` by default */
@@ -20,7 +19,6 @@ export type TSinchInputElement = HTMLElement & {
     selectionStart: number | null;
     selectionEnd: number | null;
     selectionDirection: 'forward' | 'backward' | 'none' | null;
-    readonly clearButtonRect: TRect;
     /** Change value event */
     addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
     /** Focus event */
@@ -59,8 +57,6 @@ export type TSinchInputReact = TSinchElementReact<TSinchInputElement> & {
     disabled?: boolean;
     /** Size, `m` by default */
     size?: TSinchSize;
-    /** @deprecated Change value handler */
-    onChange?: (e: SyntheticEvent<TSinchInputElement, CustomEvent<string>>) => void;
     /** Change value handler */
     'on-change'?: (e: CustomEvent<string>) => void;
     /** Focus handler */