@nectary/components 0.37.0 → 0.38.0

package/alert/index.js

@@ -12,7 +12,7 @@ import '../icons/report';
 import '../icons/info';
 import '../text';
 import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;gap:8px;align-items:center;padding:0 16px;box-sizing:border-box;width:100%;height:48px}#text{color:var(--sinch-color-stormy-500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}#icon-error,#icon-info,#icon-warn{display:none}: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=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-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>';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;gap:8px;align-items:center;padding:8px 16px;box-sizing:border-box;width:100%;min-height:48px}#text{color:var(--sinch-color-stormy-500);flex:1;min-width:0}#icon-error,#icon-info,#icon-warn{display:none}: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=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-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 template = document.createElement('template');
 template.innerHTML = templateHTML;

package/file-drop/index.d.ts

@@ -0,0 +1,13 @@
+import '../text';
+import '../file-picker';
+import type { TSinchFileDropElement, TSinchFileDropReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-file-drop': TSinchFileDropReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-file-drop': TSinchFileDropElement;
+    }
+}

package/file-drop/index.js

@@ -0,0 +1,320 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$filePicker, _$dropArea, _$placeholder, _setDragEffect, _onDragEnter, _onDragLeave, _onDragOver, _onDrop, _onFilePickerChange, _onFilePickerInvalid, _onChangeReactHandler, _onInvalidReactHandler, _dispatchChangeEvent, _dispatchInvalidEvent;
+
+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 '../text';
+import '../file-picker';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{position:relative;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-content:center;gap:8px;height:148px;min-width:148px;box-sizing:border-box;padding:16px;border-radius:var(--sinch-shape-radius-m);background-color:var(--sinch-color-background-grey)}#wrapper.drop.valid{background-color:var(--sinch-color-background-blue)}#wrapper::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border:1px dashed var(--sinch-color-stormy-100);border-radius:var(--sinch-shape-radius-m);pointer-events:none}#placeholder{align-self:center;text-align:center}:host([invalid]) #wrapper::after{border-color:var(--sinch-color-text-invalid);border-width:1px}#wrapper.drop::after{pointer-events:all}#wrapper.drop.valid::after{border-color:var(--sinch-color-aqua-400);border-width:2px}#wrapper.drop #placeholder{color:var(--sinch-color-text-muted)}:host([disabled]) #wrapper #placeholder{color:var(--sinch-color-stormy-100)}:host([disabled]) #wrapper{background-color:var(--sinch-color-snow-100)}:host([disabled]) #wrapper::after{border-color:var(--sinch-color-stormy-100);border-width:1px}</style><div id="wrapper"><sinch-text id="placeholder" type="m" aria-hidden="true"></sinch-text><sinch-file-picker id="file-picker"><slot></slot></sinch-file-picker></div>';
+import { areFilesAccepted, doFilesSatisfySize } from './utils';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-file-drop', (_$filePicker = new WeakMap(), _$dropArea = new WeakMap(), _$placeholder = new WeakMap(), _setDragEffect = new WeakSet(), _onDragEnter = new WeakMap(), _onDragLeave = new WeakMap(), _onDragOver = new WeakMap(), _onDrop = new WeakMap(), _onFilePickerChange = new WeakMap(), _onFilePickerInvalid = new WeakMap(), _onChangeReactHandler = new WeakMap(), _onInvalidReactHandler = new WeakMap(), _dispatchChangeEvent = new WeakSet(), _dispatchInvalidEvent = new WeakSet(), class extends NectaryElement {
+  constructor() {
+    super();
+
+    _classPrivateMethodInitSpec(this, _dispatchInvalidEvent);
+
+    _classPrivateMethodInitSpec(this, _dispatchChangeEvent);
+
+    _classPrivateMethodInitSpec(this, _setDragEffect);
+
+    _classPrivateFieldInitSpec(this, _$filePicker, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$dropArea, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$placeholder, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _onDragEnter, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+        e.preventDefault();
+        const hasTypes = e.dataTransfer?.types?.includes('Files') === true;
+        const hasItems = e.dataTransfer?.items != null && e.dataTransfer.items.length > 0;
+
+        _classPrivateMethodGet(this, _setDragEffect, _setDragEffect2).call(this, true, hasTypes || hasItems);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onDragLeave, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        _classPrivateMethodGet(this, _setDragEffect, _setDragEffect2).call(this, false);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onDragOver, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onDrop, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        _classPrivateMethodGet(this, _setDragEffect, _setDragEffect2).call(this, false);
+
+        if (this.disabled) {
+          return;
+        }
+
+        const dt = e.dataTransfer;
+
+        if (dt === null) {
+          return;
+        }
+
+        if (dt.files.length === 0) {
+          return;
+        }
+
+        if (!this.multiple && dt.files.length > 1) {
+          _classPrivateMethodGet(this, _dispatchInvalidEvent, _dispatchInvalidEvent2).call(this, 'multiple');
+
+          return;
+        }
+
+        const files = Array.from(dt.files);
+
+        if (!areFilesAccepted(files, this.accept)) {
+          _classPrivateMethodGet(this, _dispatchInvalidEvent, _dispatchInvalidEvent2).call(this, 'accept');
+
+          return;
+        }
+
+        if (!doFilesSatisfySize(files, this.size)) {
+          _classPrivateMethodGet(this, _dispatchInvalidEvent, _dispatchInvalidEvent2).call(this, 'size');
+
+          return;
+        }
+
+        _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, files);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onFilePickerChange, {
+      writable: true,
+      value: e => {
+        _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, e.detail);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onFilePickerInvalid, {
+      writable: true,
+      value: e => {
+        _classPrivateMethodGet(this, _dispatchInvalidEvent, _dispatchInvalidEvent2).call(this, e.detail);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onChangeReactHandler, {
+      writable: true,
+      value: e => {
+        getReactEventHandler(this, 'on-change')?.(e);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onInvalidReactHandler, {
+      writable: true,
+      value: e => {
+        getReactEventHandler(this, 'on-invalid')?.(e);
+      }
+    });
+
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$dropArea, shadowRoot.querySelector('#wrapper'));
+
+    _classPrivateFieldSet(this, _$placeholder, shadowRoot.querySelector('#placeholder'));
+
+    _classPrivateFieldSet(this, _$filePicker, shadowRoot.querySelector('#file-picker'));
+  }
+
+  connectedCallback() {
+    this.addEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+    this.addEventListener('-invalid', _classPrivateFieldGet(this, _onInvalidReactHandler));
+    this.addEventListener('dragenter', _classPrivateFieldGet(this, _onDragEnter));
+    this.addEventListener('dragleave', _classPrivateFieldGet(this, _onDragLeave));
+    this.addEventListener('dragover', _classPrivateFieldGet(this, _onDragOver));
+    this.addEventListener('drop', _classPrivateFieldGet(this, _onDrop));
+
+    _classPrivateFieldGet(this, _$filePicker).addEventListener('-change', _classPrivateFieldGet(this, _onFilePickerChange));
+
+    _classPrivateFieldGet(this, _$filePicker).addEventListener('-invalid', _classPrivateFieldGet(this, _onFilePickerInvalid));
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+    this.removeEventListener('-invalid', _classPrivateFieldGet(this, _onInvalidReactHandler));
+    this.removeEventListener('dragenter', _classPrivateFieldGet(this, _onDragEnter));
+    this.removeEventListener('dragleave', _classPrivateFieldGet(this, _onDragLeave));
+    this.removeEventListener('dragover', _classPrivateFieldGet(this, _onDragOver));
+    this.removeEventListener('drop', _classPrivateFieldGet(this, _onDrop));
+
+    _classPrivateFieldGet(this, _$filePicker).removeEventListener('-change', _classPrivateFieldGet(this, _onFilePickerChange));
+
+    _classPrivateFieldGet(this, _$filePicker).removeEventListener('-invalid', _classPrivateFieldGet(this, _onFilePickerInvalid));
+  }
+
+  static get observedAttributes() {
+    return ['accept', 'multiple', 'placeholder', 'disabled', 'invalid', 'size'];
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (newVal === oldVal) {
+      return;
+    }
+
+    switch (name) {
+      case 'multiple':
+        {
+          updateAttribute(_classPrivateFieldGet(this, _$filePicker), 'multiple', newVal);
+          break;
+        }
+
+      case 'accept':
+        {
+          updateAttribute(_classPrivateFieldGet(this, _$filePicker), 'accept', newVal);
+          break;
+        }
+
+      case 'placeholder':
+        {
+          _classPrivateFieldGet(this, _$placeholder).textContent = newVal;
+          break;
+        }
+
+      case 'disabled':
+        {
+          updateBooleanAttribute(this, 'disabled', isAttrTrue(newVal));
+
+          _classPrivateMethodGet(this, _setDragEffect, _setDragEffect2).call(this, false);
+
+          break;
+        }
+
+      case 'invalid':
+        {
+          updateBooleanAttribute(this, 'invalid', isAttrTrue(newVal));
+          break;
+        }
+
+      case 'size':
+        {
+          updateAttribute(_classPrivateFieldGet(this, _$filePicker), 'size', newVal);
+          break;
+        }
+    }
+  }
+
+  set multiple(isMultiple) {
+    updateBooleanAttribute(this, 'multiple', isMultiple);
+  }
+
+  get multiple() {
+    return getBooleanAttribute(this, 'multiple');
+  }
+
+  set accept(value) {
+    updateAttribute(this, 'accept', value);
+  }
+
+  get accept() {
+    return getAttribute(this, 'accept', null);
+  }
+
+  get size() {
+    return getIntegerAttribute(this, 'size', null);
+  }
+
+  set size(value) {
+    updateAttribute(this, 'size', value);
+  }
+
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+
+  set placeholder(value) {
+    updateAttribute(this, 'placeholder', value);
+  }
+
+  get placeholder() {
+    return getAttribute(this, 'placeholder', '');
+  }
+
+  set disabled(isDisabled) {
+    updateBooleanAttribute(this, 'disabled', isDisabled);
+  }
+
+  get disabled() {
+    return getBooleanAttribute(this, 'disabled');
+  }
+
+  set invalid(isInvalid) {
+    updateBooleanAttribute(this, 'invalid', isInvalid);
+  }
+
+  get invalid() {
+    return getBooleanAttribute(this, 'invalid');
+  }
+
+}));
+
+function _setDragEffect2(shouldEnable) {
+  let isValid = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  const isElementEnabled = !this.disabled;
+
+  if (shouldEnable) {
+    if (isElementEnabled) {
+      setClass(_classPrivateFieldGet(this, _$dropArea), 'drop', true);
+      setClass(_classPrivateFieldGet(this, _$dropArea), 'valid', isValid);
+    }
+  } else {
+    setClass(_classPrivateFieldGet(this, _$dropArea), 'drop', false);
+    setClass(_classPrivateFieldGet(this, _$dropArea), 'valid', false);
+  }
+}
+
+function _dispatchChangeEvent2(files) {
+  this.dispatchEvent(new CustomEvent('-change', {
+    detail: files
+  }));
+}
+
+function _dispatchInvalidEvent2(type) {
+  this.dispatchEvent(new CustomEvent('-invalid', {
+    detail: type
+  }));
+}

