@nectary/components 1.4.0 → 2.1.0

package/time-picker/index.js

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

package/time-picker/types.d.ts

@@ -1,5 +1,4 @@
 import type { TRect, TSinchElementReact } from '../types';
-import type { SyntheticEvent } from 'react';
 export type TSinchTimePickerElement = HTMLElement & {
     /** Time value in ISO 8601 format */
     value: string;
@@ -30,8 +29,6 @@ export type TSinchTimePickerReact = TSinchElementReact<TSinchTimePickerElement>
     'aria-label': string;
     /** Submit button label that is used for a11y */
     'submit-aria-label': string;
-    /** @deprecated Change value handler, return time in ISO 8601 format */
-    onChange?: (e: SyntheticEvent<TSinchTimePickerElement, CustomEvent<string>>) => void;
     /** Change value handler, return time in ISO 8601 format */
     'on-change'?: (e: CustomEvent<string>) => void;
 };

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 } from '../utils';
-const templateHTML = '<style>:host{display:block}#text{letter-spacing:-2%}:host([type=xl]) #text{font:var(--sinch-font-title-xl)}:host([type="l"]) #text{font:var(--sinch-font-title-l)}:host([type="m"]) #text{font:var(--sinch-font-title-m)}:host([type="s"]) #text{font:var(--sinch-font-title-s)}:host([type=xs]) #text{font:var(--sinch-font-title-xs)}:host([ellipsis]:not([ellipsis=false])) #text{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}</style><span id="text"></span>';
-import { assertLevel, assertType, typeValues } from './utils';
+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 { typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-title', class extends NectaryElement {
@@ -14,28 +14,13 @@ defineCustomElement('sinch-title', class extends NectaryElement {
   connectedCallback() {
     this.setAttribute('role', 'heading');
   }
-  get text() {
-    return getAttribute(this, 'text', '');
-  }
-  set text(value) {
-    updateAttribute(this, 'text', value);
-  }
-  set type(value) {
-    updateLiteralAttribute(this, typeValues, 'type', value);
-  }
-  get type() {
-    return getLiteralAttribute(this, typeValues, 'type');
-  }
-  set ellipsis(isEllipsis) {
-    updateBooleanAttribute(this, 'ellipsis', isEllipsis);
-  }
-  get ellipsis() {
-    return getBooleanAttribute(this, 'ellipsis');
-  }
   static get observedAttributes() {
-    return ['text', 'type', 'level'];
+    return ['text', 'level', 'ellipsis'];
   }
-  attributeChangedCallback(name, _, newVal) {
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
     switch (name) {
       case 'text':
         {
@@ -44,19 +29,32 @@ defineCustomElement('sinch-title', class extends NectaryElement {
         }
       case 'level':
         {
-          if ('production' !== 'production') {
-            assertLevel(newVal);
-          }
           updateAttribute(this, 'aria-level', newVal);
           break;
         }
-      case 'type':
+      case 'ellipsis':
         {
-          if ('production' !== 'production') {
-            assertType(newVal);
-          }
+          updateBooleanAttribute(this, 'ellipsis', isAttrTrue(newVal));
           break;
         }
     }
   }
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+  set type(value) {
+    updateLiteralAttribute(this, typeValues, 'type', value);
+  }
+  get type() {
+    return getLiteralAttribute(this, typeValues, 'type');
+  }
+  set ellipsis(isEllipsis) {
+    updateBooleanAttribute(this, 'ellipsis', isEllipsis);
+  }
+  get ellipsis() {
+    return getBooleanAttribute(this, 'ellipsis');
+  }
 });

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

@@ -1,14 +1,13 @@
 import '../icon';
 import '../title';
 import '../text';
-import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, getReactEventHandler, getBooleanAttribute, updateBooleanAttribute, getCssVar } 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-shape-radius-l);box-shadow:var(--sinch-elevation-level-3)}#text{color:var(--sinch-color-stormy-500);padding:4px 0 4px 4px;flex:1;min-width:0}#icon{align-self:flex-start;margin:4px 0}:host([type=success]) #wrapper{background-color:var(--sinch-color-feedback-success-bg)}:host([type=warn]) #wrapper{background-color:var(--sinch-color-feedback-warning-bg)}:host([type=error]) #wrapper{background-color:var(--sinch-color-feedback-invalid-bg)}:host([type=info]) #wrapper{background-color:var(--sinch-color-feedback-info-bg)}:host([type=success]) #icon{--sinch-color-icon:var(--sinch-color-feedback-success-icon)}:host([type=warn]) #icon{--sinch-color-icon:var(--sinch-color-feedback-warning-icon)}:host([type=error]) #icon{--sinch-color-icon:var(--sinch-color-feedback-invalid-icon)}:host([type=info]) #icon{--sinch-color-icon:var(--sinch-color-feedback-info-icon)}</style><div id="wrapper"><sinch-icon id="icon"></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 { 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 { typeValues } from './utils';
 const TIMEOUT = 5000;
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-toast', class extends NectaryElement {
-  #$icon;
   #$text;
   #tid = null;
   constructor() {
@@ -16,7 +15,6 @@ defineCustomElement('sinch-toast', class extends NectaryElement {
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$text = shadowRoot.querySelector('#text');
-    this.#$icon = shadowRoot.querySelector('#icon');
   }
   connectedCallback() {
     super.connectedCallback();
@@ -24,47 +22,20 @@ defineCustomElement('sinch-toast', class extends NectaryElement {
     this.setAttribute('aria-live', 'polite');
     this.addEventListener('-timeout', this.#onTimeoutReactHandler);
     this.#updateTimeout();
-    this.#updateIcon();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeEventListener('-timeout', this.#onTimeoutReactHandler);
     this.#clearTimeout();
   }
-  get type() {
-    return getLiteralAttribute(this, typeValues, 'type');
-  }
-  set type(value) {
-    updateLiteralAttribute(this, typeValues, 'type', value);
-  }
-  get text() {
-    return getAttribute(this, 'text', '');
-  }
-  set text(value) {
-    updateAttribute(this, 'text', value);
-  }
-  get persistent() {
-    return getBooleanAttribute(this, 'persistent');
-  }
-  set persistent(isPersistent) {
-    updateBooleanAttribute(this, 'persistent', isPersistent);
-  }
   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);
-          }
-          this.#updateIcon();
-          break;
-        }
       case 'text':
         {
           this.#$text.textContent = newVal;
@@ -77,6 +48,24 @@ defineCustomElement('sinch-toast', class extends NectaryElement {
         }
     }
   }
+  get type() {
+    return getLiteralAttribute(this, typeValues, 'type');
+  }
+  set type(value) {
+    updateLiteralAttribute(this, typeValues, 'type', value);
+  }
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+  get persistent() {
+    return getBooleanAttribute(this, 'persistent');
+  }
+  set persistent(isPersistent) {
+    updateBooleanAttribute(this, 'persistent', isPersistent);
+  }
   #updateTimeout() {
     if (this.persistent) {
       this.#clearTimeout();
@@ -86,12 +75,6 @@ defineCustomElement('sinch-toast', class extends NectaryElement {
       this.#tid = window.setTimeout(this.#onTimeout, TIMEOUT);
     }
   }
-  #updateIcon() {
-    if (!this.isConnected) {
-      return;
-    }
-    updateAttribute(this.#$icon, 'name', getCssVar(this, `--sinch-toast-icon-${this.type}`));
-  }
   #onTimeout = () => {
     this.dispatchEvent(new CustomEvent('-timeout'));
   };

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

@@ -1,5 +1,5 @@
 import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;width:100%;height:32px}:host([small]:not([small=false])) #wrapper{font:var(--sinch-font-text-s)}#input{all:initial;display:block;position:absolute;left:0;top:6px;width:40px;height:20px;cursor:pointer;pointer-events:initial}#input:disabled{cursor:initial}:host([small]:not([small=false])) #input{width:32px;height:16px;top:8px}#input:focus-visible::after{position:absolute;content:"";left:-4px;top:-4px;right:-4px;bottom:-4px;border:2px solid var(--sinch-color-border-focus);border-radius:18px;pointer-events:none}:host([small]:not([small=false])) #input:focus-visible::after{border-radius:14px}#knob-container{position:relative;box-sizing:border-box;width:40px;height:20px;border-radius:10px;pointer-events:none;padding:2px;background-color:var(--sinch-color-stormy-100);overflow:hidden}:host([small]:not([small=false])) #knob-container{width:32px;height:16px;border-radius:8px}#input:checked~#knob-container{background-color:var(--sinch-color-tropical-500)}#knob{position:relative;box-sizing:border-box;width:16px;height:16px;border-radius:50%;background-color:var(--sinch-color-snow-100);box-shadow:var(--sinch-elevation-level-1);transform:translateX(0);transition:transform .1s ease-in-out}:host([small]:not([small=false])) #knob{width:12px;height:12px}#input:checked~#knob-container>#knob{transform:translateX(20px)}:host([small]:not([small=false])) #input:checked~#knob-container>#knob{transform:translateX(16px)}#knob::after,#knob::before{font:var(--sinch-font-text-m);color:var(--sinch-color-snow-100);text-transform:uppercase;font-size:8px;line-height:16px;display:none;position:absolute;top:0;padding:0 3px}#knob::before{content:"on";right:100%}#knob::after{content:"off";left:100%}:host([labeled]:not([labeled=false]):is(:not([small]),[small=false])) #knob::after,:host([labeled]:not([labeled=false]):is(:not([small]),[small=false])) #knob::before{display:block}@media (prefers-reduced-motion){#knob{transition:none}}#label{flex:1;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:8px;font:var(--sinch-font-text-m);color:var(--sinch-color-text-default)}#label:empty{display:none}#input:disabled~#label{color:var(--sinch-color-stormy-200)}#input:disabled~#knob-container{background-color:var(--sinch-color-snow-700)}#input:checked:disabled~#knob-container{background-color:var(--sinch-color-tropical-100)}</style><div id="wrapper"><input id="input" type="checkbox"><div id="knob-container"><div id="knob"></div></div><label id="label" for="input"></label></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;width:100%;height:var(--sinch-local-size);--sinch-local-size:24px}:host([small]) #wrapper{--sinch-local-size:22px}#input{all:initial;display:block;position:absolute;left:0;top:2px;width:40px;height:20px;cursor:pointer;pointer-events:initial}#input:disabled{cursor:initial}#input:focus-visible::after{position:absolute;content:"";left:-4px;top:-4px;right:-4px;bottom:-4px;border:2px solid var(--sinch-comp-toggle-color-default-outline-focus);border-radius:18px;pointer-events:none}:host([small]) #input{width:32px;height:16px;top:3px}#knob-container{position:relative;box-sizing:border-box;width:40px;height:20px;border-radius:10px;pointer-events:none;padding:2px;background-color:var(--sinch-comp-toggle-color-default-background-initial);overflow:hidden}:host([small]) #knob-container{width:32px;height:16px;border-radius:8px}#input:checked~#knob-container{background-color:var(--sinch-comp-toggle-color-checked-background-initial)}#input:disabled~#knob-container{background-color:var(--sinch-comp-toggle-color-disabled-background-initial)}#input:checked:disabled~#knob-container{background-color:var(--sinch-comp-toggle-color-checked-disabled-background-initial)}#knob{position:relative;box-sizing:border-box;width:16px;height:16px;border-radius:50%;background-color:var(--sinch-comp-toggle-color-default-knob-background-initial);box-shadow:var(--sinch-comp-toggle-shadow-knob-default);transform:translateX(0);transition:transform .1s ease-in-out;will-change:transform}:host([small]) #knob{width:12px;height:12px}#input:disabled+#knob-container>#knob{box-shadow:var(--sinch-comp-toggle-shadow-knob-disabled)}#input:checked+#knob-container>#knob{transform:translateX(20px)}:host([small]) #input:checked+#knob-container>#knob{transform:translateX(16px)}#knob::after,#knob::before{font:var(--sinch-comp-toggle-font-size-m-inside-text);color:var(--sinch-comp-toggle-color-default-text-inside-initial);text-transform:uppercase;font-size:8px;line-height:16px;display:none;position:absolute;top:0;padding:0 3px}#knob::before{content:"on";right:100%}#knob::after{content:"off";left:100%}:host([labeled]:not([small])) #knob::after,:host([labeled]:not([small])) #knob::before{display:block}@media (prefers-reduced-motion){#knob{transition:none}}#label{flex:1;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:8px;font:var(--sinch-comp-toggle-font-size-m-label);color:var(--sinch-comp-toggle-color-default-label-initial)}#label:empty{display:none}:host([small]) #label{font:var(--sinch-comp-toggle-font-size-s-label)}#input:disabled~#label{color:var(--sinch-comp-toggle-color-disabled-label-initial)}</style><div id="wrapper"><input id="input" type="checkbox"><div id="knob-container"><div id="knob"></div></div><label id="label" for="input"></label></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-toggle', class extends NectaryElement {
@@ -30,13 +30,39 @@ defineCustomElement('sinch-toggle', class extends NectaryElement {
     this.removeEventListener('-blur', this.#onBlurReactHandler);
   }
   static get observedAttributes() {
-    return ['checked', 'disabled', 'text'];
+    return ['checked', 'disabled', 'text', 'labeled', 'small'];
   }
-  get type() {
-    return 'text';
-  }
-  get nodeName() {
-    return 'input';
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+    switch (name) {
+      case 'text':
+        {
+          this.#$label.textContent = newVal;
+          break;
+        }
+      case 'checked':
+        {
+          const isChecked = isAttrTrue(newVal);
+          this.#$input.checked = isChecked;
+          updateExplicitBooleanAttribute(this, 'aria-checked', isChecked);
+          break;
+        }
+      case 'disabled':
+        {
+          const isDisabled = isAttrTrue(newVal);
+          this.#$input.disabled = isDisabled;
+          updateBooleanAttribute(this, name, isDisabled);
+          break;
+        }
+      case 'small':
+      case 'labeled':
+        {
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+          break;
+        }
+    }
   }
   set checked(isChecked) {
     updateBooleanAttribute(this, 'checked', isChecked);
@@ -68,29 +94,6 @@ defineCustomElement('sinch-toggle', class extends NectaryElement {
   get text() {
     return getAttribute(this, 'text');
   }
-  attributeChangedCallback(name, _, newVal) {
-    switch (name) {
-      case 'text':
-        {
-          this.#$label.textContent = newVal;
-          break;
-        }
-      case 'checked':
-        {
-          const isChecked = isAttrTrue(newVal);
-          this.#$input.checked = isChecked;
-          updateExplicitBooleanAttribute(this, 'aria-checked', isChecked);
-          break;
-        }
-      case 'disabled':
-        {
-          const isDisabled = isAttrTrue(newVal);
-          this.#$input.disabled = isDisabled;
-          updateBooleanAttribute(this, 'disabled', isDisabled);
-          break;
-        }
-    }
-  }
   get focusable() {
     return true;
   }

package/toggle/types.d.ts

@@ -1,5 +1,4 @@
 import type { TSinchElementReact } from '../types';
-import type { SyntheticEvent } from 'react';
 export type TSinchToggleElement = HTMLElement & {
     checked: boolean;
     small: boolean;
@@ -21,7 +20,5 @@ export type TSinchToggleReact = TSinchElementReact<TSinchToggleElement> & {
     disabled?: boolean;
     text?: string;
     'aria-label': string;
-    /** @deprecated */
-    onChange?: (e: SyntheticEvent<TSinchToggleElement, CustomEvent<boolean>>) => void;
     'on-change'?: (e: CustomEvent<boolean>) => void;
 };

package/tooltip/index.js

@@ -1,9 +1,9 @@
 import '../text';
 import '../pop';
-import { defineCustomElement, getBooleanAttribute, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, setClass, rectOverlap, getReactEventHandler, shouldReduceMotion } from '../utils';
-const templateHTML = '<style>:host{display:contents}#content-wrapper{padding-bottom:8px}#content{position:relative;display:block;max-width:300px;padding:2px 6px;box-sizing:border-box;color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-600);border-radius:var(--sinch-shape-radius-xs);pointer-events:none;opacity:0}: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}#text{word-break:break-word;pointer-events:none}#tip{position:absolute;left:50%;top:100%;transform:translateX(-50%) rotate(0);transform-origin:top center;fill:var(--sinch-color-snow-600);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}:host([inverted]:not([inverted=false])) #content{background-color:var(--sinch-color-stormy-500);color:var(--sinch-color-text-inverted)}:host([inverted]:not([inverted=false])) #tip{fill:var(--sinch-color-stormy-500)}</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 { 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
           });
@@ -101,12 +95,6 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
   set text(value) {
     updateAttribute(this, 'text', value);
   }
-  get inverted() {
-    return getBooleanAttribute(this, 'inverted');
-  }
-  set inverted(isInverted) {
-    updateBooleanAttribute(this, 'inverted', isInverted);
-  }
   get orientation() {
     return getLiteralAttribute(this, orientationValues, 'orientation', 'top');
   }

package/tooltip/types.d.ts

@@ -4,10 +4,6 @@ export type TSinchTooltipType = 'slow' | 'fast';
 export type TSinchTooltipElement = HTMLElement & {
     /** Text */
     text: string;
-    /** @deprecated */
-    width: number | null;
-    /** Inverted */
-    inverted: boolean;
     /** Orientation, where it *points to* from origin */
     orientation: TSinchTooltipOrientation;
     /** Type */
@@ -20,10 +16,6 @@ export type TSinchTooltipElement = HTMLElement & {
     addEventListener(type: '-hide', listener: (e: CustomEvent<void>) => void): void;
     /** Text */
     setAttribute(name: 'text', value: string): void;
-    /** @deprecated */
-    setAttribute(name: 'width', value: string): void;
-    /** Inverted */
-    setAttribute(name: 'inverted', value: ''): void;
     /** Orientation, where it *points to* from origin */
     setAttribute(name: 'orientation', value: TSinchTooltipOrientation): void;
     /** Type */
@@ -32,10 +24,6 @@ export type TSinchTooltipElement = HTMLElement & {
 export type TSinchTooltipReact = TSinchElementReact<TSinchTooltipElement> & {
     /** Text */
     text: string;
-    /** @deprecated */
-    width?: number;
-    /** Inverted */
-    inverted?: boolean;
     /** Orientation, where it *points to* from origin */
     orientation?: TSinchTooltipOrientation;
     /** Type */

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) => {