@nectary/components 0.44.1 → 0.45.1

package/accordion-item/index.js

@@ -1,6 +1,6 @@
 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);fill:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button:disabled{cursor:initial;color:var(--sinch-color-stormy-100);fill: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-success-500)}:host([status=warn]) #button::before{content:"";background-color:var(--sinch-color-warning-500)}:host([status=error]) #button::before{content:"";background-color:var(--sinch-color-error-500)}:host([status=info]) #button::before{content:"";background-color:var(--sinch-color-informative-500)}#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-body);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-small-text);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>';
+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-success-500)}:host([status=warn]) #button::before{content:"";background-color:var(--sinch-color-warning-500)}:host([status=error]) #button::before{content:"";background-color:var(--sinch-color-error-500)}:host([status=info]) #button::before{content:"";background-color:var(--sinch-color-informative-500)}#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 { statusValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/action-menu/index.js

@@ -1,5 +1,5 @@
 import { isSinchActionMenuOption } from '../action-menu-option/utils';
-import { attrValueToPixels, defineCustomElement, dispatchContextConnectEvent, dispatchContextDisconnectEvent, getBooleanAttribute, getIntegerAttribute, NectaryElement, updateBooleanAttribute, updateIntegerAttribute } from '../utils';
+import { attrValueToPixels, defineCustomElement, getBooleanAttribute, getIntegerAttribute, NectaryElement, subscribeContext, updateBooleanAttribute, updateIntegerAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0}#listbox{overflow-y:auto}</style><div id="listbox" role="presentation"><slot></slot></div>';
 const ITEM_HEIGHT = 40;
 const template = document.createElement('template');
@@ -22,12 +22,6 @@ defineCustomElement('sinch-action-menu', class extends NectaryElement {
     } = this.#controller;
     this.setAttribute('role', 'listbox');
     this.setAttribute('tabindex', '0');
-    this.addEventListener('-keydown', this.#onContextKeyDown, {
-      signal
-    });
-    this.addEventListener('-visibility', this.#onContextVisibility, {
-      signal
-    });
     this.addEventListener('keydown', this.#onListboxKeyDown, {
       signal
     });
@@ -37,12 +31,10 @@ defineCustomElement('sinch-action-menu', class extends NectaryElement {
     this.#$listbox.addEventListener('click', this.#onListboxClick, {
       signal
     });