package/file-drop/types.d.ts

@@ -0,0 +1,50 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchFileDropInvalidType = 'accept' | 'multiple' | 'size';
+export declare type TSinchFileDropElement = HTMLElement & {
+    /** Allows to choose multiple files */
+    multiple: boolean;
+    /** [A unique file type specifier](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers) */
+    accept: string | null;
+    /** Max file size in bytes */
+    size: number | null;
+    /** Disabled state */
+    disabled: boolean;
+    /** Invalid state */
+    invalid: boolean;
+    /** Placeholder */
+    placeholder: string;
+    /** Change value event */
+    addEventListener(type: '-change', listener: (e: CustomEvent<File[]>) => void): void;
+    /** Invalid event */
+    addEventListener(type: '-invalid', listener: (e: CustomEvent<TSinchFileDropInvalidType>) => void): void;
+    /** Allows to choose multiple files */
+    setAttribute(name: 'multiple', value: ''): void;
+    /** [A unique file type specifier](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers) */
+    setAttribute(name: 'accept', value: string): void;
+    /** Max file size in bytes */
+    setAttribute(name: 'size', value: string): void;
+    /** Placeholder */
+    setAttribute(name: 'placeholder', value: string): void;
+    /** Invalid state */
+    setAttribute(name: 'invalid', value: ''): void;
+    /** Disabled state */
+    setAttribute(name: 'disabled', value: ''): void;
+};
+export declare type TSinchFileDropReact = TSinchElementReact<TSinchFileDropElement> & {
+    /** Allows to choose multiple files */
+    multiple?: boolean;
+    /** [A unique file type specifier](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers) */
+    accept?: string;
+    /** Max file size in bytes */
+    size?: number;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Invalid state */
+    invalid?: boolean;
+    /** Placeholder */
+    placeholder: string;
+    /** Change value handler */
+    'on-change'?: (e: CustomEvent<File[]>) => void;
+    /** Invalid handler */
+    'on-invalid'?: (e: CustomEvent<TSinchFileDropInvalidType>) => void;
+};

