@nectary/components 0.38.0 → 0.39.0

package/toast/index.js

@@ -0,0 +1,153 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$text, _tid, _updateTimeout, _onTimeout, _clearTimeout, _onTimeoutReactHandler;
+
+function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
+
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
+
+function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+
+function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
+
+import '../icons/report-problem';
+import '../icons/report';
+import '../icons/check-circle';
+import '../icons/info';
+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-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-error,#icon-info,#icon-success,#icon-warn{display:none;align-self:flex-start;margin:4px 0}:host([type=success]) #wrapper{background-color:var(--sinch-color-success-200)}:host([type=warn]) #wrapper{background-color:var(--sinch-color-warning-200)}:host([type=error]) #wrapper{background-color:var(--sinch-color-error-200)}:host([type=info]) #wrapper{background-color:var(--sinch-color-informative-200)}:host([type=success]) #icon-success{display:block;--sinch-color-icon:var(--sinch-color-success-500)}:host([type=warn]) #icon-warn{display:block;--sinch-color-icon:var(--sinch-color-warning-500)}:host([type=error]) #icon-error{display:block;--sinch-color-icon:var(--sinch-color-error-500)}:host([type=info]) #icon-info{display:block;--sinch-color-icon:var(--sinch-color-informative-500)}</style><div id="wrapper"><sinch-icon-info id="icon-info"></sinch-icon-info><sinch-icon-check-circle id="icon-success"></sinch-icon-check-circle><sinch-icon-report-problem id="icon-warn"></sinch-icon-report-problem><sinch-icon-report id="icon-error"></sinch-icon-report><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', (_$text = new WeakMap(), _tid = new WeakMap(), _updateTimeout = new WeakSet(), _onTimeout = new WeakMap(), _clearTimeout = new WeakSet(), _onTimeoutReactHandler = new WeakMap(), class extends NectaryElement {
+  constructor() {
+    super();
+
+    _classPrivateMethodInitSpec(this, _clearTimeout);
+
+    _classPrivateMethodInitSpec(this, _updateTimeout);
+
+    _classPrivateFieldInitSpec(this, _$text, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _tid, {
+      writable: true,
+      value: null
+    });
+
+    _classPrivateFieldInitSpec(this, _onTimeout, {
+      writable: true,
+      value: () => {
+        this.dispatchEvent(new CustomEvent('-timeout'));
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onTimeoutReactHandler, {
+      writable: true,
+      value: e => {
+        getReactEventHandler(this, 'on-timeout')?.(e);
+      }
+    });
+
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#text'));
+  }
+
+  connectedCallback() {
+    this.setAttribute('aria-atomic', 'true');
+    this.setAttribute('aria-live', 'polite');
+    this.addEventListener('-timeout', _classPrivateFieldGet(this, _onTimeoutReactHandler));
+
+    _classPrivateMethodGet(this, _updateTimeout, _updateTimeout2).call(this);
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('-timeout', _classPrivateFieldGet(this, _onTimeoutReactHandler));
+
+    _classPrivateMethodGet(this, _clearTimeout, _clearTimeout2).call(this);
+  }
+
+  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'];
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+
+    switch (name) {
+      case 'type':
+        {
+          assertType(newVal);
+          break;
+        }
+
+      case 'text':
+        {
+          _classPrivateFieldGet(this, _$text).textContent = newVal;
+          break;
+        }
+
+      case 'persistent':
+        {
+          _classPrivateMethodGet(this, _updateTimeout, _updateTimeout2).call(this);
+
+          break;
+        }
+    }
+  }
+
+}));
+
+function _updateTimeout2() {
+  if (this.persistent) {
+    _classPrivateMethodGet(this, _clearTimeout, _clearTimeout2).call(this);
+
+    return;
+  }
+
+  if (_classPrivateFieldGet(this, _tid) === null) {
+    _classPrivateFieldSet(this, _tid, window.setTimeout(_classPrivateFieldGet(this, _onTimeout), TIMEOUT));
+  }
+}
+
+function _clearTimeout2() {
+  if (_classPrivateFieldGet(this, _tid) !== null) {
+    window.clearTimeout(_classPrivateFieldGet(this, _tid));
+
+    _classPrivateFieldSet(this, _tid, null);
+  }
+}

