@nectary/components 2.0.0 → 2.1.1

package/color-menu/index.js

@@ -11,7 +11,9 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
   #controller = null;
   constructor() {
     super();
-    const shadowRoot = this.attachShadow();
+    const shadowRoot = this.attachShadow({
+      delegatesFocus: false
+    });
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$listbox = shadowRoot.querySelector('#listbox');
     this.#$optionsSlot = shadowRoot.querySelector('#options');
@@ -25,8 +27,8 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
     const options = {
       signal
     };
-    this.setAttribute('role', 'listbox');
-    this.setAttribute('tabindex', '0');
+    this.role = 'listbox';
+    this.tabIndex = 0;
     this.addEventListener('keydown', this.#onListboxKeyDown, options);
     this.addEventListener('blur', this.#onListboxBlur, options);
     this.#$listbox.addEventListener('click', this.#onListboxClick, options);
@@ -133,6 +135,7 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
     if ($elem === this.#$listbox) {
       return;
     }
+    this.focus();
     this.#dispatchChangeEvent($elem);
   };
   #onContextVisibility = e => {

package/color-swatch/index.js

@@ -1,7 +1,7 @@
 import '../text';
 import { defineCustomElement, NectaryElement, setClass, getAttribute, updateAttribute } from '../utils';
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{width:var(--sinch-global-size-icon,32px);height:var(--sinch-global-size-icon,32px);border-radius:50%}#wrapper.no-color{background:linear-gradient(45deg,var(--sinch-ref-color-complementary-orange-200),var(--sinch-ref-color-complementary-bolt-200),var(--sinch-ref-color-complementary-grass-200),var(--sinch-ref-color-complementary-night-200),var(--sinch-ref-color-complementary-violet-200))}</style><div id="wrapper"></div>';
-import { assertSwatchColor, getSwatchColorBg } from './utils';
+import { getSwatchColorBg } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-color-swatch', class extends NectaryElement {
@@ -43,9 +43,6 @@ defineCustomElement('sinch-color-swatch', class extends NectaryElement {
     }
     const colorName = this.name;
     if (colorName !== null && colorName.length > 0) {
-      if ('production' !== 'production') {
-        assertSwatchColor(this, colorName);
-      }
       const bg = getSwatchColorBg(colorName);
       this.#$wrapper.style.setProperty('background-color', bg);
       setClass(this.#$wrapper, 'no-color', false);

package/color-swatch/utils.d.ts

@@ -1,3 +1,2 @@
 export declare const getSwatchColorBg: (id: string) => string;
 export declare const getSwatchColorFg: (id: string) => string;
-export declare const assertSwatchColor: (root: Element, id: string | null) => void;

package/color-swatch/utils.js

@@ -3,9 +3,4 @@ export const getSwatchColorBg = id => {
 };
 export const getSwatchColorFg = id => {
   return `var(--sinch-comp-color-swatch-color-${id}-foreground)`;
-};
-export const assertSwatchColor = (root, id) => {
-  if (id === null || window.getComputedStyle(root).getPropertyValue(`--sinch-comp-color-swatch-color-${id}-background`).length === 0) {
-    throw new Error(`Invalid sinch-color-swatch color name: ${id}`);
-  }
 };

package/date-picker/index.js

@@ -3,7 +3,7 @@ import '../icon';
 import '../text';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, getRect, getTargetAttribute, isAttrTrue, NectaryElement, packCsv, setClass, unpackCsv, updateAttribute, updateBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0}#content{width:fit-content;box-sizing:border-box;padding:16px;display:flex;flex-direction:column;gap:8px}#month{display:flex;flex-direction:column;row-gap:8px}.week{display:flex;flex-direction:row;column-gap:8px}.week.empty{display:none}.day{all:initial;font:var(--sinch-comp-date-picker-font-day);width:24px;height:24px;line-height:22px;color:var(--sinch-comp-date-picker-day-color-default-text-initial);background-color:var(--sinch-comp-date-picker-day-color-default-background-initial);border:1px solid var(--sinch-comp-date-picker-day-color-default-border-initial);border-radius:var(--sinch-comp-date-picker-day-shape-radius);text-align:center;box-sizing:border-box;user-select:none;cursor:pointer}.day:focus-visible{outline:1px solid var(--sinch-comp-date-picker-day-color-default-outline-focus);outline-offset:1px}.day:disabled{cursor:initial;color:var(--sinch-comp-date-picker-day-color-disabled-text-initial)}.day:enabled:hover{background-color:var(--sinch-comp-date-picker-day-color-default-background-hover)}.day:enabled.range{background-color:var(--sinch-comp-date-picker-day-color-default-range-background)}.day:enabled.selected{color:var(--sinch-comp-date-picker-day-color-checked-text-initial);background-color:var(--sinch-comp-date-picker-day-color-checked-background-initial);border-color:var(--sinch-comp-date-picker-day-color-checked-border-initial)}.day.today{font:var(--sinch-comp-date-picker-font-today);color:var(--sinch-comp-date-picker-today-color-default-text-initial);background-color:var(--sinch-comp-date-picker-today-color-default-background-initial);border-color:var(--sinch-comp-date-picker-today-color-default-border-initial)}.day.today:hover{background-color:var(--sinch-comp-date-picker-today-color-default-background-hover)}.day.today:disabled{color:var(--sinch-comp-date-picker-today-color-disabled-text-initial);border-color:var(--sinch-comp-date-picker-today-color-disabled-border-initial)}.day.today.selected{color:var(--sinch-comp-date-picker-today-color-checked-text-initial);background-color:var(--sinch-comp-date-picker-today-color-checked-background-initial);border-color:var(--sinch-comp-date-picker-today-color-checked-border-initial)}#week-day-names{display:flex;flex-direction:row;gap:8px;height:24px}.week-day-name{font:var(--sinch-comp-date-picker-font-weekday);color:var(--sinch-comp-date-picker-weekday-color-default-text-initial);text-align:center;width:24px;height:24px;line-height:24px;user-select:none;text-transform:uppercase}#content-header{display:flex;flex-direction:row;height:32px;align-items:center}#date{flex:1;text-align:center;text-transform:capitalize;--sinch-com-text-font:var(--sinch-comp-date-picker-font-header);--sinch-global-color-text:var(--sinch-comp-date-picker-header-color-default-text-initial)}#prev-year{margin-left:-4px}#next-year{margin-right:-4px}</style><div id="content"><div id="content-header"><sinch-icon-button id="prev-year" size="s"><sinch-icon id="icon-prev-year" slot="icon" name="keyboard_double_arrow_left"></sinch-icon></sinch-icon-button><sinch-icon-button id="prev-month" size="s"><sinch-icon id="icon-prev-month" slot="icon" name="keyboard_arrow_left"></sinch-icon></sinch-icon-button><sinch-text id="date" type="m" emphasized aria-live="polite"></sinch-text><sinch-icon-button id="next-month" size="s"><sinch-icon id="icon-next-month" slot="icon" name="keyboard_arrow_right"></sinch-icon></sinch-icon-button><sinch-icon-button id="next-year" size="s"><sinch-icon id="icon-next-year" slot="icon" name="keyboard_double_arrow_right"></sinch-icon></sinch-icon-button></div><div id="week-day-names"><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div></div><div id="month"><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div></div></div>';
-import { areDatesEqual, assertDate, assertLocale, assertMinMax, assertValue, canGoNextMonth, canGoNextYear, canGoPrevMonth, canGoPrevYear, clampMaxDate, clampMinDate, cloneDate, dateToIso, decMonth, decYear, getCalendarMonth, getDayNames, getMonthNames, incMonth, incYear, isDateBetween, isoToDate, isValidDate, sortDates, today } from './utils';
+import { areDatesEqual, canGoNextMonth, canGoNextYear, canGoPrevMonth, canGoPrevYear, clampMaxDate, clampMinDate, cloneDate, dateToIso, decMonth, decYear, getCalendarMonth, getDayNames, getMonthNames, incMonth, incYear, isDateBetween, isoToDate, isValidDate, sortDates, today } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-date-picker', class extends NectaryElement {
@@ -72,21 +72,12 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
     switch (name) {
       case 'value':
         {
-          if ('production' !== 'production') {
-            assertValue(newVal);
-          }
           this.#onValueChange();
           break;
         }
       case 'min':
         {
-          if ('production' !== 'production') {
-            assertMinMax(newVal, name);
-          }
           this.#minDate = isoToDate(newVal);
-          if ('production' !== 'production') {
-            assertDate(this.#minDate, name, newVal);
-          }
           if (this.#uiDate !== null) {
             clampMinDate(this.#uiDate, this.#minDate);
           }
@@ -95,13 +86,7 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
         }
       case 'max':
         {
-          if ('production' !== 'production') {
-            assertMinMax(newVal, name);
-          }
           this.#maxDate = isoToDate(newVal);
-          if ('production' !== 'production') {
-            assertDate(this.#maxDate, name, newVal);
-          }
           if (this.#uiDate !== null) {
             clampMaxDate(this.#uiDate, this.#maxDate);
           }
@@ -110,9 +95,6 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
         }
       case 'locale':
         {
-          if ('production' !== 'production') {
-            assertLocale(newVal);
-          }
           const names = getDayNames(newVal);
           this.#$weekDayNames.forEach(($day, i) => {
             $day.textContent = names[i];
@@ -277,10 +259,6 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
         this.#date2 = dateTuple[1];
         this.#unsubscribeRangeHover();
         this.#render();
-        this.dispatchEvent(new CustomEvent('change', {
-          detail: value,
-          bubbles: true
-        }));
         this.dispatchEvent(new CustomEvent('-change', {
           detail: value
         }));
@@ -292,10 +270,6 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
       this.#render();
       return;
     }
-    this.dispatchEvent(new CustomEvent('change', {
-      detail: dateIso,
-      bubbles: true
-    }));
     this.dispatchEvent(new CustomEvent('-change', {
       detail: dateIso
     }));

package/date-picker/utils.d.ts

@@ -8,15 +8,7 @@ export declare const isoToDate: (value: string) => Date;
 export declare const today: () => Date;
 export declare const getDayNames: (locale: string) => string[];
 export declare const getMonthNames: (locale: string) => string[];
-type TAssertMinMax = (value: string | null, attrName: string) => asserts value is string;
-export declare const assertMinMax: TAssertMinMax;
-type TAssertValue = (value: string | null) => asserts value is string;
-export declare const assertValue: TAssertValue;
-type TAssertLocale = (value: string | null) => asserts value is string;
-export declare const assertLocale: TAssertLocale;
-type TAssertDate = (value: any, attrName: string, attrValue: string) => asserts value is Date;
 export declare const isValidDate: (value: any) => value is Date;
-export declare const assertDate: TAssertDate;
 export declare const compareDates: (a: Date, b: Date) => number;
 export declare const clampMinDate: (date: Date, min: Date) => void;
 export declare const clampMaxDate: (date: Date, max: Date) => void;

package/date-picker/utils.js

@@ -63,29 +63,9 @@ export const getMonthNames = locale => {
     return formatter.format(date);
   });
 };
-export const assertMinMax = (value, attrName) => {
-  if (value == null || value === '') {
-    throw new Error(`sinch-date-picker: missing or empty "${attrName}" attribute`);
-  }
-};
-export const assertValue = value => {
-  if (value == null) {
-    throw new Error(`sinch-date-picker: missing "value" attribute`);
-  }
-};
-export const assertLocale = value => {
-  if (value === null || value.length === 0) {
-    throw new Error(`sinch-date-picker: invalid locale attribute: ${value}`);
-  }
-};
 export const isValidDate = value => {
   return value instanceof Date && !isNaN(value);
 };
-export const assertDate = (value, attrName, attrValue) => {
-  if (!isValidDate(value)) {
-    throw new Error(`sinch-date-picker: invalid "${attrName}" attribute: ${attrValue}`);
-  }
-};
 export const compareDates = (a, b) => {
   return a.getTime() - b.getTime();
 };

package/dialog/index.js

@@ -4,7 +4,7 @@ import '../stop-events';
 import '../title';
 import { disableScroll, enableScroll } from '../pop/utils';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute, getReactEventHandler, NectaryElement, updateBooleanAttribute, setClass, isTargetEqual } from '../utils';
-const templateHTML = '<style>:host{display:contents;--sinch-comp-dialog-max-width:512px;--sinch-comp-dialog-max-height:50vh}#dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px 0;max-width:var(--sinch-comp-dialog-max-width);max-height:unset;border-radius:var(--sinch-comp-dialog-shape-radius);box-sizing:border-box;contain:content;background-color:var(--sinch-comp-dialog-color-default-background-initial);border:none;box-shadow:var(--sinch-comp-dialog-shadow)}#dialog:not([open]){display:none}dialog::backdrop{background-color:#000;opacity:.55}#header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;margin-bottom:12px;padding:0 24px}#caption{--sinch-global-color-text:var(--sinch-comp-dialog-color-default-title-initial);--sinch-comp-title-font:var(--sinch-comp-dialog-font-title)}#content{min-height:0;overflow:auto;max-height:var(--sinch-comp-dialog-max-height);padding:4px 24px}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:20px;padding:0 24px}#action.empty{display:none}#close{position:relative;left:4px;top:-4px;--sinch-global-color-icon:var(--sinch-comp-dialog-color-default-icon-initial)}</style><dialog id="dialog"><div id="header"><sinch-title id="caption" type="m" level="3" ellipsis></sinch-title><sinch-icon-button id="close" size="s" tabindex="0"><sinch-icon id="icon-close" slot="icon" name="close"></sinch-icon></sinch-icon-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="action"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
+const templateHTML = '<style>:host{display:contents;--sinch-comp-dialog-max-width:512px;--sinch-comp-dialog-max-height:50vh}#dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px 0;max-width:var(--sinch-comp-dialog-max-width);max-height:unset;border-radius:var(--sinch-comp-dialog-shape-radius);box-sizing:border-box;contain:content;background-color:var(--sinch-comp-dialog-color-default-background-initial);border:none;box-shadow:var(--sinch-comp-dialog-shadow);outline:0}#dialog:not([open]){display:none}dialog::backdrop{background-color:#000;opacity:.55}#header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;margin-bottom:12px;padding:0 24px}#caption{--sinch-global-color-text:var(--sinch-comp-dialog-color-default-title-initial);--sinch-comp-title-font:var(--sinch-comp-dialog-font-title)}#content{min-height:0;overflow:auto;max-height:var(--sinch-comp-dialog-max-height);padding:4px 24px}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:20px;padding:0 24px}#action.empty{display:none}#close{position:relative;left:4px;top:-4px;--sinch-global-color-icon:var(--sinch-comp-dialog-color-default-icon-initial)}</style><dialog id="dialog"><div id="header"><sinch-title id="caption" type="m" level="3" ellipsis></sinch-title><sinch-icon-button id="close" size="s"><sinch-icon id="icon-close" slot="icon" name="close"></sinch-icon></sinch-icon-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="action"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-dialog', class extends NectaryElement {
@@ -107,7 +107,6 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
     }
   };
   #onCloseReactHandler = e => {
-    getReactEventHandler(this, 'onClose')?.(e);
     getReactEventHandler(this, 'on-close')?.(e);
   };
   #dispatchCloseEvent(detail) {

package/emoji-picker/index.js

@@ -11,8 +11,7 @@ import '../text';
 import '../icon';
 import { defineCustomElement, getAttribute, getBooleanAttribute, NectaryElement, updateAttribute, updateBooleanAttribute, getReactEventHandler, getRect, subscribeContext, debounceTimeout, setClass } 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;--sinch-comp-icon-font-variation-settings:"FILL" 0}#toolbar{display:flex;gap:8px;padding:0 12px}#search{flex:1;min-width:0}#search-clear:not(.active){display:none}#list-wrapper{overflow-y:auto;overflow-x:hidden;width:384px;box-sizing:border-box;scrollbar-gutter:stable}#list{display:flex;flex-wrap:wrap;gap:8px;padding:4px 12px 0;width:384px;box-sizing:border-box}#not-found{display:none;width:100%;height:48px;align-items:center;justify-content:center;pointer-events:none;user-select:none;--sinch-global-color-text:var(--sinch-comp-emoji-picker-color-default-text-not-found);--sinch-comp-text-font:var(--sinch-comp-emoji-picker-font-not-found)}#not-found.active{display:flex}</style><div id="wrapper"><div id="toolbar"><sinch-input id="search" size="l" aria-label="Search emojis"><sinch-icon id="icon-search" slot="icon" name="search"></sinch-icon><sinch-icon-button id="search-clear" slot="right" aria-label="Clear"><sinch-icon slot="icon" name="close"></sinch-icon></sinch-icon-button></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="skintone-default"></sinch-color-swatch></sinch-icon-button><sinch-color-menu id="skin-menu" slot="content" cols="1" value="skintone-default" aria-label="Emoji skin tone menu"><sinch-color-menu-option value="skintone-default"></sinch-color-menu-option><sinch-color-menu-option value="skintone-light"></sinch-color-menu-option><sinch-color-menu-option value="skintone-light-medium"></sinch-color-menu-option><sinch-color-menu-option value="skintone-medium"></sinch-color-menu-option><sinch-color-menu-option value="skintone-medium-dark"></sinch-color-menu-option><sinch-color-menu-option value="skintone-dark"></sinch-color-menu-option></sinch-color-menu></sinch-popover></div><sinch-tabs id="tabs" aria-label="Emoji groups"></sinch-tabs><div id="list-wrapper"><div id="list"></div><div id="not-found"><sinch-text type="m">No results</sinch-text></div></div></div>';
-const groupIconNames = ['sentiment_satisfied', 'emoji_people', 'pets', 'emoji_food_beverage', 'emoji_transportation', 'sports_tennis', 'emoji_objects', 'emoji_symbols'];
+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}#search{flex:1;min-width:0}#search-clear:not(.active){display:none}#list-wrapper{overflow-y:auto;overflow-x:hidden;width:384px;box-sizing:border-box;scrollbar-gutter:stable}#list{display:flex;flex-wrap:wrap;gap:8px;padding:4px 12px 0;width:384px;box-sizing:border-box}#not-found{display:none;width:100%;height:48px;align-items:center;justify-content:center;pointer-events:none;user-select:none;--sinch-global-color-text:var(--sinch-comp-emoji-picker-color-default-text-not-found);--sinch-comp-text-font:var(--sinch-comp-emoji-picker-font-not-found)}#not-found.active{display:flex}#tabs svg{pointer-events:none;height:var(--sinch-global-size-icon);fill:var(--sinch-global-color-icon)}</style><div id="wrapper"><div id="toolbar"><sinch-input id="search" size="l" aria-label="Search emojis"><sinch-icon id="icon-search" slot="icon" name="search"></sinch-icon><sinch-icon-button id="search-clear" slot="right" aria-label="Clear"><sinch-icon slot="icon" name="close"></sinch-icon></sinch-icon-button></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="skintone-default"></sinch-color-swatch></sinch-icon-button><sinch-color-menu id="skin-menu" slot="content" cols="1" value="skintone-default" aria-label="Emoji skin tone menu"><sinch-color-menu-option value="skintone-default"></sinch-color-menu-option><sinch-color-menu-option value="skintone-light"></sinch-color-menu-option><sinch-color-menu-option value="skintone-light-medium"></sinch-color-menu-option><sinch-color-menu-option value="skintone-medium"></sinch-color-menu-option><sinch-color-menu-option value="skintone-medium-dark"></sinch-color-menu-option><sinch-color-menu-option value="skintone-dark"></sinch-color-menu-option></sinch-color-menu></sinch-popover></div><sinch-tabs id="tabs" aria-label="Emoji groups"><sinch-tabs-icon-option id="tab-emotions"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.5 11a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm-7 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"/><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2ZM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8Zm4.41-6.11a.745.745 0 0 0-1.03.24A3.98 3.98 0 0 1 12 16c-1.38 0-2.64-.7-3.38-1.88a.747.747 0 1 0-1.27.79A5.446 5.446 0 0 0 12 17.5c1.9 0 3.63-.97 4.65-2.58.22-.35.11-.81-.24-1.03Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-people"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/><path d="M15.89 8.11C15.5 7.72 14.83 7 13.53 7h-2.54a5.023 5.023 0 0 1-4.92-4.15.998.998 0 0 0-.98-.85c-.61 0-1.09.54-1 1.14A7.037 7.037 0 0 0 9 8.71V21c0 .55.45 1 1 1s1-.45 1-1v-5h2v5c0 .55.45 1 1 1s1-.45 1-1V10.05l3.24 3.24a.996.996 0 1 0 1.41-1.41l-3.76-3.77Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-animals"><svg slot="icon" viewBox="0 0 24 24"><path d="M17 14c-.24-.24-.44-.49-.65-.75C17.51 11.5 19 8.56 19 5c0-1.95-.74-3-2-3-1.54 0-3.96 2.06-5 5.97C10.96 4.06 8.54 2 7 2 5.74 2 5 3.05 5 5c0 3.56 1.49 6.5 2.65 8.25-.21.26-.41.51-.65.75-.25.25-2 1.39-2 3.5C5 19.98 7.02 22 9.5 22c1.5 0 2.5-.5 2.5-.5s1 .5 2.5.5c2.48 0 4.5-2.02 4.5-4.5 0-2.11-1.75-3.25-2-3.5Zm-.12-9.97c.06.17.12.48.12.97 0 2.84-1.11 5.24-2.07 6.78-.38-.26-.83-.48-1.4-.62.24-4.52 2.44-6.83 3.35-7.13ZM7 5c0-.49.06-.8.12-.97.91.3 3.11 2.61 3.36 7.13-.58.14-1.03.35-1.4.62C8.11 10.24 7 7.84 7 5Zm7.5 15c-1 0-1.8-.33-2.22-.56.42-.18.72-.71.72-.94 0-.28-.45-.5-1-.5s-1 .22-1 .5c0 .23.3.76.72.94-.42.23-1.22.56-2.22.56A2.5 2.5 0 0 1 7 17.5c0-.7.43-1.24 1-1.73.44-.36.61-.52 1.3-1.37.76-.95 1.09-1.4 2.7-1.4s1.94.45 2.7 1.4c.69.85.86 1.01 1.3 1.37.57.49 1 1.03 1 1.73a2.5 2.5 0 0 1-2.5 2.5Zm-.5-4c0 .41-.22.75-.5.75s-.5-.34-.5-.75.22-.75.5-.75.5.34.5.75Zm-3 0c0 .41-.22.75-.5.75s-.5-.34-.5-.75.22-.75.5-.75.5.34.5.75Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-food"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19 19H3c-.55 0-1 .45-1 1s.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1Zm1-16H9v2.4l1.81 1.45c.12.09.19.24.19.39v4.26c0 .28-.22.5-.5.5h-4c-.28 0-.5-.22-.5-.5V7.24c0-.15.07-.3.19-.39L8 5.4V3H6c-1.1 0-2 .9-2 2v8c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Zm0 5h-2V5h2v3Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-travel"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m21.99 14.77-1.43-4.11c-.14-.4-.52-.66-.97-.66H12.4c-.46 0-.83.26-.98.66L10 14.77v5.24c0 .55.45.99 1 .99s1-.45 1-1v-1h8v1a1 1 0 0 0 2 .01l-.01-5.24Zm-10.38-1.43.69-2c.05-.2.24-.34.46-.34h6.48c.21 0 .4.14.47.34l.69 2a.5.5 0 0 1-.47.66h-7.85a.5.5 0 0 1-.47-.66Zm.38 3.66c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1Zm8 0c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1Z"/><path d="M14 4.5V9h1V4c0-.55-.45-1-1-1H8c-.55 0-1 .45-1 1v4H3c-.55 0-1 .45-1 1v12h1V9.5c0-.28.22-.5.5-.5h4c.28 0 .5-.22.5-.5v-4c0-.28.22-.5.5-.5h5c.28 0 .5.22.5.5Z"/><path d="M7 11H5v2h2v-2Zm5-6h-2v2h2V5ZM7 15H5v2h2v-2Zm0 4H5v2h2v-2Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-sports"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19.52 2.49C17.18.15 12.9.62 9.97 3.55c-1.6 1.6-2.52 3.87-2.54 5.46-.02 1.58.26 3.89-1.35 5.5l-3.54 3.53c-.39.39-.39 1.02 0 1.42.39.39 1.02.39 1.42 0l3.53-3.54c1.61-1.61 3.92-1.33 5.5-1.35 1.58-.02 3.86-.94 5.46-2.54 2.93-2.92 3.41-7.2 1.07-9.54Zm-9.2 9.19c-1.53-1.53-1.05-4.61 1.06-6.72 2.11-2.11 5.18-2.59 6.72-1.06 1.53 1.53 1.05 4.61-1.06 6.72-2.11 2.11-5.18 2.59-6.72 1.06ZM18 17c.53 0 1.04.21 1.41.59.78.78.78 2.05 0 2.83-.37.37-.88.58-1.41.58-.53 0-1.04-.21-1.41-.59-.78-.78-.78-2.05 0-2.83.37-.37.88-.58 1.41-.58Zm0-2a3.998 3.998 0 0 0-2.83 6.83c.78.78 1.81 1.17 2.83 1.17a3.998 3.998 0 0 0 2.83-6.83A3.998 3.998 0 0 0 18 15Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-objects"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 3c-.46 0-.93.04-1.4.14-2.76.53-4.96 2.76-5.48 5.52-.48 2.61.48 5.01 2.22 6.56.43.38.66.91.66 1.47V19c0 1.1.9 2 2 2h.28a1.98 1.98 0 0 0 3.44 0H14c1.1 0 2-.9 2-2v-2.31c0-.55.22-1.09.64-1.46A6.956 6.956 0 0 0 19 10c0-3.87-3.13-7-7-7Zm.5 11h-1v-2.59L9.67 9.59l.71-.71L12 10.5l1.62-1.62.71.71-1.83 1.83V14Zm1 5c-.01 0-.02-.01-.03-.01V19h-2.94v-.01c-.01 0-.02.01-.03.01-.28 0-.5-.22-.5-.5s.22-.5.5-.5c.01 0 .02.01.03.01V18h2.94v.01c.01 0 .02-.01.03-.01.28 0 .5.22.5.5s-.22.5-.5.5Zm0-2h-3c-.28 0-.5-.22-.5-.5s.22-.5.5-.5h3c.28 0 .5.22.5.5s-.22.5-.5.5Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-symbols"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M10 5H4c-.55 0-1 .45-1 1s.45 1 1 1h2v3c0 .55.45 1 1 1s1-.45 1-1V7h2c.55 0 1-.45 1-1s-.45-1-1-1Zm0-3H4c-.55 0-1 .45-1 1s.45 1 1 1h6c.55 0 1-.45 1-1s-.45-1-1-1Zm10.89 11.11a.996.996 0 0 0-1.41 0l-6.36 6.36a.996.996 0 1 0 1.41 1.41l6.36-6.36a.996.996 0 0 0 0-1.41ZM14.5 16a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm-4-10A2.5 2.5 0 0 0 18 8.5V4h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1v3.51c-.42-.32-.93-.51-1.5-.51a2.5 2.5 0 0 0 0 5Zm-5.05 7.09a.996.996 0 1 0-1.41-1.41l-.71.71-.71-.71.35-.35a2.499 2.499 0 0 0-1.77-4.27 2.499 2.499 0 0 0-1.77 4.27l.35.35-1.06 1.06c-.98.98-.98 2.56 0 3.54.5.48 1.14.72 1.78.72.64 0 1.28-.24 1.77-.73l1.06-1.06.71.71a.996.996 0 1 0 1.41-1.41l-.71-.71.71-.71Zm-4.6-3.89a.5.5 0 0 1 .35-.15.5.5 0 0 1 .35.15c.19.2.19.51 0 .71l-.35.35-.35-.36a.5.5 0 0 1-.15-.35.5.5 0 0 1 .15-.35Zm0 5.65a.5.5 0 0 1-.35.15.5.5 0 0 1-.35-.15.5.5 0 0 1-.15-.35.5.5 0 0 1 .15-.35l1.06-1.06.71.71-1.07 1.05Z"/></svg></sinch-tabs-icon-option></sinch-tabs><div id="list-wrapper"><div id="list"></div><div id="not-found"><sinch-text type="m">No results</sinch-text></div></div></div>';
 const groupLabels = ['Emotions', 'People', 'Animals and nature', 'Food and drinks', 'Travel and places', 'Sports and activities', 'Objects', 'Symbols and flags'];
 const data = dataJson;
 const template = document.createElement('template');
@@ -192,22 +191,16 @@ defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
     this.#updateSearchEmojis();
   };
   #updateTabs() {
-    const doc = this.#getDocumentRoot();
-    const tabsFragment = document.createDocumentFragment();
-    const activeTab = data[0].name;
-    for (let i = 0; i < data.length; i++) {
+    const tabOptions = this.#$tabs.querySelectorAll('sinch-tabs-icon-option');
+    const activeTabName = data[0].name;
+    const numTabs = Math.min(data.length, tabOptions.length);
+    for (let i = 0; i < numTabs; i++) {
       const group = data[i];
-      const tabOption = doc.createElement('sinch-tabs-icon-option');
-      const icon = doc.createElement('sinch-icon');
-      icon.setAttribute('slot', 'icon');
-      updateAttribute(icon, 'name', groupIconNames[i]);
+      const tabOption = tabOptions[i];
       tabOption.setAttribute('value', group.name);
       tabOption.setAttribute('aria-label', groupLabels[i]);
-      tabOption.appendChild(icon);
-      tabsFragment.appendChild(tabOption);
     }
-    this.#$tabs.replaceChildren(tabsFragment);
-    updateAttribute(this.#$tabs, 'value', activeTab);
+    updateAttribute(this.#$tabs, 'value', activeTabName);
   }
   *#iterateSearchEmojis(searchValue, skinTone) {
     for (const group of data) {

package/file-picker/index.js

@@ -7,6 +7,7 @@ defineCustomElement('sinch-file-picker', class extends NectaryElement {
   #$input;
   #$targetSlot;
   #$target = null;
+  #controller = null;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -16,18 +17,19 @@ defineCustomElement('sinch-file-picker', class extends NectaryElement {
     this.#$targetSlot = shadowRoot.querySelector('slot');
   }
   connectedCallback() {
-    this.#$targetSlot.addEventListener('slotchange', this.#onTargetSlotChange);
-    this.#$input.addEventListener('change', this.#onInputChange);
-    this.addEventListener('-change', this.#onChangeReactHandler);
-    this.addEventListener('-invalid', this.#onInvalidReactHandler);
+    this.#controller = new AbortController();
+    const options = {
+      signal: this.#controller.signal
+    };
+    this.#$targetSlot.addEventListener('slotchange', this.#onTargetSlotChange, options);
+    this.#$input.addEventListener('change', this.#onInputChange, options);
+    this.addEventListener('-change', this.#onChangeReactHandler, options);
+    this.addEventListener('-invalid', this.#onInvalidReactHandler, options);
     this.#onTargetSlotChange();
   }
   disconnectedCallback() {
-    this.#$targetSlot.removeEventListener('slotchange', this.#onTargetSlotChange);
-    this.#$input.removeEventListener('change', this.#onInputChange);
-    this.removeEventListener('-change', this.#onChangeReactHandler);
-    this.removeEventListener('-invalid', this.#onInvalidReactHandler);
-    this.#$target?.removeEventListener('-click', this.#onTargetClick);
+    this.#controller.abort();
+    this.#controller = null;
     this.#$target = null;
   }
   static get observedAttributes() {

package/file-status/index.js

@@ -3,7 +3,7 @@ import '../icon';
 import '../text';
 import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, updateBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:12px 16px;box-sizing:border-box;min-height:48px;min-width:148px;border-radius:var(--sinch-comp-file-status-shape-radius)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-file-status-color-error-background)}:host([type=success]) #wrapper{background-color:var(--sinch-comp-file-status-color-success-background)}:host([type=pending]) #wrapper{background-color:var(--sinch-comp-file-status-color-pending-background)}:host([type=progress]) #wrapper{background-color:var(--sinch-comp-file-status-color-progress-background)}:host([type=loading]) #wrapper{background-color:var(--sinch-comp-file-status-color-loading-background)}#content-wrapper{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;min-height:24px;margin-left:16px}:host([type=error]) #filename{--sinch-global-color-text:var(--sinch-comp-file-status-color-error-text)}:host([type=success]) #filename{--sinch-global-color-text:var(--sinch-comp-file-status-color-success-text)}:host([type=pending]) #filename{--sinch-global-color-text:var(--sinch-comp-file-status-color-pending-text)}:host([type=progress]) #filename{--sinch-global-color-text:var(--sinch-comp-file-status-color-progress-text)}:host([type=loading]) #filename{--sinch-global-color-text:var(--sinch-comp-file-status-color-loading-text)}#action{display:flex;gap:4px;height:32px;margin-top:-4px;margin-bottom:-4px}#icon-error,#icon-loading,#icon-pending,#icon-progress,#icon-success{display:none}#icon-pending{--sinch-global-color-icon:var(--sinch-comp-file-status-color-pending-icon)}#icon-success{--sinch-global-color-icon:var(--sinch-comp-file-status-color-success-icon)}#icon-progress{--sinch-global-color-icon:var(--sinch-comp-file-status-color-progress-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-file-status-color-error-icon)}#icon-loading{--sinch-global-color-icon:var(--sinch-comp-file-status-color-loading-icon)}: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}</style><div id="wrapper"><sinch-spinner id="icon-loading" size="m"></sinch-spinner><sinch-icon id="icon-pending" name="pending_actions"></sinch-icon><sinch-icon id="icon-success" name="check_circle"></sinch-icon><sinch-icon id="icon-progress" name="text_snippet"></sinch-icon><sinch-icon id="icon-error" name="report"></sinch-icon><div id="content-wrapper"><sinch-text id="filename" type="m" ellipsis></sinch-text><slot name="content"></slot></div><div id="action"><slot name="action"></slot></div></div>';
-import { assertType, typeValues } from './utils';
+import { typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-file-status', class extends NectaryElement {
@@ -38,20 +38,13 @@ defineCustomElement('sinch-file-status', class extends NectaryElement {
     updateAttribute(this, 'filename', value);
   }
   static get observedAttributes() {
-    return ['filename', 'type'];
+    return ['filename'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
       return;
     }
     switch (name) {
-      case 'type':
-        {
-          if ('production' !== 'production') {
-            assertType(newVal);
-          }
-          break;
-        }
       case 'filename':
         {
           this.#$filename.textContent = newVal;

package/file-status/utils.d.ts

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

package/file-status/utils.js

@@ -1,6 +1 @@
-export const typeValues = ['pending', 'loading', 'progress', 'success', 'error'];
-export const assertType = value => {
-  if (value === null || !typeValues.includes(value)) {
-    throw new Error(`sinch-file-status: invalid type attribute: ${value}`);
-  }
-};
+export const typeValues = ['pending', 'loading', 'progress', 'success', 'error'];

package/help-tooltip/index.d.ts

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

package/help-tooltip/index.js

@@ -1,7 +1,6 @@
 import '../tooltip';
-import '../icon';
 import { defineCustomElement, getAttribute, getIntegerAttribute, getReactEventHandler, NectaryElement, updateAttribute, updateIntegerAttribute } from '../utils';
-const templateHTML = '<style>:host{display:contents;--sinch-comp-help-tooltip-color-icon:var(--sinch-sys-color-text-default)}#icon{--sinch-global-size-icon:18px;--sinch-global-color-icon:var(--sinch-comp-help-tooltip-color-icon);--sinch-comp-icon-font-variation-settings:"FILL" 0}</style><sinch-tooltip type="fast"><sinch-icon id="icon" name="help"></sinch-icon></sinch-tooltip>';
+const templateHTML = '<style>:host{display:contents;--sinch-comp-help-tooltip-color-icon:var(--sinch-sys-color-text-default)}#icon{height:18px;fill:var(--sinch-comp-help-tooltip-color-icon)}</style><sinch-tooltip type="fast"><svg id="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Zm-1-4h2v2h-2v-2Zm1.61-9.96c-2.06-.3-3.88.97-4.43 2.79-.18.58.26 1.17.87 1.17h.2c.41 0 .74-.29.88-.67.32-.89 1.27-1.5 2.3-1.28.95.2 1.65 1.13 1.57 2.1-.1 1.34-1.62 1.63-2.45 2.88 0 .01-.01.01-.01.02-.01.02-.02.03-.03.05-.09.15-.18.32-.25.5-.01.03-.03.05-.04.08-.01.02-.01.04-.02.07-.12.34-.2.75-.2 1.25h2c0-.42.11-.77.28-1.07.02-.03.03-.06.05-.09.08-.14.18-.27.28-.39.01-.01.02-.03.03-.04.1-.12.21-.23.33-.34.96-.91 2.26-1.65 1.99-3.56-.24-1.74-1.61-3.21-3.35-3.47Z"/></svg></sinch-tooltip>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-help-tooltip', class extends NectaryElement {

package/icon/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getAttribute, NectaryElement, updateAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block}#icon{display:block;font-family:var(--sinch-comp-icon-font-family);font-weight:var(--sinch-comp-icon-font-weight);font-size:var(--sinch-global-size-icon, 24px);font-feature-settings:var(--sinch-comp-icon-font-feature-settings);font-variation-settings:var(--sinch-comp-icon-font-variation-settings);-webkit-font-smoothing:antialiased;line-height:1;white-space:nowrap;width:var(--sinch-global-size-icon,24px);height:var(--sinch-global-size-icon,24px);color:var(--sinch-global-color-icon,var(--sinch-sys-color-text-default));user-select:none}</style><span id="icon" role="img"></span>';
+const templateHTML = '<style>:host{display:inline-block}#icon{display:block;font-family:var(--sinch-comp-icon-font-family);font-weight:var(--sinch-comp-icon-font-weight);font-size:var(--sinch-global-size-icon, 24px);font-feature-settings:var(--sinch-comp-icon-font-feature-settings);-webkit-font-smoothing:antialiased;line-height:1;white-space:nowrap;width:var(--sinch-global-size-icon,24px);height:var(--sinch-global-size-icon,24px);color:var(--sinch-global-color-icon,var(--sinch-sys-color-text-default));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,8 +1,8 @@
 import '../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}#button{all:initial;display:block;position:relative;width:var(--sinch-local-size);height:var(--sinch-local-size);cursor:pointer;contain:size;--sinch-global-color-icon:var(--sinch-local-color-icon)}#button:disabled{cursor:initial}:host([data-size="l"]) #button{--sinch-local-size:var(--sinch-comp-icon-button-size-container-l);--sinch-global-size-icon:var(--sinch-comp-icon-button-size-icon-l);--sinch-local-shape-radius:var(--sinch-comp-icon-button-shape-radius-size-l)}#button,:host([data-size="m"]) #button{--sinch-local-size:var(--sinch-comp-icon-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-icon-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-icon-button-shape-radius-size-m)}:host([data-size="s"]) #button{--sinch-local-size:var(--sinch-comp-icon-button-size-container-s);--sinch-global-size-icon:var(--sinch-comp-icon-button-size-icon-s);--sinch-local-shape-radius:var(--sinch-comp-icon-button-shape-radius-size-s)}:host([data-size=xs]) #button{--sinch-local-size:var(--sinch-comp-icon-button-size-container-xs);--sinch-global-size-icon:var(--sinch-comp-icon-button-size-icon-xs);--sinch-local-shape-radius:var(--sinch-comp-icon-button-shape-radius-size-xs)}:host([type=primary]) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-icon-button-color-primary-default-border-initial);--sinch-local-color-icon:var(--sinch-comp-icon-button-color-primary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-primary-initial);--sinch-local-color-outline:var(--sinch-comp-icon-button-color-primary-default-outline-focus)}:host([type=secondary]) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-icon-button-color-secondary-default-border-initial);--sinch-local-color-icon:var(--sinch-comp-icon-button-color-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-secondary-initial);--sinch-local-color-outline:var(--sinch-comp-icon-button-color-secondary-default-outline-focus)}#button,:host([type=tertiary]) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-tertiary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-icon-button-color-tertiary-default-border-initial);--sinch-local-color-icon:var(--sinch-comp-icon-button-color-tertiary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-tertiary-initial);--sinch-local-color-outline:var(--sinch-comp-icon-button-color-tertiary-default-outline-focus)}:host([type=primary]) #button:disabled{--sinch-local-color-background:var(--sinch-comp-icon-button-color-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-icon-button-color-primary-disabled-border-initial);--sinch-local-color-icon:var(--sinch-comp-icon-button-color-primary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-primary-disabled)}:host([type=secondary]) #button:disabled{--sinch-local-color-background:var(--sinch-comp-icon-button-color-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-icon-button-color-secondary-disabled-border-initial);--sinch-local-color-icon:var(--sinch-comp-icon-button-color-secondary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-secondary-disabled)}#button:disabled,:host([type=tertiary]) #button:disabled{--sinch-local-color-background:var(--sinch-comp-icon-button-color-tertiary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-icon-button-color-tertiary-disabled-border-initial);--sinch-local-color-icon:var(--sinch-comp-icon-button-color-tertiary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-tertiary-disabled)}:host([type=primary]) #button:focus{--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-primary-focus)}:host([type=secondary]) #button:focus{--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-secondary-focus)}#button:focus,:host([type=tertiary]) #button:focus{--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-tertiary-focus)}:host([type=primary]) #button:enabled:hover{--sinch-local-color-background:var(--sinch-comp-icon-button-color-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-primary-hover)}:host([type=secondary]) #button:enabled:hover{--sinch-local-color-background:var(--sinch-comp-icon-button-color-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-secondary-hover)}#button:enabled:hover,:host([type=tertiary]) #button:enabled:hover{--sinch-local-color-background:var(--sinch-comp-icon-button-color-tertiary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-tertiary-hover)}:host([type=primary]) #button:enabled:active{--sinch-local-color-background:var(--sinch-comp-icon-button-color-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-primary-active)}:host([type=secondary]) #button:enabled:active{--sinch-local-color-background:var(--sinch-comp-icon-button-color-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-secondary-active)}#button:enabled:active,:host([type=tertiary]) #button:enabled:active{--sinch-local-color-background:var(--sinch-comp-icon-button-color-tertiary-default-background-active);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-tertiary-active)}#button::before{content:"";position:absolute;inset:0;background-color:var(--sinch-local-color-background);border:1px solid var(--sinch-local-color-border);border-radius:var(--sinch-local-shape-radius);box-shadow:var(--sinch-local-shadow);pointer-events:none}#button:focus-visible::after{content:"";position:absolute;inset:-3px;border:2px solid var(--sinch-local-color-outline);border-radius:calc(var(--sinch-local-shape-radius) + 3px);pointer-events:none}#content{position:relative;display:flex;align-items:center;justify-content:center;width:var(100%);height:var(100%)}</style><sinch-tooltip id="tooltip"><button id="button"><div id="content"><slot name="icon"></slot></div></button></sinch-tooltip>';
-import { assertType, typeValues } from './utils';
+import { DEFAULT_SIZE, sizeExValues } from '../utils/size';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#button{display:block;position:relative;width:var(--sinch-local-size);height:var(--sinch-local-size);cursor:pointer;contain:size;--sinch-global-color-icon:var(--sinch-local-color-icon)}:host([disabled]) #button{cursor:initial}:host([data-size="l"]) #button{--sinch-local-size:var(--sinch-comp-icon-button-size-container-l);--sinch-global-size-icon:var(--sinch-comp-icon-button-size-icon-l);--sinch-local-shape-radius:var(--sinch-comp-icon-button-shape-radius-size-l)}#button,:host([data-size="m"]) #button{--sinch-local-size:var(--sinch-comp-icon-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-icon-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-icon-button-shape-radius-size-m)}:host([data-size="s"]) #button{--sinch-local-size:var(--sinch-comp-icon-button-size-container-s);--sinch-global-size-icon:var(--sinch-comp-icon-button-size-icon-s);--sinch-local-shape-radius:var(--sinch-comp-icon-button-shape-radius-size-s)}:host([data-size=xs]) #button{--sinch-local-size:var(--sinch-comp-icon-button-size-container-xs);--sinch-global-size-icon:var(--sinch-comp-icon-button-size-icon-xs);--sinch-local-shape-radius:var(--sinch-comp-icon-button-shape-radius-size-xs)}:host([type=primary]) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-icon-button-color-primary-default-border-initial);--sinch-local-color-icon:var(--sinch-comp-icon-button-color-primary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-primary-initial);--sinch-local-color-outline:var(--sinch-comp-icon-button-color-primary-default-outline-focus)}:host([type=secondary]) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-icon-button-color-secondary-default-border-initial);--sinch-local-color-icon:var(--sinch-comp-icon-button-color-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-secondary-initial);--sinch-local-color-outline:var(--sinch-comp-icon-button-color-secondary-default-outline-focus)}#button,:host([type=tertiary]) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-tertiary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-icon-button-color-tertiary-default-border-initial);--sinch-local-color-icon:var(--sinch-comp-icon-button-color-tertiary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-tertiary-initial);--sinch-local-color-outline:var(--sinch-comp-icon-button-color-tertiary-default-outline-focus)}:host([type=primary][disabled]) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-icon-button-color-primary-disabled-border-initial);--sinch-local-color-icon:var(--sinch-comp-icon-button-color-primary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-primary-disabled)}:host([type=secondary][disabled]) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-icon-button-color-secondary-disabled-border-initial);--sinch-local-color-icon:var(--sinch-comp-icon-button-color-secondary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-secondary-disabled)}:host([disabled]) #button,:host([type=tertiary][disabled]) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-tertiary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-icon-button-color-tertiary-disabled-border-initial);--sinch-local-color-icon:var(--sinch-comp-icon-button-color-tertiary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-tertiary-disabled)}:host([type=primary]:focus) #button{--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-primary-focus)}:host([type=secondary]:focus) #button{--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-secondary-focus)}:host(:focus),:host([type=tertiary]:focus) #button{--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-tertiary-focus)}:host([type=primary]:not([disabled]):hover) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-primary-hover)}:host([type=secondary]:not([disabled]):hover) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-secondary-hover)}:host(:not([disabled]):hover) #button,:host([type=tertiary]:not([disabled]):active) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-tertiary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-tertiary-hover)}:host([type=primary]:not([disabled]):active) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-primary-active)}:host([type=secondary]:not([disabled]):active) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-secondary-active)}:host(:not([disabled]):active) #button,:host([type=tertiary]:not([disabled]):active) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-tertiary-default-background-active);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-tertiary-active)}#button::before{content:"";position:absolute;inset:0;background-color:var(--sinch-local-color-background);border:1px solid var(--sinch-local-color-border);border-radius:var(--sinch-local-shape-radius);box-shadow:var(--sinch-local-shadow);pointer-events:none}:host(:focus-visible) #button::after{content:"";position:absolute;inset:-3px;border:2px solid var(--sinch-local-color-outline);border-radius:calc(var(--sinch-local-shape-radius) + 3px);pointer-events:none}#content{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%}</style><sinch-tooltip id="tooltip"><div id="button"><div id="content" inert><slot name="icon"></slot></div></div></sinch-tooltip>';
+import { typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-icon-button', class extends NectaryElement {
@@ -13,7 +13,7 @@ defineCustomElement('sinch-icon-button', class extends NectaryElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow({
-      delegatesFocus: true
+      delegatesFocus: false
     });
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$button = shadowRoot.querySelector('#button');
@@ -26,10 +26,12 @@ defineCustomElement('sinch-icon-button', class extends NectaryElement {
     const options = {
       signal: this.#controller.signal
     };
-    this.setAttribute('role', 'button');
-    this.#$button.addEventListener('click', this.#onButtonClick, options);
-    this.#$button.addEventListener('focus', this.#onButtonFocus, options);
-    this.#$button.addEventListener('blur', this.#onButtonBlur, options);
+    this.role = 'button';
+    this.tabIndex = 0;
+    this.addEventListener('click', this.#onButtonClick, options);
+    this.addEventListener('focus', this.#onButtonFocus, options);
+    this.addEventListener('blur', this.#onButtonBlur, options);
+    this.addEventListener('keydown', this.#onButtonKeydown, options);
     this.addEventListener('-click', this.#onClickReactHandler, options);
     this.addEventListener('-focus', this.#onFocusReactHandler, options);
     this.addEventListener('-blur', this.#onBlurReactHandler, options);
@@ -46,7 +48,7 @@ defineCustomElement('sinch-icon-button', class extends NectaryElement {
     this.#controller.abort();
   }
   static get observedAttributes() {
-    return ['type', 'size', 'disabled', 'aria-label', 'data-size'];
+    return ['size', 'disabled', 'aria-label', 'data-size'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
@@ -56,7 +58,6 @@ defineCustomElement('sinch-icon-button', class extends NectaryElement {
       case 'disabled':
         {
           const isDisabled = isAttrTrue(newVal);
-          this.#$button.disabled = isDisabled;
           updateBooleanAttribute(this, 'disabled', isDisabled);
           break;
         }
@@ -65,13 +66,6 @@ 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);
@@ -79,9 +73,6 @@ defineCustomElement('sinch-icon-button', class extends NectaryElement {
         }
       case 'data-size':
         {
-          if ('production' !== 'production') {
-            assertSizeEx(newVal, 'sinch-icon-button');
-          }
           this.#onSizeUpdate();
           break;
         }
@@ -111,12 +102,6 @@ defineCustomElement('sinch-icon-button', class extends NectaryElement {
   get focusable() {
     return true;
   }
-  focus() {
-    this.#$button.focus();
-  }
-  blur() {
-    this.#$button.blur();
-  }
   #onSizeUpdate() {
     if (!this.isConnected) {
       return;
@@ -146,7 +131,9 @@ defineCustomElement('sinch-icon-button', class extends NectaryElement {
     }
   };
   #onButtonClick = () => {
-    this.dispatchEvent(new CustomEvent('-click'));
+    if (!this.disabled) {
+      this.dispatchEvent(new CustomEvent('-click'));
+    }
   };
   #onButtonFocus = () => {
     this.dispatchEvent(new CustomEvent('-focus'));
@@ -154,6 +141,15 @@ defineCustomElement('sinch-icon-button', class extends NectaryElement {
   #onButtonBlur = () => {
     this.dispatchEvent(new CustomEvent('-blur'));
   };
+  #onButtonKeydown = e => {
+    switch (e.code) {
+      case 'Space':
+      case 'Enter':
+        {
+          this.click();
+        }
+    }
+  };
   #onTooltipShow = () => {
     this.dispatchEvent(new CustomEvent('-tooltip-show'));
   };

package/icon-button/utils.d.ts

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

package/icon-button/utils.js

@@ -1,9 +1 @@
-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}`);
-  }
-};
+export const typeValues = ['primary', 'secondary', 'tertiary'];

package/inline-alert/index.js

@@ -4,7 +4,7 @@ import '../text';
 import '../title';
 import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, setClass } from '../utils';
 const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:16px;border-radius:var(--sinch-comp-inline-alert-shape-radius);box-sizing:border-box;width:100%}:host([type=success]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-success-default-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-info-default-background)}#icon-error,#icon-info,#icon-success,#icon-warn{display:none}#icon-success{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-success-default-icon)}#icon-warn{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-warning-default-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-error-default-icon)}#icon-info{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-info-default-icon)}:host([type=error]) #icon-error,:host([type=info]) #icon-info,:host([type=success]) #icon-success,:host([type=warn]) #icon-warn{display:block}#body-wrapper{display:flex;flex-direction:column;align-items:flex-start;margin-left:8px;min-width:0;flex:1}#caption{align-self:stretch;--sinch-comp-title-font:var(--sinch-comp-inline-alert-font-title)}:host([type=success]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-success-default-text)}:host([type=warn]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-warning-default-text)}:host([type=error]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-error-default-text)}:host([type=info]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-info-default-text)}#text{display:flex;flex-direction:column;gap:8px;margin-top:4px;align-self:stretch;--sinch-comp-rich-text-font:var(--sinch-comp-inline-alert-font-body)}:host([type=success]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-success-default-text)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-info-default-text)}#action{display:flex;margin-top:16px;min-width:0}#action.empty{display:none}#close{margin-left:16px}#close.empty{display:none}</style><div id="wrapper"><sinch-icon id="icon-info" name="info"></sinch-icon><sinch-icon id="icon-success" name="check_circle"></sinch-icon><sinch-icon id="icon-warn" name="report_problem"></sinch-icon><sinch-icon id="icon-error" name="report"></sinch-icon><div id="body-wrapper"><sinch-title id="caption" level="3" type="s" ellipsis></sinch-title><sinch-rich-text id="text"></sinch-rich-text><div id="action"><slot name="action"></slot></div></div><div id="close"><slot name="close"></slot></div></div>';
-import { assertType, typeValues } from './utils';
+import { typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-inline-alert', class extends NectaryElement {
@@ -40,17 +40,10 @@ defineCustomElement('sinch-inline-alert', class extends NectaryElement {
     this.#$actionSlot.removeEventListener('slotchange', this.#onActionSlotChange);
   }
   static get observedAttributes() {
-    return ['text', 'caption', 'type'];
+    return ['text', 'caption'];
   }
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
-      case 'type':
-        {
-          if ('production' !== 'production') {
-            assertType(newVal);
-          }
-          break;
-        }
       case 'text':
         {
           updateAttribute(this.#$text, 'text', newVal);

package/inline-alert/utils.d.ts

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