package/file-drop/types.js

@@ -0,0 +1 @@
+export {};

package/file-drop/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const areFilesAccepted: (files: File[], accept: string | null) => boolean;
+export declare const doFilesSatisfySize: (files: File[], size: number | null) => boolean;

package/file-drop/utils.js

@@ -0,0 +1,37 @@
+export const areFilesAccepted = (files, accept) => {
+  if (accept === null) {
+    return true;
+  }
+
+  const acceptValues = accept.split(/\s*,\s*/);
+  return files.every(file => {
+    return acceptValues.some(acceptValue => {
+      if (acceptValue.startsWith('.')) {
+        return file.name.endsWith(acceptValue);
+      }
+
+      if (acceptValue === 'image/*') {
+        return file.type.startsWith('image/');
+      }
+
+      if (acceptValue === 'video/*') {
+        return file.type.startsWith('video/');
+      }
+
+      if (acceptValue === 'audio/*') {
+        return file.type.startsWith('audio/');
+      }
+
+      return acceptValue === file.type;
+    });
+  });
+};
+export const doFilesSatisfySize = (files, size) => {
+  if (size === null || size <= 0) {
+    return true;
+  }
+
+  return files.every(file => {
+    return file.size <= size;
+  });
+};

package/file-picker/index.d.ts

@@ -0,0 +1,12 @@
+import '../dropdown';
+import type { TSinchFilePickerElement, TSinchFilePickerReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-file-picker': TSinchFilePickerReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-file-picker': TSinchFilePickerElement;
+    }
+}

package/file-picker/index.js

