@nectary/components 1.3.3 → 2.0.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();
@@ -145,9 +142,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/title/index.js

@@ -1,5 +1,5 @@
-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 { 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';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -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', 'type', 'level', 'ellipsis'];
   }
-  attributeChangedCallback(name, _, newVal) {
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
     switch (name) {
       case 'text':
         {
@@ -57,6 +42,29 @@ defineCustomElement('sinch-title', class extends NectaryElement {
           }
           break;
         }
+      case 'ellipsis':
+        {
+          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/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 { 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';
 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,31 +22,12 @@ 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'];
   }
@@ -62,7 +41,6 @@ defineCustomElement('sinch-toast', class extends NectaryElement {
           if ('production' !== 'production') {
             assertType(newVal);
           }
-          this.#updateIcon();
           break;
         }
       case 'text':
@@ -77,6 +55,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 +82,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/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,11 +1,12 @@
 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, getPopOrientation, orientationValues } from './utils';
+import { assertOrientation, assertType, getPopOrientation, orientationValues, typeValues } from './utils';
 const TIP_SIZE = 8;
-const SHOW_DELAY = 1000;
+const SHOW_DELAY_SLOW = 1000;
+const SHOW_DELAY_FAST = 250;
 const HIDE_DELAY = 0;
 const ANIMATION_DURATION = 100;
 const template = document.createElement('template');
@@ -34,7 +35,7 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
     this.#$target = shadowRoot.querySelector('#target');
     this.#shouldReduceMotion = shouldReduceMotion();
     this.#tooltipState = new TooltipState({
-      showDelay: SHOW_DELAY,
+      showDelay: SHOW_DELAY_SLOW,
       hideDelay: this.#shouldReduceMotion ? HIDE_DELAY + ANIMATION_DURATION : HIDE_DELAY,
       hideAnimationDuration: this.#shouldReduceMotion ? 0 : ANIMATION_DURATION,
       onShowStart: this.#onStateShowStart,
@@ -61,31 +62,7 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
     this.#tooltipState.destroy();
   }
   static get observedAttributes() {
-    return ['text', 'orientation'];
-  }
-  get text() {
-    return getAttribute(this, 'text', '');
-  }
-  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');
-  }
-  set orientation(value) {
-    updateLiteralAttribute(this, orientationValues, 'orientation', value);
-  }
-  get footprintRect() {
-    return this.#$pop.footprintRect;
-  }
-  get tooltipRect() {
-    return this.#$pop.popoverRect;
+    return ['text', 'orientation', 'type'];
   }
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
@@ -106,8 +83,42 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
           }
           break;
         }
+      case 'type':
+        {
+          if ('production' !== 'production') {
+            assertType(newVal);
+          }
+          this.#tooltipState.updateOptions({
+            showDelay: newVal === 'fast' ? SHOW_DELAY_FAST : SHOW_DELAY_SLOW
+          });
+          break;
+        }
     }
   }
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+  get orientation() {
+    return getLiteralAttribute(this, orientationValues, 'orientation', 'top');
+  }
+  set orientation(value) {
+    updateLiteralAttribute(this, orientationValues, 'orientation', value);
+  }
+  get type() {
+    return getLiteralAttribute(this, typeValues, 'type', 'slow');
+  }
+  set type(value) {
+    updateLiteralAttribute(this, typeValues, 'type', value);
+  }
+  get footprintRect() {
+    return this.#$pop.footprintRect;
+  }
+  get tooltipRect() {
+    return this.#$pop.popoverRect;
+  }
   #onMouseDown = () => {
     this.#tooltipState.destroy();
   };

package/tooltip/tooltip-state.d.ts

