@nectary/components 1.4.0 → 2.1.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 { assertType, typeValues } from './utils';
+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 { 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();
@@ -41,21 +38,13 @@ defineCustomElement('sinch-file-status', class extends NectaryElement {
     updateAttribute(this, 'filename', value);
   }
   static get observedAttributes() {
-    return ['filename', 'type'];
+    return ['filename'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
       return;
     }
     switch (name) {
-      case 'type':
-        {
-          if ('production' !== 'production') {
-            assertType(newVal);
-          }
-          this.#updateIcon();
-          break;
-        }
       case 'filename':
         {
           this.#$filename.textContent = newVal;
@@ -63,16 +52,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/file-status/utils.d.ts

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

package/file-status/utils.js

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

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.d.ts

@@ -1,5 +1,4 @@
 import '../tooltip';
-import '../icon';
 import type { TSinchHelpTooltipElement, TSinchHelpTooltipReact } from './types';
 declare global {
     namespace JSX {

package/help-tooltip/index.js

@@ -1,11 +1,9 @@
 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 type="fast"><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{height:18px;fill:var(--sinch-comp-help-tooltip-color-icon)}</style><sinch-tooltip type="fast"><svg id="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Zm-1-4h2v2h-2v-2Zm1.61-9.96c-2.06-.3-3.88.97-4.43 2.79-.18.58.26 1.17.87 1.17h.2c.41 0 .74-.29.88-.67.32-.89 1.27-1.5 2.3-1.28.95.2 1.65 1.13 1.57 2.1-.1 1.34-1.62 1.63-2.45 2.88 0 .01-.01.01-.01.02-.01.02-.02.03-.03.05-.09.15-.18.32-.25.5-.01.03-.03.05-.04.08-.01.02-.01.04-.02.07-.12.34-.2.75-.2 1.25h2c0-.42.11-.77.28-1.07.02-.03.03-.06.05-.09.08-.14.18-.27.28-.39.01-.01.02-.03.03-.04.1-.12.21-.23.33-.34.96-.91 2.26-1.65 1.99-3.56-.24-1.74-1.61-3.21-3.35-3.47Z"/></svg></sinch-tooltip>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-help-tooltip', class extends NectaryElement {
-  #$icon;
   #$tooltip;
   #controller = null;
   constructor() {
@@ -13,7 +11,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 +22,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 +45,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);-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,8 +1,8 @@
 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>';
-import { assertType, typeValues } from './utils';
+import { DEFAULT_SIZE, sizeExValues } from '../utils/size';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#button{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)}:host([disabled]) #button{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][disabled]) #button{--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][disabled]) #button{--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)}:host([disabled]) #button,:host([type=tertiary][disabled]) #button{--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]:focus) #button{--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-primary-focus)}:host([type=secondary]:focus) #button{--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-secondary-focus)}:host(:focus),:host([type=tertiary]:focus) #button{--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-tertiary-focus)}:host([type=primary]:not([disabled]):hover) #button{--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]:not([disabled]):hover) #button{--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)}:host(:not([disabled]):hover) #button,:host([type=tertiary]:not([disabled]):active) #button{--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]:not([disabled]):active) #button{--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]:not([disabled]):active) #button{--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)}:host(:not([disabled]):active) #button,:host([type=tertiary]:not([disabled]):active) #button{--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}:host(:focus-visible) #button::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:100%;height:100%}</style><sinch-tooltip id="tooltip"><div id="button"><div id="content" inert><slot name="icon"></slot></div></div></sinch-tooltip>';
+import { typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-icon-button', class extends NectaryElement {
@@ -13,7 +13,7 @@ defineCustomElement('sinch-icon-button', class extends NectaryElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow({
-      delegatesFocus: true
+      delegatesFocus: false
     });
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$button = shadowRoot.querySelector('#button');
@@ -26,10 +26,12 @@ defineCustomElement('sinch-icon-button', class extends NectaryElement {
     const options = {
       signal: this.#controller.signal
     };
-    this.setAttribute('role', 'button');
-    this.#$button.addEventListener('click', this.#onButtonClick, options);
-    this.#$button.addEventListener('focus', this.#onButtonFocus, options);
-    this.#$button.addEventListener('blur', this.#onButtonBlur, options);
+    this.role = 'button';
+    this.tabIndex = 0;
+    this.addEventListener('click', this.#onButtonClick, options);
+    this.addEventListener('focus', this.#onButtonFocus, options);
+    this.addEventListener('blur', this.#onButtonBlur, options);
+    this.addEventListener('keydown', this.#onButtonKeydown, options);
     this.addEventListener('-click', this.#onClickReactHandler, options);
     this.addEventListener('-focus', this.#onFocusReactHandler, options);
     this.addEventListener('-blur', this.#onBlurReactHandler, options);
@@ -46,7 +48,7 @@ defineCustomElement('sinch-icon-button', class extends NectaryElement {
     this.#controller.abort();
   }
   static get observedAttributes() {
-    return ['type', 'size', 'disabled', 'aria-label', 'data-size'];
+    return ['size', 'disabled', 'aria-label', 'data-size'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
@@ -56,7 +58,6 @@ defineCustomElement('sinch-icon-button', class extends NectaryElement {
       case 'disabled':
         {
           const isDisabled = isAttrTrue(newVal);
-          this.#$button.disabled = isDisabled;
           updateBooleanAttribute(this, 'disabled', isDisabled);
           break;
         }
@@ -65,13 +66,6 @@ defineCustomElement('sinch-icon-button', class extends NectaryElement {
           updateAttribute(this.#$tooltip, 'text', newVal);
           break;
         }
-      case 'type':
-        {
-          if ('production' !== 'production') {
-            assertType(newVal);
-          }
-          break;
-        }
       case 'size':
         {
           updateAttribute(this, 'data-size', newVal);
@@ -79,9 +73,6 @@ defineCustomElement('sinch-icon-button', class extends NectaryElement {
         }
       case 'data-size':
         {
-          if ('production' !== 'production') {
-            assertSizeEx(newVal, 'sinch-icon-button');
-          }
           this.#onSizeUpdate();
           break;
         }
@@ -111,12 +102,6 @@ defineCustomElement('sinch-icon-button', class extends NectaryElement {
   get focusable() {
     return true;
   }
-  focus() {
-    this.#$button.focus();
-  }
-  blur() {
-    this.#$button.blur();
-  }
   #onSizeUpdate() {
     if (!this.isConnected) {
       return;
@@ -146,7 +131,9 @@ defineCustomElement('sinch-icon-button', class extends NectaryElement {
     }
   };
   #onButtonClick = () => {
-    this.dispatchEvent(new CustomEvent('-click'));
+    if (!this.disabled) {
+      this.dispatchEvent(new CustomEvent('-click'));
+    }
   };
   #onButtonFocus = () => {
     this.dispatchEvent(new CustomEvent('-focus'));
@@ -154,6 +141,15 @@ defineCustomElement('sinch-icon-button', class extends NectaryElement {
   #onButtonBlur = () => {
     this.dispatchEvent(new CustomEvent('-blur'));
   };
+  #onButtonKeydown = e => {
+    switch (e.code) {
+      case 'Space':
+      case 'Enter':
+        {
+          this.click();
+        }
+    }
+  };
   #onTooltipShow = () => {
     this.dispatchEvent(new CustomEvent('-tooltip-show'));
   };

package/icon-button/utils.d.ts

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

package/icon-button/utils.js

@@ -1,9 +1 @@
-export const typeValues = ['primary', 'secondary', 'tertiary'];
-export const assertType = value => {
-  if (value === null || value.length === 0) {
-    return;
-  }
-  if (!typeValues.includes(value)) {
-    throw new Error(`sinch-icon-button: invalid type attribute: ${value}`);
-  }
-};
+export const typeValues = ['primary', 'secondary', 'tertiary'];

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 { assertType, typeValues } from './utils';
+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 { 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,13 +33,29 @@ 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);
   }
+  static get observedAttributes() {
+    return ['text', 'caption'];
+  }
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'text':
+        {
+          updateAttribute(this.#$text, 'text', newVal);
+          break;
+        }
+      case 'caption':
+        {
+          updateAttribute(this.#$caption, 'text', newVal);
+          break;
+        }
+    }
+  }
   get type() {
     return getLiteralAttribute(this, typeValues, 'type');
   }
@@ -60,37 +74,6 @@ defineCustomElement('sinch-inline-alert', class extends NectaryElement {
   set caption(value) {
     updateAttribute(this, 'caption', value);
   }
-  static get observedAttributes() {
-    return ['text', 'caption', 'type'];
-  }
-  attributeChangedCallback(name, _, newVal) {
-    switch (name) {
-      case 'type':
-        {
-          if ('production' !== 'production') {
-            assertType(newVal);
-          }
-          this.#updateIcon();
-          break;
-        }
-      case 'text':
-        {
-          updateAttribute(this.#$text, 'text', newVal);
-          break;
-        }
-      case 'caption':
-        {
-          updateAttribute(this.#$caption, 'text', newVal);
-          break;
-        }
-    }
-  }
-  #updateIcon() {
-    if (!this.isConnected) {
-      return;
-    }
-    updateAttribute(this.#$icon, 'name', getCssVar(this, `--sinch-inline-alert-icon-${this.type}`));
-  }
   #onCloseSlotChange = () => {
     setClass(this.#$closeWrapper, 'empty', this.#$closeSlot.assignedElements().length === 0);
   };

package/inline-alert/utils.d.ts

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

package/inline-alert/utils.js

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

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 {