@@ -0,0 +1,170 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$input, _$targetSlot, _$target, _onTargetSlotChange, _onTargetClick, _onInputChange, _onChangeReactHandler, _onInvalidReactHandler;
+
+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 '../dropdown';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getFirstSlotElement, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline-block}::slotted(*){display:block}</style><slot></slot>';
+import { doFilesSatisfySize } from './utils';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-file-picker', (_$input = new WeakMap(), _$targetSlot = new WeakMap(), _$target = new WeakMap(), _onTargetSlotChange = new WeakMap(), _onTargetClick = new WeakMap(), _onInputChange = new WeakMap(), _onChangeReactHandler = new WeakMap(), _onInvalidReactHandler = new WeakMap(), class extends NectaryElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$input, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$targetSlot, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$target, {
+      writable: true,
+      value: null
+    });
+
+    _classPrivateFieldInitSpec(this, _onTargetSlotChange, {
+      writable: true,
+      value: () => {
+        _classPrivateFieldGet(this, _$target)?.removeEventListener('-click', _classPrivateFieldGet(this, _onTargetClick));
+
+        _classPrivateFieldSet(this, _$target, getFirstSlotElement(_classPrivateFieldGet(this, _$targetSlot)));
+
+        _classPrivateFieldGet(this, _$target)?.addEventListener('-click', _classPrivateFieldGet(this, _onTargetClick));
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onTargetClick, {
+      writable: true,
+      value: () => {
+        _classPrivateFieldGet(this, _$input).click();
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onInputChange, {
+      writable: true,
+      value: () => {
+        if (_classPrivateFieldGet(this, _$input).files === null) {
+          return;
+        }
+
+        const files = Array.from(_classPrivateFieldGet(this, _$input).files);
+
+        if (!doFilesSatisfySize(files, this.size)) {
+          this.dispatchEvent(new CustomEvent('-invalid', {
+            detail: 'size'
+          }));
+          return;
+        }
+
+        this.dispatchEvent(new CustomEvent('-change', {
+          detail: files
+        }));
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onChangeReactHandler, {
+      writable: true,
+      value: e => {
+        getReactEventHandler(this, 'on-change')?.(e);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onInvalidReactHandler, {
+      writable: true,
+      value: e => {
+        getReactEventHandler(this, 'on-invalid')?.(e);
+      }
+    });
+
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$input, document.createElement('input'));
+
+    _classPrivateFieldGet(this, _$input).type = 'file';
+
+    _classPrivateFieldSet(this, _$targetSlot, shadowRoot.querySelector('slot'));
+  }
+
+  connectedCallback() {
+    _classPrivateFieldGet(this, _$targetSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onTargetSlotChange));
+
+    _classPrivateFieldGet(this, _$input).addEventListener('change', _classPrivateFieldGet(this, _onInputChange));
+
+    this.addEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+    this.addEventListener('-invalid', _classPrivateFieldGet(this, _onInvalidReactHandler));
+
+    _classPrivateFieldGet(this, _onTargetSlotChange).call(this);
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$targetSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onTargetSlotChange));
+
+    _classPrivateFieldGet(this, _$input).removeEventListener('change', _classPrivateFieldGet(this, _onInputChange));
+
+    this.removeEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+    this.removeEventListener('-invalid', _classPrivateFieldGet(this, _onInvalidReactHandler));
+    _classPrivateFieldGet(this, _$target)?.removeEventListener('-click', _classPrivateFieldGet(this, _onTargetClick));
+
+    _classPrivateFieldSet(this, _$target, null);
+  }
+
+  static get observedAttributes() {
+    return ['accept', 'multiple'];
+  }
+
+  set multiple(isMultiple) {
+    updateBooleanAttribute(this, 'multiple', isMultiple);
+  }
+
+  get multiple() {
+    return getBooleanAttribute(this, 'multiple');
+  }
+
+  set accept(value) {
+    updateAttribute(this, 'accept', value);
+  }
+
+  get accept() {
+    return getAttribute(this, 'accept', null);
+  }
+
+  get size() {
+    return getIntegerAttribute(this, 'size', null);
+  }
+
+  set size(value) {
+    updateAttribute(this, 'size', value);
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (newVal === oldVal) {
+      return;
+    }
+
+    switch (name) {
+      case 'multiple':
+        {
+          updateBooleanAttribute(_classPrivateFieldGet(this, _$input), 'multiple', isAttrTrue(newVal));
+          break;
+        }
+
+      case 'accept':
+        {
+          updateAttribute(_classPrivateFieldGet(this, _$input), 'accept', newVal);
+          break;
+        }
+    }
+  }
+
+}));

package/file-picker/types.d.ts

