@nectary/components 2.0.0 → 2.1.1

package/skeleton/index.js

@@ -1,4 +1,4 @@
-import { defineCustomElement, getUid, isAttrTrue, NectaryElement, shouldReduceMotion } from '../utils';
+import { attrValueToInteger, defineCustomElement, getCssVar, getUid, isAttrTrue, NectaryElement, shouldReduceMotion } from '../utils';
 const templateHTML = '<style>:host{display:block}#wrapper{position:relative;display:flex;flex-direction:column;gap:16px;height:100%;box-sizing:border-box;overflow:hidden}:host([card]:not([card=false]))>#wrapper{padding:16px;background-color:var(--sinch-sys-color-container-main-default);border-radius:var(--sinch-sys-shape-radius-l);border:1px solid var(--sinch-sys-color-border-light)}#shimmer{position:absolute;inset:0;background-image:linear-gradient(90deg,transparent 0,var(--sinch-sys-color-container-contrast-primary-default) 100px,transparent 200px);clip-path:url("#clip")}#svg{display:block;width:0;height:0}</style><svg id="svg"><defs><clipPath id="clip"></clipPath></defs></svg><div id="wrapper"><slot></slot><div id="shimmer"></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -7,14 +7,20 @@ const BORDER_WIDTH = 1;
 defineCustomElement('sinch-skeleton', class extends NectaryElement {
   #animation = null;
   #shimmer;
+  #wrapper;
+  #slot;
   #controller = null;
   #clip;
   #borderWidth = 0;
+  #bb = null;
+  #observer = null;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#shimmer = shadowRoot.querySelector('#shimmer');
+    this.#slot = shadowRoot.querySelector('slot');
+    this.#wrapper = shadowRoot.querySelector('#wrapper');
     this.#clip = shadowRoot.querySelector('#clip');
   }
   connectedCallback() {
@@ -23,10 +29,24 @@ defineCustomElement('sinch-skeleton', class extends NectaryElement {
     this.#clip.setAttribute('id', id);
     this.#controller = new AbortController();
     if (!shouldReduceMotion()) {
-      this.addEventListener('skeleton-item-data', this.#onSkeletonItemData, {
+      this.#slot.addEventListener('slotchange', this.#onSlotChange, {
         signal: this.#controller.signal
       });
-      this.#updateAnimation();
+      this.#observer = new IntersectionObserver(entries => {
+        this.#bb = entries[0].boundingClientRect;
+        if (this.#bb.width === 0) {
+          return;
+        }
+        this.#updateAnimation();
+        for (const child of this.#slot.assignedElements()) {
+          this.#handleSkeletonItemData(child);
+        }
+        this.#observer.disconnect();
+        this.#observer = null;
+      }, {
+        threshold: 1
+      });
+      this.#observer.observe(this.#wrapper);
     }
   }
   disconnectedCallback() {
@@ -34,6 +54,8 @@ defineCustomElement('sinch-skeleton', class extends NectaryElement {
     this.#animation = null;
     this.#controller.abort();
     this.#controller = null;
+    this.#observer?.disconnect();
+    this.#observer = null;
   }
   static get observedAttributes() {
     return ['card'];
@@ -51,7 +73,7 @@ defineCustomElement('sinch-skeleton', class extends NectaryElement {
     }
   }
   #updateAnimation() {
-    const bb = this.getBoundingClientRect();
+    const bb = this.#bb;
     const bgWidth = bb.width * 4;
     this.#shimmer.style.setProperty('background-size', `${bgWidth}px`);
     this.#animation = this.#shimmer.animate({
@@ -61,15 +83,29 @@ defineCustomElement('sinch-skeleton', class extends NectaryElement {
       iterations: Infinity
     });
   }
-  #onSkeletonItemData = e => {
-    const bb = this.getBoundingClientRect();
-    const data = e.detail;
+  #onSlotChange = () => {
+    this.#clip.innerHTML = '';
+    if (this.#bb === null) {
+      return;
+    }
+    for (const child of this.#slot.assignedElements()) {
+      this.#handleSkeletonItemData(child);
+    }
+  };
+  #handleSkeletonItemData(child) {
+    const data = child.getBoundingClientRect();
+    const radiusStr = getCssVar(child, '--sinch-local-shape-radius') ?? '0';
+    const radius = attrValueToInteger(radiusStr, {
+      min: 0,
+      defaultValue: 0
+    });
+    const bb = this.#bb;
     const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
     rect.setAttribute('x', (data.x - bb.x - this.#borderWidth).toString());
     rect.setAttribute('y', (data.y - bb.y - this.#borderWidth).toString());
     rect.setAttribute('width', data.width.toString());
     rect.setAttribute('height', data.height.toString());
-    rect.setAttribute('rx', data.radius.toString());
+    rect.setAttribute('rx', radius.toString());
     this.#clip.appendChild(rect);
-  };
+  }
 });

package/skeleton-item/index.js

@@ -1,4 +1,4 @@
-import { defineCustomElement, getCssVar, NectaryElement, attrValueToInteger, shouldReduceMotion } from '../utils';
+import { defineCustomElement, NectaryElement } from '../utils';
 const templateHTML = '<style>:host{display:block;height:var(--sinch-sys-size-m);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-m)}:host([size=xs]){height:var(--sinch-sys-size-xs);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-xs)}:host([size="s"]){height:var(--sinch-sys-size-s);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-s)}:host([size="m"]){height:var(--sinch-sys-size-m);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-m)}:host([size="l"]){height:var(--sinch-sys-size-l);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-l)}#content{height:100%;background-color:var(--sinch-sys-color-border-light);border-radius:var(--sinch-local-shape-radius)}</style><div id="content"></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -8,31 +8,4 @@ defineCustomElement('sinch-skeleton-item', class extends NectaryElement {
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
   }
