@nectary/components 0.49.0 → 1.0.0

package/select-button/index.js

@@ -1,12 +1,13 @@
 import '../text';
-import '../icons/keyboard-arrow-down';
-import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, setClass, subscribeContext, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute, Context } from '../utils';
+import '../icon';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, setClass, subscribeContext, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute, Context, getCssVar } from '../utils';
 import { assertSize, DEFAULT_SIZE, sizeValues } from '../utils/size';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-size:var(--sinch-size-m);--sinch-size-icon:var(--sinch-select-button-icon-size-m);--sinch-shape-radius:var(--sinch-shape-radius-m)}:host([data-size="l"]){--sinch-size:var(--sinch-size-l);--sinch-size-icon:var(--sinch-select-button-icon-size-l);--sinch-shape-radius:var(--sinch-shape-radius-l)}:host([data-size="m"]){--sinch-size:var(--sinch-size-m);--sinch-size-icon:var(--sinch-select-button-icon-size-m);--sinch-shape-radius:var(--sinch-shape-radius-m)}:host([data-size="s"]){--sinch-size:var(--sinch-size-s);--sinch-size-icon:var(--sinch-select-button-icon-size-s);--sinch-shape-radius:var(--sinch-shape-radius-s)}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:var(--sinch-size);padding:0 8px 0 12px;background-color:var(--sinch-color-bg-primary-light);border-radius:var(--sinch-shape-radius);--sinch-color-icon:var(--sinch-color-stormy-500)}:host([data-size="l"]) #wrapper{padding:0 12px}:host([data-size="m"]) #wrapper{padding:0 8px 0 12px}:host([data-size="s"]) #wrapper{padding:0 4px 0 12px}:host([disabled]:not([disabled=false])) #wrapper{--sinch-color-icon:var(--sinch-color-text-disabled)}#button{all:initial;cursor:pointer;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}#border{position:absolute;border:1px solid var(--sinch-color-border-dark);border-radius:var(--sinch-shape-radius);inset:0;pointer-events:none}#text{flex:1;min-width:0;color:var(--sinch-color-text-muted)}:host([text]:not([text=""])) #text{color:var(--sinch-color-text-default)}#button:disabled{cursor:initial}#button:disabled+#border{border-color:var(--sinch-color-border-disabled)}#button:focus-visible+#border{border-color:var(--sinch-color-border-focus);border-width:2px}:host([invalid]) #button:enabled+#border{border-color:var(--sinch-color-text-invalid)}#button:disabled~#text{color:var(--sinch-color-text-disabled)}#left{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;margin-left:-4px}#left.empty{display:none}#dropdown-icon{margin-left:-4px}</style><div id="wrapper"><button id="button"></button><div id="border"></div><div id="left"><slot name="left"></slot></div><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text><sinch-icon-keyboard-arrow-down id="dropdown-icon"></sinch-icon-keyboard-arrow-down></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-size:var(--sinch-size-m);--sinch-size-icon:var(--sinch-select-button-icon-size-m);--sinch-shape-radius:var(--sinch-shape-radius-m)}:host([data-size="l"]){--sinch-size:var(--sinch-size-l);--sinch-size-icon:var(--sinch-select-button-icon-size-l);--sinch-shape-radius:var(--sinch-shape-radius-l)}:host([data-size="m"]){--sinch-size:var(--sinch-size-m);--sinch-size-icon:var(--sinch-select-button-icon-size-m);--sinch-shape-radius:var(--sinch-shape-radius-m)}:host([data-size="s"]){--sinch-size:var(--sinch-size-s);--sinch-size-icon:var(--sinch-select-button-icon-size-s);--sinch-shape-radius:var(--sinch-shape-radius-s)}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:var(--sinch-size);padding:0 8px 0 12px;background-color:var(--sinch-color-bg-primary-light);border-radius:var(--sinch-shape-radius);--sinch-color-icon:var(--sinch-color-stormy-500)}:host([data-size="l"]) #wrapper{padding:0 12px}:host([data-size="m"]) #wrapper{padding:0 8px 0 12px}:host([data-size="s"]) #wrapper{padding:0 4px 0 12px}:host([disabled]:not([disabled=false])) #wrapper{--sinch-color-icon:var(--sinch-color-text-disabled)}#button{all:initial;cursor:pointer;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}#border{position:absolute;border:1px solid var(--sinch-color-border-dark);border-radius:var(--sinch-shape-radius);inset:0;pointer-events:none}#text{flex:1;min-width:0;color:var(--sinch-color-text-muted)}:host([text]:not([text=""])) #text{color:var(--sinch-color-text-default)}#button:disabled{cursor:initial}#button:disabled+#border{border-color:var(--sinch-color-border-disabled)}#button:focus-visible+#border{border-color:var(--sinch-color-border-focus);border-width:2px}:host([invalid]) #button:enabled+#border{border-color:var(--sinch-color-text-invalid)}#button:disabled~#text{color:var(--sinch-color-text-disabled)}#left{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;margin-left:-4px}#left.empty{display:none}#dropdown-icon{margin-left:-4px}</style><div id="wrapper"><button id="button"></button><div id="border"></div><div id="left"><slot name="left"></slot></div><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text><sinch-icon id="dropdown-icon"></sinch-icon></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-select-button', class extends NectaryElement {
   #$button;