@@ -0,0 +1,32 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchFilePickerInvalidType = 'size';
+export declare type TSinchFilePickerElement = HTMLElement & {
+    /** Allows to choose multiple files */
+    multiple: boolean;
+    /** [A unique file type specifier](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers) */
+    accept: string | null;
+    /** Max file size in bytes */
+    size: number | null;
+    /** Change value event */
+    addEventListener(type: '-change', listener: (e: CustomEvent<File[]>) => void): void;
+    /** Invalid event */
+    addEventListener(type: '-invalid', listener: (e: CustomEvent<TSinchFilePickerInvalidType>) => void): void;
+    /** Allows to choose multiple files */
+    setAttribute(name: 'multiple', value: ''): void;
+    /** [A unique file type specifier](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers) */
+    setAttribute(name: 'accept', value: string): void;
+    /** Max file size in bytes */
+    setAttribute(name: 'size', value: string): void;
+};
+export declare type TSinchFilePickerReact = TSinchElementReact<TSinchFilePickerElement> & {
+    /** Allows to choose multiple files */
+    multiple?: boolean;
+    /** [A unique file type specifier](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers) */
+    accept?: string;
+    /** Max file size in bytes */
+    size?: number;
+    /** Change value handler */
+    'on-change': (e: CustomEvent<File[]>) => void;
+    /** Invalid handler */
+    'on-invalid'?: (e: CustomEvent<TSinchFilePickerInvalidType>) => void;
+};

package/file-picker/types.js

@@ -0,0 +1 @@
+export {};

package/file-picker/utils.d.ts

@@ -0,0 +1 @@
+export declare const doFilesSatisfySize: (files: File[], size: number | null) => boolean;

package/file-picker/utils.js

@@ -0,0 +1,9 @@
+export const doFilesSatisfySize = (files, size) => {
+  if (size === null || size <= 0) {
+    return true;
+  }
+
+  return files.every(file => {
+    return file.size <= size;
+  });
+};

package/file-status/index.d.ts

@@ -0,0 +1,17 @@
+import '../spinner';
+import '../icons/check-circle';
+import '../icons/report';
+import '../icons/pending-actions';
+import '../icons/text-snippet';
+import '../text';
+import type { TSinchFileStatusElement, TSinchFileStatusReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-file-status': TSinchFileStatusReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-file-status': TSinchFileStatusElement;
+    }
+}

package/file-status/index.js

@@ -0,0 +1,100 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$filename, _$contentSlot, _onContentSlotChange;
+
+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 '../spinner';
+import '../icons/check-circle';
+import '../icons/report';
+import '../icons/pending-actions';
+import '../icons/text-snippet';
+import '../text';
+import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:12px 16px;box-sizing:border-box;min-height:48px;min-width:148px;background-color:var(--sinch-color-background-grey);border-radius:var(--sinch-shape-radius-m)}:host([type=error]) #wrapper{background-color:var(--sinch-color-error-200)}#content-wrapper{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;margin-left:16px;color:var(--sinch-color-stormy-500)}#icon-error,#icon-loading,#icon-pending,#icon-progress,#icon-success{display:none}#action{height:24px}#action ::slotted(*){position:relative;top:50%;transform:translateY(-50%)}:host([type=error]) #icon-error,:host([type=loading]) #icon-loading,:host([type=pending]) #icon-pending,:host([type=progress]) #icon-progress,:host([type=success]) #icon-success{display:block;--sinch-color-icon:var(--sinch-color-stormy-500)}:host([type=success]) #icon-success{--sinch-color-icon:var(--sinch-color-success-500)}:host([type=error]) #icon-error{--sinch-color-icon:var(--sinch-color-error-500)}</style><div id="wrapper"><sinch-spinner id="icon-loading" type="medium"></sinch-spinner><sinch-icon-check-circle id="icon-success"></sinch-icon-check-circle><sinch-icon-report id="icon-error"></sinch-icon-report><sinch-icon-pending-actions id="icon-pending"></sinch-icon-pending-actions><sinch-icon-text-snippet id="icon-progress"></sinch-icon-text-snippet><div id="content-wrapper"><sinch-text id="filename" type="m" ellipsis></sinch-text><slot name="content"></slot></div><div id="action"><slot name="action"></slot></div></div>';
+import { assertType, typeValues } from './utils';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-file-status', (_$filename = new WeakMap(), _$contentSlot = new WeakMap(), _onContentSlotChange = new WeakMap(), class extends NectaryElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$filename, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$contentSlot, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _onContentSlotChange, {
+      writable: true,
+      value: () => {
+        updateBooleanAttribute(_classPrivateFieldGet(this, _$filename), 'emphasized', _classPrivateFieldGet(this, _$contentSlot).assignedElements().length > 0);
+      }
+    });
+
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$filename, shadowRoot.querySelector('#filename'));
+
+    _classPrivateFieldSet(this, _$contentSlot, shadowRoot.querySelector('slot[name="content"]'));
+  }
+
+  connectedCallback() {
+    _classPrivateFieldGet(this, _$contentSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onContentSlotChange));
+
+    _classPrivateFieldGet(this, _onContentSlotChange).call(this);
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$contentSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onContentSlotChange));
+  }
+
+  get type() {
+    return getLiteralAttribute(this, typeValues, 'type');
+  }
+
+  set type(value) {
+    updateLiteralAttribute(this, typeValues, 'type', value);
+  }
+
+  get filename() {
+    return getAttribute(this, 'filename', '');
+  }
+
+  set filename(value) {
+    updateAttribute(this, 'filename', value);
+  }
+
+  static get observedAttributes() {
+    return ['filename', 'type'];
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+
+    switch (name) {
+      case 'type':
+        {
+          assertType(newVal);
+          break;
+        }
+
+      case 'filename':
+        {
+          _classPrivateFieldGet(this, _$filename).textContent = newVal;
+          break;
+        }
+    }
+  }
+
+}));

