@nectary/components 0.49.0 → 1.0.1

package/file-status/index.d.ts

@@ -1,8 +1,5 @@
 import '../spinner';
-import '../icons/check-circle';
-import '../icons/report';
-import '../icons/pending-actions';
-import '../icons/text-snippet';
+import '../icon';
 import '../text';
 import type { TSinchFileStatusElement, TSinchFileStatusReact } from './types';
 declare global {

package/file-status/index.js

@@ -1,29 +1,31 @@
 import '../spinner';
-import '../icons/check-circle';
-import '../icons/report';
-import '../icons/pending-actions';
-import '../icons/text-snippet';
+import '../icon';
 import '../text';
-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;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-error,#icon-loading,#icon-pending,#icon-progress,#icon-success{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-error,:host([type=loading]) #icon-loading,:host([type=pending]) #icon-pending,:host([type=progress]) #icon-progress,:host([type=success]) #icon-success{display:block}:host([type=success]) #icon-success{--sinch-color-icon:var(--sinch-color-feedback-success-icon)}:host([type=error]) #icon-error{--sinch-color-icon:var(--sinch-color-feedback-invalid-icon)}</style><div id="wrapper"><sinch-spinner id="icon-loading" size="m"></sinch-spinner><sinch-icon-check-circle id="icon-success"></sinch-icon-check-circle><sinch-icon-report id="icon-error"></sinch-icon-report><sinch-icon-pending-actions id="icon-pending"></sinch-icon-pending-actions><sinch-icon-text-snippet id="icon-progress"></sinch-icon-text-snippet><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, 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';
 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();
     this.#$contentSlot.removeEventListener('slotchange', this.#onContentSlotChange);
   }
   get type() {
@@ -51,6 +53,7 @@ defineCustomElement('sinch-file-status', class extends NectaryElement {
           if ('production' !== 'production') {
             assertType(newVal);
           }
+          this.#updateIcon();
           break;
         }
       case 'filename':
@@ -60,6 +63,16 @@ 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/help-tooltip/index.d.ts

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

package/help-tooltip/index.js

@@ -1,10 +1,11 @@
 import '../tooltip';
-import '../icons/help-outline';
-import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute, updateIntegerAttribute } from '../utils';
-const templateHTML = '<style>:host{display:contents}#icon{--sinch-size-icon:18px}</style><sinch-tooltip><sinch-icon-help-outline id="icon"></sinch-icon-help-outline></sinch-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>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-help-tooltip', class extends NectaryElement {
+  #$icon;
   #$tooltip;
   #controller = null;
   constructor() {
@@ -12,6 +13,7 @@ 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();
@@ -23,6 +25,7 @@ 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();

package/horizontal-stepper/index.d.ts

@@ -1,5 +1,3 @@
-import '../icons/check';
-import '../icons/error-outline';
 import type { TSinchHorizontalStepperElement, TSinchHorizontalStepperReact } from './types';
 declare global {
     namespace JSX {

package/horizontal-stepper/index.js

@@ -1,5 +1,3 @@
-import '../icons/check';
-import '../icons/error-outline';
 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 template = document.createElement('template');

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

@@ -1,5 +1,4 @@
-import '../icons/check';
-import '../icons/exclamation';
+import '../icon';
 import type { TSinchHorizontalStepperItemElement, TSinchHorizontalStepperItemReact } from './types';
 declare global {
     namespace JSX {

package/horizontal-stepper-item/index.js

@@ -1,7 +1,6 @@
-import '../icons/check';
-import '../icons/exclamation';
-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-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-check id="icon-success"></sinch-icon-check><sinch-icon-exclamation id="icon-error"></sinch-icon-exclamation><span id="circle-text"></span></div><span id="label"></span><span id="description"></span></div>';
+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 { statusValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -9,6 +8,8 @@ defineCustomElement('sinch-horizontal-stepper-item', class extends NectaryElemen
   #$label;
   #$description;
   #$circleText;
+  #$iconSuccess;
+  #$iconError;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -16,9 +17,14 @@ 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);
   }
-  connectedCallback() {}
-  disconnectedCallback() {}
   static get observedAttributes() {
     return ['label', 'description', 'data-index'];
   }

package/icon/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getAttribute, NectaryElement, updateAttribute } from '../utils';
-const templateHTML = '<style>:host{display:contents}#icon{display:inline-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:"FILL" 1;-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-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 template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-icon', class extends NectaryElement {

package/inline-alert/index.d.ts

@@ -1,7 +1,4 @@
-import '../icons/check-circle';
-import '../icons/info';
-import '../icons/report-problem';
-import '../icons/report';
+import '../icon';
 import '../rich-text';
 import '../text';
 import '../title';

package/inline-alert/index.js

@@ -1,16 +1,14 @@
-import '../icons/check-circle';
-import '../icons/info';
-import '../icons/report-problem';
-import '../icons/report';
+import '../icon';
 import '../rich-text';
 import '../text';
 import '../title';
-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-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}#icon-error,#icon-info,#icon-success,#icon-warn{display:none}: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-success{display:block;--sinch-color-icon:var(--sinch-color-feedback-success-icon)}:host([type=warn]) #icon-warn{display:block;--sinch-color-icon:var(--sinch-color-feedback-warning-icon)}:host([type=error]) #icon-error{display:block;--sinch-color-icon:var(--sinch-color-feedback-invalid-icon)}:host([type=info]) #icon-info{display:block;--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-info id="icon-info"></sinch-icon-info><sinch-icon-check-circle id="icon-success"></sinch-icon-check-circle><sinch-icon-report-problem id="icon-warn"></sinch-icon-report-problem><sinch-icon-report id="icon-error"></sinch-icon-report><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, 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';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-inline-alert', class extends NectaryElement {
+  #$icon;
   #$text;
   #$caption;
   #$closeWrapper;
@@ -21,6 +19,7 @@ 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');
@@ -29,14 +28,17 @@ defineCustomElement('sinch-inline-alert', class extends NectaryElement {
     this.#$actionSlot = shadowRoot.querySelector('slot[name="action"]');
   }
   connectedCallback() {
+    super.connectedCallback();
     this.setAttribute('aria-atomic', 'true');
     this.setAttribute('aria-live', 'polite');
     this.#$closeSlot.addEventListener('slotchange', this.#onCloseSlotChange);
     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);
   }
@@ -68,6 +70,7 @@ defineCustomElement('sinch-inline-alert', class extends NectaryElement {
           if ('production' !== 'production') {
             assertType(newVal);
           }
+          this.#updateIcon();
           break;
         }
       case 'text':
@@ -82,6 +85,12 @@ defineCustomElement('sinch-inline-alert', class extends NectaryElement {
         }
     }
   }
+  #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/input/index.d.ts

@@ -1,5 +1,5 @@
 import '../icon-button';
-import '../icons/close';
+import '../icon';
 import '../stop-events';
 import type { TSinchInputElement, TSinchInputReact } from './types';
 declare global {

package/input/index.js

@@ -1,15 +1,16 @@
 import '../icon-button';
-import '../icons/close';
+import '../icon';
 import '../stop-events';
-import { Context, defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, getRect, isAttrTrue, NectaryElement, setClass, subscribeContext, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute } from '../utils';
+import { Context, defineCustomElement, getAttribute, getBooleanAttribute, getCssVar, getLiteralAttribute, getReactEventHandler, getRect, 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-close slot="icon"></sinch-icon-close></sinch-icon-button></sinch-stop-events></div><div id="right"><slot name="right"></slot></div></div>';
+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>';
 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,6 +36,7 @@ defineCustomElement('sinch-input', class extends NectaryElement {
     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');
   }
@@ -61,6 +63,7 @@ defineCustomElement('sinch-input', class extends NectaryElement {
     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();

package/link/index.d.ts

@@ -1,5 +1,4 @@
-import '../icons/open-in-new';
-import '../icons/arrow-forward';
+import '../icon';
 import type { TSinchLinkElement, TSinchLinkReact } from './types';
 declare global {
     namespace JSX {

package/link/index.js

@@ -1,18 +1,21 @@
-import '../icons/open-in-new';
-import '../icons/arrow-forward';
-import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, isAttrTrue, getReactEventHandler } from '../utils';
-const templateHTML = '<style>:host{display:inline}a{font:var(--sinch-font-text-m);font-size:inherit;line-height:inherit;color:var(--sinch-color-tropical-500);border-radius:.5em;white-space:nowrap;--sinch-size-icon:1em;--sinch-color-icon:var(--sinch-color-tropical-500)}a:hover{color:var(--sinch-color-tropical-600);--sinch-color-icon:var(--sinch-color-tropical-600)}a:focus-visible{outline:2px solid var(--sinch-color-border-focus);outline-offset:2px}#external-icon{display:none;margin-right:.2em;vertical-align:-.2em}#standalone-icon,#standalone-icon-prefix{display:none}:host([external]:not([external=false])) #external-icon{display:inline-block}:host([standalone]:not([standalone=false])){display:block}:host([standalone]:not([standalone=false])) a{display:block;font:var(--sinch-font-text-m);font-weight:var(--sinch-font-weight-emphasized);text-decoration:none;border-radius:var(--sinch-shape-radius-m);width:fit-content;--sinch-size-icon:24px}:host([standalone]:not([standalone=false])) #external-icon{margin-right:8px;vertical-align:-7px}:host([standalone]:not([standalone=false])) #standalone-icon-prefix{display:inline}:host([standalone]:not([standalone=false]):is([external=false],:not([external]))) #standalone-icon{display:inline-block;vertical-align:-7px}:host([disabled]:not([disabled=false])) a{color:var(--sinch-color-tropical-200);pointer-events:none;cursor:initial;--sinch-color-icon:var(--sinch-color-tropical-200)}#content{white-space:var(--sinch-text-white-space,normal)}</style><a referrerpolicy="no-referer" aria-hidden="true"><sinch-icon-open-in-new id="external-icon"></sinch-icon-open-in-new><span id="content"></span><span id="standalone-icon-prefix">&nbsp;</span><sinch-icon-arrow-forward id="standalone-icon"></sinch-icon-arrow-forward></a>';
+import '../icon';
+import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, isAttrTrue, getReactEventHandler, getCssVars } from '../utils';
+const templateHTML = '<style>:host{display:inline}a{font:var(--sinch-font-text-m);font-size:inherit;line-height:inherit;color:var(--sinch-color-tropical-500);border-radius:.5em;white-space:nowrap;--sinch-size-icon:1em;--sinch-color-icon:var(--sinch-color-tropical-500)}a:hover{color:var(--sinch-color-tropical-600);--sinch-color-icon:var(--sinch-color-tropical-600)}a:focus-visible{outline:2px solid var(--sinch-color-border-focus);outline-offset:2px}#external-icon{display:none;margin-right:.2em;vertical-align:-.2em}#standalone-icon,#standalone-icon-prefix{display:none}:host([external]:not([external=false])) #external-icon{display:inline-block}:host([standalone]:not([standalone=false])){display:block}:host([standalone]:not([standalone=false])) a{display:block;font:var(--sinch-font-text-m);font-weight:var(--sinch-font-weight-emphasized);text-decoration:none;border-radius:var(--sinch-shape-radius-m);width:fit-content;--sinch-size-icon:24px}:host([standalone]:not([standalone=false])) #external-icon{margin-right:8px;vertical-align:-7px}:host([standalone]:not([standalone=false])) #standalone-icon-prefix{display:inline}:host([standalone]:not([standalone=false]):is([external=false],:not([external]))) #standalone-icon{display:inline-block;vertical-align:-7px}:host([disabled]:not([disabled=false])) a{color:var(--sinch-color-tropical-200);pointer-events:none;cursor:initial;--sinch-color-icon:var(--sinch-color-tropical-200)}#content{white-space:var(--sinch-text-white-space,normal)}</style><a referrerpolicy="no-referer" aria-hidden="true"><sinch-icon id="external-icon"></sinch-icon><span id="content"></span><span id="standalone-icon-prefix">&nbsp;</span><sinch-icon id="standalone-icon"></sinch-icon></a>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-link', class extends NectaryElement {
   #$anchor;
   #$text;
+  #$iconStandalone;
+  #$iconExternal;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$anchor = shadowRoot.querySelector('a');
     this.#$text = shadowRoot.querySelector('#content');
+    this.#$iconExternal = shadowRoot.querySelector('#external-icon');
+    this.#$iconStandalone = shadowRoot.querySelector('#standalone-icon');
   }
   connectedCallback() {
     this.setAttribute('role', 'link');
@@ -22,6 +25,7 @@ defineCustomElement('sinch-link', class extends NectaryElement {
     this.addEventListener('-click', this.#onClickReactHandler);
     this.addEventListener('-focus', this.#onFocusReactHandler);
     this.addEventListener('-blur', this.#onBlurReactHandler);
+    this.#updateIcons();
   }
   disconnectedCallback() {
     this.#$anchor.removeEventListener('click', this.#onAnchorClick);
@@ -101,6 +105,11 @@ defineCustomElement('sinch-link', class extends NectaryElement {
   blur() {
     this.#$anchor.blur();
   }
+  #updateIcons() {
+    const [externalName, standaloneName] = getCssVars(this, ['--sinch-link-icon-external', '--sinch-link-icon-standalone']);
+    updateAttribute(this.#$iconExternal, 'name', externalName);
+    updateAttribute(this.#$iconStandalone, 'name', standaloneName);
+  }
   #onAnchorClick = e => {
     if (this.preventDefault) {
       e.preventDefault();

package/list-item/index.d.ts

@@ -1,4 +1,3 @@
-import '../icons/keyboard-arrow-down';
 import type { TSinchListItemElement, TSinchListItemReact } from './types';
 declare global {
     namespace JSX {

package/list-item/index.js

@@ -1,4 +1,3 @@
-import '../icons/keyboard-arrow-down';
 import { defineCustomElement, NectaryElement } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0}#wrapper{width:100%;height:100%;box-sizing:border-box;overflow:hidden;padding:8px 0;border-bottom:1px solid var(--sinch-color-snow-500)}:host(:last-child)>#wrapper{border-bottom:none}:host(:hover)>#wrapper{background-color:var(--sinch-color-snow-400)}</style><div id="wrapper"><slot name="content"></slot></div>';
 const template = document.createElement('template');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "0.49.0",
+  "version": "1.0.1",
   "files": [
     "**/*/*.css",
     "**/*/*.json",
@@ -26,6 +26,6 @@
     "@types/react": "^18.0.27",
     "babel-plugin-html-inline-minifier": "workspace:^0.0.0",
     "babel-plugin-transform-inline-environment-variables": "^0.4.4",
-    "typescript": "^4.9.4"
+    "typescript": "^4.9.5"
   }
 }

package/pagination/index.d.ts

@@ -1,5 +1,4 @@
-import '../icons/keyboard-arrow-left';
-import '../icons/keyboard-arrow-right';
+import '../icon';
 import type { TSinchPaginationElement, TSinchPaginationReact } from './types';
 declare global {
     namespace JSX {

package/pagination/index.js

@@ -1,7 +1,6 @@
-import '../icons/keyboard-arrow-left';
-import '../icons/keyboard-arrow-right';
-import { defineCustomElement, updateAttribute, getIntegerAttribute, setClass, NectaryElement, getRect, getReactEventHandler } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;justify-content:center;gap:8px;width:100%;box-sizing:border-box}button{all:initial;width:28px;height:28px;box-sizing:border-box;cursor:pointer;text-align:center;contain:strict;--sinch-color-icon:var(--sinch-color-stormy-500)}button:disabled{--sinch-color-icon:var(--sinch-color-stormy-100);cursor:initial}button>*{pointer-events:none}.page{border-radius:50%;font:var(--sinch-font-text-m);color:var(--sinch-color-stormy-500)}.page.dots>span{display:none}.page.dots::after{content:"..."}.page.active{font-weight:var(--sinch-font-weight-emphasized);background-color:var(--sinch-color-snow-600);pointer-events:none;cursor:initial}.page.hidden{display:none}#left,#right{display:flex;padding:2px;--sinch-icon-size:24px}</style><div id="wrapper"><button id="left"><sinch-icon-keyboard-arrow-left></sinch-icon-keyboard-arrow-left></button><button class="page"><span>1</span></button><button class="page active"><span>2</span></button><button class="page"><span>3</span></button><button class="page"><span>4</span></button><button class="page"><span>5</span></button><button class="page dots"><span>6</span></button><button class="page"><span>20</span></button><button id="right"><sinch-icon-keyboard-arrow-right></sinch-icon-keyboard-arrow-right></button></div>';
+import '../icon';
+import { defineCustomElement, updateAttribute, getIntegerAttribute, setClass, NectaryElement, getRect, getReactEventHandler, getCssVars } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;justify-content:center;gap:8px;width:100%;box-sizing:border-box}button{all:initial;width:28px;height:28px;box-sizing:border-box;cursor:pointer;text-align:center;contain:strict;--sinch-color-icon:var(--sinch-color-stormy-500)}button:disabled{--sinch-color-icon:var(--sinch-color-stormy-100);cursor:initial}button>*{pointer-events:none}.page{border-radius:50%;font:var(--sinch-font-text-m);color:var(--sinch-color-stormy-500)}.page.dots>span{display:none}.page.dots::after{content:"..."}.page.active{font-weight:var(--sinch-font-weight-emphasized);background-color:var(--sinch-color-snow-600);pointer-events:none;cursor:initial}.page.hidden{display:none}#left,#right{display:flex;padding:2px;--sinch-icon-size:24px}</style><div id="wrapper"><button id="left"><sinch-icon id="icon-left"></sinch-icon></button><button class="page"><span>1</span></button><button class="page active"><span>2</span></button><button class="page"><span>3</span></button><button class="page"><span>4</span></button><button class="page"><span>5</span></button><button class="page dots"><span>6</span></button><button class="page"><span>20</span></button><button id="right"><sinch-icon id="icon-right"></sinch-icon></button></div>';
 const NUM_BUTTONS = 7;
 const MIDDLE_BTN_INDEX = Math.floor(NUM_BUTTONS / 2);
 const FIRST_BTN_INDEX = 0;
@@ -12,7 +11,9 @@ const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-pagination', class extends NectaryElement {
   #$left;
+  #$iconLeft;
   #$right;
+  #$iconRight;
   #$buttons;
   #$wrapper;
   constructor() {
@@ -20,7 +21,9 @@ defineCustomElement('sinch-pagination', class extends NectaryElement {
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$left = shadowRoot.querySelector('#left');
+    this.#$iconLeft = shadowRoot.querySelector('#icon-left');
     this.#$right = shadowRoot.querySelector('#right');
+    this.#$iconRight = shadowRoot.querySelector('#icon-right');
     this.#$buttons = shadowRoot.querySelectorAll('.page');
     this.#$wrapper = shadowRoot.querySelector('#wrapper');
   }
@@ -28,6 +31,7 @@ defineCustomElement('sinch-pagination', class extends NectaryElement {
     this.#onValueChange();
     this.#$wrapper.addEventListener('click', this.#onButtonClick);
     this.addEventListener('-change', this.#onChangeReactHandler);
+    this.#updateIcons();
   }
   disconnectedCallback() {
     this.#$wrapper.removeEventListener('click', this.#onButtonClick);
@@ -122,6 +126,11 @@ defineCustomElement('sinch-pagination', class extends NectaryElement {
     const max = getIntegerAttribute(this, 'max', 0);
     return Math.max(0, Math.min(max - 1, value)) + 1;
   }
+  #updateIcons() {
+    const [leftName, rightName] = getCssVars(this, ['--sinch-pagination-icon-prev', '--sinch-pagination-icon-next']);
+    updateAttribute(this.#$iconLeft, 'name', leftName);
+    updateAttribute(this.#$iconRight, 'name', rightName);
+  }
   #dispatchChangeEvent(value) {
     const detail = this.#clamp(value);
     this.dispatchEvent(new CustomEvent('change', {

package/progress/index.d.ts

@@ -1,8 +1,3 @@
-import '../spinner';
-import '../icons/check-circle';
-import '../icons/report';
-import '../icons/pending-actions';
-import '../icons/text-snippet';
 import '../text';
 import type { TSinchProgressElement, TSinchProgressReact } from './types';
 declare global {

package/progress/index.js

@@ -1,8 +1,3 @@
-import '../spinner';
-import '../icons/check-circle';
-import '../icons/report';
-import '../icons/pending-actions';
-import '../icons/text-snippet';
 import '../text';
 import { defineCustomElement, updateAttribute, NectaryElement, updateBooleanAttribute, getIntegerAttribute, getBooleanAttribute, attrValueToInteger } from '../utils';
 const templateHTML = '<style>:host{display:block}#wrapper{display:flex;align-items:center;height:24px}#bar,#progress{height:8px;border-radius:4px}#progress{background-color:var(--sinch-color-tropical-100);flex:1;min-width:0}#bar{background-color:var(--sinch-color-tropical-500);width:0}#text{display:none;width:46px}:host([detailed]:not([detailed=false])) #text{display:block}</style><div id="wrapper"><sinch-text id="text" type="m"></sinch-text><div id="progress"><div id="bar"></div></div></div>';

package/rich-text/index.d.ts

@@ -1,4 +1,3 @@
-import '../icons/cancel';
 import type { TSinchRichTextElement, TSinchRichTextReact } from './types';
 declare global {
     namespace JSX {

package/rich-text/index.js

@@ -1,4 +1,3 @@
-import '../icons/cancel';
 import { defineCustomElement, NectaryElement, getLiteralAttribute, updateLiteralAttribute, getAttribute, updateAttribute, parseMarkdown } from '../utils';
 const templateHTML = '<style>:host{display:block;font:var(--sinch-font-text-m)}:host([size="s"]){font:var(--sinch-font-text-s)}:host([size=xs]){font:var(--sinch-font-text-xs)}:host([size=xxs]){font:var(--sinch-font-text-xxs)}.em1{font-style:italic}.em2{font-weight:700}.em3{font-style:italic;font-weight:700}.strikethrough{text-decoration:line-through}.link{color:var(--sinch-color-tropical-500)}.code{border:1px solid var(--sinch-color-border-light);background-color:var(--sinch-color-bg-primary-contrast);padding:0 .25em;border-radius:var(--sinch-shape-radius-xs)}.paragraph{margin:0}.paragraph+.paragraph{margin-top:12px}</style><div id="wrapper"></div>';
 import { assertSize, sizeValues } from './utils';

package/segment-collapse/index.d.ts

@@ -1,5 +1,4 @@
-import '../icons/expand-less';
-import '../icons/expand-more';
+import '../icon';
 import '../icon-button';
 import type { TSinchSegmentExpandElement, TSinchSegmentExpandReact } from './types';
 declare global {

package/segment-collapse/index.js

@@ -1,22 +1,24 @@
-import '../icons/expand-less';
-import '../icons/expand-more';
+import '../icon';
 import '../icon-button';
-import { defineCustomElement, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;--sinch-size-icon:32px}#up{display:block}#down{display:none}:host([value]:not([value=false])) #up{display:none}:host([value]:not([value=false])) #down{display:block}</style><sinch-icon-button id="button" size="s"><sinch-icon-expand-less id="up" slot="icon"></sinch-icon-expand-less><sinch-icon-expand-more id="down" slot="icon"></sinch-icon-expand-more></sinch-icon-button>';
+import { defineCustomElement, getBooleanAttribute, getCssVar, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;--sinch-size-icon:32px}#icon-dropdown{display:block;will-change:transform;transform:rotate(180deg)}:host([value]:not([value=false])) #icon-dropdown{transform:rotate(0)}</style><sinch-icon-button id="button" size="s"><sinch-icon id="icon-dropdown" slot="icon"></sinch-icon></sinch-icon-button>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-segment-collapse', class extends NectaryElement {
   #$button;
+  #$iconDropdown;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$button = shadowRoot.querySelector('#button');
+    this.#$iconDropdown = shadowRoot.querySelector('#icon-dropdown');
   }
   connectedCallback() {
     this.setAttribute('role', 'checkbox');
     this.#$button.addEventListener('click', this.#onClick);
     this.addEventListener('-change', this.#onChangeReactHandler);
+    updateAttribute(this.#$iconDropdown, 'name', getCssVar(this, '--sinch-segment-icon-dropdown'));
   }
   disconnectedCallback() {
     this.#$button.removeEventListener('click', this.#onClick);

package/select-button/index.d.ts

@@ -1,5 +1,5 @@
 import '../text';
-import '../icons/keyboard-arrow-down';
+import '../icon';
 import type { TSinchSelectButtonElement, TSinchSelectButtonReact } from './types';
 declare global {
     namespace JSX {