@nectary/components 0.44.0 → 0.45.0

package/emoji-picker/index.js

@@ -15,9 +15,9 @@ import '../icons/emoji-objects';
 import '../icons/emoji-transportation';
 import '../icons/emoji-events';
 import '../icons/emoji-symbols';
-import { defineCustomElement, dispatchContextConnectEvent, dispatchContextDisconnectEvent, getAttribute, getBooleanAttribute, NectaryElement, updateAttribute, updateBooleanAttribute, getReactEventHandler, getRect } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, NectaryElement, updateAttribute, updateBooleanAttribute, getReactEventHandler, getRect, subscribeContext } 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}</style><div id="wrapper"><div id="toolbar"><sinch-input id="input" 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" 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></div>';
+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}</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></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 groupLabels = ['Emotions', 'People', 'Animals and nature', 'Food and drinks', 'Travel and places', 'Sports and activities', 'Objects', 'Symbols and flags'];
 const data = dataJson;
@@ -61,9 +61,6 @@ defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
     this.addEventListener('keydown', this.#onListboxKeyDown, {
       signal
     });
-    this.addEventListener('-keydown', this.#onContexKeydown, {
-      signal
-    });
     this.#$skinButton.addEventListener('-click', this.#onSkinButtonClick, {
       signal
     });
@@ -79,17 +76,12 @@ defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
     this.addEventListener('-change', this.#onChangeReactHandler, {
       signal
     });
-    this.addEventListener('-visibility', this.#onContextVisibility, {
-      signal
-    });
-    dispatchContextConnectEvent(this, 'keydown');
-    dispatchContextConnectEvent(this, 'visibility');
+    subscribeContext(this, 'keydown', this.#onContextKeyDown, signal);
+    subscribeContext(this, 'visibility', this.#onContextVisibility, signal);
     this.#updateTabs();
     this.#updateEmojis();
   }
   disconnectedCallback() {
-    dispatchContextDisconnectEvent(this, 'keydown');
-    dispatchContextDisconnectEvent(this, 'visibility');
     this.#controller.abort();
   }
   get skinToneButtonRect() {
@@ -117,7 +109,7 @@ defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
       detail: value
     }));
   };
-  #onContexKeydown = e => {
+  #onContextKeyDown = e => {
     this.#handleKeydown(e.detail);
   };
   #onContextVisibility = e => {
@@ -311,7 +303,7 @@ defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
     el.setAttribute('char', emoji.emoji);
     el.setAttribute('label', emoji.label);
     btn.setAttribute('aria-label', emoji.label);
-    btn.setAttribute('small', '');
+    btn.setAttribute('size', 's');
     btn.setAttribute('data-value', emoji.emoji);
     btn.appendChild(el);
     return btn;

package/field/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getAttribute, getBooleanAttribute, getFirstSlotElement, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{display:flex;flex-direction:column;width:100%}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px;--sinch-color-icon:var(--sinch-color-stormy-500)}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid);line-height:20px;margin-top:2px}#invalid:empty{display:none}#tooltip{align-self:center;margin:0 8px;display:flex}#tooltip.empty{display:none}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])) #top{--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><div id="tooltip"><slot name="tooltip"></slot></div><span id="optional"></span></div><slot name="input"></slot><div id="bottom"><div id="invalid"></div><div id="additional"></div></div></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{display:flex;flex-direction:column;width:100%}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px;--sinch-color-icon:var(--sinch-color-stormy-500)}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-text-s);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-text-xs);color:var(--sinch-color-text-muted);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-font-text-xs);color:var(--sinch-color-text-invalid);line-height:20px;margin-top:2px}#invalid:empty{display:none}#tooltip{align-self:center;margin:0 8px;display:flex}#tooltip.empty{display:none}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])) #top{--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><div id="tooltip"><slot name="tooltip"></slot></div><span id="optional"></span></div><slot name="input"></slot><div id="bottom"><div id="invalid"></div><div id="additional"></div></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-field', class extends NectaryElement {

package/file-status/index.js