@@ -10,6 +10,7 @@ type TTooltipStateOptions = {
 export declare class TooltipState {
     #private;
     constructor(options: TTooltipStateOptions);
+    updateOptions(options: Partial<TTooltipStateOptions>): void;
     show(): void;
     hide(): void;
     interrupt(): void;

package/tooltip/tooltip-state.js

@@ -5,6 +5,12 @@ export class TooltipState {
   constructor(options) {
     this.#options = options;
   }
+  updateOptions(options) {
+    this.#options = {
+      ...this.#options,
+      ...options
+    };
+  }
   show() {
     switch (this.#state) {
       case 'hide':

package/tooltip/types.d.ts

@@ -1,14 +1,13 @@
 import type { TRect, TSinchElementReact } from '../types';
 export type TSinchTooltipOrientation = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+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 */
+    type: TSinchTooltipType;
     readonly footprintRect: TRect;
     readonly tooltipRect: TRect;
     /** Show event */
@@ -17,22 +16,18 @@ 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 */
+    setAttribute(name: 'type', value: TSinchTooltipType): void;
 };
 export type TSinchTooltipReact = TSinchElementReact<TSinchTooltipElement> & {
     /** Text */
     text: string;
-    /** @deprecated */
-    width?: number;
-    /** Inverted */
-    inverted?: boolean;
     /** Orientation, where it *points to* from origin */
     orientation?: TSinchTooltipOrientation;
+    /** Type */
+    type?: TSinchTooltipType;
     /** Show event handler */
     'on-show'?: (e: CustomEvent<void>) => void;
     /** Hide event handler */

package/tooltip/utils.d.ts

@@ -1,7 +1,10 @@
-import type { TSinchTooltipOrientation } from './types';
+import type { TSinchTooltipOrientation, TSinchTooltipType } from './types';
 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

@@ -1,3 +1,4 @@
+export const typeValues = ['fast', 'slow'];
 export const orientationValues = ['top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'];
 export const getPopOrientation = orientation => {
   if (orientation === 'top') {
@@ -15,7 +16,12 @@ export const getPopOrientation = orientation => {
   return orientation;
 };
 export const assertOrientation = value => {
-  if (value === null || !orientationValues.includes(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/vertical-stepper/index.js

@@ -1,5 +1,5 @@
 import { clampNumber, defineCustomElement, getAttribute, getIntegerAttribute, NectaryElement, updateAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;display:flex;flex-direction:column;width:100%}#progress{position:absolute;height:1px;background-color:var(--sinch-color-snow-700);left:72px;right:72px;top:16px;transform:translateY(-50%)}#bar{position:absolute;height:1px;background-color:var(--sinch-color-stormy-400);left:0;top:0}</style><div id="wrapper"><slot></slot></div>';
+const templateHTML = '<style>:host{display:block;outline:0;--sinch-comp-vertical-stepper-color-background-default:var(--sinch-sys-color-container-contrast-primary-default);--sinch-comp-vertical-stepper-color-background-visited-skip:var(--sinch-sys-color-container-contrast-primary-default);--sinch-comp-vertical-stepper-color-background-active:var(--sinch-ref-color-main-stormy-400);--sinch-comp-vertical-stepper-color-background-visited:var(--sinch-ref-color-main-snow-700);--sinch-comp-vertical-stepper-color-background-visited-error:var(--sinch-sys-color-feedback-invalid-background);--sinch-comp-vertical-stepper-color-border-default:transparent;--sinch-comp-vertical-stepper-color-border-visited-skip:var(--sinch-ref-color-main-stormy-400);--sinch-comp-vertical-stepper-color-border-active:transparent;--sinch-comp-vertical-stepper-color-border-visited:var(--sinch-ref-color-main-stormy-400);--sinch-comp-vertical-stepper-color-border-visited-error:var(--sinch-ref-color-main-stormy-400);--sinch-comp-vertical-stepper-color-icon-default:var(--sinch-ref-color-main-stormy-700);--sinch-comp-vertical-stepper-color-icon-visited-skip:var(--sinch-ref-color-main-stormy-700);--sinch-comp-vertical-stepper-color-icon-active:var(--sinch-ref-color-main-snow-100);--sinch-comp-vertical-stepper-color-icon-visited:var(--sinch-ref-color-main-stormy-700);--sinch-comp-vertical-stepper-color-icon-visited-error:var(--sinch-ref-color-main-stormy-700);--sinch-comp-vertical-stepper-color-label:var(--sinch-sys-color-text-default);--sinch-comp-vertical-stepper-color-description:var(--sinch-sys-color-text-muted);--sinch-comp-vertical-stepper-color-progress:var(--sinch-ref-color-main-snow-700);--sinch-comp-vertical-stepper-color-progress-visited:var(--sinch-ref-color-main-stormy-400)}#wrapper{position:relative;display:flex;flex-direction:column;width:100%}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-vertical-stepper', class extends NectaryElement {

package/vertical-stepper-item/index.d.ts

@@ -1,4 +1,6 @@
 import '../icon';
+import '../title';
+import '../text';
 import type { TSinchVerticalStepperItemElement, TSinchVerticalStepperItemReact } from './types';
 declare global {
     namespace JSX {