package/file-status/types.d.ts

@@ -0,0 +1,18 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchFileStatusType = 'pending' | 'loading' | 'progress' | 'success' | 'error';
+export declare type TSinchFileStatusElement = HTMLElement & {
+    /** File status type */
+    type: TSinchFileStatusType;
+    /** File name */
+    filename: string;
+    /** File status type */
+    setAttribute(name: 'type', value: TSinchFileStatusType): void;
+    /** File name */
+    setAttribute(name: 'filename', value: string): void;
+};
+export declare type TSinchFileStatusReact = TSinchElementReact<TSinchFileStatusElement> & {
+    /** File status type */
+    type: TSinchFileStatusType;
+    /** File name */
+    filename: string;
+};

package/file-status/types.js

@@ -0,0 +1 @@
+export {};

package/file-status/utils.d.ts

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

package/file-status/utils.js

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

package/icons-branded/easytouse/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchIconBrandedElement, TSinchIconBrandedReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-icon-branded-easytouse': TSinchIconBrandedReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-icon-branded-easytouse': TSinchIconBrandedElement;
+    }
+}

package/icons-branded/easytouse/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true"><path d="M25.99 18.104c.517-.276 1.178-.112 1.477.366l5.41 8.66c.299.479.122 1.09-.396 1.366-.517.276-1.18.113-1.478-.366l-5.41-8.66c-.299-.478-.121-1.09.396-1.366Zm0 7.396c-.3-.478-.961-.642-1.479-.366-.517.276-.695.888-.396 1.366l2.705 4.33c.299.478.96.642 1.478.366s.695-.888.396-1.366L25.99 25.5Zm4.176 7.383c-.299-.479-.96-.643-1.478-.366-.517.276-.695.887-.396 1.366l1.082 1.732c.299.478.96.642 1.478.366.517-.276.695-.888.396-1.366l-1.082-1.732ZM19.04 24.088c-.299-.478-.96-.642-1.478-.366-.518.277-.695.888-.396 1.366l3.246 5.197c.299.478.96.642 1.478.366.517-.276.695-.888.396-1.366l-3.246-5.197Zm13.83 13.125c.3.478.122 1.09-.395 1.366-.518.276-1.18.112-1.478-.366-.299-.479-.122-1.09.396-1.366.517-.276 1.18-.113 1.478.366Zm1.234-6.119c.517-.276.695-.887.396-1.366-.299-.478-.96-.642-1.478-.366s-.695.888-.396 1.366c.299.479.96.642 1.478.366Z"/><path class="accent" d="M15.405 9.527a1 1 0 0 0-1.413.914l.035 10.526a1 1 0 0 0 1.544.835l2.964-1.922 2.876 4.45L25.017 22l-2.88-4.455 2.97-1.925a1 1 0 0 0-.131-1.75l-9.571-4.343Z"/></svg>';
+defineCustomElement('sinch-icon-branded-easytouse', createIconClass(templateHTML));

package/inline-alert/index.js

