@nectary/components 0.36.1 → 0.38.0

package/select/index.d.ts

@@ -1,4 +1,5 @@
 import '../dropdown';
+import '../icons/keyboard-arrow-down';
 import type { TSinchSelectElement, TSinchSelectReact } from './types';
 declare global {
     namespace JSX {

package/select/index.js

@@ -1,7 +1,7 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$button, _$buttonContent, _$label, _$optionalText, _$additionalText, _$invalidText, _$dropdown, _$optionSlot, _$sh, _createElement, _updateButtonContent, _onValueChange, _getOptionWithValue, _onLabelClick, _onDropdownClick, _onDropdownClose, _onButtonFocus, _onButtonBlur, _onChangeReactHandler, _onFocusReactHandler, _onBlurReactHandler;
+var _$button, _$buttonContent, _$dropdown, _$optionSlot, _$sh, _createElement, _updateButtonContent, _onValueChange, _getOptionWithValue, _onDropdownClick, _onDropdownClose, _onButtonFocus, _onButtonBlur, _onChangeReactHandler, _onFocusReactHandler, _onBlurReactHandler;
 
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 
@@ -12,11 +12,12 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
 
 import '../dropdown';
+import '../icons/keyboard-arrow-down';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateIntegerAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{position:relative}sinch-dropdown{display:block}#button{all:initial;display:flex;align-items:center;gap:8px;border:1px solid var(--sinch-color-stormy-200);border-radius:var(--sinch-shape-radius-s);box-sizing:border-box;width:100%;height:48px;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);cursor:pointer}#button:focus{border-color:var(--sinch-color-stormy-600)}#dropdown-icon{fill:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button[data-unselected]{color:var(--sinch-color-text-muted)}#button:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100);cursor:initial}#button:disabled #dropdown-icon{fill:var(--sinch-color-stormy-100)}:host([invalidtext]:not([invalidtext=""])) #button:not(:disabled){border-color:var(--sinch-color-text-invalid)}#content{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid);line-height:20px;margin-top:2px}#invalid:empty{display:none}::slotted(sinch-help-tooltip){align-self:center;margin:0 8px}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])){--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><div id="top"><label id="label" for="button"></label><slot name="tooltip"></slot><span id="optional"></span></div><sinch-dropdown id="dropdown" orientation="bottom"><button slot="target" id="button"><span id="content"></span><svg id="dropdown-icon" width="12" height="8" aria-hidden="true"><path d="M1.41.59 6 5.17 10.59.59 12 2 6 8 0 2 1.41.59Z"/></svg></button><slot name="option" slot="option"></slot></sinch-dropdown><div id="bottom"><span id="invalid"></span><span id="additional"></span></div></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#dropdown{display:block;width:100%}#button{all:initial;display:flex;align-items:center;gap:8px;border:1px solid var(--sinch-color-stormy-200);border-radius:var(--sinch-shape-radius-s);box-sizing:border-box;width:100%;height:48px;padding:0 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);cursor:pointer;--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:24px}#button:focus{border-color:var(--sinch-color-stormy-600)}#dropdown-icon{fill:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button[data-unselected]{color:var(--sinch-color-text-muted)}#button:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100);cursor:initial}#button:disabled #dropdown-icon{fill:var(--sinch-color-stormy-100)}:host([invalid]:not([invalid=false])) #button:enabled{border-color:var(--sinch-color-text-invalid)}#content{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host([disabled]:not([disabled=false])) #button{--sinch-color-icon:var(--sinch-color-stormy-100)}</style><sinch-dropdown id="dropdown" orientation="bottom"><button slot="target" id="button"><span id="content"></span><sinch-icon-keyboard-arrow-down id="dropdown-icon"></sinch-icon-keyboard-arrow-down></button><slot name="option" slot="option"></slot></sinch-dropdown>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _$dropdown = new WeakMap(), _$optionSlot = new WeakMap(), _$sh = new WeakMap(), _createElement = new WeakSet(), _updateButtonContent = new WeakSet(), _onValueChange = new WeakMap(), _getOptionWithValue = new WeakSet(), _onLabelClick = new WeakMap(), _onDropdownClick = new WeakMap(), _onDropdownClose = new WeakMap(), _onButtonFocus = new WeakMap(), _onButtonBlur = new WeakMap(), _onChangeReactHandler = new WeakMap(), _onFocusReactHandler = new WeakMap(), _onBlurReactHandler = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent = new WeakMap(), _$dropdown = new WeakMap(), _$optionSlot = new WeakMap(), _$sh = new WeakMap(), _createElement = new WeakSet(), _updateButtonContent = new WeakSet(), _onValueChange = new WeakMap(), _getOptionWithValue = new WeakSet(), _onDropdownClick = new WeakMap(), _onDropdownClose = new WeakMap(), _onButtonFocus = new WeakMap(), _onButtonBlur = new WeakMap(), _onChangeReactHandler = new WeakMap(), _onFocusReactHandler = new WeakMap(), _onBlurReactHandler = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -36,26 +37,6 @@ defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent =
       value: void 0
     });
 