-  connectedCallback() {
-    if (!shouldReduceMotion()) {
-      requestAnimationFrame(() => {
-        const {
-          x,
-          y,
-          width,
-          height
-        } = this.getBoundingClientRect();
-        const radiusStr = getCssVar(this, '--sinch-shape-radius') ?? '0';
-        const radius = attrValueToInteger(radiusStr, {
-          min: 0,
-          defaultValue: 0
-        });
-        this.dispatchEvent(new CustomEvent('skeleton-item-data', {
-          bubbles: true,
-          detail: {
-            x,
-            y,
-            width,
-            height,
-            radius
-          }
-        }));
-      });
-    }
-  }
 });

package/spinner/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getLiteralAttribute, NectaryElement, subscribeContext, updateAttribute, updateLiteralAttribute } from '../utils';
-import { assertSize, DEFAULT_SIZE, sizeValues } from '../utils/size';
+import { DEFAULT_SIZE, sizeValues } from '../utils/size';
 const templateHTML = '<style>@keyframes spinner{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}:host{display:block}#spinner-size-l,#spinner-size-m,#spinner-size-s{display:none;will-change:transform}:host([data-size="l"])>#spinner-size-l{display:block;animation:1s linear infinite spinner}:host([data-size="m"])>#spinner-size-m{display:block;animation:1s linear infinite spinner}:host([data-size="s"])>#spinner-size-s{display:block;animation:1s linear infinite spinner}.bg{opacity:.3;stroke:var(--sinch-global-color-icon,var(--sinch-sys-color-text-default))}.fg{stroke:var(--sinch-global-color-icon,var(--sinch-sys-color-text-default))}</style><svg id="spinner-size-l" width="50" height="50" fill="none"><circle class="bg" cx="25" cy="25" r="22" stroke-width="6"/><path class="fg" d="M25 3a22 22 0 0 1 22 22" stroke-width="6" stroke-linecap="round"/></svg><svg id="spinner-size-m" width="24" height="24" fill="none"><circle class="bg" cx="12" cy="12" r="9" stroke-width="4"/><path class="fg" d="M21 12a9 9 0 0 0-9-9" stroke-width="4" stroke-linecap="round"/></svg><svg id="spinner-size-s" width="16" height="16" fill="none"><circle class="bg" cx="8" cy="8" r="6" stroke-width="2"/><path class="fg" d="M14 8a6 6 0 0 0-6-6" stroke-width="2" stroke-linecap="round"/></svg>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -20,7 +20,7 @@ defineCustomElement('sinch-spinner', class extends NectaryElement {
     this.#controller.abort();
   }
   static get observedAttributes() {
-    return ['size', 'data-size'];
+    return ['size'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
@@ -32,13 +32,6 @@ defineCustomElement('sinch-spinner', class extends NectaryElement {
           updateAttribute(this, 'data-size', newVal);
           break;
         }
-      case 'data-size':
-        {
-          if ('production' !== 'production') {
-            assertSize(newVal, 'sinch-spinner');
-          }
-          break;
-        }
     }
   }
   set size(size) {

package/tabs/index.js

@@ -69,10 +69,6 @@ defineCustomElement('sinch-tabs', class extends NectaryElement {
     }
   }
   #dispatchChangeEvent(value) {
-    this.dispatchEvent(new CustomEvent('change', {
-      detail: value,
-      bubbles: true
-    }));
     this.dispatchEvent(new CustomEvent('-change', {
       detail: value
     }));

package/tag/index.js

@@ -1,7 +1,7 @@
 import '../text';
 import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, isAttrTrue } from '../utils';
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:var(--sinch-comp-tag-size-container-m);padding:0 9px;border-radius:var(--sinch-comp-tag-shape-radius);background-color:var(--sinch-comp-tag-color-default-background);box-sizing:border-box;user-select:none;--sinch-global-color-text:var(--sinch-comp-tag-color-default-foreground);--sinch-global-color-icon:var(--sinch-comp-tag-color-default-foreground);--sinch-global-size-icon:var(--sinch-comp-tag-size-icon-m)}:host([small]) #wrapper{height:var(--sinch-comp-tag-size-container-s);padding:0 8px;--sinch-global-size-icon:var(--sinch-comp-tag-size-icon-s)}#text{flex:1;--sinch-comp-text-font:var(--sinch-comp-tag-font-size-m-label)}:host([small]) #text{--sinch-comp-text-font:var(--sinch-comp-tag-font-size-s-label)}::slotted(*){margin-left:-4px}</style><div id="wrapper"><slot name="icon"></slot><sinch-text id="text" type="s" ellipsis></sinch-text></div>';
-import { assertTagColor, getTagColorBg, getTagColorFg } from './utils';
+import { getTagColorBg, getTagColorFg } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-tag', class extends NectaryElement {
@@ -67,9 +67,6 @@ defineCustomElement('sinch-tag', class extends NectaryElement {
     }
     const colorName = this.color;
     if (colorName !== null && colorName.length > 0) {
-      if ('production' !== 'production') {
-        assertTagColor(this, colorName);
-      }
       const bg = getTagColorBg(colorName);
       const fg = getTagColorFg(colorName);
       this.#$wrapper.style.setProperty('background-color', bg);

package/tag/utils.d.ts

@@ -1,3 +1,2 @@
 export declare const getTagColorBg: (id: string) => string;
 export declare const getTagColorFg: (id: string) => string;
-export declare const assertTagColor: (root: Element, id: string | null) => void;

package/tag/utils.js

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

package/text/index.js

@@ -1,6 +1,6 @@
 import { defineCustomElement, getBooleanAttribute, updateBooleanAttribute, NectaryElement, getLiteralAttribute, updateLiteralAttribute, isAttrTrue } from '../utils';
 const templateHTML = '<style>:host{display:block;font:var(--sinch-comp-text-font);color:var(--sinch-global-color-text,var(--sinch-sys-color-text-default));--sinch-comp-text-font:var(--sinch-sys-font-body-m)}:host([inline]){display:inline}:host([type="s"]){--sinch-comp-text-font:var(--sinch-sys-font-body-s)}:host([type=xs]){--sinch-comp-text-font:var(--sinch-sys-font-body-xs)}:host([type=xxs]){--sinch-comp-text-font:var(--sinch-sys-font-body-xxs)}:host([type="m"][emphasized]){--sinch-comp-text-font:var(--sinch-sys-font-body-emphasize)}:host([type="s"][emphasized]){--sinch-comp-text-font:var(--sinch-sys-font-body-emphasize-s)}:host([ellipsis]){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--sinch-global-text-white-space:nowrap}</style><slot></slot>';
-import { assertType, typeValues } from './utils';
+import { typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-text', class extends NectaryElement {
@@ -13,17 +13,10 @@ defineCustomElement('sinch-text', class extends NectaryElement {
     this.#updateRole();
   }
   static get observedAttributes() {
-    return ['type', 'inline', 'ellipsis', 'emphasized'];
+    return ['inline', 'ellipsis', 'emphasized'];
   }
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
-      case 'type':
-        {
-          if ('production' !== 'production') {
-            assertType(newVal);
-          }
-          break;
-        }
       case 'inline':
         {
           this.#updateRole();

package/text/utils.d.ts

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

package/text/utils.js

@@ -1,6 +1 @@
-export const typeValues = ['m', 's', 'xs', 'xxs'];
-export const assertType = value => {
-  if (value === null || !typeValues.includes(value)) {
-    throw new Error(`sinch-text: invalid "type" attribute: "${value}"`);
-  }
-};
+export const typeValues = ['m', 's', 'xs', 'xxs'];

package/textarea/index.js

@@ -185,10 +185,6 @@ defineCustomElement('sinch-textarea', class extends NectaryElement {
       }
       this.#isPendingDk = false;
       this.#cursorPos = nextCursorPos;
-      this.dispatchEvent(new CustomEvent('change', {
-        detail: nextValue,
-        bubbles: true
-      }));
       this.dispatchEvent(new CustomEvent('-change', {
         detail: nextValue
       }));

package/tile-control/index.js

@@ -79,10 +79,6 @@ defineCustomElement('sinch-tile-control', class extends NectaryElement {
     const $elem = e.target;
     const value = e.detail;
     const detail = this.multiple ? updateCsv(this.value, value, !getBooleanAttribute($elem, 'data-checked')) : value;
-    this.dispatchEvent(new CustomEvent('change', {
-      detail,
-      bubbles: true
-    }));
     this.dispatchEvent(new CustomEvent('-change', {
       detail
     }));

package/time-picker/index.js

@@ -97,7 +97,7 @@ defineCustomElement('sinch-time-picker', class extends NectaryElement {
       signal: this.#controller.signal
     };
     this.#$pickerTouch.addEventListener('click', this.#onPickerClick, options);
-    this.#$ampm.addEventListener('change', this.#onAmPmChange, options);
+    this.#$ampm.addEventListener('-change', this.#onAmPmChange, options);
     this.#$submitButton.addEventListener('click', this.#onSubmitButtonClick, options);
     this.#$needleHour.addEventListener('keydown', this.#onHoursKeydown, options);
     this.#$needleMinute.addEventListener('keydown', this.#onMinutesKeydown, options);
@@ -116,9 +116,6 @@ defineCustomElement('sinch-time-picker', class extends NectaryElement {
     switch (name) {
       case 'value':
         {
-          if (newVal === null) {
-            throw new Error('Missing "value" attribute');
-          }
           const {
             hours,
             minutes
@@ -272,7 +269,6 @@ defineCustomElement('sinch-time-picker', class extends NectaryElement {
     this.#$needleMinute.style.transform = `rotate(${minuteCssDeg}deg)`;
   }
   #onAmPmChange = e => {
-    e.stopPropagation();
     const value = e.detail;
     switch (value) {
       case 'am':
@@ -295,10 +291,6 @@ defineCustomElement('sinch-time-picker', class extends NectaryElement {
   };
   #onSubmitButtonClick = () => {
     const value = stringifyTime(this.#hour, this.#minute);
-    this.dispatchEvent(new CustomEvent('change', {
-      bubbles: true,
-      detail: value
-    }));
     this.dispatchEvent(new CustomEvent('-change', {
       detail: value
     }));

package/time-picker/utils.d.ts

@@ -1,4 +1,4 @@
-export declare const parseTime: (value: string) => {
+export declare const parseTime: (value: string | null) => {
     hours: number;
     minutes: number;
 };

package/time-picker/utils.js

@@ -1,5 +1,5 @@
 export const parseTime = value => {
-  if (value === '') {
+  if (value === '' || value === null) {
     return {
       hours: 0,
       minutes: 0
@@ -7,19 +7,31 @@ export const parseTime = value => {
   }
   const timeParts = value.split(':');
   if (timeParts.length < 3) {
-    throw new Error(`Incorrect time format: ${value}. Should be "hh:mm:ss"`);
+    return {
+      hours: 0,
+      minutes: 0
+    };
   }
   const hours = parseInt(timeParts[0]);
   const minutes = parseInt(timeParts[1]);
   const seconds = parseInt(timeParts[2]);
   if (isNaN(hours) || hours > 23 || hours < 0) {
-    throw new Error(`Invalid hours value: ${value}`);
+    return {
+      hours: 0,
+      minutes: 0
+    };
   }
   if (isNaN(minutes) || minutes > 59 || minutes < 0) {
-    throw new Error(`Invalid minutes value: ${value}`);
+    return {
+      hours: 0,
+      minutes: 0
+    };
   }
   if (isNaN(seconds) || seconds > 59 || seconds < 0) {
-    throw new Error(`Invalid seconds value: ${value}`);
+    return {
+      hours: 0,
+      minutes: 0
+    };
   }
   return {
     hours,

package/title/index.js

@@ -1,6 +1,6 @@
 import { defineCustomElement, getAttribute, updateAttribute, updateLiteralAttribute, getLiteralAttribute, NectaryElement, updateBooleanAttribute, getBooleanAttribute, isAttrTrue } from '../utils';
 const templateHTML = '<style>:host{display:block;--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-m)}:host([type=xl]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-xl)}:host([type="l"]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-l)}:host([type="m"]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-m)}:host([type="s"]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-s)}:host([type=xs]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-xs)}#text{letter-spacing:-2%;color:var(--sinch-global-color-text,var(--sinch-sys-color-text-default));font:var(--sinch-comp-title-font)}:host([ellipsis]) #text{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}</style><span id="text"></span>';
-import { assertLevel, assertType, typeValues } from './utils';
+import { typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-title', class extends NectaryElement {
@@ -15,7 +15,7 @@ defineCustomElement('sinch-title', class extends NectaryElement {
     this.setAttribute('role', 'heading');
   }
   static get observedAttributes() {
-    return ['text', 'type', 'level', 'ellipsis'];
+    return ['text', 'level', 'ellipsis'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
@@ -29,19 +29,9 @@ defineCustomElement('sinch-title', class extends NectaryElement {
         }
       case 'level':
         {
-          if ('production' !== 'production') {
-            assertLevel(newVal);
-          }
           updateAttribute(this, 'aria-level', newVal);
           break;
         }
-      case 'type':
-        {
-          if ('production' !== 'production') {
-            assertType(newVal);
-          }
-          break;
-        }
       case 'ellipsis':
         {
           updateBooleanAttribute(this, 'ellipsis', isAttrTrue(newVal));

package/title/utils.d.ts

@@ -1,10 +1,3 @@
 import type { TSinchTitleLevel, TSinchTitleType } from './types';
 export declare const typeValues: readonly TSinchTitleType[];
-export declare const levelValues: readonly TSinchTitleLevel[];
-type TAssertLevel = (value: string | null) => asserts value is TSinchTitleLevel;
-export declare const assertLevel: TAssertLevel;
-type TAssertType = (value: string | null) => asserts value is TSinchTitleType;
-export declare const assertType: TAssertType;
 export declare const getTitleLevelFromType: (type: TSinchTitleType) => TSinchTitleLevel;
-export declare const getTitleTypeFromLevel: (level: TSinchTitleLevel) => TSinchTitleType;
-export {};

package/title/utils.js

@@ -1,15 +1,4 @@
 export const typeValues = ['xl', 'l', 'm', 's', 'xs'];
-export const levelValues = ['1', '2', '3', '4', '5', '6'];
-export const assertLevel = value => {
-  if (value === null || !levelValues.includes(value)) {
-    throw new Error(`sinch-title: invalid level attribute: ${value}`);
-  }
-};
-export const assertType = value => {
-  if (value === null || !typeValues.includes(value)) {
-    throw new Error(`sinch-title: invalid type attribute: ${value}`);
-  }
-};
 export const getTitleLevelFromType = type => {
   switch (type) {
     case 'xl':
@@ -23,23 +12,6 @@ export const getTitleLevelFromType = type => {
     case 'xs':
       return '5';
     default:
-      throw new Error(`sinch-title: invalid type value: ${type}`);
-  }
-};
-export const getTitleTypeFromLevel = level => {
-  switch (level) {
-    case '1':
-      return 'xl';
-    case '2':
-      return 'l';
-    case '3':
-      return 'm';
-    case '4':
-      return 's';
-    case '5':
-    case '6':
-      return 'xs';
-    default:
-      throw new Error(`sinch-title: invalid level value: ${level}`);
+      return '';
   }
 };

package/toast/index.js

@@ -3,7 +3,7 @@ import '../title';
 import '../text';
 import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, getReactEventHandler, getBooleanAttribute, updateBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:center;gap:8px;width:328px;padding:8px 16px;box-sizing:border-box;border-radius:var(--sinch-comp-toast-shape-radius);box-shadow:var(--sinch-comp-toast-shadow)}:host([type=success]) #wrapper{background-color:var(--sinch-comp-toast-color-success-default-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-toast-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-toast-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-toast-color-info-default-background)}#text{padding:4px 0 4px 4px;flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-toast-font-body)}:host([type=success]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-success-default-text)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-info-default-text)}#icon{align-self:flex-start;margin:4px 0}#icon-error,#icon-info,#icon-success,#icon-warn{display:none}#icon-success{--sinch-global-color-icon:var(--sinch-comp-toast-color-success-default-icon)}#icon-warn{--sinch-global-color-icon:var(--sinch-comp-toast-color-warning-default-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-toast-color-error-default-icon)}#icon-info{--sinch-global-color-icon:var(--sinch-comp-toast-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}</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><sinch-text id="text" type="m"></sinch-text><slot name="action"></slot><slot name="close"></slot></div>';
-import { assertType, typeValues } from './utils';
+import { typeValues } from './utils';
 const TIMEOUT = 5000;
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -29,20 +29,13 @@ defineCustomElement('sinch-toast', class extends NectaryElement {
     this.#clearTimeout();
   }
   static get observedAttributes() {
-    return ['text', 'type', 'persistent'];
+    return ['text', 'persistent'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
       return;
     }
     switch (name) {
-      case 'type':
-        {
-          if ('production' !== 'production') {
-            assertType(newVal);
-          }
-          break;
-        }
       case 'text':
         {
           this.#$text.textContent = newVal;

package/toast/utils.d.ts

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

package/toast/utils.js

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

package/toggle/index.js

@@ -107,10 +107,6 @@ defineCustomElement('sinch-toggle', class extends NectaryElement {
     e.stopPropagation();
     const isChecked = this.#$input.checked;
     this.#$input.checked = this.checked;
-    this.dispatchEvent(new CustomEvent('change', {
-      detail: isChecked,
-      bubbles: true
-    }));
     this.dispatchEvent(new CustomEvent('-change', {
       detail: isChecked
     }));

package/toggle/types.d.ts

@@ -5,7 +5,6 @@ export type TSinchToggleElement = HTMLElement & {
     labeled: boolean;
     disabled: boolean;
     text: string | null;
-    addEventListener(type: 'change', listener: (e: CustomEvent<boolean>) => void): void;
     addEventListener(type: '-change', listener: (e: CustomEvent<boolean>) => void): void;
     setAttribute(name: 'checked', value: ''): void;
     setAttribute(name: 'small', value: ''): void;

package/tooltip/index.js

@@ -3,7 +3,7 @@ import '../pop';
 import { defineCustomElement, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, setClass, rectOverlap, getReactEventHandler, shouldReduceMotion } from '../utils';
 const templateHTML = '<style>:host{display:contents}#content-wrapper{padding-bottom:8px;filter:drop-shadow(var(--sinch-comp-tooltip-shadow))}:host([orientation=left]) #content-wrapper{padding-bottom:0;padding-right:8px}:host([orientation=right]) #content-wrapper{padding-bottom:0;padding-left:8px}:host([orientation^=bottom]) #content-wrapper{padding-bottom:0;padding-top:8px}#content{position:relative;display:block;max-width:300px;padding:2px 6px;box-sizing:border-box;background-color:var(--sinch-local-color-background);border-radius:var(--sinch-comp-tooltip-shape-radius);pointer-events:none;opacity:0;--sinch-local-color-background:var(--sinch-comp-tooltip-color-background);--sinch-global-color-text:var(--sinch-comp-tooltip-color-text)}#text{word-break:break-word;pointer-events:none;--sinch-comp-text-font:var(--sinch-comp-tooltip-font-body)}#tip{position:absolute;left:50%;top:100%;transform:translateX(-50%) rotate(0);transform-origin:top center;fill:var(--sinch-local-color-background);pointer-events:none}#tip.hidden{display:none}:host([orientation=left]) #tip{transform:translateX(-50%) rotate(270deg);top:50%;left:100%}:host([orientation=right]) #tip{transform:translateX(-50%) rotate(90deg);top:50%;left:0}:host([orientation^=bottom]) #tip{transform:translateX(-50%) rotate(180deg);top:0}</style><sinch-pop id="pop"><slot id="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><sinch-text id="text" type="s"></sinch-text><svg id="tip" width="8" height="4" aria-hidden="true"><path d="m4 4 4-4h-8l4 4Z"/></svg></div></div></sinch-pop>';
 import { TooltipState } from './tooltip-state';
-import { assertOrientation, assertType, getPopOrientation, orientationValues, typeValues } from './utils';
+import { getPopOrientation, orientationValues, typeValues } from './utils';
 const TIP_SIZE = 8;
 const SHOW_DELAY_SLOW = 1000;
 const SHOW_DELAY_FAST = 250;
@@ -73,9 +73,6 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
         }
       case 'orientation':
         {
-          if ('production' !== 'production') {
-            assertOrientation(newVal);
-          }
           updateAttribute(this.#$pop, 'orientation', getPopOrientation(this.orientation));
           if (this.#isOpen()) {
             this.#resetTipOrientation();
@@ -85,9 +82,6 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
         }
       case 'type':
         {
-          if ('production' !== 'production') {
-            assertType(newVal);
-          }
           this.#tooltipState.updateOptions({
             showDelay: newVal === 'fast' ? SHOW_DELAY_FAST : SHOW_DELAY_SLOW
           });

package/tooltip/utils.d.ts

@@ -3,8 +3,3 @@ import type { TSinchPopOrientation } from '../pop/types';
 export declare const typeValues: readonly TSinchTooltipType[];
 export declare const orientationValues: readonly TSinchTooltipOrientation[];
 export declare const getPopOrientation: (orientation: TSinchTooltipOrientation) => TSinchPopOrientation;
-type TAssertOrientation = (value: string | null) => asserts value is TSinchTooltipOrientation;
-export declare const assertOrientation: TAssertOrientation;
-type TAssertType = (value: string | null) => asserts value is TSinchTooltipType;
-export declare const assertType: TAssertType;
-export {};

package/tooltip/utils.js

@@ -14,14 +14,4 @@ export const getPopOrientation = orientation => {
     return 'center-right';
   }
   return orientation;
-};
-export const assertOrientation = value => {
-  if (value !== null && !orientationValues.includes(value)) {
-    throw new Error(`sinch-tooltip: invalid orientation attribute: ${value}`);
-  }
-};
-export const assertType = value => {
-  if (value !== null && !typeValues.includes(value)) {
-    throw new Error(`sinch-tooltip: invalid type attribute: ${value}`);
-  }
 };

package/utils/dom.js

@@ -43,11 +43,6 @@ export function getLiteralAttribute($element, literals, attrName, defaultValue)
   if (isLiteralValue(literals, attrValue)) {
     return attrValue;
   }
-  if (typeof defaultValue === 'undefined') {
-    if ('production' !== 'production') {
-      throw new Error(`Invalid attribute value: ${attrName} = ${attrValue}`);
-    }
-  }
   return defaultValue;
 }
 export const clampNumber = (value, min, max) => {

package/utils/element.js

@@ -25,8 +25,8 @@ export const setNectaryRegistry = registry => {
 export class NectaryElement extends HTMLElement {
   attachShadow(options) {
     return super.attachShadow({
-      mode: 'closed',
-      delegatesFocus: false,
+      mode: 'open',
+      delegatesFocus: true,
       customElements: nectaryRegistry,
       ...options
     });

package/utils/size.d.ts

@@ -3,8 +3,3 @@ export type TSinchSizeEx = TSinchSize | 'xs';
 export declare const DEFAULT_SIZE: TSinchSize;
 export declare const sizeValues: readonly TSinchSize[];
 export declare const sizeExValues: readonly TSinchSizeEx[];
-type TAssertSize = (value: string | null, name: string) => asserts value is TSinchSize;
-export declare const assertSize: TAssertSize;
-type TAssertSizeEx = (value: string | null, name: string) => asserts value is TSinchSizeEx;
-export declare const assertSizeEx: TAssertSizeEx;
-export {};