@@ -14,7 +14,7 @@ import '../icons/info';
 import '../title';
 import '../text';
 import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, setClass } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:16px;border-radius:var(--sinch-shape-radius-l);background-color:var(--sinch-color-alert-info-background);box-sizing:border-box;width:100%}#body-wrapper{display:flex;flex-direction:column;align-items:flex-start;margin-left:8px;min-width:0;flex:1}#caption{color:var(--sinch-color-stormy-500)}#text{color:var(--sinch-color-stormy-500);margin-top:4px}#icon-error,#icon-info,#icon-success,#icon-warn{display:none}: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)}#action{display:flex;margin-top:16px;min-width:0}#action.empty{display:none}#close{margin-left:16px}#close.empty{display:none}</style><div id="wrapper"><sinch-icon-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><div id="body-wrapper"><sinch-title id="caption" level="3" type="s"></sinch-title><sinch-text id="text" type="m"></sinch-text><div id="action"><slot name="action"></slot></div></div><div id="close"><slot name="close"></slot></div></div>';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:16px;border-radius:var(--sinch-shape-radius-l);background-color:var(--sinch-color-alert-info-background);box-sizing:border-box;width:100%}#body-wrapper{display:flex;flex-direction:column;align-items:flex-start;margin-left:8px;min-width:0;flex:1}#caption{color:var(--sinch-color-stormy-500);align-self:stretch}#text{color:var(--sinch-color-stormy-500);margin-top:4px;align-self:stretch}#text:empty{display:none}#icon-error,#icon-info,#icon-success,#icon-warn{display:none}: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)}#action{display:flex;margin-top:16px;min-width:0}#action.empty{display:none}#close{margin-left:16px}#close.empty{display:none}</style><div id="wrapper"><sinch-icon-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><div id="body-wrapper"><sinch-title id="caption" level="3" type="s" ellipsis></sinch-title><sinch-text id="text" type="m"></sinch-text><div id="action"><slot name="action"></slot></div></div><div id="close"><slot name="close"></slot></div></div>';
 import { assertType, typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/inline-alert/types.d.ts

@@ -2,7 +2,7 @@ import type { TSinchElementReact } from '../types';
 export declare type TSinchInlineAlertType = 'info' | 'success' | 'warn' | 'error';
 export declare type TSinchInlineAlertElement = HTMLElement & {
     type: TSinchInlineAlertType;
-    text: string;
+    text: string | null;
     caption: string;
     setAttribute(name: 'type', value: TSinchInlineAlertType): void;
     setAttribute(name: 'text', value: string): void;
@@ -10,6 +10,6 @@ export declare type TSinchInlineAlertElement = HTMLElement & {
 };
 export declare type TSinchInlineAlertReact = TSinchElementReact<TSinchInlineAlertElement> & {
     type: TSinchInlineAlertType;
-    text: string;
+    text?: string;
     caption: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "0.37.0",
+  "version": "0.38.0",
   "files": [
     "theme.css",
     "**/*/*.js",

package/progress/index.d.ts

@@ -0,0 +1,17 @@
+import '../spinner';
+import '../icons/check-circle';
+import '../icons/report';
+import '../icons/pending-actions';
+import '../icons/text-snippet';
+import '../text';
+import type { TSinchProgressElement, TSinchProgressReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-progress': TSinchProgressReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-progress': TSinchProgressElement;
+    }
+}

package/progress/index.js

@@ -0,0 +1,87 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$bar, _$text;
+
+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 '../spinner';
+import '../icons/check-circle';
+import '../icons/report';
+import '../icons/pending-actions';
+import '../icons/text-snippet';
+import '../text';
+import { defineCustomElement, updateAttribute, NectaryElement, updateBooleanAttribute, getIntegerAttribute, getBooleanAttribute, attrValueToInteger } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;align-items:center;height:24px}#bar,#progress{height:8px;border-radius:4px}#progress{background-color:var(--sinch-color-tropical-100);flex:1;min-width:0}#bar{background-color:var(--sinch-color-tropical-500);width:0}#text{display:none;width:46px}:host([detailed]:not([detailed=false])) #text{display:block}</style><div id="wrapper"><sinch-text id="text" type="m"></sinch-text><div id="progress"><div id="bar"></div></div></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-progress', (_$bar = new WeakMap(), _$text = new WeakMap(), class extends NectaryElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$bar, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$text, {
+      writable: true,
+      value: void 0
+    });
+
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$bar, shadowRoot.querySelector('#bar'));
+
+    _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#text'));
+  }
+
+  connectedCallback() {
+    this.setAttribute('role', 'progressbar');
+  }
+
+  get value() {
+    return getIntegerAttribute(this, 'value', 0);
+  }
+
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+
+  get detailed() {
+    return getBooleanAttribute(this, 'detailed');
+  }
+
+  set detailed(isDetailed) {
+    updateBooleanAttribute(this, 'detailed', isDetailed);
+  }
+
+  static get observedAttributes() {
+    return ['value'];
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+
+    switch (name) {
+      case 'value':
+        {
+          const int = attrValueToInteger(newVal, {
+            min: 0,
+            max: 100
+          });
+          const intCss = int === null ? '0%' : `${int}%`;
+          _classPrivateFieldGet(this, _$bar).style.width = intCss;
+          _classPrivateFieldGet(this, _$text).textContent = intCss;
+          this.setAttribute('valuenow', int !== null ? String(int) : '0');
+          break;
+        }
+    }
+  }
+
+}));

package/progress/types.d.ts

@@ -0,0 +1,12 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchProgressElement = HTMLElement & {
+    value: number;
+    detailed: boolean;
+    setAttribute(name: 'value', value: string): void;
+    setAttribute(name: 'detailed', value: ''): void;
+};
+export declare type TSinchProgressReact = TSinchElementReact<TSinchProgressElement> & {
+    value: number;
+    detailed?: boolean;
+    'aria-label': string;
+};

package/progress/types.js

@@ -0,0 +1 @@
+export {};