-    _classPrivateFieldInitSpec(this, _$label, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$optionalText, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$additionalText, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$invalidText, {
-      writable: true,
-      value: void 0
-    });
-
     _classPrivateFieldInitSpec(this, _$dropdown, {
       writable: true,
       value: void 0
@@ -86,13 +67,6 @@ defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent =
       }
     });
 
-    _classPrivateFieldInitSpec(this, _onLabelClick, {
-      writable: true,
-      value: () => {
-        this.focus();
-      }
-    });
-
     _classPrivateFieldInitSpec(this, _onDropdownClick, {
       writable: true,
       value: () => {
@@ -151,15 +125,7 @@ defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent =
 
     _classPrivateFieldSet(this, _$buttonContent, shadowRoot.querySelector('#content'));
 
-    _classPrivateFieldSet(this, _$label, shadowRoot.querySelector('#label'));
-
-    _classPrivateFieldSet(this, _$optionalText, shadowRoot.querySelector('#optional'));
-
-    _classPrivateFieldSet(this, _$additionalText, shadowRoot.querySelector('#additional'));
-
-    _classPrivateFieldSet(this, _$invalidText, shadowRoot.querySelector('#invalid'));
-
-    _classPrivateFieldSet(this, _$dropdown, shadowRoot.querySelector('sinch-dropdown'));
+    _classPrivateFieldSet(this, _$dropdown, shadowRoot.querySelector('#dropdown'));
 
     _classPrivateFieldSet(this, _$optionSlot, shadowRoot.querySelector('slot[name="option"]'));
   }
@@ -178,8 +144,6 @@ defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent =
 
     _classPrivateFieldGet(this, _$button).addEventListener('blur', _classPrivateFieldGet(this, _onButtonBlur));
 
-    _classPrivateFieldGet(this, _$label).addEventListener('click', _classPrivateFieldGet(this, _onLabelClick));
-
     this.addEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
     this.addEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
     this.addEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
@@ -196,15 +160,13 @@ defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent =
 
     _classPrivateFieldGet(this, _$button).removeEventListener('blur', _classPrivateFieldGet(this, _onButtonBlur));
 
-    _classPrivateFieldGet(this, _$label).removeEventListener('click', _classPrivateFieldGet(this, _onLabelClick));
-
     this.removeEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
     this.removeEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
     this.removeEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
   }
 
   static get observedAttributes() {
-    return ['value', 'label', 'placeholder', 'optionaltext', 'additionaltext', 'invalidtext', 'disabled', 'maxvisibleitems'];
+    return ['value', 'placeholder', 'invalid', 'disabled', 'maxvisibleitems'];
   }
 
   get nodeName() {
@@ -227,36 +189,12 @@ defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent =
     return getAttribute(this, 'placeholder', null);
   }
 
-  set label(value) {
-    updateAttribute(this, 'label', value);
-  }
-
-  get label() {
-    return getAttribute(this, 'label', '');
-  }
-
-  set optionalText(value) {
-    updateAttribute(this, 'optionaltext', value);
-  }
-
-  get optionalText() {
-    return getAttribute(this, 'optionaltext', null);
-  }
-
-  set additionalText(value) {
-    updateAttribute(this, 'additionaltext', value);
-  }
-
-  get additionalText() {
-    return getAttribute(this, 'additionaltext', null);
-  }
-
-  set invalidText(value) {
-    updateAttribute(this, 'invalidtext', value);
+  set invalid(value) {
+    updateBooleanAttribute(this, 'invalid', value);
   }
 
-  get invalidText() {
-    return getAttribute(this, 'placeholder', null);
+  get invalid() {
+    return getBooleanAttribute(this, 'invalid');
   }
 
   set disabled(isDisabled) {
@@ -303,29 +241,9 @@ defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent =
           break;
         }
 
-      case 'label':
-        {
-          _classPrivateFieldGet(this, _$label).textContent = newVal;
-          break;
-        }
-
-      case 'optionaltext':
-        {
-          _classPrivateFieldGet(this, _$optionalText).textContent = newVal;
-          break;
-        }
-
-      case 'additionaltext':
-        {
-          _classPrivateFieldGet(this, _$additionalText).textContent = newVal;
-          break;
-        }
-
-      case 'invalidtext':
+      case 'invalid':
         {
-          const isInvalid = newVal !== null && newVal !== '';
-          _classPrivateFieldGet(this, _$invalidText).textContent = newVal;
-          updateExplicitBooleanAttribute(this, 'aria-invalid', isInvalid);
+          updateExplicitBooleanAttribute(this, 'aria-invalid', isAttrTrue(newVal));
           break;
         }
 

package/select/types.d.ts

@@ -3,16 +3,10 @@ import type { SyntheticEvent } from 'react';
 export declare type TSinchSelectElement = HTMLElement & {
     /** Value that matches one of the options `value` */
     value: string;
-    /** Label */
-    label: string;
     /** Text that appears when it has no value set */
     placeholder: string | null;
-    /** Optional text */
-    optionalText: string | null;
-    /** Additional text */
-    additionalText: string | null;
-    /** Invalid text, controls the overall invalid state */
-    invalidText: string | null;
+    /** Invalid state */
+    invalid: boolean;
     /** Disabled */
     disabled: boolean;
     /** Number of visible at the same time options in the list */
@@ -26,16 +20,10 @@ export declare type TSinchSelectElement = HTMLElement & {
     addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
     /** Value that matches one of the options `value` */
     setAttribute(name: 'value', value: string): void;
-    /** Label */
-    setAttribute(name: 'label', value: string): void;
     /** Text that appears when it has no value set */
     setAttribute(name: 'placeholder', value: string): void;
-    /** Optional text */
-    setAttribute(name: 'optionaltext', value: string): void;
-    /** Additional text */
-    setAttribute(name: 'additionaltext', value: string): void;
-    /** Invalid text, controls the overall invalid state */
-    setAttribute(name: 'invalidtext', value: string): void;
+    /** Invalid state */
+    setAttribute(name: 'invalid', value: ''): void;
     /** Disabled */
     setAttribute(name: 'disabled', value: ''): void;
     /** Number of visible at the same time options in the list */
@@ -44,18 +32,12 @@ export declare type TSinchSelectElement = HTMLElement & {
 export declare type TSinchSelectReact = TSinchElementReact<TSinchSelectElement> & {
     /** Value that matches one of the options `value` */
     value: string;
-    /** Label */
-    label: string;
     /** Label that is used for a11y – might be different from `label` */
     'aria-label': string;
     /** Text that appears when it has no value set */
     placeholder?: string;
-    /** Optional text */
-    optionalText?: string;
-    /** Additional text */
-    additionalText?: string;
-    /** Invalid text, controls the overall invalid state */
-    invalidText?: string;
+    /** Invalid state */
+    invalid?: boolean;
     /** Disabled */
     disabled?: boolean;
     /** Number of visible at the same time options in the list */

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/textarea/index.js

@@ -1,17 +1,17 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$input, _$label, _$optionalText, _$additionalText, _$invalidText, _cursorPos, _isPendingDk, _onCompositionStart, _onSelectionChange, _onInput, _onInputFocus, _onInputBlur, _onChangeReactHandler, _onFocusReactHandler, _onBlurReactHandler;
+var _$input, _cursorPos, _isPendingDk, _onCompositionStart, _onSelectionChange, _onInput, _onInputFocus, _onInputBlur, _onChangeReactHandler, _onFocusReactHandler, _onBlurReactHandler;
 
 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, getAttribute, getBooleanAttribute, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{width:100%;box-sizing:border-box}#input{all:initial;display:block;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:var(--sinch-shape-radius-s);width:100%;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto);background-color:var(--sinch-color-snow-100);resize:none}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#input:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:focus{border-color:var(--sinch-color-stormy-600)}:host([resizable]:not([resizable=false])) #input{resize:vertical}:host([invalidtext]:not([invalidtext=""])) #input:not(:disabled){border-color:var(--sinch-color-text-invalid)}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid);line-height:20px;margin-top:2px}#invalid:empty{display:none}::slotted(sinch-help-tooltip){align-self:center;margin:0 8px}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])){--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><slot name="tooltip"></slot><span id="optional"></span></div><textarea id="input"></textarea><div id="bottom"><span id="invalid"></span><span id="additional"></span></div></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#input{all:initial;display:block;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:var(--sinch-shape-radius-s);width:100%;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);resize:none}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted);opacity:1}#input:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:focus{border-color:var(--sinch-color-stormy-600)}:host([resizable]:not([resizable=false])) #input{resize:vertical}:host([invalid]:not([invalid=false])) #input:enabled{border-color:var(--sinch-color-text-invalid)}</style><textarea id="input"></textarea>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _cursorPos = new WeakMap(), _isPendingDk = new WeakMap(), _onCompositionStart = new WeakMap(), _onSelectionChange = new WeakMap(), _onInput = new WeakMap(), _onInputFocus = new WeakMap(), _onInputBlur = new WeakMap(), _onChangeReactHandler = new WeakMap(), _onFocusReactHandler = new WeakMap(), _onBlurReactHandler = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _cursorPos = new WeakMap(), _isPendingDk = new WeakMap(), _onCompositionStart = new WeakMap(), _onSelectionChange = new WeakMap(), _onInput = new WeakMap(), _onInputFocus = new WeakMap(), _onInputBlur = new WeakMap(), _onChangeReactHandler = new WeakMap(), _onFocusReactHandler = new WeakMap(), _onBlurReactHandler = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -20,26 +20,6 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
       value: void 0
     });
 
-    _classPrivateFieldInitSpec(this, _$label, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$optionalText, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$additionalText, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$invalidText, {
-      writable: true,
-      value: void 0
-    });
-
     _classPrivateFieldInitSpec(this, _cursorPos, {
       writable: true,
       value: null
@@ -142,14 +122,6 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
     shadowRoot.appendChild(template.content.cloneNode(true));
 
     _classPrivateFieldSet(this, _$input, shadowRoot.querySelector('#input'));
-
-    _classPrivateFieldSet(this, _$label, shadowRoot.querySelector('#label'));
-
-    _classPrivateFieldSet(this, _$optionalText, shadowRoot.querySelector('#optional'));
-
-    _classPrivateFieldSet(this, _$additionalText, shadowRoot.querySelector('#additional'));
-
-    _classPrivateFieldSet(this, _$invalidText, shadowRoot.querySelector('#invalid'));
   }
 
   connectedCallback() {
@@ -192,10 +164,14 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
   }
 
   static get observedAttributes() {
-    return ['value', 'placeholder', 'label', 'optionaltext', 'additionaltext', 'invalidtext', 'disabled', 'rows'];
+    return ['value', 'placeholder', 'invalid', 'disabled', 'rows'];
   }
 
-  attributeChangedCallback(name, _, newVal) {
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+
     switch (name) {
       case 'value':
         {
@@ -217,12 +193,6 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
           break;
         }
 
-      case 'label':
-        {
-          _classPrivateFieldGet(this, _$label).textContent = newVal;
-          break;
-        }
-
       case 'placeholder':
         {
           _classPrivateFieldGet(this, _$input).placeholder = newVal ?? '';
@@ -230,23 +200,9 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
           break;
         }
 
-      case 'optionaltext':
-        {
-          _classPrivateFieldGet(this, _$optionalText).textContent = newVal;
-          break;
-        }
-
-      case 'additionaltext':
-        {
-          _classPrivateFieldGet(this, _$additionalText).textContent = newVal;
-          break;
-        }
-
-      case 'invalidtext':
+      case 'invalid':
         {
-          const isInvalid = newVal !== null && newVal !== '';
-          _classPrivateFieldGet(this, _$invalidText).textContent = newVal;
-          updateExplicitBooleanAttribute(this, 'aria-invalid', isInvalid);
+          updateExplicitBooleanAttribute(this, 'aria-invalid', isAttrTrue(newVal));
           break;
         }
 
@@ -286,36 +242,12 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
     return getAttribute(this, 'placeholder', null);
   }
 
-  set label(value) {
-    updateAttribute(this, 'label', value);
-  }
-
-  get label() {
-    return getAttribute(this, 'label', '');
-  }
-
-  set optionalText(value) {
-    updateAttribute(this, 'optionaltext', value);
-  }
-
-  get optionalText() {
-    return getAttribute(this, 'optionaltext', null);
-  }
-
-  set additionalText(value) {
-    updateAttribute(this, 'additionaltext', value);
-  }
-
-  get additionalText() {
-    return getAttribute(this, 'additionaltext', null);
-  }
-
-  set invalidText(value) {
-    updateAttribute(this, 'invalidtext', value);
+  set invalid(value) {
+    updateBooleanAttribute(this, 'invalid', value);
   }
 
-  get invalidText() {
-    return getAttribute(this, 'invalidtext', null);
+  get invalid() {
+    return getBooleanAttribute(this, 'invalid');
   }
 
   set disabled(isDisabled) {

package/textarea/types.d.ts

@@ -1,44 +1,60 @@
 import type { TSinchElementReact } from '../types';
 import type { SyntheticEvent } from 'react';
 export declare type TSinchTextareaElement = HTMLElement & {
+    /** Value */
     value: string;
-    label: string;
+    /** Text that appears in the text field when it has no value set */
     placeholder: string | null;
-    optionalText: string | null;
-    invalidText: string | null;
-    additionalText: string | null;
+    /** Disabled */
     disabled: boolean;
+    /** Invalid state */
+    invalid: boolean;
     selectionStart: HTMLTextAreaElement['selectionStart'];
     selectionEnd: HTMLTextAreaElement['selectionEnd'];
     selectionDirection: HTMLTextAreaElement['selectionDirection'];
+    /** Number of rows */
     rows: HTMLTextAreaElement['rows'];
+    /** Whether the text field is resizable */
     resizable: boolean;
+    /** Change value event */
     addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
+    /** Focus event */
     addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
+    /** Blur event */
     addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
+    /** Value */
     setAttribute(name: 'value', value: string): void;
-    setAttribute(name: 'label', value: string): void;
+    /** Text that appears in the text field when it has no value set */
     setAttribute(name: 'placeholder', value: string): void;
-    setAttribute(name: 'optionaltext', value: string): void;
-    setAttribute(name: 'invalidtext', value: string): void;
-    setAttribute(name: 'additionaltext', value: string): void;
+    /** Invalid state */
+    setAttribute(name: 'invalid', value: ''): void;
+    /** Disabled */
     setAttribute(name: 'disabled', value: ''): void;
+    /** Number of rows */
     setAttribute(name: 'rows', value: string): void;
+    /** Whether the text field is resizable */
     setAttribute(name: 'resizable', value: ''): void;
 };
 export declare type TSinchTextareaReact = TSinchElementReact<TSinchTextareaElement> & {
+    /** Value */
     value: string;
-    label: string;
+    /** Text that appears in the text field when it has no value set */
     placeholder?: string;
-    optionalText?: string;
-    invalidText?: string;
-    additionalText?: string;
+    /** Disabled */
     disabled?: boolean;
+    /** Invalid state */
+    invalid?: boolean;
     'aria-label': string;
+    /** Number of rows */
     rows?: number;
+    /** Whether the text field is resizable */
     resizable?: boolean;
+    /** @deprecated Change value handler */
     onChange?: (e: SyntheticEvent<TSinchTextareaElement, CustomEvent<string>>) => void;
+    /** Change value handler */
     'on-change'?: (e: CustomEvent<string>) => void;
+    /** Focus handler */
     'on-focus'?: (e: CustomEvent<void>) => void;
+    /** Blur handler */
     'on-blur'?: (e: CustomEvent<void>) => void;
 };

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

@@ -8,6 +8,7 @@ declare global {
 }
 export declare class NectaryElement extends HTMLElement {
     attachShadow(options?: Partial<ShadowRootInit>): ShadowRoot;
+    __version: string;
 }
 export declare const getReactEventHandler: ($element: HTMLElement, handlerName: string) => ((arg?: any) => void) | null;
 export declare const updateExplicitBooleanAttribute: ($element: Element, attrName: string, attrValue: boolean | null | undefined) => void;
@@ -46,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

@@ -1,3 +1,5 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import pkg from './package.json';
 const nectaryDefinitions = new Map();
 let nectaryRegistry = null;
 export const defineCustomElement = (name, constructor) => {
@@ -27,6 +29,12 @@ export const setNectaryRegistry = registry => {
   nectaryDefinitions.clear();
 };
 export class NectaryElement extends HTMLElement {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, '__version', pkg.version);
+  }
+
   attachShadow(options) {
     return super.attachShadow({
       mode: 'closed',
@@ -236,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;
+  }
+};