+  #$icon;
   #$text;
   #$leftSlot;
   #$leftWrapper;
@@ -20,6 +21,7 @@ defineCustomElement('sinch-select-button', class extends NectaryElement {
     });
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$button = shadowRoot.querySelector('#button');
+    this.#$icon = shadowRoot.querySelector('#dropdown-icon');
     this.#$text = shadowRoot.querySelector('#text');
     this.#$leftSlot = shadowRoot.querySelector('slot[name="left"]');
     this.#$leftWrapper = shadowRoot.querySelector('#left');
@@ -54,6 +56,7 @@ defineCustomElement('sinch-select-button', class extends NectaryElement {
     this.#$leftSlot.addEventListener('slotchange', this.#onLeftSlotChange, {
       signal
     });
+    updateAttribute(this.#$icon, 'name', getCssVar(this, '--sinch-select-button-icon-dropdown'));
     this.#sizeContext.listen(this.#controller.signal);
     subscribeContext(this, 'size', this.#onContextSize, signal);
     this.#onLeftSlotChange();

package/select-menu/index.d.ts

@@ -1,7 +1,6 @@
 import '../input';
 import '../icon-button';
-import '../icons/search';
-import '../icons/close';
+import '../icon';
 import '../text';
 import type { TSinchSelectMenuElement, TSinchSelectMenuReact } from './types';
 declare global {

package/select-menu/index.js

@@ -1,10 +1,9 @@
 import '../input';
 import '../icon-button';
-import '../icons/search';
-import '../icons/close';
+import '../icon';
 import '../text';
-import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, unpackCsv, getFirstCsvValue, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateExplicitBooleanAttribute, updateIntegerAttribute, debounceTimeout, setClass, subscribeContext } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#listbox{overflow-y:auto}#search{display:none;margin:10px}#search.active{display:block}#not-found{display:none;width:100%;height:30px;align-items:center;justify-content:center;margin-bottom:10px;color:var(--sinch-color-text-muted);pointer-events:none;user-select:none}#not-found.active{display:flex}::slotted(.hidden){display:none}</style><sinch-input id="search" size="s" placeholder="Search"><sinch-icon-search slot="icon"></sinch-icon-search></sinch-input><div id="not-found"><sinch-text type="m">No results</sinch-text></div><div id="listbox" role="presentation"><slot></slot></div>';
+import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, unpackCsv, getFirstCsvValue, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateExplicitBooleanAttribute, updateIntegerAttribute, debounceTimeout, setClass, subscribeContext, getCssVar } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#listbox{overflow-y:auto}#search{display:none;margin:10px}#search.active{display:block}#not-found{display:none;width:100%;height:30px;align-items:center;justify-content:center;margin-bottom:10px;color:var(--sinch-color-text-muted);pointer-events:none;user-select:none}#not-found.active{display:flex}::slotted(.hidden){display:none}</style><sinch-input id="search" size="s" placeholder="Search"><sinch-icon id="icon-search" slot="icon"></sinch-icon></sinch-input><div id="not-found"><sinch-text type="m">No results</sinch-text></div><div id="listbox" role="presentation"><slot></slot></div>';
 const ITEM_HEIGHT = 40;
 const NUM_ITEMS_SEARCH = 20;
 const template = document.createElement('template');
@@ -13,6 +12,7 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
   #$optionSlot;
   #$listbox;
   #$search;
+  #$iconSearch;
   #$notFound;
   #controller = null;
   #searchDebounce;
@@ -23,6 +23,7 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
     this.#$optionSlot = shadowRoot.querySelector('slot');
     this.#$listbox = shadowRoot.querySelector('#listbox');
     this.#$search = shadowRoot.querySelector('#search');
+    this.#$iconSearch = shadowRoot.querySelector('#icon-search');
     this.#$notFound = shadowRoot.querySelector('#not-found');
     this.#searchDebounce = debounceTimeout(200)(this.#updateSearch);
   }