@@ -5,7 +5,7 @@ import '../icons/pending-actions';
 import '../icons/text-snippet';
 import '../text';
 import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:12px 16px;box-sizing:border-box;min-height:48px;min-width:148px;background-color:var(--sinch-color-bg-primary-contrast);border-radius:var(--sinch-shape-radius-m)}:host([type=error]) #wrapper{background-color:var(--sinch-color-error-200)}#content-wrapper{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;margin-left:16px;color:var(--sinch-color-stormy-500)}#icon-error,#icon-loading,#icon-pending,#icon-progress,#icon-success{display:none}#action{height:24px}#action ::slotted(*){position:relative;top:50%;transform:translateY(-50%)}:host([type=error]) #icon-error,:host([type=loading]) #icon-loading,:host([type=pending]) #icon-pending,:host([type=progress]) #icon-progress,:host([type=success]) #icon-success{display:block;--sinch-color-icon:var(--sinch-color-stormy-500)}:host([type=success]) #icon-success{--sinch-color-icon:var(--sinch-color-success-500)}:host([type=error]) #icon-error{--sinch-color-icon:var(--sinch-color-error-500)}</style><div id="wrapper"><sinch-spinner id="icon-loading" type="medium"></sinch-spinner><sinch-icon-check-circle id="icon-success"></sinch-icon-check-circle><sinch-icon-report id="icon-error"></sinch-icon-report><sinch-icon-pending-actions id="icon-pending"></sinch-icon-pending-actions><sinch-icon-text-snippet id="icon-progress"></sinch-icon-text-snippet><div id="content-wrapper"><sinch-text id="filename" type="m" ellipsis></sinch-text><slot name="content"></slot></div><div id="action"><slot name="action"></slot></div></div>';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:12px 16px;box-sizing:border-box;min-height:48px;min-width:148px;background-color:var(--sinch-color-bg-primary-contrast);border-radius:var(--sinch-shape-radius-m)}:host([type=error]) #wrapper{background-color:var(--sinch-color-error-200)}#content-wrapper{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;min-height:24px;margin-left:16px;color:var(--sinch-color-stormy-500)}#icon-error,#icon-loading,#icon-pending,#icon-progress,#icon-success{display:none;--sinch-color-icon:var(--sinch-color-stormy-500)}#action{display:flex;gap:4px;height:32px;margin-top:-4px;margin-bottom:-4px}:host([type=error]) #icon-error,:host([type=loading]) #icon-loading,:host([type=pending]) #icon-pending,:host([type=progress]) #icon-progress,:host([type=success]) #icon-success{display:block}:host([type=success]) #icon-success{--sinch-color-icon:var(--sinch-color-success-500)}:host([type=error]) #icon-error{--sinch-color-icon:var(--sinch-color-error-500)}</style><div id="wrapper"><sinch-spinner id="icon-loading" size="m"></sinch-spinner><sinch-icon-check-circle id="icon-success"></sinch-icon-check-circle><sinch-icon-report id="icon-error"></sinch-icon-report><sinch-icon-pending-actions id="icon-pending"></sinch-icon-pending-actions><sinch-icon-text-snippet id="icon-progress"></sinch-icon-text-snippet><div id="content-wrapper"><sinch-text id="filename" type="m" ellipsis></sinch-text><slot name="content"></slot></div><div id="action"><slot name="action"></slot></div></div>';
 import { assertType, typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -48,7 +48,9 @@ defineCustomElement('sinch-file-status', class extends NectaryElement {
     switch (name) {
       case 'type':
         {
-          assertType(newVal);
+          if ('production' !== 'production') {
+            assertType(newVal);
+          }
           break;
         }
       case 'filename':

package/flag/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchFlagElement, TSinchFlagReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-flag': TSinchFlagReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-flag': TSinchFlagElement;
+    }
+}

package/flag/index.js

@@ -0,0 +1,43 @@
+import { defineCustomElement, getAttribute, NectaryElement, updateAttribute } from '../utils';
+const templateHTML = '<style>:host{display:contents}#image{pointer-events:none;width:var(--sinch-size-icon,48px);height:var(--sinch-size-icon,48px);object-fit:contain}</style><img id="image" src="" alt="" loading="lazy"/>';
+import { getFlagUrl } from './utils';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-flag', class extends NectaryElement {
+  #$img;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$img = shadowRoot.querySelector('#image');
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.#updateCode();
+  }
+  static get observedAttributes() {
+    return ['code'];
+  }
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'code':
+        {
+          this.#$img.alt = newVal ?? '';
+          this.#updateCode();
+          break;
+        }
+    }
+  }
+  set code(value) {
+    updateAttribute(this, 'code', value);
+  }
+  get code() {
+    return getAttribute(this, 'code', '');
+  }
+  #updateCode() {
+    if (!this.isConnected) {
+      return;
+    }
+    this.#$img.src = getFlagUrl(this, this.code);
+  }
+});

