@nectary/components 0.49.0 → 1.0.1

package/accordion-item/index.d.ts

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

package/accordion-item/index.js

@@ -1,11 +1,12 @@
-import '../icons/keyboard-arrow-down';
-import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0;min-height:48px}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;height:100%;box-sizing:border-box;overflow:hidden;border-bottom:1px solid var(--sinch-color-stormy-200);--sinch-size-icon:16px}#button{all:initial;cursor:pointer;display:flex;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:48px;padding:12px 8px;font:var(--sinch-font-title-s);color:var(--sinch-color-text-default);--sinch-color-icon:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button:disabled{cursor:initial;color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}#button::before{width:8px;height:8px;border-radius:50%;margin-left:2px;margin-right:8px}:host([status=success]) #button::before{content:"";background-color:var(--sinch-color-feedback-success-icon)}:host([status=warn]) #button::before{content:"";background-color:var(--sinch-color-feedback-warning-icon)}:host([status=error]) #button::before{content:"";background-color:var(--sinch-color-feedback-invalid-icon)}:host([status=info]) #button::before{content:"";background-color:var(--sinch-color-feedback-info-icon)}#title{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#content{display:none;overflow-y:auto;flex-shrink:1;min-height:0;padding:0 8px 18px;font:var(--sinch-font-text-m);color:var(--sinch-color-text-default)}#dropdown-icon{--sinch-size-icon:24px}#button[aria-expanded=true]>#dropdown-icon{transform:rotate(180deg)}#button[aria-expanded=true]+#content{display:block}#optional{font:var(--sinch-font-text-s);color:var(--sinch-color-stormy-300)}</style><div id="wrapper"><button id="button" aria-controls="content" aria-expanded="false"><slot name="icon"></slot><span id="title"></span><span id="optional"></span><sinch-icon-keyboard-arrow-down id="dropdown-icon"></sinch-icon-keyboard-arrow-down></button><div id="content" role="region" aria-labelledby="button"><slot name="content"></slot></div></div>';
+import '../icon';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getCssVar, getLiteralAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0;min-height:48px}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;height:100%;box-sizing:border-box;overflow:hidden;border-bottom:1px solid var(--sinch-color-stormy-200);--sinch-size-icon:16px}#button{all:initial;cursor:pointer;display:flex;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:48px;padding:12px 8px;font:var(--sinch-font-title-s);color:var(--sinch-color-text-default);--sinch-color-icon:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button:disabled{cursor:initial;color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}#button::before{width:8px;height:8px;border-radius:50%;margin-left:2px;margin-right:8px}:host([status=success]) #button::before{content:"";background-color:var(--sinch-color-feedback-success-icon)}:host([status=warn]) #button::before{content:"";background-color:var(--sinch-color-feedback-warning-icon)}:host([status=error]) #button::before{content:"";background-color:var(--sinch-color-feedback-invalid-icon)}:host([status=info]) #button::before{content:"";background-color:var(--sinch-color-feedback-info-icon)}#title{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#content{display:none;overflow-y:auto;flex-shrink:1;min-height:0;padding:0 8px 18px;font:var(--sinch-font-text-m);color:var(--sinch-color-text-default)}#dropdown-icon{--sinch-size-icon:24px}#button[aria-expanded=true]>#dropdown-icon{transform:rotate(180deg)}#button[aria-expanded=true]+#content{display:block}#optional{font:var(--sinch-font-text-s);color:var(--sinch-color-stormy-300)}</style><div id="wrapper"><button id="button" aria-controls="content" aria-expanded="false"><slot name="icon"></slot><span id="title"></span><span id="optional"></span><sinch-icon id="dropdown-icon"></sinch-icon></button><div id="content" role="region" aria-labelledby="button"><slot name="content"></slot></div></div>';
 import { statusValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-accordion-item', class extends NectaryElement {
   #$button;
+  #$icon;
   #$buttonContent;
   #$optionalText;
   constructor() {
@@ -13,11 +14,13 @@ defineCustomElement('sinch-accordion-item', class extends NectaryElement {
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$button = shadowRoot.querySelector('#button');
+    this.#$icon = shadowRoot.querySelector('#dropdown-icon');
     this.#$buttonContent = shadowRoot.querySelector('#title');
     this.#$optionalText = shadowRoot.querySelector('#optional');
   }
   connectedCallback() {
     this.#$button.addEventListener('click', this.#onButtonClick);
+    updateAttribute(this.#$icon, 'name', getCssVar(this, '--sinch-accordion-item-icon-dropdown'));
   }
   disconnectedCallback() {
     this.#$button.removeEventListener('click', this.#onButtonClick);

package/alert/index.d.ts

@@ -1,6 +1,4 @@
-import '../icons/info';
-import '../icons/report-problem';
-import '../icons/report';
+import '../icon';
 import '../rich-text';
 import '../text';
 import type { TSinchAlertElement, TSinchAlertReact } from './types';

package/alert/index.js

@@ -1,23 +1,28 @@
-import '../icons/info';
-import '../icons/report-problem';
-import '../icons/report';
+import '../icon';
 import '../rich-text';
 import '../text';
-import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;gap:8px;align-items:center;padding:8px 16px;box-sizing:border-box;width:100%;min-height:48px}#text{display:flex;flex-direction:column;gap:8px;color:var(--sinch-color-stormy-500);flex:1;min-width:0}#icon-error,#icon-info,#icon-warn{display:none}:host([type=warn]) #wrapper{background-color:var(--sinch-color-feedback-warning-bg)}:host([type=error]) #wrapper{background-color:var(--sinch-color-feedback-invalid-bg)}:host([type=info]) #wrapper{background-color:var(--sinch-color-feedback-info-bg)}:host([type=warn]) #icon-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)}</style><div id="wrapper"><sinch-icon-info id="icon-info"></sinch-icon-info><sinch-icon-report-problem id="icon-warn"></sinch-icon-report-problem><sinch-icon-report id="icon-error"></sinch-icon-report><sinch-rich-text id="text"></sinch-rich-text><slot name="action"></slot><slot name="close"></slot></div>';
+import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, getCssVar } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;gap:8px;align-items:center;padding:8px 16px;box-sizing:border-box;width:100%;min-height:48px}#text{display:flex;flex-direction:column;gap:8px;color:var(--sinch-color-stormy-500);flex:1;min-width:0}:host([type=warn]) #wrapper{background-color:var(--sinch-color-feedback-warning-bg)}:host([type=error]) #wrapper{background-color:var(--sinch-color-feedback-invalid-bg)}:host([type=info]) #wrapper{background-color:var(--sinch-color-feedback-info-bg)}:host([type=warn]) #icon{--sinch-color-icon:var(--sinch-color-feedback-warning-icon)}:host([type=error]) #icon{--sinch-color-icon:var(--sinch-color-feedback-invalid-icon)}:host([type=info]) #icon{--sinch-color-icon:var(--sinch-color-feedback-info-icon)}</style><div id="wrapper"><sinch-icon id="icon"></sinch-icon><sinch-rich-text id="text"></sinch-rich-text><slot name="action"></slot><slot name="close"></slot></div>';
 import { assertType, typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-alert', class extends NectaryElement {
   #$text;
+  #$icon;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$text = shadowRoot.querySelector('#text');
+    this.#$icon = shadowRoot.querySelector('#icon');
   }
   connectedCallback() {
+    super.connectedCallback();
     this.setAttribute('role', 'alert');
+    this.#updateIcon();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
   }
   get type() {
     return getLiteralAttribute(this, typeValues, 'type');
@@ -41,6 +46,7 @@ defineCustomElement('sinch-alert', class extends NectaryElement {
           if ('production' !== 'production') {
             assertType(newVal);
           }
+          this.#updateIcon();
           break;
         }
       case 'text':
@@ -50,4 +56,10 @@ defineCustomElement('sinch-alert', class extends NectaryElement {
         }
     }
   }
+  #updateIcon() {
+    if (!this.isConnected) {
+      return;
+    }
+    updateAttribute(this.#$icon, 'name', getCssVar(this, `--sinch-alert-icon-${this.type}`));
+  }
 });

package/card/index.js

@@ -22,6 +22,7 @@ defineCustomElement('sinch-card', class extends NectaryElement {
   }
   connectedCallback() {
     this.#$illustrationSlot.addEventListener('slotchange', this.#onIllustrationSlotChange);
+    this.#onIllustrationSlotChange();
   }
   disconnectedCallback() {
     this.#$illustrationSlot.removeEventListener('slotchange', this.#onIllustrationSlotChange);

package/chat-bubble/index.d.ts

@@ -1,7 +1,4 @@
-import '../icons/query-builder';
-import '../icons/check';
-import '../icons/done-all';
-import '../icons/error-outline';
+import '../icon';
 import type { TSinchChatBubbleElement, TSinchChatBubbleReact } from './types';
 declare global {
     namespace JSX {

package/chat-bubble/index.js

@@ -1,22 +1,28 @@
-import '../icons/query-builder';
-import '../icons/check';
-import '../icons/done-all';
-import '../icons/error-outline';
-import { defineCustomElement, getAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;padding:12px 16px;border-radius:16px;max-width:595px;box-sizing:border-box}:host([data-type=customer])>#wrapper{background-color:var(--sinch-color-snow-500);border-top-left-radius:0}:host([data-type=agent-prev])>#wrapper{background-color:var(--sinch-color-snow-700);border-top-right-radius:0}:host([data-type=agent])>#wrapper{background-color:var(--sinch-color-honey-200);border-top-right-radius:0}#text{font:var(--sinch-font-text-m);color:var(--sinch-color-stormy-500)}sinch-icon-check,sinch-icon-done-all,sinch-icon-error-outline,sinch-icon-query-builder{display:none;position:absolute;right:16px;bottom:12px;--sinch-size-icon:16px;--sinch-color-icon:var(--sinch-color-stormy-500)}:host([status=sending]) sinch-icon-query-builder{display:block}:host([status=sent]) sinch-icon-check{display:block}:host([status=received]) sinch-icon-done-all{display:block}:host([status=seen]) sinch-icon-done-all{display:block;--sinch-color-icon:var(--sinch-color-feedback-success-icon)}:host([status=error]) sinch-icon-error-outline{display:block;--sinch-color-icon:var(--sinch-color-feedback-invalid-icon)}:host([status]:not([status=""])) #wrapper{padding-right:42px}</style><div id="wrapper"><span id="text"></span><sinch-icon-query-builder></sinch-icon-query-builder><sinch-icon-check></sinch-icon-check><sinch-icon-done-all></sinch-icon-done-all><sinch-icon-error-outline></sinch-icon-error-outline></div>';
+import '../icon';
+import { defineCustomElement, getAttribute, getCssVar, getLiteralAttribute, NectaryElement, updateAttribute, updateLiteralAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;padding:12px 16px;border-radius:16px;max-width:595px;box-sizing:border-box}:host([data-type=customer])>#wrapper{background-color:var(--sinch-color-snow-500);border-top-left-radius:0}:host([data-type=agent-prev])>#wrapper{background-color:var(--sinch-color-snow-700);border-top-right-radius:0}:host([data-type=agent])>#wrapper{background-color:var(--sinch-color-honey-200);border-top-right-radius:0}#text{font:var(--sinch-font-text-m);color:var(--sinch-color-stormy-500)}#icon{display:none;position:absolute;right:16px;bottom:12px;--sinch-size-icon:16px;--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-icon-font-variation-settings:var(--sinch-chat-icon-font-variation-settings)}:host([status=error]) #icon,:host([status=received]) #icon,:host([status=seen]) #icon,:host([status=sending]) #icon,:host([status=sent]) #icon{display:block}:host([status=seen]) #icon{--sinch-color-icon:var(--sinch-color-feedback-success-icon)}:host([status=error]) #icon{--sinch-color-icon:var(--sinch-color-feedback-invalid-icon)}:host([status]:not([status=""])) #wrapper{padding-right:42px}</style><div id="wrapper"><span id="text"></span><sinch-icon id="icon"></sinch-icon></div>';
 import { statusValues, typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-chat-bubble', class extends NectaryElement {
   #$text;
+  #$icon;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$text = shadowRoot.querySelector('#text');
+    this.#$icon = shadowRoot.querySelector('#icon');
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.#updateIcon();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
   }
   static get observedAttributes() {
-    return ['text'];
+    return ['text', 'status'];
   }
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
@@ -25,6 +31,11 @@ defineCustomElement('sinch-chat-bubble', class extends NectaryElement {
           this.#$text.textContent = newVal;
           break;
         }
+      case 'status':
+        {
+          this.#updateIcon();
+          break;
+        }
     }
   }
   set text(value) {
@@ -42,4 +53,11 @@ defineCustomElement('sinch-chat-bubble', class extends NectaryElement {
   get status() {
     return getLiteralAttribute(this, statusValues, 'status', null);
   }
+  #updateIcon() {
+    if (!this.isConnected) {
+      return;
+    }
+    const status = this.status;
+    updateAttribute(this.#$icon, 'name', status !== null ? getCssVar(this, `--sinch-chat-icon-${status}`) : null);
+  }
 });

package/checkbox/types.d.ts

@@ -1,30 +1,52 @@
 import type { TSinchElementReact } from '../types';
 import type { SyntheticEvent } from 'react';
 export type TSinchCheckboxElement = HTMLElement & {
+    /** Value */
     checked: boolean;
+    /** Indeterminate */
     indeterminate: boolean;
+    /** Disabled */
     disabled: boolean;
+    /** Invalid */
     invalid: boolean;
+    /** Text */
     text: string | null;
+    /** Change value event */
     addEventListener(type: '-change', listener: (e: CustomEvent<boolean>) => void): void;
+    /** Focus event */
     addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
+    /** Blur event */
     addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
+    /** Checked */
     setAttribute(name: 'checked', value: ''): void;
+    /** Indeterminate */
     setAttribute(name: 'indeterminate', value: ''): void;
+    /** Disabled */
     setAttribute(name: 'disabled', value: ''): void;
+    /** Invalid */
     setAttribute(name: 'invalid', value: ''): void;
+    /** Text */
     setAttribute(name: 'text', value: string): void;
 };
 export type TSinchCheckboxReact = TSinchElementReact<TSinchCheckboxElement> & {
+    /** Checked */
     checked?: boolean;
+    /** Indeterminate */
     indeterminate?: boolean;
+    /** Disabled */
     disabled?: boolean;
+    /** Invalid */
     invalid?: boolean;
+    /** Text */
     text?: string;
+    /** Label that is used for a11y – might be different from `label` */
     'aria-label': string;
     /** @deprecated */
     onChange?: (event: SyntheticEvent<TSinchCheckboxElement, CustomEvent<boolean>>) => void;
+    /** Change value handler */
     'on-change'?: (e: CustomEvent<boolean>) => void;
+    /** Focus handler */
     'on-focus'?: (e: CustomEvent<void>) => void;
+    /** Blur handler */
     'on-blur'?: (e: CustomEvent<void>) => void;
 };

package/chip/index.d.ts

@@ -1,5 +1,5 @@
 import '../text';
-import '../icons/cancel';
+import '../icon';
 import type { TSinchChipElement, TSinchChipReact } from './types';
 declare global {
     namespace JSX {

package/chip/index.js

@@ -1,13 +1,14 @@
 import '../text';
-import '../icons/cancel';
-import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, getReactEventHandler } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#button{all:initial;position:relative;display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:24px;padding:0 5px 0 9px;border-radius:12px;background-color:var(--sinch-chip-color-default-bg);color:var(--sinch-chip-color-default-fg);box-sizing:border-box;cursor:pointer;--sinch-color-icon:var(--sinch-chip-color-default-fg);--sinch-size-icon:16px}#button:focus-visible::after{content:"";position:absolute;inset:-4px;border-radius:16px;border:2px solid var(--sinch-color-border-focus);pointer-events:none}#text{flex:1}:host([small]:not([small=false])) #button{height:20px;border-radius:10px;padding:0 3px 0 7px}:host([small]:not([small=false])) #button:focus-visible::after{border-radius:14px}::slotted(*){margin-left:-4px}</style><button id="button"><slot name="icon"></slot><sinch-text id="text" type="xs" ellipsis></sinch-text><sinch-icon-cancel id="close"></sinch-icon-cancel></button>';
+import '../icon';
+import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, getReactEventHandler, getCssVar } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#button{all:initial;position:relative;display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:24px;padding:0 5px 0 9px;border-radius:12px;background-color:var(--sinch-chip-color-default-bg);color:var(--sinch-chip-color-default-fg);box-sizing:border-box;cursor:pointer;--sinch-color-icon:var(--sinch-chip-color-default-fg);--sinch-size-icon:16px}#button:focus-visible::after{content:"";position:absolute;inset:-4px;border-radius:16px;border:2px solid var(--sinch-color-border-focus);pointer-events:none}#text{flex:1}:host([small]:not([small=false])) #button{height:20px;border-radius:10px;padding:0 3px 0 7px}:host([small]:not([small=false])) #button:focus-visible::after{border-radius:14px}::slotted(*){margin-left:-4px}</style><button id="button"><slot name="icon"></slot><sinch-text id="text" type="xs" ellipsis></sinch-text><sinch-icon id="icon-close"></sinch-icon></button>';
 import { assertChipColor, getChipColorBg, getChipColorFg } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-chip', class extends NectaryElement {
   #$text;
   #$button;
+  #$iconClose;
   #controller = null;
   constructor() {
     super();
@@ -15,6 +16,7 @@ defineCustomElement('sinch-chip', class extends NectaryElement {
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$button = shadowRoot.querySelector('#button');
     this.#$text = shadowRoot.querySelector('#text');
+    this.#$iconClose = shadowRoot.querySelector('#icon-close');
   }
   connectedCallback() {
     super.connectedCallback();
@@ -41,6 +43,7 @@ defineCustomElement('sinch-chip', class extends NectaryElement {
     this.addEventListener('-blur', this.#onBlurReactHandler, {
       signal
     });
+    updateAttribute(this.#$iconClose, 'name', getCssVar(this, '--sinch-chip-icon-close'));
     this.#updateColor();
   }
   disconnectedCallback() {

package/code-tag/index.d.ts

@@ -1,5 +1,3 @@
-import '../icons/open-in-new';
-import '../icons/arrow-forward';
 import type { TSinchCodeTagElement, TSinchCodeTagReact } from './types';
 declare global {
     namespace JSX {

package/code-tag/index.js

@@ -1,5 +1,3 @@
-import '../icons/open-in-new';
-import '../icons/arrow-forward';
 import { defineCustomElement, getAttribute, updateAttribute, NectaryElement } from '../utils';
 const templateHTML = '<style>:host{display:inline}#content{font:var(--sinch-font-mono-text-s);font-size:inherit;line-height:inherit;text-decoration:inherit;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)}</style><span id="content"></span>';
 const template = document.createElement('template');

package/color-menu/index.d.ts

@@ -1,6 +1,6 @@
 import '../color-swatch';
 import '../tooltip';
-import '../icons/check';
+import '../icon';
 import type { TSinchColorMenuElement, TSinchColorMenuReact } from './types';
 declare global {
     namespace JSX {

package/color-menu/index.js

@@ -1,10 +1,10 @@
 import '../color-swatch';
 import '../tooltip';
-import '../icons/check';
+import '../icon';
 import { getSwatchColorFg } from '../color-swatch/utils';
 import { lightColorNames, darkColorNames, vibrantColorNames } from '../theme/colors';
-import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, unpackCsv, getIntegerAttribute, getReactEventHandler, getRect, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateIntegerAttribute, subscribeContext } from '../utils';
-const optionTemplateHTML = '<div class="option" role="option"><sinch-tooltip inverted class="tooltip"><div class="swatch-wrapper"><sinch-color-swatch class="swatch"></sinch-color-swatch><sinch-icon-check class="check"></sinch-icon-check></div></sinch-tooltip></div>';
+import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, unpackCsv, getIntegerAttribute, getReactEventHandler, getRect, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateIntegerAttribute, subscribeContext, getCssVar } from '../utils';
+const optionTemplateHTML = '<div class="option" role="option"><sinch-tooltip inverted class="tooltip"><div class="swatch-wrapper"><sinch-color-swatch class="swatch"></sinch-color-swatch><sinch-icon class="check"></sinch-icon></div></sinch-tooltip></div>';
 const templateHTML = '<style>:host{display:block;outline:0}#listbox{display:flex;flex-direction:row;flex-wrap:wrap;padding:4px 10px;overflow-y:auto}#listbox:empty{display:none}.option{padding:12px 6px;--sinch-color-icon:var(--sinch-color-stormy-500)}.swatch-wrapper{position:relative;cursor:pointer;width:32px;height:32px}.swatch-wrapper::after{content:"";position:absolute;width:34px;height:34px;inset:-3px;border:2px solid transparent;border-radius:50%;pointer-events:none}.option[data-selected]:not([data-checked]) .swatch-wrapper::after{border-color:var(--sinch-color-border-focus)}.check{display:none;position:absolute;left:4px;top:4px;pointer-events:none;--sinch-size-icon:24px}.option[data-checked] .check{display:block}</style><div id="listbox" role="presentation"></div>';
 import { getParentOption } from './utils';
 const NUM_COLS_DEFAULT = 5;
@@ -18,6 +18,7 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
   #$listbox;
   #controller = null;
   #prevColorsValue = '';
+  #checkIconName = null;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -46,6 +47,7 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
     });
     subscribeContext(this, 'keydown', this.#onContextKeyDown, signal);
     subscribeContext(this, 'visibility', this.#onContextVisibility, signal);
+    this.#checkIconName = getCssVar(this, '--sinch-color-menu-icon-check');
     requestAnimationFrame(this.#onMount);
   }
   disconnectedCallback() {
@@ -139,9 +141,11 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
       const $option = optFrag.querySelector('.option');
       const $swatch = optFrag.querySelector('.swatch');
       const $tooltip = optFrag.querySelector('.tooltip');
+      const $checkIcon = optFrag.querySelector('.check');
       updateAttribute($option, 'data-value', color);
       updateAttribute($tooltip, 'text', color);
       updateAttribute($swatch, 'name', color);
+      updateAttribute($checkIcon, 'name', this.#checkIconName);
       $option.style.setProperty('--sinch-color-icon', getSwatchColorFg(color));
       fragment.appendChild(optFrag);
     }
@@ -179,7 +183,6 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
     }
     const $option = getParentOption($elem);
     this.#dispatchChangeEvent($option);
-    this.#selectOption($option);
   };
   #onContextVisibility = e => {
     if (e.detail) {
@@ -237,6 +240,7 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
     for (const $option of this.#getOptionElements()) {
       const isChecked = value === getAttribute($option, 'data-value', '');
       updateBooleanAttribute($option, 'data-checked', isChecked);
+      updateBooleanAttribute($option, 'data-selected', isChecked);
       updateExplicitBooleanAttribute($option, 'aria-selected', isChecked);
     }
   }

package/color-swatch/index.d.ts

@@ -1,4 +1,3 @@
-import '../icons/cancel';
 import '../text';
 import type { TSinchColorSwatchElement, TSinchColorSwatchReact } from './types';
 declare global {

package/color-swatch/index.js

@@ -1,4 +1,3 @@
-import '../icons/cancel';
 import '../text';
 import { defineCustomElement, NectaryElement, setClass, getAttribute, updateAttribute } from '../utils';
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{width:var(--sinch-size-icon,32px);height:var(--sinch-size-icon,32px);border-radius:50%}#wrapper.no-color{background:linear-gradient(45deg,var(--sinch-color-swatch-color-light-orange-bg),var(--sinch-color-swatch-color-light-yellow-bg),var(--sinch-color-swatch-color-light-green-bg),var(--sinch-color-swatch-color-light-blue-bg),var(--sinch-color-swatch-color-light-violet-bg))}</style><div id="wrapper"></div>';

package/date-picker/index.d.ts

@@ -1,10 +1,5 @@
 import '../icon-button';
-import '../icons/keyboard-arrow-right';
-import '../icons/keyboard-double-arrow-right';
-import '../icons/keyboard-arrow-left';
-import '../icons/keyboard-double-arrow-left';
-import '../icons/delete-outline';
-import '../icons/today';
+import '../icon';
 import '../text';
 import type { TSinchDatePickerElement, TSinchDatePickerReact } from './types';
 declare global {

package/date-picker/index.js

@@ -1,13 +1,8 @@
 import '../icon-button';
-import '../icons/keyboard-arrow-right';
-import '../icons/keyboard-double-arrow-right';
-import '../icons/keyboard-arrow-left';
-import '../icons/keyboard-double-arrow-left';
-import '../icons/delete-outline';
-import '../icons/today';
+import '../icon';
 import '../text';
-import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, getRect, isAttrTrue, NectaryElement, packCsv, setClass, unpackCsv, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#content{width:fit-content;box-sizing:border-box;padding:16px;display:flex;flex-direction:column;gap:8px}#month{display:flex;flex-direction:column;row-gap:8px}.week{display:flex;flex-direction:row;column-gap:8px}.week.empty{display:none}.day{all:initial;font:var(--sinch-font-text-xs);color:var(--sinch-color-text-default);text-align:center;border-radius:var(--sinch-shape-radius-s);width:24px;height:24px;line-height:22px;cursor:pointer;border:1px solid transparent;background-color:transparent;box-sizing:border-box;user-select:none}.day.today{border:1px solid var(--sinch-color-tropical-500)}.day:disabled{cursor:initial;color:var(--sinch-color-snow-700)}.day:focus-visible{outline:1px solid var(--sinch-color-border-focus);outline-offset:1px}.day.range{background-color:var(--sinch-color-tropical-100)}.day.selected{background-color:var(--sinch-color-tropical-500);color:var(--sinch-color-snow-100)}.day:hover:enabled:not(.selected){background-color:var(--sinch-color-tropical-200)}#week-day-names{display:flex;flex-direction:row;gap:8px;height:24px}.week-day-name{font:var(--sinch-font-text-xs);font-weight:var(--sinch-font-weight-emphasized);color:var(--sinch-color-text-default);text-align:center;width:24px;height:24px;line-height:24px;user-select:none;text-transform:uppercase}#content-header{display:flex;flex-direction:row;height:32px;align-items:center}#date{flex:1;text-align:center;text-transform:capitalize}#prev-year{margin-left:-4px}#next-year{margin-right:-4px}</style><div id="content"><div id="content-header"><sinch-icon-button id="prev-year" size="s"><sinch-icon-keyboard-double-arrow-left slot="icon"></sinch-icon-keyboard-double-arrow-left></sinch-icon-button><sinch-icon-button id="prev-month" size="s"><sinch-icon-keyboard-arrow-left slot="icon"></sinch-icon-keyboard-arrow-left></sinch-icon-button><sinch-text id="date" type="m" emphasized aria-live="polite"></sinch-text><sinch-icon-button id="next-month" size="s"><sinch-icon-keyboard-arrow-right slot="icon"></sinch-icon-keyboard-arrow-right></sinch-icon-button><sinch-icon-button id="next-year" size="s"><sinch-icon-keyboard-double-arrow-right slot="icon"></sinch-icon-keyboard-double-arrow-right></sinch-icon-button></div><div id="week-day-names"><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div></div><div id="month"><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div></div></div>';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getCssVars, getReactEventHandler, getRect, isAttrTrue, NectaryElement, packCsv, setClass, unpackCsv, updateAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#content{width:fit-content;box-sizing:border-box;padding:16px;display:flex;flex-direction:column;gap:8px}#month{display:flex;flex-direction:column;row-gap:8px}.week{display:flex;flex-direction:row;column-gap:8px}.week.empty{display:none}.day{all:initial;font:var(--sinch-font-text-xs);color:var(--sinch-color-text-default);text-align:center;border-radius:var(--sinch-shape-radius-s);width:24px;height:24px;line-height:22px;cursor:pointer;border:1px solid transparent;background-color:transparent;box-sizing:border-box;user-select:none}.day.today{border:1px solid var(--sinch-color-tropical-500)}.day:disabled{cursor:initial;color:var(--sinch-color-snow-700)}.day:focus-visible{outline:1px solid var(--sinch-color-border-focus);outline-offset:1px}.day.range{background-color:var(--sinch-color-tropical-100)}.day.selected{background-color:var(--sinch-color-tropical-500);color:var(--sinch-color-snow-100)}.day:hover:enabled:not(.selected){background-color:var(--sinch-color-tropical-200)}#week-day-names{display:flex;flex-direction:row;gap:8px;height:24px}.week-day-name{font:var(--sinch-font-text-xs);font-weight:var(--sinch-font-weight-emphasized);color:var(--sinch-color-text-default);text-align:center;width:24px;height:24px;line-height:24px;user-select:none;text-transform:uppercase}#content-header{display:flex;flex-direction:row;height:32px;align-items:center}#date{flex:1;text-align:center;text-transform:capitalize}#prev-year{margin-left:-4px}#next-year{margin-right:-4px}</style><div id="content"><div id="content-header"><sinch-icon-button id="prev-year" size="s"><sinch-icon id="icon-prev-year" slot="icon"></sinch-icon></sinch-icon-button><sinch-icon-button id="prev-month" size="s"><sinch-icon id="icon-prev-month" slot="icon"></sinch-icon></sinch-icon-button><sinch-text id="date" type="m" emphasized aria-live="polite"></sinch-text><sinch-icon-button id="next-month" size="s"><sinch-icon id="icon-next-month" slot="icon"></sinch-icon></sinch-icon-button><sinch-icon-button id="next-year" size="s"><sinch-icon id="icon-next-year" slot="icon"></sinch-icon></sinch-icon-button></div><div id="week-day-names"><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div></div><div id="month"><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div></div></div>';
 import { areDatesEqual, assertDate, assertLocale, assertMinMax, assertValue, canGoNextMonth, canGoNextYear, canGoPrevMonth, canGoPrevYear, clampMaxDate, clampMinDate, cloneDate, dateToIso, decMonth, decYear, getCalendarMonth, getDayNames, getMonthNames, incMonth, incYear, isDateBetween, isoToDate, isValidDate, sortDates, today } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -25,6 +20,10 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
   #$nextMonth;
   #$prevYear;
   #$nextYear;
+  #$iconPrevMonth;
+  #$iconNextMonth;
+  #$iconPrevYear;
+  #$iconNextYear;
   #$date;
   #monthNames;
   #controller = null;
@@ -39,6 +38,10 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
     this.#$nextYear = shadowRoot.querySelector('#next-year');
     this.#$date = shadowRoot.querySelector('#date');
     this.#$month = shadowRoot.querySelector('#month');
+    this.#$iconPrevMonth = shadowRoot.querySelector('#icon-prev-month');
+    this.#$iconNextMonth = shadowRoot.querySelector('#icon-next-month');
+    this.#$iconPrevYear = shadowRoot.querySelector('#icon-prev-year');
+    this.#$iconNextYear = shadowRoot.querySelector('#icon-next-year');
     this.#$days = [];
     this.#$weeks = [];
     this.#monthNames = [];
@@ -62,6 +65,7 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
     this.#$nextYear.addEventListener('click', this.#onNextYearClick, options);
     this.#$month.addEventListener('click', this.#onDateClick, options);
     this.addEventListener('-change', this.#onChangeReactHandler, options);
+    this.#updateIcons();
   }
   disconnectedCallback() {
     this.#controller.abort();
@@ -401,6 +405,13 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
       setClass(this.#$weeks[wi], 'empty', isEmptyWeek);
     }
   }
+  #updateIcons() {
+    const names = getCssVars(this, ['--sinch-date-picker-icon-prev-month', '--sinch-date-picker-icon-next-month', '--sinch-date-picker-icon-prev-year', '--sinch-date-picker-icon-next-year']);
+    updateAttribute(this.#$iconPrevMonth, 'name', names[0]);
+    updateAttribute(this.#$iconNextMonth, 'name', names[1]);
+    updateAttribute(this.#$iconPrevYear, 'name', names[2]);
+    updateAttribute(this.#$iconNextYear, 'name', names[3]);
+  }
   #subscribeRangeHover() {
     if (!this.#isHoverSubscribed) {
       this.#$month.addEventListener('mouseover', this.#onDateMouseEnter);

package/dialog/index.d.ts

@@ -1,5 +1,5 @@
 import '../icon-button';
-import '../icons/close';
+import '../icon';
 import '../stop-events';
 import '../title';
 import type { TSinchDialogElement, TSinchDialogReact } from './types';

package/dialog/index.js

@@ -1,12 +1,13 @@
 import '../icon-button';
-import '../icons/close';
+import '../icon';
 import '../stop-events';
 import '../title';
-import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute, getReactEventHandler, NectaryElement, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block}dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px 0;max-width:var(--sinch-dialog-max-width,512px);max-height:unset;border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;contain:content;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-text-m);border:none;box-shadow:var(--sinch-elevation-level-3)}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.55}dialog::backdrop{background-color:#000;opacity:.55}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}#header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;margin-bottom:12px;padding:0 24px}#caption{color:var(--sinch-color-text-default)}#content{min-height:0;overflow:auto;max-height:var(--sinch-dialog-max-height,50vh);padding:4px 24px}#buttons{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:20px;padding:0 24px}#close{transform:translate(4px,-4px)}</style><dialog><div id="header"><sinch-title id="caption" type="m" level="3" ellipsis></sinch-title><sinch-icon-button id="close" size="s" tabindex="0"><sinch-icon-close slot="icon"></sinch-icon-close></sinch-icon-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="buttons"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute, getReactEventHandler, NectaryElement, updateBooleanAttribute, getCssVar } from '../utils';
+const templateHTML = '<style>:host{display:inline-block}dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px 0;max-width:var(--sinch-dialog-max-width,512px);max-height:unset;border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;contain:content;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-text-m);border:none;box-shadow:var(--sinch-elevation-level-3)}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.55}dialog::backdrop{background-color:#000;opacity:.55}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}#header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;margin-bottom:12px;padding:0 24px}#caption{color:var(--sinch-color-text-default)}#content{min-height:0;overflow:auto;max-height:var(--sinch-dialog-max-height,50vh);padding:4px 24px}#buttons{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:20px;padding:0 24px}#close{transform:translate(4px,-4px)}</style><dialog><div id="header"><sinch-title id="caption" type="m" level="3" ellipsis></sinch-title><sinch-icon-button id="close" size="s" tabindex="0"><sinch-icon id="icon-close" slot="icon"></sinch-icon></sinch-icon-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="buttons"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-dialog', class extends NectaryElement {
+  #$iconClose;
   #$dialog;
   #$closeButton;
   #$caption;
@@ -18,6 +19,7 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
     this.#$dialog = shadowRoot.querySelector('dialog');
     this.#$closeButton = shadowRoot.querySelector('#close');
     this.#$caption = shadowRoot.querySelector('#caption');
+    this.#$iconClose = shadowRoot.querySelector('#icon-close');
   }
   connectedCallback() {
     super.connectedCallback();
@@ -26,6 +28,7 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
     this.#$dialog.addEventListener('mousedown', this.#onBackdropClick);
     this.#$dialog.addEventListener('cancel', this.#onCancel);
     this.addEventListener('-close', this.#onCloseReactHandler);
+    updateAttribute(this.#$iconClose, 'name', getCssVar(this, '--sinch-dialog-icon-close'));
     this.#setOpen(getBooleanAttribute(this, 'open'));
   }
   disconnectedCallback() {

package/emoji-picker/index.d.ts

@@ -7,15 +7,7 @@ import '../tabs';
 import '../tabs-icon-option';
 import '../emoji';
 import '../text';
-import '../icons/search';
-import '../icons/sentiment-satisfied';
-import '../icons/emoji-people';
-import '../icons/emoji-nature';
-import '../icons/emoji-food-beverage';
-import '../icons/emoji-objects';
-import '../icons/emoji-transportation';
-import '../icons/emoji-events';
-import '../icons/emoji-symbols';
+import '../icon';
 import type { TSinchEmojiPickerElement, TSinchEmojiPickerReact } from './types';
 declare global {
     namespace JSX {

package/emoji-picker/index.js

@@ -7,19 +7,11 @@ import '../tabs';
 import '../tabs-icon-option';
 import '../emoji';
 import '../text';
-import '../icons/search';
-import '../icons/sentiment-satisfied';
-import '../icons/emoji-people';
-import '../icons/emoji-nature';
-import '../icons/emoji-food-beverage';
-import '../icons/emoji-objects';
-import '../icons/emoji-transportation';
-import '../icons/emoji-events';
-import '../icons/emoji-symbols';
-import { defineCustomElement, getAttribute, getBooleanAttribute, NectaryElement, updateAttribute, updateBooleanAttribute, getReactEventHandler, getRect, subscribeContext, debounceTimeout, setClass } from '../utils';
+import '../icon';
+import { defineCustomElement, getAttribute, getBooleanAttribute, NectaryElement, updateAttribute, updateBooleanAttribute, getReactEventHandler, getRect, subscribeContext, debounceTimeout, setClass, getCssVar, getCssVars } from '../utils';
 import dataJson from './data.json';
-const templateHTML = '<style>:host{display:block}#wrapper{width:384px;max-height:504px;display:flex;flex-direction:column;gap:8px;padding:12px 0}#toolbar{display:flex;gap:8px;padding:0 12px}#input{flex:1}#list-wrapper{overflow-y:auto;overflow-x:hidden;width:384px;box-sizing:border-box;scrollbar-gutter:stable}#list{display:flex;flex-wrap:wrap;gap:8px;padding:4px 12px 0;width:384px;box-sizing:border-box}#not-found{display:none;width:100%;height:48px;align-items:center;justify-content:center;color:var(--sinch-color-text-muted);pointer-events:none;user-select:none}#not-found.active{display:flex}</style><div id="wrapper"><div id="toolbar"><sinch-input id="input" size="l" aria-label="Search emojis"><sinch-icon-search slot="icon"></sinch-icon-search></sinch-input><sinch-popover id="skin-popover" orientation="bottom-left" aria-label="Emoji skin tone select"><sinch-icon-button id="skin-button" slot="target" size="l" aria-label="Select emoji skin tones"><sinch-color-swatch id="skin-swatch" slot="icon" name="skin-tone-0"></sinch-color-swatch></sinch-icon-button><sinch-color-menu id="skin-menu" slot="content" cols="1" value="skin-tone-0" colors="skin-tone-0,skin-tone-10,skin-tone-20,skin-tone-30,skin-tone-40,skin-tone-50" aria-label="Emoji skin tone menu"></sinch-color-menu></sinch-popover></div><sinch-tabs id="tabs" aria-label="Emoji groups"></sinch-tabs><div id="list-wrapper"><div id="list"></div><div id="not-found"><sinch-text type="m">No results</sinch-text></div></div></div>';
-const groupIconTagNames = ['sinch-icon-sentiment-satisfied', 'sinch-icon-emoji-people', 'sinch-icon-emoji-nature', 'sinch-icon-emoji-food-beverage', 'sinch-icon-emoji-transportation', 'sinch-icon-emoji-events', 'sinch-icon-emoji-objects', 'sinch-icon-emoji-symbols'];
+const templateHTML = '<style>:host{display:block}#wrapper{width:384px;max-height:504px;display:flex;flex-direction:column;gap:8px;padding:12px 0;--sinch-icon-font-variation-settings:var(--sinch-emoji-picker-icon-font-variation-settings)}#toolbar{display:flex;gap:8px;padding:0 12px}#input{flex:1}#list-wrapper{overflow-y:auto;overflow-x:hidden;width:384px;box-sizing:border-box;scrollbar-gutter:stable}#list{display:flex;flex-wrap:wrap;gap:8px;padding:4px 12px 0;width:384px;box-sizing:border-box}#not-found{display:none;width:100%;height:48px;align-items:center;justify-content:center;color:var(--sinch-color-text-muted);pointer-events:none;user-select:none}#not-found.active{display:flex}</style><div id="wrapper"><div id="toolbar"><sinch-input id="input" size="l" aria-label="Search emojis"><sinch-icon id="icon-search" slot="icon"></sinch-icon></sinch-input><sinch-popover id="skin-popover" orientation="bottom-left" aria-label="Emoji skin tone select"><sinch-icon-button id="skin-button" slot="target" size="l" aria-label="Select emoji skin tones"><sinch-color-swatch id="skin-swatch" slot="icon" name="skin-tone-0"></sinch-color-swatch></sinch-icon-button><sinch-color-menu id="skin-menu" slot="content" cols="1" value="skin-tone-0" colors="skin-tone-0,skin-tone-10,skin-tone-20,skin-tone-30,skin-tone-40,skin-tone-50" aria-label="Emoji skin tone menu"></sinch-color-menu></sinch-popover></div><sinch-tabs id="tabs" aria-label="Emoji groups"></sinch-tabs><div id="list-wrapper"><div id="list"></div><div id="not-found"><sinch-text type="m">No results</sinch-text></div></div></div>';
+const groupIconTagNames = ['--sinch-emoji-picker-icon-emoji-emotions', '--sinch-emoji-picker-icon-emoji-people', '--sinch-emoji-picker-icon-emoji-animals-nature', '--sinch-emoji-picker-icon-emoji-food-drinks', '--sinch-emoji-picker-icon-emoji-travel-places', '--sinch-emoji-picker-icon-emoji-sports-activities', '--sinch-emoji-picker-icon-emoji-objects', '--sinch-emoji-picker-icon-emoji-symbols-flags'];
 const groupLabels = ['Emotions', 'People', 'Animals and nature', 'Food and drinks', 'Travel and places', 'Sports and activities', 'Objects', 'Symbols and flags'];
 const data = dataJson;
 const template = document.createElement('template');
@@ -35,6 +27,7 @@ defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
   #$skinButton;
   #$list;
   #$notFound;
+  #$iconSearch;
   #controller = null;
   #$sh;
   #searchDebounce;
@@ -53,6 +46,7 @@ defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
     this.#$skinButton = shadowRoot.querySelector('#skin-button');
     this.#$list = shadowRoot.querySelector('#list');
     this.#$notFound = shadowRoot.querySelector('#not-found');
+    this.#$iconSearch = shadowRoot.querySelector('#icon-search');
     this.#searchDebounce = debounceTimeout(SEARCH_DEBOUNCE_TIMEOUT)(this.#updateSearch);
   }
   connectedCallback() {
@@ -84,6 +78,7 @@ defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
     this.addEventListener('-change', this.#onChangeReactHandler, {
       signal
     });
+    updateAttribute(this.#$iconSearch, 'name', getCssVar(this, '--sinch-emoji-picker-icon-search'));
     subscribeContext(this, 'keydown', this.#onContextKeyDown, signal);
     subscribeContext(this, 'visibility', this.#onContextVisibility, signal);
     this.#updateTabs();
@@ -190,11 +185,13 @@ defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
     const doc = this.#getDocumentRoot();
     const tabsFragment = document.createDocumentFragment();
     const activeTab = data[0].name;
+    const iconNames = getCssVars(this, groupIconTagNames);
     for (let i = 0; i < data.length; i++) {
       const group = data[i];
       const tabOption = doc.createElement('sinch-tabs-icon-option');
-      const icon = doc.createElement(groupIconTagNames[i]);
+      const icon = doc.createElement('sinch-icon');
       icon.setAttribute('slot', 'icon');
+      updateAttribute(icon, 'name', iconNames[i]);
       tabOption.setAttribute('value', group.name);
       tabOption.setAttribute('aria-label', groupLabels[i]);
       tabOption.appendChild(icon);