@nectary/components 0.9.0 → 0.10.0

package/table-head-cell/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, getLiteralAttribute, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:table-cell;border-bottom:1px solid var(--sinch-color-stormy-200);height:48px;vertical-align:middle;padding:0 6px;--sinch-color-icon:var(--sinch-color-stormy-200)}:host(:first-child){padding-left:8px}:host(:last-child){padding-right:8px}#wrapper{position:relative;display:flex;align-items:center;gap:4px;width:100%;height:100%;box-sizing:border-box}#text{flex-shrink:1;min-width:0;font:var(--sinch-font-title-4);color:var(--sinch-color-stormy-200);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([align=center])>#wrapper{justify-content:center}:host([align=end]) #text{margin-left:auto}:host(:is([text=""],:not([text])))>#wrapper{display:none}:host([fit]:not([fit=false])){width:1px}::slotted(sinch-help-tooltip){position:relative;z-index:1}</style><slot name="checkbox"></slot><div id="wrapper"><span id="text"></span><slot name="tooltip"></slot><slot name="sort"></slot></div>';
+const templateHTML = '<style>:host{display:table-cell;border-bottom:1px solid var(--sinch-color-stormy-200);height:48px;vertical-align:middle;padding:0 6px;--sinch-color-icon:var(--sinch-color-stormy-200)}:host(:first-child){padding-left:8px}:host(:last-child){padding-right:8px}#wrapper{position:relative;width:100%;height:100%;box-sizing:border-box;font:var(--sinch-font-title-4);color:var(--sinch-color-stormy-300);display:flex;align-items:center;gap:4px}#text{flex-shrink:1;min-width:0;font:var(--sinch-font-title-4);color:var(--sinch-color-stormy-200);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([align=center])>#wrapper{justify-content:center}:host([align=end]) #text{margin-left:auto}:host(:is([text=""],:not([text])))>#wrapper{display:none}:host([fit]:not([fit=false])){width:1px}::slotted(sinch-help-tooltip){position:relative;z-index:1}</style><slot name="checkbox"></slot><div id="wrapper"><span id="text"></span><slot name="tooltip"></slot><slot name="sort"></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 const alignValues = ['start', 'center', 'end'];
@@ -22,7 +22,7 @@ defineCustomElement('sinch-table-head-cell', (_$text = new WeakMap(), class exte
     });
 
     const shadowRoot = this.attachShadow({
-      mode: 'production' === 'development' ? 'open' : 'closed'
+      mode: 'closed'
     });
     shadowRoot.appendChild(template.content.cloneNode(true));
 