package/flag/types.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchFlagElement = HTMLElement & {
+    /** Flag country code */
+    code: string;
+    /** Flag country code */
+    setAttribute(code: 'name', value: string): void;
+};
+export declare type TSinchFlagReact = TSinchElementReact<TSinchFlagElement> & {
+    /** Flag country code */
+    code: string;
+};

package/flag/types.js

@@ -0,0 +1 @@
+export {};

package/flag/utils.d.ts

@@ -0,0 +1 @@
+export declare const getFlagUrl: (root: Element, code: string | null) => string;

package/flag/utils.js

@@ -0,0 +1,19 @@
+import { getCssVar } from '../utils';
+
+let flagUrl = null;
+export const getFlagUrl = (root, code) => {
+  if (code === null || code.length === 0) {
+    return '';
+  }
+
+  if (flagUrl === null) {
+    flagUrl = getCssVar(root, '--sinch-flag-src-url');
+    if (flagUrl !== null) {
+      flagUrl = flagUrl.replaceAll('"', '').trim();
+    }
+  }
+  if (flagUrl === null) {
+    return '';
+  }
+  return flagUrl.replace('%s', code);
+};

package/icon/index.js

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

package/icon-button/index.js

@@ -1,20 +1,27 @@
 import '../tooltip';
-import { defineCustomElement, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}button{all:initial;position:relative;display:flex;align-items:center;justify-content:center;width:48px;height:48px;cursor:pointer;contain:size;--sinch-size-icon:24px;--sinch-color-icon:var(--sinch-icon-button-color, var(--sinch-color-stormy-500));--sinch-icon-button-shape-radius:var(--sinch-shape-radius-l)}button::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;border-radius:var(--sinch-icon-button-shape-radius);pointer-events:none;box-sizing:border-box;border:1px solid transparent;background-color:transparent;mix-blend-mode:multiply}button:focus-visible::after{position:absolute;content:"";left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;padding:2px;border:2px solid var(--sinch-color-border-focus);border-radius:calc(var(--sinch-icon-button-shape-radius) + 4px);pointer-events:none}@supports not selector(:focus-visible){button:focus::after{position:absolute;content:"";left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;padding:2px;border:2px solid var(--sinch-color-border-focus);border-radius:calc(var(--sinch-icon-button-shape-radius) + 4px);pointer-events:none}}button:enabled:hover::before{background-color:#f1f2f4}button:enabled:active::before{background-color:#e3e6e8}button:disabled{background-color:transparent;cursor:initial;--sinch-color-spinner-bg:var(--sinch-color-snow-200);--sinch-color-spinner-fg:var(--sinch-color-stormy-200);--sinch-color-icon:var(--sinch-color-stormy-100)}:host([small]:not([small=false])) #button{width:32px;height:32px;--sinch-icon-button-shape-radius:var(--sinch-shape-radius-m)}button>*{pointer-events:none}</style><sinch-tooltip id="tooltip" inverted><button id="button"><slot name="icon"></slot></button></sinch-tooltip>';
+import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, subscribeContext, updateAttribute, updateBooleanAttribute, updateLiteralAttribute, Context, getAttribute } from '../utils';
+import { assertSizeEx, DEFAULT_SIZE, sizeExValues } from '../utils/size';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-size:var(--sinch-size-m);--sinch-size-icon:var(--sinch-icon-button-icon-size-m);--sinch-shape-radius:var(--sinch-shape-radius-m)}#button{all:initial;position:relative;display:flex;align-items:center;justify-content:center;width:var(--sinch-size);height:var(--sinch-size);cursor:pointer;contain:size;--sinch-color-icon:var(--sinch-icon-button-color-icon)}:host([data-size="l"]){--sinch-size:var(--sinch-size-l);--sinch-size-icon:var(--sinch-icon-button-icon-size-l);--sinch-shape-radius:var(--sinch-shape-radius-l)}:host([data-size="m"]){--sinch-size:var(--sinch-size-m);--sinch-size-icon:var(--sinch-icon-button-icon-size-m);--sinch-shape-radius:var(--sinch-shape-radius-m)}:host([data-size="s"]){--sinch-size:var(--sinch-size-s);--sinch-size-icon:var(--sinch-icon-button-icon-size-s);--sinch-shape-radius:var(--sinch-shape-radius-s)}:host([data-size=xs]){--sinch-size:var(--sinch-size-xs);--sinch-size-icon:var(--sinch-icon-button-icon-size-xs);--sinch-shape-radius:var(--sinch-shape-radius-xs)}:host([type=primary]){--sinch-icon-button-color-background:var(--sinch-icon-button-primary-color-background);--sinch-icon-button-color-background-hover:var(--sinch-icon-button-primary-color-background-hover);--sinch-icon-button-color-background-active:var(--sinch-icon-button-primary-color-background-active);--sinch-icon-button-color-background-disabled:var(--sinch-icon-button-primary-color-background-disabled);--sinch-icon-button-color-border:var(--sinch-icon-button-primary-color-border);--sinch-icon-button-color-border-hover:var(--sinch-icon-button-primary-color-border-hover);--sinch-icon-button-color-border-active:var(--sinch-icon-button-primary-color-border-active);--sinch-icon-button-color-border-disabled:var(--sinch-icon-button-primary-color-border-disabled);--sinch-icon-button-color-icon:var(--sinch-icon-button-primary-color-icon);--sinch-icon-button-color-icon-hover:var(--sinch-icon-button-primary-color-icon-hover);--sinch-icon-button-color-icon-active:var(--sinch-icon-button-primary-color-icon-active);--sinch-icon-button-color-icon-disabled:var(--sinch-icon-button-primary-color-icon-disabled);--sinch-icon-button-mix-blend-mode:var(--sinch-icon-button-primary-mix-blend-mode);--sinch-elevation-level:var(--sinch-elevation-level-1)}:host([type=secondary]){--sinch-icon-button-color-background:var(--sinch-icon-button-secondary-color-background);--sinch-icon-button-color-background-hover:var(--sinch-icon-button-secondary-color-background-hover);--sinch-icon-button-color-background-active:var(--sinch-icon-button-secondary-color-background-active);--sinch-icon-button-color-background-disabled:var(--sinch-icon-button-secondary-color-background-disabled);--sinch-icon-button-color-border:var(--sinch-icon-button-secondary-color-border);--sinch-icon-button-color-border-hover:var(--sinch-icon-button-secondary-color-border-hover);--sinch-icon-button-color-border-active:var(--sinch-icon-button-secondary-color-border-active);--sinch-icon-button-color-border-disabled:var(--sinch-icon-button-secondary-color-border-disabled);--sinch-icon-button-color-icon:var(--sinch-icon-button-secondary-color-icon);--sinch-icon-button-color-icon-hover:var(--sinch-icon-button-secondary-color-icon-hover);--sinch-icon-button-color-icon-active:var(--sinch-icon-button-secondary-color-icon-active);--sinch-icon-button-color-icon-disabled:var(--sinch-icon-button-secondary-color-icon-disabled);--sinch-icon-button-mix-blend-mode:var(--sinch-icon-button-secondary-mix-blend-mode);--sinch-elevation-level:var(--sinch-elevation-level-1)}:host([type=tertiary]){--sinch-icon-button-color-background:var(--sinch-icon-button-tertiary-color-background);--sinch-icon-button-color-background-hover:var(--sinch-icon-button-tertiary-color-background-hover);--sinch-icon-button-color-background-active:var(--sinch-icon-button-tertiary-color-background-active);--sinch-icon-button-color-background-disabled:var(--sinch-icon-button-tertiary-color-background-disabled);--sinch-icon-button-color-border:var(--sinch-icon-button-tertiary-color-border);--sinch-icon-button-color-border-hover:var(--sinch-icon-button-tertiary-color-border-hover);--sinch-icon-button-color-border-active:var(--sinch-icon-button-tertiary-color-border-active);--sinch-icon-button-color-border-disabled:var(--sinch-icon-button-tertiary-color-border-disabled);--sinch-icon-button-color-icon:var(--sinch-icon-button-tertiary-color-icon);--sinch-icon-button-color-icon-hover:var(--sinch-icon-button-tertiary-color-icon-hover);--sinch-icon-button-color-icon-active:var(--sinch-icon-button-tertiary-color-icon-active);--sinch-icon-button-color-icon-disabled:var(--sinch-icon-button-tertiary-color-icon-disabled);--sinch-icon-button-mix-blend-mode:var(--sinch-icon-button-tertiary-mix-blend-mode);--sinch-elevation-level:var(--sinch-elevation-level-0)}#button::before{content:"";position:absolute;inset:0;border-radius:var(--sinch-shape-radius);border:1px solid var(--sinch-icon-button-color-border);background-color:var(--sinch-icon-button-color-background);box-shadow:var(--sinch-elevation-level);pointer-events:none;mix-blend-mode:var(--sinch-icon-button-mix-blend-mode)}#button:focus-visible::after{content:"";position:absolute;inset:-3px;border:2px solid var(--sinch-color-border-focus);border-radius:calc(var(--sinch-shape-radius) + 3px);pointer-events:none}#button:disabled{cursor:initial;--sinch-color-icon:var(--sinch-icon-button-color-icon-disabled)}#button:disabled::before{background-color:var(--sinch-icon-button-color-background-disabled);border-color:var(--sinch-icon-button-color-border-disabled);box-shadow:var(--sinch-elevation-level-0)}#button:enabled:hover{--sinch-color-icon:var(--sinch-icon-button-color-icon-hover)}#button:enabled:hover::before{background-color:var(--sinch-icon-button-color-background-hover);border-color:var(--sinch-icon-button-color-border-hover)}#button:enabled:active{--sinch-color-icon:var(--sinch-icon-button-color-icon-active)}#button:enabled:active::before{background-color:var(--sinch-icon-button-color-background-active);border-color:var(--sinch-icon-button-color-border-active);box-shadow:var(--sinch-elevation-level-0)}#content{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%}#button *{pointer-events:none}</style><sinch-tooltip id="tooltip" inverted><button id="button"><div id="content"><slot name="icon"></slot></div></button></sinch-tooltip>';
+import { assertType, typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-icon-button', class extends NectaryElement {
   #$button;
   #$tooltip;
   #controller = null;
+  #sizeContext;
   constructor() {
     super();
-    const shadowRoot = this.attachShadow();
+    const shadowRoot = this.attachShadow({
+      delegatesFocus: true
+    });
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$button = shadowRoot.querySelector('#button');
     this.#$tooltip = shadowRoot.querySelector('#tooltip');
+    this.#sizeContext = new Context(this.#$button, 'size');
   }
   connectedCallback() {
+    super.connectedCallback();
     this.#controller = new AbortController();
     const options = {
       signal: this.#controller.signal
@@ -26,14 +33,21 @@ defineCustomElement('sinch-icon-button', class extends NectaryElement {
     this.addEventListener('-click', this.#onClickReactHandler, options);
     this.addEventListener('-focus', this.#onFocusReactHandler, options);
     this.addEventListener('-blur', this.#onBlurReactHandler, options);
+    subscribeContext(this, 'size', this.#onContextSize, this.#controller.signal);
+    this.#sizeContext.listen(this.#controller.signal);
+    this.#onSizeUpdate();
   }
   disconnectedCallback() {
+    super.disconnectedCallback();
     this.#controller.abort();
   }
   static get observedAttributes() {
-    return ['disabled', 'aria-label'];
+    return ['type', 'size', 'disabled', 'aria-label', 'data-size'];
   }
-  attributeChangedCallback(name, _, newVal) {
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
     switch (name) {
       case 'disabled':
         {
@@ -47,19 +61,45 @@ defineCustomElement('sinch-icon-button', class extends NectaryElement {
           updateAttribute(this.#$tooltip, 'text', newVal);
           break;
         }
+      case 'type':
+        {
+          if ('production' !== 'production') {
+            assertType(newVal);
+          }
+          break;
+        }
+      case 'size':
+        {
+          updateAttribute(this, 'data-size', newVal);
+          break;
+        }
+      case 'data-size':
+        {
+          if ('production' !== 'production') {
+            assertSizeEx(newVal, 'sinch-icon-button');
+          }
+          this.#onSizeUpdate();
+          break;
+        }
     }
   }
+  set type(value) {
+    updateLiteralAttribute(this, typeValues, 'type', value);
+  }
+  get type() {
+    return getLiteralAttribute(this, typeValues, 'type', 'tertiary');
+  }
   set disabled(isDisabled) {
     updateBooleanAttribute(this, 'disabled', isDisabled);
   }
   get disabled() {
     return getBooleanAttribute(this, 'disabled');
   }
-  set small(isSmall) {
-    updateBooleanAttribute(this, 'small', isSmall);
+  set size(size) {
+    updateLiteralAttribute(this, sizeExValues, 'size', size);
   }
-  get small() {
-    return getBooleanAttribute(this, 'small');
+  get size() {
+    return getLiteralAttribute(this, sizeExValues, 'size', DEFAULT_SIZE);
   }
   get tooltipRect() {
     return this.#$tooltip.tooltipRect;
@@ -73,6 +113,34 @@ defineCustomElement('sinch-icon-button', class extends NectaryElement {
   blur() {
     this.#$button.blur();
   }
+  #onSizeUpdate() {
+    if (!this.isConnected) {
+      return;
+    }
+    const size = getAttribute(this, 'data-size', DEFAULT_SIZE);
+    this.#sizeContext.dispatch(size);
+  }
+  #onContextSize = e => {
+    if (this.hasAttribute('size')) {
+      return;
+    }
+    switch (e.detail) {
+      case 'l':
+        {
+          this.setAttribute('data-size', 'm');
+          break;
+        }
+      case 'm':
+        {
+          this.setAttribute('data-size', 's');
+          break;
+        }
+      default:
+        {
+          this.setAttribute('data-size', 'xs');
+        }
+    }
+  };
   #onButtonClick = () => {
     this.dispatchEvent(new CustomEvent('-click'));
   };

package/icon-button/types.d.ts

@@ -1,9 +1,13 @@
 import type { TRect, TSinchElementReact } from '../types';
+import type { TSinchSizeEx } from '../utils/size';
+export declare type TSinchIconButtonType = 'primary' | 'secondary' | 'tertiary';
 export declare type TSinchIconButtonElement = HTMLElement & {
+    /** Type, `tertiary` by default */
+    type: TSinchIconButtonType;
+    /** Size, `m` by default */
+    size: TSinchSizeEx;
     /** Disabled */
     disabled: boolean;
-    /** Small */
-    small: boolean;
     readonly tooltipRect: TRect;
     /** Click event */
     addEventListener(type: '-click', listener: (e: CustomEvent<void>) => void): void;
@@ -11,16 +15,20 @@ export declare type TSinchIconButtonElement = HTMLElement & {
     addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
     /** Blur event */
     addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
+    /** Type, `tertiary` by default */
+    setAttribute(name: 'type', value: string): void;
+    /** Size, `m` by default */
+    setAttribute(name: 'size', value: string): void;
     /** Disabled */
     setAttribute(name: 'disabled', value: ''): void;
-    /** Small */
-    setAttribute(name: 'small', value: ''): void;
 };
 export declare type TSinchIconButtonReact = TSinchElementReact<TSinchIconButtonElement> & {
+    /** Type, `tertiary` by default */
+    type?: TSinchIconButtonType;
+    /** Size, `m` by default */
+    size?: TSinchSizeEx;
     /** Disabled */
     disabled?: boolean;
-    /** Small */
-    small?: boolean;
     /** Label that is used for a11y */
     'aria-label': string;
     /** Click event handler */

package/icon-button/utils.d.ts

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

package/icon-button/utils.js

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

package/icons/create-icon-class.js

@@ -1,5 +1,5 @@
 import { NectaryElement, updateAttribute } from '../utils';
-const iconStylesHtml = '<style>:host{display:inline-block;vertical-align:middle}svg{display:block;pointer-events:none;fill:var(--sinch-color-icon,--sinch-color-text-default);height:var(--sinch-size-icon,24px)}</style>';
+const iconStylesHtml = '<style>:host{display:inline-block;vertical-align:middle}svg{display:block;pointer-events:none;fill:var(--sinch-color-icon,var(--sinch-color-stormy-500));height:var(--sinch-size-icon,24px)}</style>';
 export const createIconClass = templateHTML => {
   const template = document.createElement('template');
   template.innerHTML = iconStylesHtml + templateHTML;

package/inline-alert/index.js

@@ -64,7 +64,9 @@ defineCustomElement('sinch-inline-alert', class extends NectaryElement {
     switch (name) {
       case 'type':
         {
-          assertType(newVal);
+          if ('production' !== 'production') {
+            assertType(newVal);
+          }
           break;
         }
       case 'text':

package/input/index.d.ts

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