-    dispatchContextConnectEvent(this, 'keydown');
-    dispatchContextConnectEvent(this, 'visibility');
+    subscribeContext(this, 'keydown', this.#onContextKeyDown, signal);
+    subscribeContext(this, 'visibility', this.#onContextVisibility, signal);
   }
   disconnectedCallback() {
-    dispatchContextDisconnectEvent(this, 'keydown');
-    dispatchContextDisconnectEvent(this, 'visibility');
     this.#controller.abort();
   }
   static get observedAttributes() {

package/alert/index.js

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

package/avatar/index.js

@@ -1,13 +1,13 @@
 import { defineCustomElement, getAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:40px;height:40px;background-color:var(--sinch-color-snow-100);border-radius:50%;--sinch-avatar-badge-size:16px;--sinch-avatar-badge-font:700 12px/14px "Gilroy","Arial","sans-serif"}#circle{position:relative;width:calc(100% - 2px);height:calc(100% - 2px);left:1px;top:1px;border-radius:50%;-webkit-mask:linear-gradient(#fff,#000);mask:linear-gradient(#fff,#000);background-color:var(--sinch-avatar-color-default-bg);color:var(--sinch-avatar-color-default-fg)}#text{display:block;width:100%;height:100%;font:var(--sinch-font-title-s);line-height:38px;text-transform:uppercase;text-align:center}:host([size="l"]) #wrapper{width:56px;height:56px;--sinch-avatar-badge-size:20px;--sinch-avatar-badge-font:700 12px/18px "Gilroy","Arial","sans-serif"}:host([size="l"]) #text{font:var(--sinch-font-title-m);line-height:54px}:host([size="s"]) #wrapper{width:24px;height:24px;--sinch-avatar-badge-size:11px;--sinch-avatar-badge-font:500 8px/9px "Gilroy","Arial","sans-serif"}:host([size="s"]) #text{font:var(--sinch-font-extra-small-text);line-height:22px}#image{display:none;position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain}:host([src]:not([src=""])) #image{display:block}#status-wrapper{position:absolute;left:calc(85% - 5px);top:calc(85% - 5px);width:10px;height:10px;padding:1px;box-sizing:border-box;border-radius:50%;background-color:var(--sinch-color-snow-100);display:none;pointer-events:none}#status{width:8px;height:8px;border-radius:50%}:host([status=away]) #status-wrapper,:host([status=busy]) #status-wrapper,:host([status=offline]) #status-wrapper,:host([status=online]) #status-wrapper{display:block}:host([status=online]) #status{background-color:var(--sinch-avatar-status-color-online)}:host([status=away]) #status{background-color:var(--sinch-avatar-status-color-away)}:host([status=busy]) #status{background-color:var(--sinch-avatar-status-color-busy)}:host([status=offline]) #status{background-color:var(--sinch-avatar-status-color-offline)}</style><div id="wrapper"><div id="circle"><span id="text"></span><img id="image" alt=""/></div><div id="status-wrapper"><div id="status"></div></div></div>';
-import { assertAvatarColor, assertSize, assertStatus, getAvatarColorBg, getAvatarColorFg, sizeValues, statusValues } from './utils';
+import { assertSize, DEFAULT_SIZE, sizeValues } from '../utils/size';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:40px;height:40px;background-color:var(--sinch-color-snow-100);border-radius:50%}#circle{position:relative;width:calc(100% - 2px);height:calc(100% - 2px);left:1px;top:1px;border-radius:50%;-webkit-mask:linear-gradient(#fff,#000);mask:linear-gradient(#fff,#000);background-color:var(--sinch-avatar-color-default-bg);color:var(--sinch-avatar-color-default-fg)}#text{display:block;width:100%;height:100%;font:var(--sinch-font-title-s);line-height:38px;text-transform:uppercase;text-align:center}:host([size="l"]) #wrapper{width:56px;height:56px}:host([size="l"]) #text{font:var(--sinch-font-title-m);line-height:54px}:host([size="s"]) #wrapper{width:24px;height:24px}:host([size="s"]) #text{font:var(--sinch-font-text-xs);line-height:22px}#image{display:none;position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain}:host([src]:not([src=""])) #image{display:block}#status-wrapper{position:absolute;left:calc(85% - 5px);top:calc(85% - 5px);width:10px;height:10px;padding:1px;box-sizing:border-box;border-radius:50%;background-color:var(--sinch-color-snow-100);display:none;pointer-events:none}#status{width:8px;height:8px;border-radius:50%}:host([status=away]) #status-wrapper,:host([status=busy]) #status-wrapper,:host([status=offline]) #status-wrapper,:host([status=online]) #status-wrapper{display:block}:host([status=online]) #status{background-color:var(--sinch-avatar-status-color-online)}:host([status=away]) #status{background-color:var(--sinch-avatar-status-color-away)}:host([status=busy]) #status{background-color:var(--sinch-avatar-status-color-busy)}:host([status=offline]) #status{background-color:var(--sinch-avatar-status-color-offline)}</style><div id="wrapper"><div id="circle"><span id="text"></span><img id="image" alt=""/></div><div id="status-wrapper"><div id="status"></div></div></div>';
+import { assertAvatarColor, assertStatus, getAvatarColorBg, getAvatarColorFg, statusValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-avatar', class extends NectaryElement {
   #$circle;
   #$text;
   #$image;
-  #isConnected = false;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -17,12 +17,9 @@ defineCustomElement('sinch-avatar', class extends NectaryElement {
     this.#$image = shadowRoot.querySelector('#image');
   }
   connectedCallback() {
-    this.#isConnected = true;
+    super.connectedCallback();
     this.#updateColor();
   }
-  disconnectedCallback() {
-    this.#isConnected = false;
-  }
   get src() {
     return getAttribute(this, 'src');
   }
@@ -42,7 +39,7 @@ defineCustomElement('sinch-avatar', class extends NectaryElement {
     updateAttribute(this, 'color', value);
   }
   get size() {
-    return getLiteralAttribute(this, sizeValues, 'size', 'm');
+    return getLiteralAttribute(this, sizeValues, 'size', DEFAULT_SIZE);
   }
   set size(value) {
     updateLiteralAttribute(this, sizeValues, 'size', value);
@@ -71,14 +68,14 @@ defineCustomElement('sinch-avatar', class extends NectaryElement {
         }
       case 'size':
         {
-          if (newVal !== null) {
-            assertSize(newVal);
+          if ('production' !== 'production') {
+            assertSize(newVal, 'sinch-avatar');
           }
           break;
         }
       case 'status':
         {
-          if (newVal !== null) {
+          if ('production' !== 'production') {
             assertStatus(newVal);
           }
           break;
@@ -90,12 +87,14 @@ defineCustomElement('sinch-avatar', class extends NectaryElement {
     }
   }
   #updateColor() {
-    if (!this.#isConnected) {
+    if (!this.isConnected) {
       return;
     }
     const colorName = this.color;
     if (colorName !== null && colorName.length > 0) {
-      assertAvatarColor(this, colorName);
+      if ('production' !== 'production') {
+        assertAvatarColor(this, colorName);
+      }
       const bg = getAvatarColorBg(colorName);
       const fg = getAvatarColorFg(colorName);
       this.#$circle.style.setProperty('background-color', bg);

package/avatar/types.d.ts

@@ -1,5 +1,5 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchAvatarSize = 'l' | 'm' | 's';
+import type { TSinchSize } from '../utils/size';
 export declare type TSinchAvatarStatus = 'online' | 'busy' | 'away' | 'offline';
 export declare type TSinchAvatarElement = HTMLElement & {
     /** Image source */
@@ -11,7 +11,7 @@ export declare type TSinchAvatarElement = HTMLElement & {
     /** Status */
     status: TSinchAvatarStatus | null;
     /** Size, `m` by default */
-    size: TSinchAvatarSize;
+    size: TSinchSize;
     /** Image source */
     setAttribute(name: 'src', value: string): void;
     /** Alt text */
@@ -19,7 +19,7 @@ export declare type TSinchAvatarElement = HTMLElement & {
     /** Background color */
     setAttribute(name: 'color', value: string): void;
     /** Size, `m` by default */
-    setAttribute(name: 'size', value: TSinchAvatarSize): void;
+    setAttribute(name: 'size', value: TSinchSize): void;
     /** Status */
     setAttribute(name: 'status', value: TSinchAvatarStatus): void;
 };
@@ -31,7 +31,7 @@ export declare type TSinchAvatarReact = TSinchElementReact<TSinchAvatarElement>
     /** Background color */
     color?: string;
     /** Size, `m` by default */
-    size?: TSinchAvatarSize;
+    size?: TSinchSize;
     /** Status */
     status?: TSinchAvatarStatus;
 };

package/avatar/utils.d.ts

@@ -1,8 +1,5 @@
-import type { TSinchAvatarSize, TSinchAvatarStatus } from './types';
-export declare const sizeValues: readonly TSinchAvatarSize[];
+import type { TSinchAvatarStatus } from './types';
 export declare const statusValues: readonly TSinchAvatarStatus[];
-declare type TAssertSize = (value: string | null) => asserts value is TSinchAvatarSize;
-export declare const assertSize: TAssertSize;
 declare type TAssertStatus = (value: string | null) => asserts value is TSinchAvatarStatus;
 export declare const assertStatus: TAssertStatus;
 export declare const getAvatarColorBg: (id: string) => string;

package/avatar/utils.js

@@ -1,12 +1,9 @@
-export const sizeValues = ['l', 'm', 's'];
 export const statusValues = ['online', 'busy', 'away', 'offline'];
-export const assertSize = value => {
-  if (value === null || !sizeValues.includes(value)) {
-    throw new Error(`sinch-avatar: invalid size attribute: ${value}`);
-  }
-};
 export const assertStatus = value => {
-  if (value === null || !statusValues.includes(value)) {
+  if (value === null || value.length === 0) {
+    return;
+  }
+  if (!statusValues.includes(value)) {
     throw new Error(`sinch-avatar: invalid status attribute: ${value}`);
   }
 };

package/badge/index.js

@@ -1,13 +1,13 @@
 import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getRect, NectaryElement, setClass, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
+import { assertSize, DEFAULT_SIZE, sizeValues } from '../utils/size';
 const templateHTML = '<style>:host{display:inline-flex;flex-direction:column;position:relative}#badge-wrapper{position:absolute;left:0;top:0;width:fit-content;border-radius:11px;padding:1px;pointer-events:none;background-color:var(--sinch-color-snow-100)}#badge{box-sizing:border-box;color:var(--sinch-badge-color-default-fg);background-color:var(--sinch-badge-color-default-bg);width:20px;height:20px;border-radius:10px}#badge.long{width:fit-content;padding:0 5px}#text{display:block;width:100%;height:100%;text-align:center;font-family:var(--sinch-font-mono-family);font-weight:400;font-size:14px;line-height:20px;text-rendering:optimizelegibility}:host([size="m"]) #badge-wrapper{left:calc(100% - 8px);top:-8px}:host([size="m"]) #badge{width:14px;height:14px}:host([size="m"]) #badge.long{width:fit-content;padding:0 3px}:host([size="m"]) #text{font-size:12px;line-height:14px}:host([size="s"]) #badge{width:8px;height:8px;padding:0}:host([size="s"]) #text{display:none}:host([hidden]:not([hidden=false])) #badge-wrapper{display:none}</style><slot id="slot"></slot><div id="badge-wrapper"><div id="badge"><span id="text"></span></div></div>';
-import { assertBadgeColor, assertMode, assertSize, getBadgeColorBg, getBadgeColorFg, modeValues, sizeValues } from './utils';
+import { assertBadgeColor, assertMode, getBadgeColorBg, getBadgeColorFg, modeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-badge', class extends NectaryElement {
   #$badgeWrapper;
   #$badge;
   #$text;
-  #isConnected = false;
   #observer;
   constructor() {
     super();
@@ -19,13 +19,13 @@ defineCustomElement('sinch-badge', class extends NectaryElement {
     this.#observer = new ResizeObserver(this.#onResize);
   }
   connectedCallback() {
-    this.#isConnected = true;
+    super.connectedCallback();
     this.#updateColor();
     this.#observer.observe(this);
   }
   disconnectedCallback() {
+    super.disconnectedCallback();
     this.#observer.unobserve(this);
-    this.#isConnected = false;
   }
   get text() {
     return getAttribute(this, 'text', '');
@@ -34,7 +34,7 @@ defineCustomElement('sinch-badge', class extends NectaryElement {
     updateAttribute(this, 'text', value);
   }
   get size() {
-    return getLiteralAttribute(this, sizeValues, 'size', 'm');
+    return getLiteralAttribute(this, sizeValues, 'size', DEFAULT_SIZE);
   }
   set size(value) {
     updateLiteralAttribute(this, sizeValues, 'size', value);
@@ -82,7 +82,9 @@ defineCustomElement('sinch-badge', class extends NectaryElement {
         }
       case 'size':
         {
-          assertSize(newVal);
+          if ('production' !== 'production') {
+            assertSize(newVal, 'sinch-badge');
+          }
           this.#updatePosition();
           break;
         }
@@ -105,7 +107,7 @@ defineCustomElement('sinch-badge', class extends NectaryElement {
     }
   }
   #updateColor() {
-    if (!this.#isConnected) {
+    if (!this.isConnected) {
       return;
     }
     const colorName = this.color;

package/badge/types.d.ts

@@ -1,11 +1,11 @@
 import type { TRect, TSinchElementReact } from '../types';
-export declare type TSinchBadgeSize = 'l' | 'm' | 's';
+import type { TSinchSize } from '../utils/size';
 export declare type TSinchBadgeMode = 'square' | 'circle';
 export declare type TSinchBadgeElement = HTMLElement & {
     /** Text */
     text: string;
     /** Size */
-    size: TSinchBadgeSize;
+    size: TSinchSize;
     /** Mode, `square` by default */
     mode: TSinchBadgeMode;
     /** Color */
@@ -16,7 +16,7 @@ export declare type TSinchBadgeElement = HTMLElement & {
     /** Text */
     setAttribute(name: 'text', value: string): void;
     /** Size */
-    setAttribute(name: 'size', value: TSinchBadgeSize): void;
+    setAttribute(name: 'size', value: TSinchSize): void;
     /** Mode, `square` by default */
     setAttribute(name: 'mode', value: TSinchBadgeMode): void;
     /** Color */
@@ -28,7 +28,7 @@ export declare type TSinchBadgeReact = TSinchElementReact<TSinchBadgeElement> &
     /** Text */
     text: string;
     /** Size */
-    size: TSinchBadgeSize;
+    size?: TSinchSize;
     /** Mode, `square` by default */
     mode?: TSinchBadgeMode;
     /** Color */

package/badge/utils.d.ts

@@ -1,7 +1,4 @@
-import type { TSinchBadgeMode, TSinchBadgeSize } from './types';
-export declare const sizeValues: readonly TSinchBadgeSize[];
-declare type TAssertSize = (value: string | null) => asserts value is TSinchBadgeSize;
-export declare const assertSize: TAssertSize;
+import type { TSinchBadgeMode } from './types';
 export declare const modeValues: readonly TSinchBadgeMode[];
 declare type TAssertMode = (value: string | null) => asserts value is TSinchBadgeMode;
 export declare const assertMode: TAssertMode;

package/badge/utils.js

@@ -1,9 +1,3 @@
-export const sizeValues = ['l', 'm', 's'];
-export const assertSize = value => {
-  if (value === null || !sizeValues.includes(value)) {
-    throw new Error(`sinch-badge: invalid size attribute: ${value}`);
-  }
-};
 export const modeValues = ['square', 'circle'];
 export const assertMode = value => {
   if (value === null || !modeValues.includes(value)) {

package/button/index.js

@@ -1,37 +1,59 @@
-import { defineCustomElement, getBooleanAttribute, getAttribute, getLiteralAttribute, isAttrTrue, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, getReactEventHandler } from '../utils';
-const templateHTML = '<style>:host{--sinch-button-color-background:var(--sinch-color-tropical-500);--sinch-button-color-background-hover:var(--sinch-color-tropical-400);--sinch-button-color-background-active:var(--sinch-color-tropical-600);--sinch-button-color-background-disabled:var(--sinch-color-tropical-100);--sinch-button-color-border:var(--sinch-color-transparent);--sinch-button-color-border-disabled:var(--sinch-color-transparent);--sinch-button-color-text:var(--sinch-color-snow-100);--sinch-button-color-text-disabled:var(--sinch-color-snow-100);--sinch-button-shape-radius:var(--sinch-shape-radius-l);display:inline-block;vertical-align:middle;outline:0}#button{--sinch-color-icon:var(--sinch-button-color-text);--sinch-color-spinner-bg:var(--sinch-color-tropical-300);--sinch-color-spinner-fg:var(--sinch-color-snow-100)}#button:disabled{--sinch-color-icon:var(--sinch-button-color-text-disabled);--sinch-color-spinner-bg:var(--sinch-color-snow-100);--sinch-color-spinner-fg:var(--sinch-color-tropical-200)}:host([small]:not([small=false])){--sinch-button-shape-radius:var(--sinch-shape-radius-m)}:host([type=secondary]){--sinch-button-color-background:var(--sinch-color-snow-100);--sinch-button-color-background-hover:var(--sinch-color-tropical-100);--sinch-button-color-background-active:var(--sinch-color-tropical-100);--sinch-button-color-background-disabled:var(--sinch-color-snow-100);--sinch-button-color-border:var(--sinch-color-tropical-500);--sinch-button-color-border-disabled:var(--sinch-color-tropical-200);--sinch-button-color-text:var(--sinch-color-tropical-500);--sinch-button-color-text-disabled:var(--sinch-color-tropical-200)}:host([type=secondary])>#button{--sinch-color-spinner-bg:var(--sinch-color-tropical-500);--sinch-color-spinner-fg:var(--sinch-color-tropical-100)}:host([type=secondary]) #button:enabled:active,:host([type=secondary]) #button:enabled:hover{--sinch-color-spinner-fg:var(--sinch-color-tropical-200)}:host([type=secondary]) #button:disabled{--sinch-color-spinner-bg:var(--sinch-color-tropical-200)}:host([type=cta-primary]){--sinch-button-color-background:var(--sinch-color-honey-500);--sinch-button-color-background-hover:var(--sinch-color-honey-400);--sinch-button-color-background-active:var(--sinch-color-honey-600);--sinch-button-color-background-disabled:var(--sinch-color-honey-200);--sinch-button-color-text:var(--sinch-color-stormy-500);--sinch-button-color-text-disabled:var(--sinch-color-stormy-300)}:host([type=cta-primary])>#button{--sinch-color-spinner-bg:var(--sinch-color-honey-700);--sinch-color-spinner-fg:var(--sinch-color-stormy-500)}:host([type=cta-primary])>#button:disabled{--sinch-color-spinner-bg:var(--sinch-color-honey-100);--sinch-color-spinner-fg:var(--sinch-color-stormy-300)}:host([type=cta-secondary]){--sinch-button-color-background:transparent;--sinch-button-color-background-hover:#F1F3F4;--sinch-button-color-background-active:#E3E6E8;--sinch-button-color-background-disabled:transparent;--sinch-button-color-text:var(--sinch-color-stormy-500);--sinch-button-color-text-disabled:var(--sinch-color-stormy-100);--sinch-button-color-border:var(--sinch-color-stormy-500);--sinch-button-color-border-disabled:var(--sinch-color-stormy-100)}:host([type=cta-secondary])>#button{--sinch-color-spinner-bg:var(--sinch-color-snow-700);--sinch-color-spinner-fg:var(--sinch-color-stormy-500)}:host([type=cta-secondary])>#button:disabled{--sinch-color-spinner-bg:var(--sinch-color-snow-500);--sinch-color-spinner-fg:var(--sinch-color-stormy-100)}:host([type=cta-secondary])>#button::before{mix-blend-mode:multiply}:host([type=destructive]){--sinch-button-color-background:var(--sinch-color-snow-100);--sinch-button-color-background-hover:var(--sinch-color-raspberry-100);--sinch-button-color-background-active:var(--sinch-color-raspberry-100);--sinch-button-color-background-disabled:var(--sinch-color-snow-100);--sinch-button-color-text:var(--sinch-color-raspberry-500);--sinch-button-color-text-disabled:var(--sinch-color-raspberry-200);--sinch-button-color-border:var(--sinch-color-raspberry-500);--sinch-button-color-border-disabled:var(--sinch-color-raspberry-200)}:host([type=destructive])>#button{--sinch-color-spinner-bg:var(--sinch-color-raspberry-100);--sinch-color-spinner-fg:var(--sinch-color-raspberry-500)}:host([type=destructive])>#button:enabled:active,:host([type=destructive])>#button:enabled:hover{--sinch-color-spinner-bg:var(--sinch-color-raspberry-200);--sinch-color-spinner-fg:var(--sinch-color-raspberry-500)}:host([type=destructive])>#button:disabled{--sinch-color-spinner-bg:var(--sinch-color-raspberry-100);--sinch-color-spinner-fg:var(--sinch-color-raspberry-200)}#button{all:initial;display:block;position:relative;width:100%;height:48px;font:var(--sinch-font-title-s);color:var(--sinch-button-color-text);cursor:pointer;--sinch-size-icon:24px}#button::before{content:"";position:absolute;left:0;top:0;bottom:0;right:0;border:1px solid var(--sinch-button-color-border);border-radius:var(--sinch-button-shape-radius);background-color:var(--sinch-button-color-background);box-shadow:var(--sinch-elevation-level-1);pointer-events:none}#button:focus-visible::after{position:absolute;content:"";left:-4px;top:-4px;right:-4px;bottom:-4px;border:2px solid var(--sinch-color-border-focus);border-radius:calc(var(--sinch-button-shape-radius) + 4px);pointer-events:none}@supports not selector(:focus-visible){#button:focus::after{position:absolute;content:"";left:-4px;top:-4px;right:-4px;bottom:-4px;border:2px solid var(--sinch-color-border-focus);border-radius:calc(var(--sinch-button-shape-radius) + 4px);pointer-events:none}}#button:enabled:hover::before{background-color:var(--sinch-button-color-background-hover)}#button:enabled:active::before{background-color:var(--sinch-button-color-background-active);border-width:2px;box-shadow:var(--sinch-elevation-level-0)}#button:disabled{color:var(--sinch-button-color-text-disabled);cursor:initial}#button:disabled::before{background-color:var(--sinch-button-color-background-disabled);border-color:var(--sinch-button-color-border-disabled)}:host([type=cta-primary])>#button::before,:host([type=primary])>#button::before{border-width:0}#content{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:100%;padding:0 16px;box-sizing:border-box;pointer-events:none}:host([small]:not([small=false]))>#button{font:var(--sinch-font-title-xs);height:32px;--sinch-size-icon:16px}:host([small]:not([small=false])) #content{padding:0 12px;gap:8px}#text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex-shrink:1;min-width:0}</style><button id="button"><div id="content"><slot name="left-icon"></slot><span id="text"></span><slot name="right-icon"></slot></div></button>';
-import { buttonTypes } from './utils';
+import { defineCustomElement, getBooleanAttribute, getAttribute, isAttrTrue, updateBooleanAttribute, updateAttribute, NectaryElement, getReactEventHandler, getLiteralAttribute, updateLiteralAttribute, Context, subscribeContext } from '../utils';
+import { assertSize, DEFAULT_SIZE, sizeValues } from '../utils/size';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;--sinch-size:var(--sinch-size-m);--sinch-size-icon:var(--sinch-button-icon-size-m);--sinch-shape-radius:var(--sinch-shape-radius-m);--sinch-button-font:var(--sinch-button-font-m)}:host([data-size="l"]){--sinch-size:var(--sinch-size-l);--sinch-size-icon:var(--sinch-button-icon-size-l);--sinch-shape-radius:var(--sinch-shape-radius-l);--sinch-button-font:var(--sinch-button-font-l)}:host([data-size="m"]){--sinch-size:var(--sinch-size-m);--sinch-size-icon:var(--sinch-button-icon-size-m);--sinch-shape-radius:var(--sinch-shape-radius-m);--sinch-button-font:var(--sinch-button-font-m)}:host([data-size="s"]){--sinch-size:var(--sinch-size-s);--sinch-size-icon:var(--sinch-button-icon-size-s);--sinch-shape-radius:var(--sinch-shape-radius-s);--sinch-button-font:var(--sinch-button-font-s)}:host([type=primary]){--sinch-button-color-background:var(--sinch-button-primary-color-background);--sinch-button-color-background-hover:var(--sinch-button-primary-color-background-hover);--sinch-button-color-background-active:var(--sinch-button-primary-color-background-active);--sinch-button-color-background-disabled:var(--sinch-button-primary-color-background-disabled);--sinch-button-color-border:var(--sinch-button-primary-color-border);--sinch-button-color-border-hover:var(--sinch-button-primary-color-border-hover);--sinch-button-color-border-active:var(--sinch-button-primary-color-border-active);--sinch-button-color-border-disabled:var(--sinch-button-primary-color-border-disabled);--sinch-button-color-text:var(--sinch-button-primary-color-text);--sinch-button-color-text-hover:var(--sinch-button-primary-color-text-hover);--sinch-button-color-text-active:var(--sinch-button-primary-color-text-active);--sinch-button-color-text-disabled:var(--sinch-button-primary-color-text-disabled);--sinch-button-color-icon:var(--sinch-button-primary-color-icon);--sinch-button-color-icon-hover:var(--sinch-button-primary-color-icon-hover);--sinch-button-color-icon-active:var(--sinch-button-primary-color-icon-active);--sinch-button-color-icon-disabled:var(--sinch-button-primary-color-icon-disabled);--sinch-button-mix-blend-mode:var(--sinch-button-primary-mix-blend-mode);--sinch-elevation-level:var(--sinch-elevation-level-1)}:host([type=secondary]){--sinch-button-color-background:var(--sinch-button-secondary-color-background);--sinch-button-color-background-hover:var(--sinch-button-secondary-color-background-hover);--sinch-button-color-background-active:var(--sinch-button-secondary-color-background-active);--sinch-button-color-background-disabled:var(--sinch-button-secondary-color-background-disabled);--sinch-button-color-border:var(--sinch-button-secondary-color-border);--sinch-button-color-border-hover:var(--sinch-button-secondary-color-border-hover);--sinch-button-color-border-active:var(--sinch-button-secondary-color-border-active);--sinch-button-color-border-disabled:var(--sinch-button-secondary-color-border-disabled);--sinch-button-color-text:var(--sinch-button-secondary-color-text);--sinch-button-color-text-hover:var(--sinch-button-secondary-color-text-hover);--sinch-button-color-text-active:var(--sinch-button-secondary-color-text-active);--sinch-button-color-text-disabled:var(--sinch-button-secondary-color-text-disabled);--sinch-button-color-icon:var(--sinch-button-secondary-color-icon);--sinch-button-color-icon-hover:var(--sinch-button-secondary-color-icon-hover);--sinch-button-color-icon-active:var(--sinch-button-secondary-color-icon-active);--sinch-button-color-icon-disabled:var(--sinch-button-secondary-color-icon-disabled);--sinch-button-mix-blend-mode:var(--sinch-button-secondary-mix-blend-mode);--sinch-elevation-level:var(--sinch-elevation-level-1)}:host([type=tertiary]){--sinch-button-color-background:var(--sinch-button-tertiary-color-background);--sinch-button-color-background-hover:var(--sinch-button-tertiary-color-background-hover);--sinch-button-color-background-active:var(--sinch-button-tertiary-color-background-active);--sinch-button-color-background-disabled:var(--sinch-button-tertiary-color-background-disabled);--sinch-button-color-border:var(--sinch-button-tertiary-color-border);--sinch-button-color-border-hover:var(--sinch-button-tertiary-color-border-hover);--sinch-button-color-border-active:var(--sinch-button-tertiary-color-border-active);--sinch-button-color-border-disabled:var(--sinch-button-tertiary-color-border-disabled);--sinch-button-color-text:var(--sinch-button-tertiary-color-text);--sinch-button-color-text-hover:var(--sinch-button-tertiary-color-text-hover);--sinch-button-color-text-active:var(--sinch-button-tertiary-color-text-active);--sinch-button-color-text-disabled:var(--sinch-button-tertiary-color-text-disabled);--sinch-button-color-icon:var(--sinch-button-tertiary-color-icon);--sinch-button-color-icon-hover:var(--sinch-button-tertiary-color-icon-hover);--sinch-button-color-icon-active:var(--sinch-button-tertiary-color-icon-active);--sinch-button-color-icon-disabled:var(--sinch-button-tertiary-color-icon-disabled);--sinch-button-mix-blend-mode:var(--sinch-button-tertiary-mix-blend-mode);--sinch-elevation-level:var(--sinch-elevation-level-0)}:host([type=cta-primary]){--sinch-button-color-background:var(--sinch-button-cta-primary-color-background);--sinch-button-color-background-hover:var(--sinch-button-cta-primary-color-background-hover);--sinch-button-color-background-active:var(--sinch-button-cta-primary-color-background-active);--sinch-button-color-background-disabled:var(--sinch-button-cta-primary-color-background-disabled);--sinch-button-color-border:var(--sinch-button-cta-primary-color-border);--sinch-button-color-border-hover:var(--sinch-button-cta-primary-color-border-hover);--sinch-button-color-border-active:var(--sinch-button-cta-primary-color-border-active);--sinch-button-color-border-disabled:var(--sinch-button-cta-primary-color-border-disabled);--sinch-button-color-text:var(--sinch-button-cta-primary-color-text);--sinch-button-color-text-hover:var(--sinch-button-cta-primary-color-text-hover);--sinch-button-color-text-active:var(--sinch-button-cta-primary-color-text-active);--sinch-button-color-text-disabled:var(--sinch-button-cta-primary-color-text-disabled);--sinch-button-color-icon:var(--sinch-button-cta-primary-color-icon);--sinch-button-color-icon-hover:var(--sinch-button-cta-primary-color-icon-hover);--sinch-button-color-icon-active:var(--sinch-button-cta-primary-color-icon-active);--sinch-button-color-icon-disabled:var(--sinch-button-cta-primary-color-icon-disabled);--sinch-button-mix-blend-mode:var(--sinch-button-cta-primary-mix-blend-mode);--sinch-elevation-level:var(--sinch-elevation-level-1)}:host([type=cta-secondary]){--sinch-button-color-background:var(--sinch-button-cta-secondary-color-background);--sinch-button-color-background-hover:var(--sinch-button-cta-secondary-color-background-hover);--sinch-button-color-background-active:var(--sinch-button-cta-secondary-color-background-active);--sinch-button-color-background-disabled:var(--sinch-button-cta-secondary-color-background-disabled);--sinch-button-color-border:var(--sinch-button-cta-secondary-color-border);--sinch-button-color-border-hover:var(--sinch-button-cta-secondary-color-border-hover);--sinch-button-color-border-active:var(--sinch-button-cta-secondary-color-border-active);--sinch-button-color-border-disabled:var(--sinch-button-cta-secondary-color-border-disabled);--sinch-button-color-text:var(--sinch-button-cta-secondary-color-text);--sinch-button-color-text-hover:var(--sinch-button-cta-secondary-color-text-hover);--sinch-button-color-text-active:var(--sinch-button-cta-secondary-color-text-active);--sinch-button-color-text-disabled:var(--sinch-button-cta-secondary-color-text-disabled);--sinch-button-color-icon:var(--sinch-button-cta-secondary-color-icon);--sinch-button-color-icon-hover:var(--sinch-button-cta-secondary-color-icon-hover);--sinch-button-color-icon-active:var(--sinch-button-cta-secondary-color-icon-active);--sinch-button-color-icon-disabled:var(--sinch-button-cta-secondary-color-icon-disabled);--sinch-button-mix-blend-mode:var(--sinch-button-cta-secondary-mix-blend-mode);--sinch-elevation-level:var(--sinch-elevation-level-1)}:host([type=destructive]){--sinch-button-color-background:var(--sinch-button-destructive-color-background);--sinch-button-color-background-hover:var(--sinch-button-destructive-color-background-hover);--sinch-button-color-background-active:var(--sinch-button-destructive-color-background-active);--sinch-button-color-background-disabled:var(--sinch-button-destructive-color-background-disabled);--sinch-button-color-border:var(--sinch-button-destructive-color-border);--sinch-button-color-border-hover:var(--sinch-button-destructive-color-border-hover);--sinch-button-color-border-active:var(--sinch-button-destructive-color-border-active);--sinch-button-color-border-disabled:var(--sinch-button-destructive-color-border-disabled);--sinch-button-color-text:var(--sinch-button-destructive-color-text);--sinch-button-color-text-hover:var(--sinch-button-destructive-color-text-hover);--sinch-button-color-text-active:var(--sinch-button-destructive-color-text-active);--sinch-button-color-text-disabled:var(--sinch-button-destructive-color-text-disabled);--sinch-button-color-icon:var(--sinch-button-destructive-color-icon);--sinch-button-color-icon-hover:var(--sinch-button-destructive-color-icon-hover);--sinch-button-color-icon-active:var(--sinch-button-destructive-color-icon-active);--sinch-button-color-icon-disabled:var(--sinch-button-destructive-color-icon-disabled);--sinch-button-mix-blend-mode:var(--sinch-button-destructive-mix-blend-mode);--sinch-elevation-level:var(--sinch-elevation-level-1)}#button{all:initial;display:block;position:relative;width:100%;height:var(--sinch-size);font:var(--sinch-button-font);color:var(--sinch-button-color-text);cursor:pointer;--sinch-color-icon:var(--sinch-button-color-icon)}#button::before{content:"";position:absolute;inset:0;background-color:var(--sinch-button-color-background);border:1px solid var(--sinch-button-color-border);border-radius:var(--sinch-shape-radius);box-shadow:var(--sinch-elevation-level);pointer-events:none;mix-blend-mode:var(--sinch-button-mix-blend-mode)}#button:focus-visible::after{position:absolute;content:"";inset:-3px;border:2px solid var(--sinch-color-border-focus);border-radius:calc(var(--sinch-shape-radius) + 3px);pointer-events:none}#button:disabled{color:var(--sinch-button-color-text-disabled);cursor:initial;--sinch-color-icon:var(--sinch-button-color-icon-disabled)}#button:disabled::before{background-color:var(--sinch-button-color-background-disabled);border-color:var(--sinch-button-color-border-disabled);box-shadow:var(--sinch-elevation-level-0)}#button:enabled:hover{--sinch-color-icon:var(--sinch-button-color-icon-hover)}#button:enabled:hover::before{background-color:var(--sinch-button-color-background-hover);border-color:var(--sinch-button-color-border-hover)}#button:enabled:active{--sinch-color-icon:var(--sinch-button-color-icon-active)}#button:enabled:active::before{background-color:var(--sinch-button-color-background-active);border-color:var(--sinch-button-color-border-active);border-width:2px;box-shadow:var(--sinch-elevation-level-0)}#content{position:relative;display:flex;align-items:center;justify-content:center;gap:.75em;width:100%;height:100%;padding:0 1em;box-sizing:border-box;pointer-events:none}#text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex-shrink:1;min-width:0}</style><button id="button"><div id="content"><slot name="left-icon"></slot><span id="text"></span><slot name="right-icon"></slot></div></button>';
+import { assertType, typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-button', class extends NectaryElement {
   #$button;
   #$text;
+  #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.#$text = shadowRoot.querySelector('#text');
+    this.#sizeContext = new Context(this.#$button, 'size');
   }
   connectedCallback() {
+    super.connectedCallback();
+    this.#controller = new AbortController();
+    const {
+      signal
+    } = this.#controller;
     this.setAttribute('role', 'button');
-    this.#$button.addEventListener('click', this.#onButtonClick);
-    this.#$button.addEventListener('focus', this.#onButtonFocus);
-    this.#$button.addEventListener('blur', this.#onButtonBlur);
-    this.addEventListener('-click', this.#onClickReactHandler);
-    this.addEventListener('-focus', this.#onFocusReactHandler);
-    this.addEventListener('-blur', this.#onBlurReactHandler);
+    this.#$button.addEventListener('click', this.#onButtonClick, {
+      signal
+    });
+    this.#$button.addEventListener('focus', this.#onButtonFocus, {
+      signal
+    });
+    this.#$button.addEventListener('blur', this.#onButtonBlur, {
+      signal
+    });
+    this.addEventListener('-click', this.#onClickReactHandler, {
+      signal
+    });
+    this.addEventListener('-focus', this.#onFocusReactHandler, {
+      signal
+    });
+    this.addEventListener('-blur', this.#onBlurReactHandler, {
+      signal
+    });
+    subscribeContext(this, 'size', this.#onContextSize, signal);
+    this.#sizeContext.listen(signal);
+    this.#onSizeUpdate();
   }
   disconnectedCallback() {
-    this.#$button.removeEventListener('click', this.#onButtonClick);
-    this.#$button.removeEventListener('focus', this.#onButtonFocus);
-    this.#$button.removeEventListener('blur', this.#onButtonBlur);
-    this.removeEventListener('-click', this.#onClickReactHandler);
-    this.removeEventListener('-focus', this.#onFocusReactHandler);
-    this.removeEventListener('-blur', this.#onBlurReactHandler);
+    super.disconnectedCallback();
+    this.#controller.abort();
   }
   static get observedAttributes() {
-    return ['text', 'disabled'];
+    return ['text', 'disabled', 'size', 'type', 'data-size'];
   }
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
@@ -47,13 +69,33 @@ defineCustomElement('sinch-button', class extends NectaryElement {
           updateBooleanAttribute(this, 'disabled', isDisabled);
           break;
         }
+      case 'type':
+        {
+          if ('production' !== 'production') {
+            assertType(newVal);
+          }
+          break;
+        }
+      case 'size':
+        {
+          updateAttribute(this, 'data-size', newVal);
+          break;
+        }
+      case 'data-size':
+        {
+          if ('production' !== 'production') {
+            assertSize(newVal, 'sinch-button');
+          }
+          this.#onSizeUpdate();
+          break;
+        }
     }
   }
   set type(value) {
-    updateLiteralAttribute(this, buttonTypes, 'type', value);
+    updateLiteralAttribute(this, typeValues, 'type', value);
   }
   get type() {
-    return getLiteralAttribute(this, buttonTypes, 'type', 'primary');
+    return getLiteralAttribute(this, typeValues, 'type', 'primary');
   }
   set text(value) {
     updateAttribute(this, 'text', value);
@@ -67,11 +109,11 @@ defineCustomElement('sinch-button', class extends NectaryElement {
   get disabled() {
     return getBooleanAttribute(this, 'disabled');
   }
-  set small(isSmall) {
-    updateBooleanAttribute(this, 'small', isSmall);
+  set size(size) {
+    updateLiteralAttribute(this, sizeValues, 'size', size);
   }
-  get small() {
-    return getBooleanAttribute(this, 'small');
+  get size() {
+    return getLiteralAttribute(this, sizeValues, 'size', DEFAULT_SIZE);
   }
   get focusable() {
     return true;
@@ -82,6 +124,29 @@ defineCustomElement('sinch-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;
+        }
+      default:
+        {
+          this.setAttribute('data-size', 's');
+        }
+    }
+  };
   #onButtonClick = () => {
     this.dispatchEvent(new CustomEvent('-click'));
   };

package/button/types.d.ts

@@ -1,40 +1,41 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchButtonType = 'primary' | 'secondary' | 'cta-primary' | 'cta-secondary' | 'destructive';
+import type { TSinchSize } from '../utils/size';
+export declare type TSinchButtonType = 'primary' | 'secondary' | 'tertiary' | 'cta-primary' | 'cta-secondary' | 'destructive';
 export declare type TSinchButtonElement = HTMLElement & {
-    /** Type */
+    /** Type, `primary` by default */
     type: TSinchButtonType;
+    /** Size, `m` by default */
+    size: TSinchSize;
     /** Text content */
     text: string;
     /** Disabled */
     disabled: boolean;
-    /** Small */
-    small: boolean;
     /** Click event */
     addEventListener(type: '-click', listener: (e: CustomEvent<void>) => void): void;
     /** Focus event */
     addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
     /** Blur event */
     addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
-    /** Type */
+    /** Type, `primary` by default */
     setAttribute(attr: 'type', value: TSinchButtonType): void;
+    /** Size, `m` by default */
+    setAttribute(attr: 'size', value: TSinchSize): void;
     /** Text content */
     setAttribute(attr: 'text', value: string): void;
     /** Disabled */
     setAttribute(attr: 'disabled', value: ''): void;
-    /** Small */
-    setAttribute(attr: 'small', value: ''): void;
 };
 export declare type TSinchButtonReact = TSinchElementReact<TSinchButtonElement> & {
-    /** Type */
-    type: TSinchButtonType;
+    /** Type, `primary` by default */
+    type?: TSinchButtonType;
+    /** Size, `m` by default */
+    size?: TSinchSize;
     /** Text content */
     text: string;
     /** Label that is used for a11y */
     'aria-label': string;
     /** Disabled */
     disabled?: boolean;
-    /** Small */
-    small?: boolean;
     /** Click event handler */
     'on-click'?: (e: CustomEvent<void>) => void;
     /** Focus event handler */

package/button/utils.d.ts

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

package/button/utils.js

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

package/card-container/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{height:100%;padding:20px 0;box-sizing:border-box;background-color:var(--sinch-color-snow-100);border-radius:var(--sinch-shape-radius-l);border:1px solid var(--sinch-color-snow-700);font:var(--sinch-font-body)}#scroll{overflow:auto;height:100%;box-sizing:border-box;padding:4px 24px}</style><div id="wrapper"><div id="scroll"><slot></slot></div></div>';
+const templateHTML = '<style>:host{display:block}#wrapper{height:100%;padding:20px 0;box-sizing:border-box;background-color:var(--sinch-color-snow-100);border-radius:var(--sinch-shape-radius-l);border:1px solid var(--sinch-color-snow-700);font:var(--sinch-font-text-m)}#scroll{overflow:auto;height:100%;box-sizing:border-box;padding:4px 24px}</style><div id="wrapper"><div id="scroll"><slot></slot></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-card-container', class extends NectaryElement {

package/chat-block/index.js

@@ -1,6 +1,6 @@
 import { typeValues } from '../chat-bubble/utils';
 import { defineCustomElement, getAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;display:flex;flex-direction:column;gap:4px;align-items:flex-end;padding-left:72px}#stamp{display:flex;gap:4px;margin:0;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-stormy-400)}#avatar{display:none;position:absolute;left:0;top:24px}:host([type=customer])>#wrapper{align-items:flex-start}:host([type=customer]) #avatar{display:block}</style><div id="wrapper"><div id="avatar"><slot name="avatar"></slot></div><p id="stamp"><span id="firstname"></span><span id="lastname"></span>&bull;<span id="time"></span></p><slot name="bubble"></slot></div>';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;display:flex;flex-direction:column;gap:4px;align-items:flex-end;padding-left:72px}#stamp{display:flex;gap:4px;margin:0;font:var(--sinch-font-text-xs);color:var(--sinch-color-stormy-400)}#avatar{display:none;position:absolute;left:0;top:24px}:host([type=customer])>#wrapper{align-items:flex-start}:host([type=customer]) #avatar{display:block}</style><div id="wrapper"><div id="avatar"><slot name="avatar"></slot></div><p id="stamp"><span id="firstname"></span><span id="lastname"></span>&bull;<span id="time"></span></p><slot name="bubble"></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-chat-block', class extends NectaryElement {

package/chat-bubble/index.js

@@ -3,7 +3,7 @@ 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-body);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-success-500)}:host([status=error]) sinch-icon-error-outline{display:block;--sinch-color-icon:var(--sinch-color-error-500)}: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>';
+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-success-500)}:host([status=error]) sinch-icon-error-outline{display:block;--sinch-color-icon:var(--sinch-color-error-500)}: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 { statusValues, typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;