package/spinner/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getLiteralAttribute, NectaryElement, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}@keyframes spinner{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}div{animation:1.5s linear infinite spinner;animation-play-state:running;border:solid 3px var(--sinch-color-spinner-bg,#d4dadd);border-bottom-color:var(--sinch-color-spinner-fg,#0a273d);border-radius:50%;height:20px;width:20px;box-sizing:border-box;will-change:transform}:host([type=large]) div{height:46px;width:46px;border-width:4px}:host([type=small]) div{height:14px;width:14px;border-width:2px}:host([static]:not([static=false])) div{animation-play-state:paused}</style><div></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}@keyframes spinner{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}div{animation:1.5s linear infinite spinner;animation-play-state:running;border:solid 3px var(--sinch-color-spinner-bg,#d4dadd);border-bottom-color:var(--sinch-color-spinner-fg,#0a273d);border-radius:50%;height:20px;width:20px;box-sizing:border-box;will-change:transform;margin:2px}:host([type=large]) div{height:48px;width:48px;border-width:4px}:host([type=small]) div{height:14px;width:14px;border-width:2px;margin:1px}:host([static]:not([static=false])) div{animation-play-state:paused}</style><div></div>';
 import { spinnerTypes } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/text/index.js

@@ -1,6 +1,6 @@
 import '../icons/cancel';
 import { defineCustomElement, getBooleanAttribute, updateBooleanAttribute, NectaryElement, getLiteralAttribute, updateLiteralAttribute, isAttrTrue } from '../utils';
-const templateHTML = '<style>:host{display:block;font:var(--sinch-font-text-m)}:host([inline]:not([inline=false])){display:inline}:host([type="s"]){font:var(--sinch-font-text-s)}:host([type=xs]){font:var(--sinch-font-text-xs)}:host([type=xxs]){font:var(--sinch-font-text-xxs)}:host([emphasized]:not([emphasized=false])){font-weight:var(--sinch-font-weight-emphasized)}</style><slot></slot>';
+const templateHTML = '<style>:host{display:block;font:var(--sinch-font-text-m)}:host([inline]:not([inline=false])){display:inline}:host([type="s"]){font:var(--sinch-font-text-s)}:host([type=xs]){font:var(--sinch-font-text-xs)}:host([type=xxs]){font:var(--sinch-font-text-xxs)}:host([emphasized]:not([emphasized=false])){font-weight:var(--sinch-font-weight-emphasized)}:host([ellipsis]:not([ellipsis=false])){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}</style><slot></slot>';
 import { assertType, typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -31,6 +31,14 @@ defineCustomElement('sinch-text', class extends NectaryElement {
     return getBooleanAttribute(this, 'inline');
   }
 
+  set ellipsis(isEllipsis) {
+    updateBooleanAttribute(this, 'ellipsis', isEllipsis);
+  }
+
+  get ellipsis() {
+    return getBooleanAttribute(this, 'ellipsis');
+  }
+
   set emphasized(isEmphasized) {
     updateBooleanAttribute(this, 'emphasized', isEmphasized);
   }

package/text/types.d.ts

@@ -4,12 +4,15 @@ export declare type TSinchTextElement = HTMLElement & {
     type: TSinchTextType;
     inline: boolean;
     emphasized: boolean;
+    ellipsis: boolean;
     setAttribute(name: 'type', value: TSinchTextType): void;
     setAttribute(name: 'inline', value: ''): void;
     setAttribute(name: 'emphasized', value: ''): void;
+    setAttribute(name: 'ellipsis', value: ''): void;
 };
 export declare type TSinchTextReact = TSinchElementReact<TSinchTextElement> & {
     type: TSinchTextType;
     inline?: boolean;
     emphasized?: boolean;
+    ellipsis?: boolean;
 };

package/title/index.js

@@ -8,8 +8,8 @@ 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 '../icons/cancel';
-import { defineCustomElement, getAttribute, updateAttribute, updateLiteralAttribute, getLiteralAttribute, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:block}:host([type=xl])>*{font:var(--sinch-font-title-xl)}:host([type="l"])>*{font:var(--sinch-font-title-l)}:host([type="m"])>*{font:var(--sinch-font-title-m)}:host([type="s"])>*{font:var(--sinch-font-title-s)}:host([type=xs])>*{font:var(--sinch-font-title-xs)}</style><span id="text"></span>';
+import { defineCustomElement, getAttribute, updateAttribute, updateLiteralAttribute, getLiteralAttribute, NectaryElement, updateBooleanAttribute, getBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block}: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;width:100%;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;
@@ -48,6 +48,14 @@ defineCustomElement('sinch-title', (_$text = new WeakMap(), class extends Nectar
     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'];
   }

package/title/types.d.ts

@@ -5,12 +5,15 @@ export declare type TSinchTitleElement = HTMLElement & {
     text: string;
     type: TSinchTitleType;
     level: TSinchTitleLevel;
+    ellipsis: boolean;
     setAttribute(name: 'text', value: string): void;
     setAttribute(name: 'type', value: TSinchTitleType): void;
     setAttribute(name: 'level', value: TSinchTitleLevel): void;
+    setAttribute(name: 'ellipsis', value: ''): void;
 };
 export declare type TSinchTitleReact = TSinchElementReact<TSinchTitleElement> & {
     text: string;
     type: TSinchTitleType;
     level: TSinchTitleLevel;
+    ellipsis?: boolean;
 };

package/utils.d.ts

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

package/utils.js

@@ -244,4 +244,21 @@ const throttle = (delayFn, cancelFn) => cb => {
   };
 };
 
-export const throttleAnimationFrame = throttle(global.requestAnimationFrame, global.cancelAnimationFrame);
+export const throttleAnimationFrame = throttle(global.requestAnimationFrame, global.cancelAnimationFrame);
+export const getFirstSlotElement = root => {
+  let slot = root;
+
+  while (true) {
+    const el = slot.assignedElements()[0];
+
+    if (el == null) {
+      return null;
+    }
+
+    if (el.tagName !== 'SLOT') {
+      return el;
+    }
+
+    slot = el;
+  }
+};