@@ -56,6 +57,7 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
     });
     subscribeContext(this, 'keydown', this.#onContextKeyDown, signal);
     subscribeContext(this, 'visibility', this.#onContextVisibility, signal);
+    updateAttribute(this.#$iconSearch, 'name', getCssVar(this, '--sinch-select-menu-icon-search'));
   }
   disconnectedCallback() {
     this.#controller.abort();

package/select-menu-option/index.d.ts

@@ -1,4 +1,4 @@
-import '../icons/check';
+import '../icon';
 import '../text';
 import { NectaryElement } from '../utils';
 import type { TSinchSelectMenuOptionElement, TSinchSelectMenuOptionReact } from './types';

package/select-menu-option/index.js

@@ -1,19 +1,22 @@
-import '../icons/check';
+import '../icon';
 import '../text';
-import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;height:40px;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;color:var(--sinch-color-text-default);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:24px}#content{flex:1}#check{display:none;margin-right:-6px}:host([data-checked]) #check{display:block}:host([disabled])>#wrapper{cursor:initial;color:var(--sinch-color-text-disabled);--sinch-color-icon:var(--sinch-color-stormy-100)}:host(:hover:not([disabled]))>#wrapper,:host([data-selected])>#wrapper{background-color:var(--sinch-color-snow-400)}::slotted(*){margin-left:-6px}</style><div id="wrapper"><slot name="icon"></slot><sinch-text id="content" type="m" ellipsis></sinch-text><sinch-icon-check id="check"></sinch-icon-check></div>';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getCssVar, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;height:40px;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;color:var(--sinch-color-text-default);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:24px}#content{flex:1}#icon-check{display:none;margin-right:-6px}:host([data-checked]) #icon-check{display:block}:host([disabled])>#wrapper{cursor:initial;color:var(--sinch-color-text-disabled);--sinch-color-icon:var(--sinch-color-stormy-100)}:host(:hover:not([disabled]))>#wrapper,:host([data-selected])>#wrapper{background-color:var(--sinch-color-snow-400)}::slotted(*){margin-left:-6px}</style><div id="wrapper"><slot name="icon"></slot><sinch-text id="content" type="m" ellipsis></sinch-text><sinch-icon id="icon-check"></sinch-icon></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 export class SelectMenuOption extends NectaryElement {
+  #$iconCheck;
   #$content;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$content = shadowRoot.querySelector('#content');
+    this.#$iconCheck = shadowRoot.querySelector('#icon-check');
   }
   connectedCallback() {
     this.setAttribute('role', 'option');
+    updateAttribute(this.#$iconCheck, 'name', getCssVar(this, '--sinch-select-menu-icon-check'));
   }
   static get observedAttributes() {
     return ['text', 'data-checked', 'disabled'];

package/spinner/types.d.ts

@@ -1,9 +1,12 @@
 import type { TSinchElementReact } from '../types';
 import type { TSinchSize } from '../utils/size';
 export type TSinchSpinnerElement = HTMLElement & {
+    /** Spinner size */
     size: TSinchSize;
+    /** Spinner size */
     setAttribute(name: 'size', value: TSinchSize): void;
 };
 export type TSinchSpinnerReact = TSinchElementReact<TSinchSpinnerElement> & {
+    /** Spinner size */
     size?: TSinchSize;
 };

package/tabs/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, getRect, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;width:100%;border-bottom:1px solid var(--sinch-color-border-default)}</style><div id="wrapper"><slot></slot></div>';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;width:100%;height:40px;border-bottom:1px solid var(--sinch-color-border-default);box-sizing:border-box}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-tabs', class extends NectaryElement {

package/tabs-icon-option/index.js

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

package/tabs-option/index.js

@@ -1,6 +1,6 @@
 import '../text';
 import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}#button{all:initial;position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 16px;box-sizing:border-box;cursor:pointer;border-top-left-radius:var(--sinch-shape-radius-l);border-top-right-radius:var(--sinch-shape-radius-l);height:40px;color:var(--sinch-color-stormy-300);--sinch-color-icon:var(--sinch-color-stormy-300);--sinch-size-icon:16px}#button:hover{background-color:var(--sinch-color-tropical-100)}#button:focus-visible::before{content:"";position:absolute;inset:0;bottom:-3px;border:2px solid var(--sinch-color-border-focus);border-top-left-radius:var(--sinch-shape-radius-l);border-top-right-radius:var(--sinch-shape-radius-l);pointer-events:none}#button:disabled{cursor:unset;pointer-events:none;color:var(--sinch-color-border-default);--sinch-color-icon:var(--sinch-color-border-default)}:host([data-checked]) #button{color:var(--sinch-color-tropical-500);--sinch-color-icon:var(--sinch-color-tropical-500)}:host([data-checked]) #button::after{content:"";position:absolute;left:4px;right:4px;bottom:-1px;pointer-events:none;border-top:2px solid var(--sinch-color-tropical-500)}#text{flex-shrink:1;flex-basis:auto;min-width:0}::slotted(*){display:block}</style><button id="button"><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text></button>';
+const templateHTML = '<style>:host{display:block}#button{all:initial;position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 16px;box-sizing:border-box;cursor:pointer;border-top-left-radius:var(--sinch-shape-radius-l);border-top-right-radius:var(--sinch-shape-radius-l);height:39px;color:var(--sinch-color-stormy-300);--sinch-color-icon:var(--sinch-color-stormy-300);--sinch-size-icon:16px}#button:hover{background-color:var(--sinch-color-tropical-100)}#button:focus-visible::before{content:"";position:absolute;inset:0;bottom:-3px;border:2px solid var(--sinch-color-border-focus);border-top-left-radius:var(--sinch-shape-radius-l);border-top-right-radius:var(--sinch-shape-radius-l);pointer-events:none}#button:disabled{cursor:unset;pointer-events:none;color:var(--sinch-color-border-default);--sinch-color-icon:var(--sinch-color-border-default)}:host([data-checked]) #button{color:var(--sinch-color-tropical-500);--sinch-color-icon:var(--sinch-color-tropical-500)}:host([data-checked]) #button::after{content:"";position:absolute;left:4px;right:4px;bottom:-1px;pointer-events:none;border-top:2px solid var(--sinch-color-tropical-500)}#text{flex-shrink:1;flex-basis:auto;min-width:0}::slotted(*){display:block}</style><button id="button"><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text></button>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-tabs-option', class extends NectaryElement {

package/text/index.d.ts

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

package/text/index.js

@@ -1,4 +1,3 @@
-import '../icons/cancel';
 import { defineCustomElement, getBooleanAttribute, updateBooleanAttribute, NectaryElement, getLiteralAttribute, updateLiteralAttribute, isAttrTrue } from '../utils';
 const templateHTML = '<style>:host{display:block;font:var(--sinch-font-text-m);font-style:inherit;font-weight:inherit;text-decoration:inherit}:host([inline]:not([inline=false])){display:inline}:host([type="s"]){font:var(--sinch-font-text-s)}:host([type=xs]){font:var(--sinch-font-text-xs)}:host([type=xxs]){font:var(--sinch-font-text-xxs)}:host([emphasized]:not([emphasized=false])){font-weight:var(--sinch-font-weight-emphasized)}:host([ellipsis]:not([ellipsis=false])){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--sinch-text-white-space:nowrap}</style><slot></slot>';
 import { assertType, typeValues } from './utils';

package/text/types.d.ts

@@ -1,18 +1,30 @@
 import type { TSinchElementReact } from '../types';
 export type TSinchTextType = 'm' | 's' | 'xs' | 'xxs';
 export type TSinchTextElement = HTMLElement & {
+    /** Type */
     type: TSinchTextType;
+    /** Block (“paragraph”, default) or inline (“span”) */
     inline: boolean;
+    /** Emphasized */
     emphasized: boolean;
+    /** Cuts the long text with “…” ellipsis */
     ellipsis: boolean;
+    /** Type */
     setAttribute(name: 'type', value: TSinchTextType): void;
+    /** Block (“paragraph”, default) or inline (“span”) */
     setAttribute(name: 'inline', value: ''): void;
+    /** Emphasized */
     setAttribute(name: 'emphasized', value: ''): void;
+    /** Cuts the long text with “…” ellipsis */
     setAttribute(name: 'ellipsis', value: ''): void;
 };
 export type TSinchTextReact = TSinchElementReact<TSinchTextElement> & {
+    /** Type */
     type: TSinchTextType;
+    /** Block (“paragraph”, default) or inline (“span”) */
     inline?: boolean;
+    /** Emphasized */
     emphasized?: boolean;
+    /** Cuts the long text with “…” ellipsis */
     ellipsis?: boolean;
 };

package/textarea/index.js

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

package/theme/accordion-item.css

@@ -0,0 +1,4 @@
+:root,
+:host {
+  --sinch-accordion-item-icon-dropdown: keyboard_arrow_down;
+}

package/theme/alert.css

@@ -0,0 +1,6 @@
+:root,
+:host {
+  --sinch-alert-icon-info: info;
+  --sinch-alert-icon-warn: report_problem;
+  --sinch-alert-icon-error: report;
+}

package/theme/chat.css

@@ -0,0 +1,9 @@
+:root,
+:host {
+  --sinch-chat-icon-font-variation-settings: "FILL" 0;
+  --sinch-chat-icon-sending: query_builder;
+  --sinch-chat-icon-sent: check;
+  --sinch-chat-icon-received: done_all;
+  --sinch-chat-icon-seen: done_all;
+  --sinch-chat-icon-error: error_outline;
+}

package/theme/chip.css

@@ -58,4 +58,5 @@
   --sinch-chip-color-pumpkin-fg: var(--sinch-color-feedback-warning-contrast);
   --sinch-chip-color-jasper-bg: var(--sinch-color-feedback-invalid-bg);
   --sinch-chip-color-jasper-fg: var(--sinch-color-feedback-invalid-contrast);
+  --sinch-chip-icon-close: cancel;
 }

package/theme/color-menu.css

@@ -0,0 +1,4 @@
+:root,
+:host {
+  --sinch-color-menu-icon-check: check;
+}

package/theme/date-picker.css

@@ -0,0 +1,7 @@
+:root,
+:host {
+  --sinch-date-picker-icon-prev-month: keyboard_arrow_left;
+  --sinch-date-picker-icon-next-month: keyboard_arrow_right;
+  --sinch-date-picker-icon-prev-year: keyboard_double_arrow_left;
+  --sinch-date-picker-icon-next-year: keyboard_double_arrow_right;
+}

package/theme/dialog.css

@@ -0,0 +1,4 @@
+:root,
+:host {
+  --sinch-dialog-icon-close: close;
+}

package/theme/emoji-picker.css

@@ -0,0 +1,13 @@
+:root,
+:host {
+  --sinch-emoji-picker-icon-font-variation-settings: "FILL" 0;
+  --sinch-emoji-picker-icon-search: search;
+  --sinch-emoji-picker-icon-emoji-emotions: sentiment_satisfied;
+  --sinch-emoji-picker-icon-emoji-people: emoji_people;
+  --sinch-emoji-picker-icon-emoji-animals-nature: pets;
+  --sinch-emoji-picker-icon-emoji-food-drinks: emoji_food_beverage;
+  --sinch-emoji-picker-icon-emoji-travel-places: emoji_transportation;
+  --sinch-emoji-picker-icon-emoji-sports-activities: sports_tennis;
+  --sinch-emoji-picker-icon-emoji-objects: emoji_objects;
+  --sinch-emoji-picker-icon-emoji-symbols-flags: emoji_symbols;
+}

package/theme/file-status.css

@@ -0,0 +1,7 @@
+:root,
+:host {
+  --sinch-file-status-icon-pending: pending_actions;
+  --sinch-file-status-icon-progress: text_snippet;
+  --sinch-file-status-icon-success: check_circle;
+  --sinch-file-status-icon-error: report;
+}

package/theme/fonts.css

@@ -76,10 +76,11 @@
 }
 
 @font-face {
-  font-family: "Material Icons Outlined";
+  font-family: "Material Icons";
   font-style: normal;
   font-weight: 400;
+  font-display: block;
   src:
-    url("https://fonts.gstatic.com/s/materialsymbolsoutlined/v63/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOejbd5zrDAt.woff2") format("woff2"),
-    url("https://fonts.gstatic.com/s/materialsymbolsoutlined/v63/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOelbd5zrDAt.woff") format("woff");
+    local("MaterialSymbolsRounded24pt-Regular"),
+    url("https://fonts.gstatic.com/s/materialsymbolsrounded/v76/syl7-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvLgyidOK7BDB_Qb9vUdV6_gjDK-P3JuF_Zs-obHph2-jOcZTKPq8a9A5M.woff2") format("woff2");
 }

package/theme/help-tooltip.css

@@ -0,0 +1,5 @@
+:root,
+:host {
+  --sinch-help-tooltip-icon-font-variation-settings: "FILL" 0;
+  --sinch-help-tooltip-icon-help: help;
+}

package/theme/horizontal-stepper.css

@@ -0,0 +1,5 @@
+:root,
+:host {
+  --sinch-horizontal-stepper-icon-success: check;
+  --sinch-horizontal-stepper-icon-error: exclamation;
+}

package/theme/icon.css

@@ -1,6 +1,6 @@
 :root,
 :host {
-  --sinch-icon-font-family: "Material Icons Outlined";
+  --sinch-icon-font-family: "Material Icons";
   --sinch-icon-font-variation-settings: "FILL" 1;
   --sinch-icon-font-feature-settings: "liga";
   --sinch-icon-font-weight: 400;

package/theme/index.d.ts

@@ -6,16 +6,34 @@ import './typography.css';
 import './shapes.css';
 import './elevation.css';
 import './size.css';
+import './accordion-item.css';
+import './alert.css';
 import './avatar.css';
 import './badge.css';
+import './button.css';
+import './chat.css';
 import './chip.css';
+import './color-menu.css';
 import './color-swatch.css';
-import './tag.css';
+import './date-picker.css';
+import './dialog.css';
+import './emoji-picker.css';
 import './emoji.css';
-import './icon.css';
+import './file-status.css';
 import './flag.css';
-import './button.css';
+import './help-tooltip.css';
+import './horizontal-stepper.css';
 import './icon-button.css';
+import './icon.css';
+import './inline-alert.css';
 import './input.css';
-import './spinner.css';
+import './link.css';
+import './pagination.css';
+import './segment.css';
 import './select-button.css';
+import './select-menu.css';
+import './spinner.css';
+import './tag.css';
+import './time-picker.css';
+import './toast.css';
+import './vertical-stepper.css';

package/theme/index.js

@@ -6,16 +6,34 @@ import './typography.css';
 import './shapes.css';
 import './elevation.css';
 import './size.css';
+import './accordion-item.css';
+import './alert.css';
 import './avatar.css';
 import './badge.css';
+import './button.css';
+import './chat.css';
 import './chip.css';
+import './color-menu.css';
 import './color-swatch.css';
-import './tag.css';
+import './date-picker.css';
+import './dialog.css';
+import './emoji-picker.css';
 import './emoji.css';
-import './icon.css';
+import './file-status.css';
 import './flag.css';
-import './button.css';
+import './help-tooltip.css';
+import './horizontal-stepper.css';
 import './icon-button.css';
+import './icon.css';
+import './inline-alert.css';
 import './input.css';
+import './link.css';
+import './pagination.css';
+import './segment.css';
+import './select-button.css';
+import './select-menu.css';
 import './spinner.css';
-import './select-button.css';
+import './tag.css';
+import './time-picker.css';
+import './toast.css';
+import './vertical-stepper.css';

package/theme/inline-alert.css

@@ -0,0 +1,7 @@
+:root,
+:host {
+  --sinch-inline-alert-icon-info: info;
+  --sinch-inline-alert-icon-success: check_circle;
+  --sinch-inline-alert-icon-warn: report_problem;
+  --sinch-inline-alert-icon-error: report;
+}

package/theme/input.css

@@ -4,4 +4,7 @@
   --sinch-input-icon-size-l: 24px;
   --sinch-input-icon-size-m: 24px;
   --sinch-input-icon-size-s: 16px;
+
+  /* Icon name */
+  --sinch-input-icon-clear: close;
 }

package/theme/link.css

@@ -0,0 +1,5 @@
+:root,
+:host {
+  --sinch-link-icon-standalone: arrow_forward;
+  --sinch-link-icon-external: open_in_new;
+}

package/theme/pagination.css

@@ -0,0 +1,5 @@
+:root,
+:host {
+  --sinch-pagination-icon-prev: keyboard_arrow_left;
+  --sinch-pagination-icon-next: keyboard_arrow_right;
+}

package/theme/segment.css

@@ -0,0 +1,4 @@
+:root,
+:host {
+  --sinch-segment-icon-dropdown: keyboard_arrow_down;
+}

package/theme/select-button.css

@@ -4,4 +4,7 @@
   --sinch-select-button-icon-size-l: 24px;
   --sinch-select-button-icon-size-m: 24px;
   --sinch-select-button-icon-size-s: 24px;
+
+  /* Icon name */
+  --sinch-select-button-icon-dropdown: keyboard_arrow_down;
 }