package/toast/types.d.ts

@@ -0,0 +1,28 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchToastType = 'info' | 'warn' | 'error' | 'success';
+export declare type TSinchToastElement = HTMLElement & {
+    /** Type */
+    type: TSinchToastType;
+    /** Text */
+    text: string;
+    /** Persistent, i.e. doesn't automatically dissapear after 5s */
+    persistent: boolean;
+    /** Timeout event */
+    addEventListener(type: '-timeout', listener: (e: CustomEvent<void>) => void): void;
+    /** Type */
+    setAttribute(name: 'type', value: TSinchToastType): void;
+    /** Text */
+    setAttribute(name: 'text', value: string): void;
+    /** Persistent, i.e. doesn't automatically dissapear after 5s */
+    setAttribute(name: 'persistent', value: ''): void;
+};
+export declare type TSinchToastReact = TSinchElementReact<TSinchToastElement> & {
+    /** Type */
+    type: TSinchToastType;
+    /** Text */
+    text: string;
+    /** Persistent, i.e. doesn't automatically dissapear after 5s */
+    persistent?: boolean;
+    /** Timeout handler */
+    'on-timeout'?: (e: CustomEvent<void>) => void;
+};

package/toast/utils.d.ts

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

package/toast/utils.js

@@ -0,0 +1,6 @@
+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}`);
+  }
+};

package/toast-manager/index.d.ts

@@ -0,0 +1,17 @@
+import '../icons/report-problem';
+import '../icons/report';
+import '../icons/check-circle';
+import '../icons/info';
+import '../title';
+import '../text';
+import type { TSinchToastManagerElement, TSinchToastManagerReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-toast-manager': TSinchToastManagerReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-toast-manager': TSinchToastManagerElement;
+    }
+}

package/toast-manager/index.js

@@ -0,0 +1,271 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$slot, _$list, _map, _shouldReduceMotion, _animations, _onAnimateAdd, _onAnimateRemove, _onSlotChange, _storeAnimation, _clear, _subscribeChildren, _unsubscribeChildren, _onCloneCloseClick, _onCloneActionClick;
+
+function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
+
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
+
+function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+
+function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
+
+import '../icons/report-problem';
+import '../icons/report';
+import '../icons/check-circle';
+import '../icons/info';
+import '../title';
+import '../text';
+import { cloneNode, defineCustomElement, getRect, NectaryElement } from '../utils';
+const templateHTML = '<style>:host{display:block}#items{display:block;width:0;height:0;visibility:hidden;overflow:hidden}#list{display:flex;flex-direction:column;position:fixed;bottom:0;right:16px}.item-wrapper{height:0;opacity:0;position:relative}.item-wrapper[data-deleting]::after{content:"";position:absolute;top:0;left:0;bottom:0;right:0}</style><slot id="items"></slot><div id="list"></div>';
+const DURATION_ADD = 250;
+const DURATION_REMOVE = 250;
+const ITEMS_GAP = 16;
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-toast-manager', (_$slot = new WeakMap(), _$list = new WeakMap(), _map = new WeakMap(), _shouldReduceMotion = new WeakMap(), _animations = new WeakMap(), _onAnimateAdd = new WeakSet(), _onAnimateRemove = new WeakSet(), _onSlotChange = new WeakMap(), _storeAnimation = new WeakSet(), _clear = new WeakSet(), _subscribeChildren = new WeakSet(), _unsubscribeChildren = new WeakSet(), _onCloneCloseClick = new WeakMap(), _onCloneActionClick = new WeakMap(), class extends NectaryElement {
+  constructor() {
+    super();
+
+    _classPrivateMethodInitSpec(this, _unsubscribeChildren);
+
+    _classPrivateMethodInitSpec(this, _subscribeChildren);
+
+    _classPrivateMethodInitSpec(this, _clear);
+
+    _classPrivateMethodInitSpec(this, _storeAnimation);
+
+    _classPrivateMethodInitSpec(this, _onAnimateRemove);
+
+    _classPrivateMethodInitSpec(this, _onAnimateAdd);
+
+    _classPrivateFieldInitSpec(this, _$slot, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$list, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _map, {
+      writable: true,
+      value: new WeakMap()
+    });
+
+    _classPrivateFieldInitSpec(this, _shouldReduceMotion, {
+      writable: true,
+      value: false
+    });
+
+    _classPrivateFieldInitSpec(this, _animations, {
+      writable: true,
+      value: new Set()
+    });
+
+    _classPrivateFieldInitSpec(this, _onSlotChange, {
+      writable: true,
+      value: () => {
+        const slotItems = _classPrivateFieldGet(this, _$slot).assignedElements();
+
+        const listItems = Array.from(_classPrivateFieldGet(this, _$list).children);
+        let removeIndex = 0;
+
+        for (const item of listItems) {
+          if (item.hasAttribute('data-deleting')) {
+            ++removeIndex;
+            continue;
+          }
+
+          const orig = _classPrivateFieldGet(this, _map).get(item);
+
+          if (orig != null && slotItems.includes(orig)) {
+            continue;
+          }
+
+          _classPrivateFieldGet(this, _map).delete(item);
+
+          if (orig != null) {
+            _classPrivateFieldGet(this, _map).delete(orig);
+          }
+
+          _classPrivateMethodGet(this, _unsubscribeChildren, _unsubscribeChildren2).call(this, item);
+
+          _classPrivateMethodGet(this, _onAnimateRemove, _onAnimateRemove2).call(this, item, removeIndex);
+
+          ++removeIndex;
+        }
+
+        let addIndex = 0;
+
+        for (const item of slotItems) {
+          if (_classPrivateFieldGet(this, _map).has(item)) {
+            continue;
+          }
+
+          const cloned = cloneNode(item, true);
+          const rect = item.getBoundingClientRect();
+          const wrapper = document.createElement('div');
+          wrapper.className = 'item-wrapper';
+          wrapper.appendChild(cloned);
+
+          _classPrivateFieldGet(this, _$list).appendChild(wrapper);
+
+          _classPrivateFieldGet(this, _map).set(item, wrapper);
+
+          _classPrivateFieldGet(this, _map).set(wrapper, item);
+
+          _classPrivateMethodGet(this, _subscribeChildren, _subscribeChildren2).call(this, cloned);
+
+          _classPrivateMethodGet(this, _onAnimateAdd, _onAnimateAdd2).call(this, wrapper, addIndex, rect.height);
+
+          addIndex++;
+        }
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onCloneCloseClick, {
+      writable: true,
+      value: e => {
+        const item = e.target.parentElement?.parentElement;
+
+        if (item != null) {
+          item.setAttribute('data-delete-now', '');
+          _classPrivateFieldGet(this, _map).get(item)?.querySelector('[slot=close]')?.dispatchEvent(new CustomEvent('-click'));
+        }
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onCloneActionClick, {
+      writable: true,
+      value: e => {
+        const item = e.target.parentElement?.parentElement;
+
+        if (item != null) {
+          _classPrivateFieldGet(this, _map).get(item)?.querySelector('[slot=action]')?.dispatchEvent(new CustomEvent('-click'));
+        }
+      }
+    });
+
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$slot, shadowRoot.querySelector('slot'));
+
+    _classPrivateFieldSet(this, _$list, shadowRoot.querySelector('#list'));
+  }
+
+  connectedCallback() {
+    _classPrivateFieldGet(this, _$slot).addEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
+
+    _classPrivateFieldSet(this, _shouldReduceMotion, window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$slot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
+
+    _classPrivateMethodGet(this, _clear, _clear2).call(this);
+  }
+
+  get containerRect() {
+    return getRect(_classPrivateFieldGet(this, _$list));
+  }
+
+  nthActionRect(nth) {
+    const item = _classPrivateFieldGet(this, _$list).children[nth]?.querySelector('[slot=action]');
+    return item != null ? getRect(item) : null;
+  }
+
+  nthCloseRect(nth) {
+    const item = _classPrivateFieldGet(this, _$list).children[nth]?.querySelector('[slot=close]');
+    return item != null ? getRect(item) : null;
+  }
+
+}));
+
+function _onAnimateAdd2(item, index, height) {
+  const duration = _classPrivateFieldGet(this, _shouldReduceMotion) ? 0 : DURATION_ADD;
+  const addAnim = item.animate({
+    height: ['0', `${height + ITEMS_GAP}px`],
+    opacity: [0, 1]
+  }, {
+    delay: index * duration,
+    duration,
+    iterations: 1,
+    fill: 'forwards'
+  });
+
+  _classPrivateMethodGet(this, _storeAnimation, _storeAnimation2).call(this, addAnim);
+}
+
+function _onAnimateRemove2(item, index) {
+  const rect = item.getBoundingClientRect();
+  const duration = _classPrivateFieldGet(this, _shouldReduceMotion) ? 0 : DURATION_REMOVE;
+  const indexInQueue = item.hasAttribute('data-delete-now') ? 0 : index;
+  const heightAnim = item.animate({
+    height: [`${rect.height}px`, '0']
+  }, {
+    delay: duration + indexInQueue * duration,
+    duration,
+    iterations: 1,
+    fill: 'forwards'
+  });
+  const opacityAnim = item.animate({
+    opacity: [1, 0]
+  }, {
+    delay: indexInQueue * duration,
+    duration,
+    iterations: 1,
+    fill: 'forwards'
+  });
+  item.setAttribute('data-deleting', '');
+
+  _classPrivateMethodGet(this, _storeAnimation, _storeAnimation2).call(this, heightAnim, () => item.remove());
+
+  _classPrivateMethodGet(this, _storeAnimation, _storeAnimation2).call(this, opacityAnim);
+}
+
+function _storeAnimation2(anim, cb) {
+  const onAnimEnd = () => {
+    _classPrivateFieldGet(this, _animations).delete(anim);
+
+    cb?.();
+    anim.removeEventListener('finish', onAnimEnd);
+    anim.removeEventListener('remove', onAnimEnd);
+    anim.removeEventListener('cancel', onAnimEnd);
+  };
+
+  anim.addEventListener('finish', onAnimEnd);
+  anim.addEventListener('remove', onAnimEnd);
+  anim.addEventListener('cancel', onAnimEnd);
+
+  _classPrivateFieldGet(this, _animations).add(anim);
+}
+
+function _clear2() {
+  const listItems = Array.from(_classPrivateFieldGet(this, _$list).children);
+
+  for (const item of listItems) {
+    _classPrivateFieldGet(this, _map).delete(item);
+
+    _classPrivateMethodGet(this, _unsubscribeChildren, _unsubscribeChildren2).call(this, item);
+
+    item.remove();
+  }
+
+  for (const anim of _classPrivateFieldGet(this, _animations)) {
+    anim.cancel();
+  }
+}
+
+function _subscribeChildren2(item) {
+  item.querySelector('[slot=close]')?.addEventListener('-click', _classPrivateFieldGet(this, _onCloneCloseClick));
+  item.querySelector('[slot=action]')?.addEventListener('-click', _classPrivateFieldGet(this, _onCloneActionClick));
+}
+
+function _unsubscribeChildren2(item) {
+  item.querySelector('[slot=close]')?.removeEventListener('-click', _classPrivateFieldGet(this, _onCloneCloseClick));
+  item.querySelector('[slot=action]')?.removeEventListener('-click', _classPrivateFieldGet(this, _onCloneActionClick));
+}

package/toast-manager/types.d.ts

@@ -0,0 +1,7 @@
+import type { TRect, TSinchElementReact } from '../types';
+export declare type TSinchToastManagerElement = HTMLElement & {
+    readonly containerRect: TRect;
+    nthActionRect: (nth: number) => TRect | null;
+    nthCloseRect: (nth: number) => TRect | null;
+};
+export declare type TSinchToastManagerReact = TSinchElementReact<TSinchToastManagerElement> & {};

package/toggle/index.js

@@ -8,7 +8,7 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 
 import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;flex-direction:row;box-sizing:border-box;width:100%;height:32px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);text-align:initial}:host([small]:not([small=false])) #wrapper{font:var(--sinch-font-small-text)}#checkbox{all:initial;display:block;position:absolute;left:0;top:0;width:40px;height:20px;cursor:pointer;pointer-events:initial}#checkbox:disabled{cursor:initial}#knob-container{position:relative;box-sizing:border-box;align-self:center;width:40px;height:20px;border-radius:10px;pointer-events:none;padding:2px;background-color:var(--sinch-color-stormy-100);box-shadow:var(--sinch-elevation-level-1);overflow:hidden}:host([checked]:not([checked=false])) #knob-container{background-color:var(--sinch-color-tropical-500)}:host([small]:not([small=false])) #knob-container{width:32px;height:16px;border-radius:8px}#knob{position:relative;box-sizing:border-box;width:16px;height:16px;border-radius:50%;background-color:var(--sinch-color-snow-100);transform:translateX(0);transition:transform .1s ease-in-out}:host([checked]:not([checked=false])) #knob{transform:translateX(20px)}:host([small]:not([small=false])) #knob{width:12px;height:12px}:host([small]:not([small=false])[checked]:not([checked=false])) #knob{transform:translateX(16px)}#knob::after,#knob::before{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{display:none;flex:1;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:8px}:host([text]:not([text=""])) #label{display:block}:host([disabled]:not([disabled=false])) #label{color:var(--sinch-color-stormy-200)}:host([disabled]:not([disabled=false])) #knob-container{background-color:var(--sinch-color-snow-700)}:host([checked]:not([checked=false])[disabled]:not([disabled=false])) #knob-container{background-color:var(--sinch-color-tropical-100)}</style><div id="wrapper"><div id="knob-container"><div id="knob"></div><input id="checkbox" type="checkbox"></div><label for="checkbox" id="label"></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:32px}:host([small]:not([small=false])) #wrapper{font:var(--sinch-font-small-text)}#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-aqua-400);border-radius:18px;pointer-events:none}:host([small]:not([small=false])) #input:focus-visible::after{border-radius:14px}@supports not selector(:focus-visible){#input:focus::after{position:absolute;content:"";left:-4px;top:-4px;right:-4px;bottom:-4px;border:2px solid var(--sinch-color-aqua-400);border-radius:18px;pointer-events:none}:host([small]:not([small=false])) #input:focus::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-body);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-body);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 template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-toggle', (_$input = new WeakMap(), _$label = new WeakMap(), _onInput = new WeakMap(), _onCheckboxFocus = new WeakMap(), _onCheckboxBlur = new WeakMap(), _onChangeReactHandler = new WeakMap(), _onFocusReactHandler = new WeakMap(), _onBlurReactHandler = new WeakMap(), class extends NectaryElement {
@@ -81,14 +81,13 @@ defineCustomElement('sinch-toggle', (_$input = new WeakMap(), _$label = new Weak
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
 
-    _classPrivateFieldSet(this, _$input, shadowRoot.querySelector('input'));
+    _classPrivateFieldSet(this, _$input, shadowRoot.querySelector('#input'));
 
-    _classPrivateFieldSet(this, _$label, shadowRoot.querySelector('label'));
+    _classPrivateFieldSet(this, _$label, shadowRoot.querySelector('#label'));
   }
 
   connectedCallback() {
     this.setAttribute('role', 'checkbox');
-    this.setAttribute('aria-label', 'toggle');
 
     _classPrivateFieldGet(this, _$input).addEventListener('input', _classPrivateFieldGet(this, _onInput));
 

package/toggle/types.d.ts

@@ -21,6 +21,7 @@ export declare 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/utils.d.ts

@@ -48,4 +48,5 @@ export declare const throttleAnimationFrame: (cb: (...args: any[]) => void) => {
     cancel: () => void;
 };
 export declare const getFirstSlotElement: (root: HTMLSlotElement) => HTMLElement | null;
+export declare const cloneNode: (el: Element, deep: boolean) => Element;
 export {};

package/utils.js

@@ -261,4 +261,26 @@ export const getFirstSlotElement = root => {
 
     slot = el;
   }
+};
+export const cloneNode = (el, deep) => {
+  const root = el.getRootNode();
+
+  if (root !== document && Reflect.has(root, 'createElement')) {
+    const cloned = root.createElement(el.tagName.toLowerCase());
+
+    for (const attr of el.getAttributeNames()) {
+      cloned.setAttribute(attr, el.getAttribute(attr));
+    }
+
+    if (deep) {
+      for (let i = 0; i < el.children.length; i++) {
+        const clonedChild = cloneNode(el.children[i], deep);
+        cloned.appendChild(clonedChild);
+      }
+    }
+
+    return cloned;
+  }
+
+  return el.cloneNode(deep);
 };

package/card-button/index.d.ts

@@ -1,11 +0,0 @@
-import type { TSinchCardButtonElement, TSinchCardButtonReact } from './types';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-card-button': TSinchCardButtonReact;
-        }
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-card-button': TSinchCardButtonElement;
-    }
-}

package/card-button/index.js

@@ -1,77 +0,0 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$button;
-
-function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
-
-function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
-
-import { defineCustomElement, getBooleanAttribute, getAttribute, updateAttribute, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;outline:0}sinch-button{display:block}</style><sinch-button type="primary" small></sinch-button>';
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-defineCustomElement('sinch-card-button', (_$button = new WeakMap(), class extends NectaryElement {
-  constructor() {
-    super();
-
-    _classPrivateFieldInitSpec(this, _$button, {
-      writable: true,
-      value: void 0
-    });
-
-    const shadowRoot = this.attachShadow();
-    shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$button, shadowRoot.querySelector('sinch-button'));
-  }
-
-  connectedCallback() {
-    this.setAttribute('role', 'button');
-  }
-
-  static get observedAttributes() {
-    return ['text', 'disabled'];
-  }
-
-  attributeChangedCallback(name, _, newVal) {
-    switch (name) {
-      case 'text':
-        {
-          updateAttribute(_classPrivateFieldGet(this, _$button), 'text', newVal);
-          break;
-        }
-
-      case 'disabled':
-        {
-          updateAttribute(_classPrivateFieldGet(this, _$button), 'disabled', newVal);
-          break;
-        }
-    }
-  }
-
-  set text(value) {
-    updateAttribute(this, 'text', value);
-  }
-
-  get text() {
-    return getAttribute(this, 'text', '');
-  }
-
-  set disabled(isDisabled) {
-    updateAttribute(this, 'disabled', isDisabled);
-  }
-
-  get disabled() {
-    return getBooleanAttribute(this, 'disabled');
-  }
-
-  focus() {
-    _classPrivateFieldGet(this, _$button).focus();
-  }
-
-  blur() {
-    _classPrivateFieldGet(this, _$button).blur();
-  }
-
-}));