@@ -31,6 +31,7 @@ defineCustomElement('sinch-table-head-cell', (_$text = new WeakMap(), class exte
 
   connectedCallback() {
     this.setAttribute('role', 'columnheader');
+    this.setAttribute('scope', 'col');
   }
 
   static get observedAttributes() {

package/table-head-sort/index.d.ts

@@ -9,6 +9,7 @@ export declare type TSinchTableHeaderSortElement = HTMLElement & {
 };
 export declare type TSinchTableHeaderSortReact = TSinchElementReact<TSinchTableHeaderSortElement> & {
     value: boolean;
+    'aria-label': string;
     onChange: (e: SyntheticEvent<TSinchTableHeaderSortElement, CustomEvent<boolean>>) => void;
     onFocus?: (e: FocusEvent<TSinchTableHeaderSortElement>) => void;
     onBlur?: (e: FocusEvent<TSinchTableHeaderSortElement>) => void;

package/table-head-sort/index.js

@@ -36,7 +36,7 @@ defineCustomElement('sinch-table-head-sort', (_$input = new WeakMap(), class ext
     });
 
     const shadowRoot = this.attachShadow({
-      mode: 'production' === 'development' ? 'open' : 'closed'
+      mode: 'closed'
     });
     shadowRoot.appendChild(template.content.cloneNode(true));
 
@@ -44,6 +44,8 @@ defineCustomElement('sinch-table-head-sort', (_$input = new WeakMap(), class ext
   }
 
   connectedCallback() {
+    this.setAttribute('role', 'checkbox');
+
     _classPrivateFieldGet(this, _$input).addEventListener('input', this.onCheckboxInput);
   }
 

package/table-row/index.js

@@ -6,7 +6,7 @@ defineCustomElement('sinch-table-row', class extends HTMLElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow({
-      mode: 'production' === 'development' ? 'open' : 'closed'
+      mode: 'closed'
     });
     shadowRoot.appendChild(template.content.cloneNode(true));
   }

package/tabs/index.d.ts

@@ -5,6 +5,7 @@ export declare type TSinchTabsElement = HTMLElement & {
 };
 export declare type TSinchTabsReact = TSinchElementReact<TSinchTabsElement> & {
     value: string;
+    'aria-label': string;
     onChange: (event: SyntheticEvent<TSinchTabsElement, CustomEvent<string>>) => void;
 };
 declare global {

package/tabs/index.js

@@ -1,73 +1,43 @@
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 
-var _$slot, _onOptionKeyDown, _onSlotChange, _onOptionChange;
+var _$slot, _onOptionKeyDown, _onSlotChange, _onOptionChange, _onValueChange, _dispatchChangeEvent, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _getEnabledRadioElements;
+
+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 { isTabsOptionElement } from '../tabs-option';
 import { defineCustomElement, getAttribute, updateAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:row;height:60px;width:100%;box-sizing:border-box;overflow-x:auto}</style><div id="wrapper"><slot></slot></div>';
 
-const getEnabledRadioElements = $slot => {
-  return $slot.assignedElements().filter(opt => isTabsOptionElement(opt) && opt.disabled !== true);
-};
-
 const findSelectedOption = elements => {
   return elements.find(el => el.checked) ?? null;
 };
 
-const getFirstOption = $slot => {
-  for (const $option of $slot.assignedElements()) {
-    if (isTabsOptionElement($option) && $option.disabled !== true) {
-      return $option;
-    }
-  }
-
-  return null;
-};
-
-const getLastOption = $slot => {
-  for (const $option of $slot.assignedElements().reverse()) {
-    if (isTabsOptionElement($option) && $option.disabled !== true) {
-      return $option;
-    }
-  }
-
-  return null;
-};
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-tabs', (_$slot = new WeakMap(), _onOptionKeyDown = new WeakMap(), _onSlotChange = new WeakMap(), _onOptionChange = new WeakMap(), _onValueChange = new WeakSet(), _dispatchChangeEvent = new WeakSet(), _getFirstOption = new WeakSet(), _getLastOption = new WeakSet(), _getNextOption = new WeakSet(), _getPrevOption = new WeakSet(), _getEnabledRadioElements = new WeakSet(), class extends HTMLElement {
+  constructor() {
+    super();
 
-const getNextOption = $slot => {
-  const $options = getEnabledRadioElements($slot);
-  const $selectedOption = findSelectedOption($options);
-  const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
+    _classPrivateMethodInitSpec(this, _getEnabledRadioElements);
 
-  if (currentIndex < 0) {
-    return getFirstOption($slot);
-  }
+    _classPrivateMethodInitSpec(this, _getPrevOption);
 
-  return $options[(currentIndex + 1) % $options.length];
-};
+    _classPrivateMethodInitSpec(this, _getNextOption);
 
-const getPrevOption = $slot => {
-  const $options = getEnabledRadioElements($slot);
-  const $selectedOption = findSelectedOption($options);
-  const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
+    _classPrivateMethodInitSpec(this, _getLastOption);
 
-  if (currentIndex < 0) {
-    return getLastOption($slot);
-  }
+    _classPrivateMethodInitSpec(this, _getFirstOption);
 
-  return $options[(currentIndex - 1 + $options.length) % $options.length];
-};
+    _classPrivateMethodInitSpec(this, _dispatchChangeEvent);
 
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-defineCustomElement('sinch-tabs', (_$slot = new WeakMap(), _onOptionKeyDown = new WeakMap(), _onSlotChange = new WeakMap(), _onOptionChange = new WeakMap(), class extends HTMLElement {
-  constructor() {
-    super();
+    _classPrivateMethodInitSpec(this, _onValueChange);
 
     _classPrivateFieldInitSpec(this, _$slot, {
       writable: true,
@@ -82,11 +52,13 @@ defineCustomElement('sinch-tabs', (_$slot = new WeakMap(), _onOptionKeyDown = ne
           case 'ArrowLeft':
             {
               e.preventDefault();
-              const $option = getPrevOption(_classPrivateFieldGet(this, _$slot));
+
+              const $option = _classPrivateMethodGet(this, _getPrevOption, _getPrevOption2).call(this);
 
               if ($option !== null) {
                 $option.focus();
-                this.dispatchChangeEvent($option.value);
+
+                _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, $option.value);
               }
 
               break;
@@ -96,11 +68,13 @@ defineCustomElement('sinch-tabs', (_$slot = new WeakMap(), _onOptionKeyDown = ne
           case 'ArrowRight':
             {
               e.preventDefault();
-              const $option = getNextOption(_classPrivateFieldGet(this, _$slot));
+
+              const $option = _classPrivateMethodGet(this, _getNextOption, _getNextOption2).call(this);
 
               if ($option !== null) {
                 $option.focus();
-                this.dispatchChangeEvent($option.value);
+
+                _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, $option.value);
               }
 
               break;
@@ -112,7 +86,7 @@ defineCustomElement('sinch-tabs', (_$slot = new WeakMap(), _onOptionKeyDown = ne
     _classPrivateFieldInitSpec(this, _onSlotChange, {
       writable: true,
       value: () => {
-        this.onValueChange(this.value);
+        _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, this.value);
       }
     });
 
@@ -120,12 +94,13 @@ defineCustomElement('sinch-tabs', (_$slot = new WeakMap(), _onOptionKeyDown = ne
       writable: true,
       value: e => {
         e.stopPropagation();
-        this.dispatchChangeEvent(e.detail);
+
+        _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, e.detail);
       }
     });
 
     const shadowRoot = this.attachShadow({
-      mode: 'production' === 'development' ? 'open' : 'closed',
+      mode: 'closed',
       delegatesFocus: true
     });
     shadowRoot.appendChild(template.content.cloneNode(true));
@@ -137,6 +112,10 @@ defineCustomElement('sinch-tabs', (_$slot = new WeakMap(), _onOptionKeyDown = ne
     _classPrivateFieldGet(this, _$slot).addEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
   }
 
+  connectedCallback() {
+    this.setAttribute('role', 'tablist');
+  }
+
   static get observedAttributes() {
     return ['value'];
   }
@@ -157,25 +136,76 @@ defineCustomElement('sinch-tabs', (_$slot = new WeakMap(), _onOptionKeyDown = ne
     switch (name) {
       case 'value':
         {
-          this.onValueChange(newVal ?? '');
+          _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, newVal);
+
           break;
         }
     }
   }
 
-  onValueChange(value) {
-    for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
-      if (isTabsOptionElement($option)) {
-        $option.checked = $option.disabled !== true && $option.value === value;
-      }
+}));
+
+function _onValueChange2(value) {
+  for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
+    if (isTabsOptionElement($option)) {
+      $option.checked = $option.disabled !== true && $option.value === value;
+    }
+  }
+}
+
+function _dispatchChangeEvent2(value) {
+  this.dispatchEvent(new CustomEvent('change', {
+    detail: value,
+    bubbles: true
+  }));
+}
+
+function _getFirstOption2() {
+  for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
+    if (isTabsOptionElement($option) && $option.disabled !== true) {
+      return $option;
+    }
+  }
+
+  return null;
+}
+
+function _getLastOption2() {
+  for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements().reverse()) {
+    if (isTabsOptionElement($option) && $option.disabled !== true) {
+      return $option;
     }
   }
 
-  dispatchChangeEvent(value) {
-    this.dispatchEvent(new CustomEvent('change', {
-      detail: value,
-      bubbles: true
-    }));
+  return null;
+}
+
+function _getNextOption2() {
+  const $options = _classPrivateMethodGet(this, _getEnabledRadioElements, _getEnabledRadioElements2).call(this);
+
+  const $selectedOption = findSelectedOption($options);
+  const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
+
+  if (currentIndex < 0) {
+    return _classPrivateMethodGet(this, _getFirstOption, _getFirstOption2).call(this);
+  }
+
+  return $options[(currentIndex + 1) % $options.length];
+}
+
+function _getPrevOption2() {
+  const $options = _classPrivateMethodGet(this, _getEnabledRadioElements, _getEnabledRadioElements2).call(this);
+
+  const $selectedOption = findSelectedOption($options);
+  const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
+
+  if (currentIndex < 0) {
+    return _classPrivateMethodGet(this, _getLastOption, _getLastOption2).call(this);
   }
 
-}));
+  return $options[(currentIndex - 1 + $options.length) % $options.length];
+}
+
+function _getEnabledRadioElements2() {
+  return _classPrivateFieldGet(this, _$slot).assignedElements().filter(opt => isTabsOptionElement(opt) && opt.disabled !== true);
+}

package/tabs-option/index.d.ts

@@ -13,6 +13,7 @@ export declare type TSinchTabsOptionReact = TSinchElementReact<TSinchTabsOptionE
     value: string;
     disabled?: boolean;
     text: string;
+    'aria-label': string;
     onFocus?: (e: FocusEvent<TSinchTabsOptionElement>) => void;
     onBlur?: (e: FocusEvent<TSinchTabsOptionElement>) => void;
 };

package/tabs-option/index.js

@@ -7,7 +7,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, isAttrTrue, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}*{pointer-events:none}#wrapper{display:flex;flex-direction:row;align-items:center;gap:12px;position:relative;width:100%;height:42px;padding:8px 20px;box-sizing:border-box;box-shadow:0 1px 0 0 var(--sinch-color-stormy-100);font:var(--sinch-font-body);color:var(--sinch-color-text-default)}#content{flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([checked]) #wrapper{box-shadow:0 2px 0 0 var(--sinch-color-stormy-500);font:var(--sinch-font-emphasized-body)}input{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer}:host([disabled]:not([disabled=false])) #wrapper{color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}input:disabled{cursor:unset}</style><div id="wrapper"><slot name="icon"></slot><span id="content"></span> <input type="radio"/></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}*{pointer-events:none}#wrapper{display:flex;flex-direction:row;align-items:center;gap:12px;position:relative;width:100%;height:42px;padding:8px 20px;box-sizing:border-box;box-shadow:0 1px 0 0 var(--sinch-color-stormy-100);font:var(--sinch-font-body);color:var(--sinch-color-text-default)}#content{flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([checked]) #wrapper{box-shadow:0 2px 0 0 var(--sinch-color-stormy-500);font:var(--sinch-font-emphasized-body)}input{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer}:host([disabled]:not([disabled=false])) #wrapper{color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}input:disabled{cursor:unset}</style><div id="wrapper"><slot name="icon"></slot><label for="input" id="content" aria-hidden="true"></label> <input id="input" type="radio" aria-hidden="true"/></div>';
 export const isTabsOptionElement = element => {
   return element instanceof Element && element.tagName === 'SINCH-TABS-OPTION';
 };
@@ -30,7 +30,7 @@ defineCustomElement('sinch-tabs-option', (_onInput = new WeakMap(), class extend
     });
 
     const shadowRoot = this.attachShadow({
-      mode: 'production' === 'development' ? 'open' : 'closed',
+      mode: 'closed',
       delegatesFocus: true
     });
     shadowRoot.appendChild(template.content.cloneNode(true));
@@ -39,6 +39,7 @@ defineCustomElement('sinch-tabs-option', (_onInput = new WeakMap(), class extend
   }
 
   connectedCallback() {
+    this.setAttribute('role', 'tab');
     this.$input.addEventListener('input', _classPrivateFieldGet(this, _onInput));
   }
 
@@ -101,6 +102,7 @@ defineCustomElement('sinch-tabs-option', (_onInput = new WeakMap(), class extend
             });
           }
 
+          updateAttribute(this, 'aria-selected', isAttrTrue(newVal));
           break;
         }
 

package/tag/index.js

@@ -23,7 +23,7 @@ defineCustomElement('sinch-tag', (_$text = new WeakMap(), class extends HTMLElem
     });
 
     const shadowRoot = this.attachShadow({
-      mode: 'production' === 'development' ? 'open' : 'closed'
+      mode: 'closed'
     });
     shadowRoot.appendChild(template.content.cloneNode(true));
 

package/tag-close/index.js

@@ -9,7 +9,7 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 
 import '../icon/cancel';
 import { defineCustomElement, getBooleanAttribute, updateAttribute, isAttrTrue } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:14px;height:14px}:host([small]:not([small=false])) #wrapper{width:12px;height:12px}button{all:initial;position:absolute;display:flex;align-items:center;justify-content:center;width:24px;height:24px;box-sizing:border-box;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);cursor:pointer}button>*{pointer-events:none}</style><div id="wrapper"><button><sinch-icon-cancel></sinch-icon-cancel></button></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:14px;height:14px}:host([small]:not([small=false])) #wrapper{width:12px;height:12px}button{all:initial;position:absolute;display:flex;align-items:center;justify-content:center;width:24px;height:24px;box-sizing:border-box;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);cursor:pointer}button>*{pointer-events:none}</style><div id="wrapper"><button aria-label="dismiss tag"><sinch-icon-cancel></sinch-icon-cancel></button></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-tag-close', (_$icon = new WeakMap(), _$button = new WeakMap(), class extends HTMLElement {
@@ -27,7 +27,7 @@ defineCustomElement('sinch-tag-close', (_$icon = new WeakMap(), _$button = new W
     });
 
     const shadowRoot = this.attachShadow({
-      mode: 'production' === 'development' ? 'open' : 'closed',
+      mode: 'closed',
       delegatesFocus: true
     });
     shadowRoot.appendChild(template.content.cloneNode(true));

package/textarea/index.d.ts

@@ -1,5 +1,5 @@
 import type { TSinchElementReact } from '../types';
-import type { FocusEvent, SyntheticEvent } from 'react';
+import type { DOMAttributes, FocusEvent, SyntheticEvent } from 'react';
 export declare type TSinchTextareaElement = HTMLElement & {
     value: string;
     label: string;
@@ -19,7 +19,9 @@ export declare type TSinchTextareaReact = TSinchElementReact<TSinchTextareaEleme
     invalidText?: string;
     additionalText?: string;
     disabled?: boolean;
+    'aria-label': string;
     onChange: (e: SyntheticEvent<TSinchTextareaElement, CustomEvent<string>>) => void;
+    onKeyPress?: DOMAttributes<TSinchTextareaElement>['onKeyPress'];
     onFocus?: (e: FocusEvent<TSinchTextareaElement>) => void;
     onBlur?: (e: FocusEvent<TSinchTextareaElement>) => void;
 };

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, _onInput;
+var _$input, _$label, _$optionalText, _$additionalText, _$invalidText, _selectionStart, _selectionEnd, _onInput;
 
 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, isAttrTrue, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{width:100%;box-sizing:border-box}#input{all:initial;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:2px;width:100%;min-height:86px;margin:2px 0;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto);resize:vertical}#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-300)}:host([invalidtext]:not([invalidtext=""])) #input:not(:disabled){border-color:var(--sinch-color-text-invalid)}#bottom,#top{display:flex;align-items:baseline}#top{height:24px}#bottom{height:20px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-4);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)}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid)}::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" rows="3"></textarea><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
+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;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:2px;width:100%;min-height:86px;margin:2px 0;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto);resize:vertical}#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-300)}:host([invalidtext]:not([invalidtext=""])) #input:not(:disabled){border-color:var(--sinch-color-text-invalid)}#bottom,#top{display:flex;align-items:baseline}#top{height:24px}#bottom{height:20px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-4);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)}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid)}::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" rows="3"></textarea><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
 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(), _onInput = new WeakMap(), class extends HTMLElement {
+defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _selectionStart = new WeakMap(), _selectionEnd = new WeakMap(), _onInput = new WeakMap(), class extends HTMLElement {
   constructor() {
     super();
 
@@ -40,23 +40,55 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
       value: void 0
     });
 
+    _classPrivateFieldInitSpec(this, _selectionStart, {
+      writable: true,
+      value: null
+    });
+
+    _classPrivateFieldInitSpec(this, _selectionEnd, {
+      writable: true,
+      value: null
+    });
+
     _classPrivateFieldInitSpec(this, _onInput, {
       writable: true,
       value: e => {
         e.stopPropagation();
 
-        const value = _classPrivateFieldGet(this, _$input).value;
+        const nextValue = _classPrivateFieldGet(this, _$input).value;
+
+        const prevValue = this.value;
+
+        if (prevValue !== nextValue) {
+          const nextSelectionStart = _classPrivateFieldGet(this, _$input).selectionStart;
+
+          const nextSelectionEnd = _classPrivateFieldGet(this, _$input).selectionEnd;
+
+          const prevSelectionStart = _classPrivateFieldGet(this, _selectionStart);
 
-        _classPrivateFieldGet(this, _$input).value = this.value;
-        this.dispatchEvent(new CustomEvent('change', {
-          detail: value,
-          bubbles: true
-        }));
+          const prevSelectionEnd = _classPrivateFieldGet(this, _selectionEnd);
+
+          const isPrevCursorEnd = prevSelectionStart === prevSelectionEnd && prevSelectionStart === prevValue.length;
+          _classPrivateFieldGet(this, _$input).value = prevValue;
+
+          if (!isPrevCursorEnd) {
+            _classPrivateFieldGet(this, _$input).setSelectionRange(prevSelectionStart, prevSelectionEnd);
+          }
+
+          _classPrivateFieldSet(this, _selectionStart, nextSelectionStart);
+
+          _classPrivateFieldSet(this, _selectionEnd, nextSelectionEnd);
+
+          this.dispatchEvent(new CustomEvent('change', {
+            detail: nextValue,
+            bubbles: true
+          }));
+        }
       }
     });
 
     const shadowRoot = this.attachShadow({
-      mode: 'production' === 'development' ? 'open' : 'closed',
+      mode: 'closed',
       delegatesFocus: true
     });
     shadowRoot.appendChild(template.content.cloneNode(true));
@@ -73,6 +105,9 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
   }
 
   connectedCallback() {
+    this.setAttribute('role', 'textbox');
+    this.setAttribute('aria-multiline', 'true');
+
     _classPrivateFieldGet(this, _$input).addEventListener('input', _classPrivateFieldGet(this, _onInput));
   }
 
@@ -88,7 +123,17 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
     switch (name) {
       case 'value':
         {
-          _classPrivateFieldGet(this, _$input).value = newVal ?? '';
+          const nextVal = newVal ?? '';
+
+          if (nextVal !== _classPrivateFieldGet(this, _$input).value) {
+            _classPrivateFieldGet(this, _$input).value = nextVal;
+            const isNextCursorEnd = _classPrivateFieldGet(this, _selectionStart) === _classPrivateFieldGet(this, _selectionEnd) && (_classPrivateFieldGet(this, _selectionStart) === null || _classPrivateFieldGet(this, _selectionStart) === nextVal.length);
+
+            if (!isNextCursorEnd) {
+              _classPrivateFieldGet(this, _$input).setSelectionRange(_classPrivateFieldGet(this, _selectionStart), _classPrivateFieldGet(this, _selectionEnd));
+            }
+          }
+
           break;
         }
 
@@ -101,6 +146,7 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
       case 'placeholder':
         {
           _classPrivateFieldGet(this, _$input).placeholder = newVal ?? '';
+          updateAttribute(this, 'aria-placeholder', newVal);
           break;
         }
 
@@ -119,6 +165,7 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
       case 'invalidtext':
         {
           _classPrivateFieldGet(this, _$invalidText).textContent = newVal;
+          updateAttribute(this, 'aria-invalid', String(newVal !== null && newVal !== ''));
           break;
         }
 

package/theme.css

@@ -85,6 +85,7 @@
   font-family: "Gilroy";
   font-weight: 400;
   font-style: normal;
+  font-display: swap;
   src:
     local("Gilroy-Regular"),
     url("https://d2vu40klajma73.cloudfront.net/Gilroy-Regular.woff2") format("woff2"),
@@ -95,6 +96,7 @@
   font-family: "Gilroy";
   font-weight: 600;
   font-style: normal;
+  font-display: swap;
   src:
     local("Gilroy-SemiBold"),
     url("https://d2vu40klajma73.cloudfront.net/Gilroy-SemiBold.woff2") format("woff2"),
@@ -105,6 +107,7 @@
   font-family: "Gilroy";
   font-weight: 700;
   font-style: normal;
+  font-display: swap;
   src:
     local("Gilroy-Bold"),
     url("https://d2vu40klajma73.cloudfront.net/Gilroy-Bold.woff2") format("woff2"),

package/toggle/index.d.ts

@@ -15,6 +15,7 @@ export declare type TSinchToggleReact = TSinchElementReact<TSinchToggleElement>
     labeled?: boolean;
     disabled?: boolean;
     text?: string;
+    'aria-label': string;
     onChange: (e: SyntheticEvent<TSinchToggleElement, CustomEvent<boolean>>) => void;
     onFocus?: (e: FocusEvent<TSinchToggleElement>) => void;
     onBlur?: (e: FocusEvent<TSinchToggleElement>) => void;

package/toggle/index.js

@@ -41,7 +41,7 @@ defineCustomElement('sinch-toggle', (_$input = new WeakMap(), _$label = new Weak
     });
 
     const shadowRoot = this.attachShadow({
-      mode: 'production' === 'development' ? 'open' : 'closed',
+      mode: 'closed',
       delegatesFocus: true
     });
     shadowRoot.appendChild(template.content.cloneNode(true));
@@ -49,14 +49,13 @@ defineCustomElement('sinch-toggle', (_$input = new WeakMap(), _$label = new Weak
     _classPrivateFieldSet(this, _$input, shadowRoot.querySelector('input'));
 
     _classPrivateFieldSet(this, _$label, shadowRoot.querySelector('label'));
-  }
 
-  connectedCallback() {
     _classPrivateFieldGet(this, _$input).addEventListener('input', _classPrivateFieldGet(this, _onInput));
   }
 
-  disconnectedCallback() {
-    _classPrivateFieldGet(this, _$input).removeEventListener('input', _classPrivateFieldGet(this, _onInput));
+  connectedCallback() {
+    this.setAttribute('role', 'checkbox');
+    this.setAttribute('aria-label', 'toggle');
   }
 
   static get observedAttributes() {

package/tooltip/index.d.ts

@@ -1,4 +1,4 @@
-import type { TSinchElementReact } from '../types';
+import type { TRect, TSinchElementReact } from '../types';
 declare const orientationValues: readonly ["top", "bottom", "left", "right", "top-left", "top-right", "bottom-left", "bottom-right"];
 export declare type TSinchTooltipOrientation = typeof orientationValues[number];
 export declare type TSinchTooltipElement = HTMLElement & {
@@ -6,6 +6,7 @@ export declare type TSinchTooltipElement = HTMLElement & {
     width: number | null;
     inverted: boolean;
     orientation: TSinchTooltipOrientation;
+    readonly tooltipRect: TRect;
 };
 export declare type TSinchTooltipReact = TSinchElementReact<TSinchTooltipElement> & {
     text: string;