package/theme/select-menu.css

@@ -0,0 +1,6 @@
+:root,
+:host {
+  /* Icon name */
+  --sinch-select-menu-icon-search: search;
+  --sinch-select-menu-icon-check: check;
+}

package/theme/time-picker.css

@@ -0,0 +1,4 @@
+:root,
+:host {
+  --sinch-time-picker-icon-submit: done;
+}

package/theme/toast.css

@@ -0,0 +1,7 @@
+:root,
+:host {
+  --sinch-toast-icon-info: info;
+  --sinch-toast-icon-success: check_circle;
+  --sinch-toast-icon-warn: report_problem;
+  --sinch-toast-icon-error: report;
+}

package/theme/vertical-stepper.css

@@ -0,0 +1,5 @@
+:root,
+:host {
+  --sinch-vertical-stepper-icon-success: check;
+  --sinch-vertical-stepper-icon-error: exclamation;
+}

package/time-picker/index.d.ts

@@ -1,5 +1,5 @@
 import '../icon-button';
-import '../icons/done';
+import '../icon';
 import '../segmented-control';
 import '../segmented-control-option';
 import type { TSinchTimePickerElement, TSinchTimePickerReact } from './types';

package/time-picker/index.js

@@ -1,9 +1,9 @@
 import '../icon-button';
-import '../icons/done';
+import '../icon';
 import '../segmented-control';
 import '../segmented-control-option';
-import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, getRect, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;width:248px;padding:16px;box-sizing:border-box;gap:16px}#header{position:relative;width:100%;height:48px;font:var(--sinch-font-title-xl);line-height:48px;user-select:none}#footer{display:flex;justify-content:center;width:100%;height:32px}#picker{position:relative;width:216px;height:216px;border-radius:50%;box-sizing:border-box;border:1px solid var(--sinch-color-stormy-500)}#picker-hours,#picker-minutes{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;pointer-events:none;user-select:none}.digit-hour-12,.digit-hour-24,.digit-minute{position:absolute;width:28px;height:28px;font:var(--sinch-font-text-s);line-height:28px;text-align:center;color:var(--sinch-color-text-default);top:calc(50% - 14px);left:calc(50% - 14px);z-index:1;cursor:pointer}.digit-hour-24{font:var(--sinch-font-text-xs);line-height:28px;color:var(--sinch-color-text-muted)}.digit-minute{font:var(--sinch-font-text-xs);line-height:28px;color:var(--sinch-color-text-muted)}.digit-hour-12:hover,.digit-hour-24:hover,.digit-minute:hover{color:var(--sinch-color-tropical-500)}.digit-hour-12.selected,.digit-hour-24.selected,.digit-minute.selected{color:var(--sinch-color-tropical-500)}.digit-hour-12.selected{font-size:16px}.digit-hour-24.selected{font-size:16px}.digit-minute.selected{font-size:16px}#picker-touch{position:absolute;left:0;top:0;width:100%;height:100%;cursor:pointer;border-radius:50%}#needle-hour,#needle-minute,#picker-touch::after{background-color:var(--sinch-color-stormy-500)}#needle-hour,#needle-minute{position:absolute;transform-origin:bottom center;transform:rotate(0);bottom:50%;height:50px;transition-duration:.25s;transition-timing-function:ease-in-out;transition-property:transform height;z-index:2;outline:0}@media (prefers-reduced-motion){#needle-hour,#needle-minute{transition:none}}#needle-hour{width:4px;left:calc(50% - 2px);border-radius:2px}#needle-minute{width:2px;left:calc(50% - 1px);border-radius:1px}#needle-hour:focus-visible,#needle-minute:focus-visible{background-color:var(--sinch-color-tropical-500)}#needle-minute:not(.selected)::after{content:"";position:absolute;transform:translateX(-50%);left:0;top:-16px;width:4px;height:4px;border-radius:50%;background-color:var(--sinch-color-tropical-500)}#picker-touch::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%)}#header-hours,#header-minutes{position:absolute;padding:0 4px;width:50px;outline:0;--sinch-size-icon:24px}#header-hours{right:calc(50% + 8px);text-align:right}#header-minutes{left:calc(50% + 8px)}#header-colon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}#submit{position:absolute;right:0;top:50%;transform:translateY(-50%)}:host([ampm]) .digit-hour-24{display:none}:host(:not([ampm])) #footer{display:none}</style><div id="wrapper"><div id="header"><div id="header-hours" role="meter" aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="0"><span>00</span></div><div id="header-colon">&colon;</div><div id="header-minutes" role="meter" aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="0"><span>00</span></div><sinch-icon-button id="submit" size="s" aria-label="Submit"><sinch-icon-done slot="icon"></sinch-icon-done></sinch-icon-button></div><div id="picker" aria-hidden="true"><div id="picker-hours"></div><div id="picker-minutes"></div><div id="picker-touch"><div id="needle-hour" tabindex="0"></div><div id="needle-minute" tabindex="0"></div></div></div><div id="footer"><sinch-segmented-control id="ampm"><sinch-segmented-control-option value="am" text="AM" aria-label="AM"></sinch-segmented-control-option><sinch-segmented-control-option value="pm" text="PM" aria-label="PM"></sinch-segmented-control-option></sinch-segmented-control></div></div>';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getCssVar, getReactEventHandler, getRect, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;width:248px;padding:16px;box-sizing:border-box;gap:16px}#header{position:relative;width:100%;height:48px;font:var(--sinch-font-title-xl);line-height:48px;user-select:none}#footer{display:flex;justify-content:center;width:100%;height:32px}#picker{position:relative;width:216px;height:216px;border-radius:50%;box-sizing:border-box;border:1px solid var(--sinch-color-stormy-500)}#picker-hours,#picker-minutes{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;pointer-events:none;user-select:none}.digit-hour-12,.digit-hour-24,.digit-minute{position:absolute;width:28px;height:28px;font:var(--sinch-font-text-s);line-height:28px;text-align:center;color:var(--sinch-color-text-default);top:calc(50% - 14px);left:calc(50% - 14px);z-index:1;cursor:pointer}.digit-hour-24{font:var(--sinch-font-text-xs);line-height:28px;color:var(--sinch-color-text-muted)}.digit-minute{font:var(--sinch-font-text-xs);line-height:28px;color:var(--sinch-color-text-muted)}.digit-hour-12:hover,.digit-hour-24:hover,.digit-minute:hover{color:var(--sinch-color-tropical-500)}.digit-hour-12.selected,.digit-hour-24.selected,.digit-minute.selected{color:var(--sinch-color-tropical-500)}.digit-hour-12.selected{font-size:16px}.digit-hour-24.selected{font-size:16px}.digit-minute.selected{font-size:16px}#picker-touch{position:absolute;left:0;top:0;width:100%;height:100%;cursor:pointer;border-radius:50%}#needle-hour,#needle-minute,#picker-touch::after{background-color:var(--sinch-color-stormy-500)}#needle-hour,#needle-minute{position:absolute;transform-origin:bottom center;transform:rotate(0);bottom:50%;height:50px;transition-duration:.25s;transition-timing-function:ease-in-out;transition-property:transform height;z-index:2;outline:0}@media (prefers-reduced-motion){#needle-hour,#needle-minute{transition:none}}#needle-hour{width:4px;left:calc(50% - 2px);border-radius:2px}#needle-minute{width:2px;left:calc(50% - 1px);border-radius:1px}#needle-hour:focus-visible,#needle-minute:focus-visible{background-color:var(--sinch-color-tropical-500)}#needle-minute:not(.selected)::after{content:"";position:absolute;transform:translateX(-50%);left:0;top:-16px;width:4px;height:4px;border-radius:50%;background-color:var(--sinch-color-tropical-500)}#picker-touch::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%)}#header-hours,#header-minutes{position:absolute;padding:0 4px;width:50px;outline:0;--sinch-size-icon:24px}#header-hours{right:calc(50% + 8px);text-align:right}#header-minutes{left:calc(50% + 8px)}#header-colon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}#submit{position:absolute;right:0;top:50%;transform:translateY(-50%)}:host([ampm]) .digit-hour-24{display:none}:host(:not([ampm])) #footer{display:none}</style><div id="wrapper"><div id="header"><div id="header-hours" role="meter" aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="0"><span>00</span></div><div id="header-colon">&colon;</div><div id="header-minutes" role="meter" aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="0"><span>00</span></div><sinch-icon-button id="submit" size="s" aria-label="Submit"><sinch-icon id="icon-submit" slot="icon"></sinch-icon></sinch-icon-button></div><div id="picker" aria-hidden="true"><div id="picker-hours"></div><div id="picker-minutes"></div><div id="picker-touch"><div id="needle-hour" tabindex="0"></div><div id="needle-minute" tabindex="0"></div></div></div><div id="footer"><sinch-segmented-control id="ampm"><sinch-segmented-control-option value="am" text="AM" aria-label="AM"></sinch-segmented-control-option><sinch-segmented-control-option value="pm" text="PM" aria-label="PM"></sinch-segmented-control-option></sinch-segmented-control></div></div>';
 import { getNeedleRotationDeg, getShortestCssDeg, hourToIndex, parseTime, stringifyHour, stringifyHourFace, stringifyMinute, stringifyTime } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -29,6 +29,7 @@ defineCustomElement('sinch-time-picker', class extends NectaryElement {
   #$headerMinutesText;
   #$ampm;
   #$submitButton;
+  #$iconSubmit;
   #hour = 0;
   #minute = 0;
   #controller = null;
@@ -47,6 +48,7 @@ defineCustomElement('sinch-time-picker', class extends NectaryElement {
     this.#$headerMinutesText = shadowRoot.querySelector('#header-minutes > span');
     this.#$ampm = shadowRoot.querySelector('#ampm');
     this.#$submitButton = shadowRoot.querySelector('#submit');
+    this.#$iconSubmit = shadowRoot.querySelector('#icon-submit');
     this.#$needleMinute.style.height = `${NEEDLE_MINUTE_LENGTH}px`;
     this.#$needleHour.style.height = `${NEEDLE_HOUR_12_LENGTH}px`;
     const MINUTE_DIGIT_RADIUS = MINUTE_RADIUS + MINUTE_DIGIT_SIZE / 2;
@@ -102,6 +104,7 @@ defineCustomElement('sinch-time-picker', class extends NectaryElement {
     this.#$needleHour.addEventListener('keydown', this.#onHoursKeydown, options);
     this.#$needleMinute.addEventListener('keydown', this.#onMinutesKeydown, options);
     this.addEventListener('-change', this.#onChangeReactHandler, options);
+    updateAttribute(this.#$iconSubmit, 'name', getCssVar(this, '--sinch-time-picker-icon-submit'));
   }
   disconnectedCallback() {
     this.#controller.abort();

package/title/index.d.ts

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

package/title/index.js

@@ -1,4 +1,3 @@
-import '../icons/cancel';
 import { defineCustomElement, getAttribute, updateAttribute, updateLiteralAttribute, getLiteralAttribute, NectaryElement, updateBooleanAttribute, getBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block}#text{letter-spacing:-2%}:host([type=xl]) #text{font:var(--sinch-font-title-xl)}:host([type="l"]) #text{font:var(--sinch-font-title-l)}:host([type="m"]) #text{font:var(--sinch-font-title-m)}:host([type="s"]) #text{font:var(--sinch-font-title-s)}:host([type=xs]) #text{font:var(--sinch-font-title-xs)}:host([ellipsis]:not([ellipsis=false])) #text{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}</style><span id="text"></span>';
 import { assertLevel, assertType, typeValues } from './utils';