@nectary/components 0.32.0 → 0.33.0

package/action-menu/index.js

@@ -1,7 +1,7 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$optionSlot, _$listbox, _$popover, _onListboxKeyDown, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _selectOption, _getOptionElements, _findSelectedOption, _getEnabledOptionElements, _onOpen, _onClose, _onReactClose;
+var _$optionSlot, _$listbox, _$popover, _onListboxKeyDown, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _selectOption, _getOptionElements, _findSelectedOption, _getEnabledOptionElements, _onClose, _onReactClose;
 
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 
@@ -14,16 +14,14 @@ function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(
 import { orientationValues } from '../popover/utils';
 import '../popover';
 import { attrValueToPixels, defineCustomElement, getBooleanAttribute, getIntegerAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateIntegerAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}sinch-popover{width:100%}</style><sinch-popover><slot name="target" slot="target"></slot><div id="listbox" slot="content"><slot name="option"></slot></div></sinch-popover>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{width:100%;--sinch-popover-shape-radius:var(--sinch-shape-radius-s)}#listbox{overflow-y:auto}</style><sinch-popover id="wrapper"><slot name="target" slot="target"></slot><div id="listbox" slot="content"><slot name="option"></slot></div></sinch-popover>';
 const ITEM_HEIGHT = 40;
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-action-menu', (_$optionSlot = new WeakMap(), _$listbox = new WeakMap(), _$popover = new WeakMap(), _onListboxKeyDown = new WeakMap(), _getFirstOption = new WeakSet(), _getLastOption = new WeakSet(), _getNextOption = new WeakSet(), _getPrevOption = new WeakSet(), _selectOption = new WeakSet(), _getOptionElements = new WeakSet(), _findSelectedOption = new WeakSet(), _getEnabledOptionElements = new WeakSet(), _onOpen = new WeakSet(), _onClose = new WeakMap(), _onReactClose = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-action-menu', (_$optionSlot = new WeakMap(), _$listbox = new WeakMap(), _$popover = new WeakMap(), _onListboxKeyDown = new WeakMap(), _getFirstOption = new WeakSet(), _getLastOption = new WeakSet(), _getNextOption = new WeakSet(), _getPrevOption = new WeakSet(), _selectOption = new WeakSet(), _getOptionElements = new WeakSet(), _findSelectedOption = new WeakSet(), _getEnabledOptionElements = new WeakSet(), _onClose = new WeakMap(), _onReactClose = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
-    _classPrivateMethodInitSpec(this, _onOpen);
-
     _classPrivateMethodInitSpec(this, _getEnabledOptionElements);
 
     _classPrivateMethodInitSpec(this, _findSelectedOption);
@@ -59,8 +57,19 @@ defineCustomElement('sinch-action-menu', (_$optionSlot = new WeakMap(), _$listbo
       writable: true,
       value: e => {
         switch (e.code) {
+          case 'Enter':
+            {
+              const $opt = _classPrivateMethodGet(this, _findSelectedOption, _findSelectedOption2).call(this, _classPrivateMethodGet(this, _getEnabledOptionElements, _getEnabledOptionElements2).call(this));
+
+              if ($opt !== null) {
+                e.preventDefault();
+                $opt.click();
+              }
+
+              break;
+            }
+
           case 'ArrowUp':
-          case 'ArrowLeft':
             {
               e.preventDefault();
 
@@ -70,7 +79,6 @@ defineCustomElement('sinch-action-menu', (_$optionSlot = new WeakMap(), _$listbo
             }
 
           case 'ArrowDown':
-          case 'ArrowRight':
             {
               e.preventDefault();
 
@@ -118,7 +126,7 @@ defineCustomElement('sinch-action-menu', (_$optionSlot = new WeakMap(), _$listbo
   }
 
   static get observedAttributes() {
-    return ['open', 'orientation', 'maxvisibleitems'];
+    return ['open', 'orientation', 'maxvisibleitems', 'modal'];
   }
 
   get nodeName() {
@@ -149,6 +157,14 @@ defineCustomElement('sinch-action-menu', (_$optionSlot = new WeakMap(), _$listbo
     return getBooleanAttribute(this, 'open');
   }
 
+  set modal(isModal) {
+    updateBooleanAttribute(this, 'modal', isModal);
+  }
+
+  get modal() {
+    return getBooleanAttribute(this, 'modal');
+  }
+
   get dropdownRect() {
     return _classPrivateFieldGet(this, _$popover).popoverRect;
   }
@@ -160,8 +176,6 @@ defineCustomElement('sinch-action-menu', (_$optionSlot = new WeakMap(), _$listbo
           updateAttribute(_classPrivateFieldGet(this, _$popover), 'open', newVal);
 
           if (isAttrTrue(newVal)) {
-            _classPrivateMethodGet(this, _onOpen, _onOpen2).call(this);
-
             _classPrivateFieldGet(this, _$popover).addEventListener('keydown', _classPrivateFieldGet(this, _onListboxKeyDown));
 
             _classPrivateFieldGet(this, _$popover).addEventListener('close', _classPrivateFieldGet(this, _onClose));
@@ -169,6 +183,8 @@ defineCustomElement('sinch-action-menu', (_$optionSlot = new WeakMap(), _$listbo
             _classPrivateFieldGet(this, _$popover).removeEventListener('keydown', _classPrivateFieldGet(this, _onListboxKeyDown));
 
             _classPrivateFieldGet(this, _$popover).removeEventListener('close', _classPrivateFieldGet(this, _onClose));
+
+            _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, null);
           }
 
           break;
@@ -193,6 +209,12 @@ defineCustomElement('sinch-action-menu', (_$optionSlot = new WeakMap(), _$listbo
 
           break;
         }
+
+      case 'modal':
+        {
+          updateBooleanAttribute(_classPrivateFieldGet(this, _$popover), 'modal', isAttrTrue(newVal));
+          break;
+        }
     }
   }
 
@@ -235,12 +257,16 @@ function _getPrevOption2() {
 }
 
 function _selectOption2($option) {
+  const hasMaxVisibleItems = this.hasAttribute('maxvisibleitems');
+
   for (const $op of _classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).call(this)) {
     const isSelected = $op === $option;
-    updateBooleanAttribute($op, 'selected', isSelected);
+    updateBooleanAttribute($op, 'data-selected', isSelected);
 
-    if (isSelected) {
-      $op.focus();
+    if (isSelected && hasMaxVisibleItems) {
+      $op.scrollIntoView?.({
+        block: 'nearest'
+      });
     }
   }
 }
@@ -257,7 +283,7 @@ function _getOptionElements2() {
 
 function _findSelectedOption2(elements) {
   for (const el of elements) {
-    if (getBooleanAttribute(el, 'selected')) {
+    if (getBooleanAttribute(el, 'data-selected')) {
       return el;
     }
   }
@@ -267,8 +293,4 @@ function _findSelectedOption2(elements) {
 
 function _getEnabledOptionElements2() {
   return _classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).call(this).filter(opt => opt.disabled !== true);
-}
-
-function _onOpen2() {
-  _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, _classPrivateMethodGet(this, _getFirstOption, _getFirstOption2).call(this));
 }

package/action-menu/types.d.ts

@@ -5,16 +5,19 @@ export declare type TSinchActionMenuElement = HTMLElement & {
     open: boolean;
     orientation: TSinchPopoverOrientation;
     maxVisibleItems: number | null;
+    modal: boolean;
     readonly dropdownRect: TRect;
     addEventListener(type: 'close', listener: (e: CustomEvent<void>) => void): void;
     setAttribute(name: 'open', value: ''): void;
     setAttribute(name: 'orientation', value: TSinchPopoverOrientation): void;
     setAttribute(name: 'maxvisibleitems', value: string): void;
+    setAttribute(name: 'modal', value: boolean): void;
 };
 export declare type TSinchActionMenuReact = TSinchElementReact<TSinchActionMenuElement> & {
     open: boolean;
     orientation?: TSinchPopoverOrientation;
     maxVisibleItems?: number;
+    modal?: boolean;
     'aria-label': string;
     onClose: (event: SyntheticEvent<TSinchActionMenuElement, CustomEvent<void>>) => void;
 };

package/action-menu-option/index.js

@@ -1,21 +1,21 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$button, _$content;
+var _$wrapper, _$content, _onMouseDown;
 
 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, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{all:initial;display:flex;position:relative;box-sizing:border-box;height:40px;width:100%;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;font:inherit;color:inherit;--sinch-size-icon:24px}#content{flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#wrapper:focus,:host(:hover)>#wrapper{background-color:var(--sinch-color-snow-500)}:host([disabled]:not([disabled=false]))>#wrapper{color:var(--sinch-color-stormy-100);cursor:initial;--sinch-color-icon:var(--sinch-color-stormy-100)}::slotted(*){margin-left:-6px}</style><button id="wrapper"><slot name="icon"></slot><span id="content"></span></button>';
+const templateHTML = '<style>:host{display:block}#wrapper{all:initial;display:flex;position:relative;box-sizing:border-box;height:40px;width:100%;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;font:inherit;color:inherit;--sinch-size-icon:24px}#content{flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:hover)>#wrapper,:host([data-selected])>#wrapper{background-color:var(--sinch-color-snow-500)}:host([disabled]:not([disabled=false]))>#wrapper{color:var(--sinch-color-stormy-100);cursor:initial;pointer-events:none;--sinch-color-icon:var(--sinch-color-stormy-100)}::slotted(*){margin-left:-6px}</style><div id="wrapper"><slot name="icon"></slot><span id="content"></span></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-action-menu-option', (_$button = new WeakMap(), _$content = new WeakMap(), class ActionMenuOption extends NectaryElement {
+defineCustomElement('sinch-action-menu-option', (_$wrapper = new WeakMap(), _$content = new WeakMap(), _onMouseDown = new WeakMap(), class ActionMenuOption extends NectaryElement {
   constructor() {
     super();
 
-    _classPrivateFieldInitSpec(this, _$button, {
+    _classPrivateFieldInitSpec(this, _$wrapper, {
       writable: true,
       value: void 0
     });
@@ -25,16 +25,31 @@ defineCustomElement('sinch-action-menu-option', (_$button = new WeakMap(), _$con
       value: void 0
     });
 
+    _classPrivateFieldInitSpec(this, _onMouseDown, {
+      writable: true,
+      value: e => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.click();
+      }
+    });
+
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
 
-    _classPrivateFieldSet(this, _$button, shadowRoot.querySelector('#wrapper'));
+    _classPrivateFieldSet(this, _$wrapper, shadowRoot.querySelector('#wrapper'));
 
     _classPrivateFieldSet(this, _$content, shadowRoot.querySelector('#content'));
   }
 
   connectedCallback() {
     this.setAttribute('role', 'option');
+
+    _classPrivateFieldGet(this, _$wrapper).addEventListener('mousedown', _classPrivateFieldGet(this, _onMouseDown));
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$wrapper).removeEventListener('mousedown', _classPrivateFieldGet(this, _onMouseDown));
   }
 
   static get observedAttributes() {
@@ -55,7 +70,8 @@ defineCustomElement('sinch-action-menu-option', (_$button = new WeakMap(), _$con
 
       case 'disabled':
         {
-          _classPrivateFieldGet(this, _$button).disabled = isAttrTrue(newVal);
+          updateBooleanAttribute(this, 'disabled', isAttrTrue(newVal));
+          break;
         }
     }
   }
@@ -76,12 +92,4 @@ defineCustomElement('sinch-action-menu-option', (_$button = new WeakMap(), _$con
     return getBooleanAttribute(this, 'disabled');
   }
 
-  focus() {
-    _classPrivateFieldGet(this, _$button).focus();
-  }
-
-  blur() {
-    _classPrivateFieldGet(this, _$button).blur();
-  }
-
 }));

package/dialog/index.js

@@ -14,7 +14,7 @@ function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(
 import dialogPolyfill from 'dialog-polyfill';
 import '../icon-button';
 import '../icons/close';
-import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute, getReactEventHandler, NectaryElement } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute, getReactEventHandler, NectaryElement, updateBooleanAttribute } from '../utils';
 const templateHTML = '<style>dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px;max-width:var(--sinch-dialog-max-width,512px);max-height:unset;border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;contain:content;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);border:none;box-shadow:var(--sinch-elevation-level-3)}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.55}dialog::backdrop{background-color:#000;opacity:.55}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}#header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;margin-bottom:16px}#caption{font:var(--sinch-font-title-m);color:var(--sinch-color-text-default);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}#content-wrapper{min-height:0;overflow:auto;max-height:var(--sinch-dialog-max-height,50vh)}#buttons{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:24px}sinch-icon-button{transform:translate(4px,-4px)}</style><dialog><div id="header"><span id="caption"></span><sinch-icon-button id="close" small tabindex="0"><sinch-icon-close slot="icon"></sinch-icon-close></sinch-icon-button></div><div id="content-wrapper"><slot name="content"></slot></div><div id="buttons"><slot name="buttons"></slot></div></dialog>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -106,8 +106,38 @@ defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = n
     dialogPolyfill.registerDialog(_classPrivateFieldGet(this, _$dialog));
   }
 
+  connectedCallback() {
+    this.setAttribute('role', 'dialog');
+
+    _classPrivateFieldGet(this, _$closeButton).addEventListener('click', _classPrivateFieldGet(this, _onCloseClick));
+
+    _classPrivateFieldGet(this, _$dialog).addEventListener('mousedown', _classPrivateFieldGet(this, _onBackdropClick));
+
+    _classPrivateFieldGet(this, _$dialog).addEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
+
+    this.addEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
+
+    _classPrivateFieldSet(this, _isConnected, true);
+
+    _classPrivateMethodGet(this, _setOpen, _setOpen2).call(this, getBooleanAttribute(this, 'open'));
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$closeButton).removeEventListener('click', _classPrivateFieldGet(this, _onCloseClick));
+
+    _classPrivateFieldGet(this, _$dialog).removeEventListener('mousedown', _classPrivateFieldGet(this, _onBackdropClick));
+
+    _classPrivateFieldGet(this, _$dialog).removeEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
+
+    this.removeEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
+
+    _classPrivateMethodGet(this, _setOpen, _setOpen2).call(this, false);
+
+    _classPrivateFieldSet(this, _isConnected, false);
+  }
+
   static get observedAttributes() {
-    return ['caption', 'open'];
+    return ['caption', 'open', 'close-aria-label'];
   }
 
   attributeChangedCallback(name, _, newVal) {
@@ -120,10 +150,17 @@ defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = n
 
       case 'open':
         {
-          if (_classPrivateFieldGet(this, _isConnected)) {
-            _classPrivateMethodGet(this, _setOpen, _setOpen2).call(this, isAttrTrue(newVal));
-          }
+          const shouldOpen = isAttrTrue(newVal);
+
+          _classPrivateMethodGet(this, _setOpen, _setOpen2).call(this, shouldOpen);
 
+          updateBooleanAttribute(this, 'open', shouldOpen);
+          break;
+        }
+
+      case 'close-aria-label':
+        {
+          updateAttribute(_classPrivateFieldGet(this, _$closeButton), 'aria-label', newVal);
           break;
         }
     }
@@ -137,36 +174,6 @@ defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = n
     return getAttribute(this, 'caption', '');
   }
 
-  connectedCallback() {
-    this.setAttribute('role', 'dialog');
-
-    _classPrivateFieldGet(this, _$closeButton).addEventListener('click', _classPrivateFieldGet(this, _onCloseClick));
-
-    this.addEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
-
-    _classPrivateFieldGet(this, _$dialog).addEventListener('mousedown', _classPrivateFieldGet(this, _onBackdropClick));
-
-    _classPrivateFieldGet(this, _$dialog).addEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
-
-    _classPrivateFieldSet(this, _isConnected, true);
-
-    if (getBooleanAttribute(this, 'open')) {
-      _classPrivateMethodGet(this, _setOpen, _setOpen2).call(this, true);
-    }
-  }
-
-  disconnectedCallback() {
-    _classPrivateFieldGet(this, _$closeButton).removeEventListener('click', _classPrivateFieldGet(this, _onCloseClick));
-
-    this.removeEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
-
-    _classPrivateFieldGet(this, _$dialog).removeEventListener('mousedown', _classPrivateFieldGet(this, _onBackdropClick));
-
-    _classPrivateFieldGet(this, _$dialog).removeEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
-
-    _classPrivateFieldSet(this, _isConnected, false);
-  }
-
   get dialogRect() {
     return getRect(_classPrivateFieldGet(this, _$dialog));
   }
@@ -183,14 +190,14 @@ function _dispatchCloseEvent2() {
   }));
 }
 
-function _setOpen2(isOpen) {
-  if (isOpen) {
-    if (!getBooleanAttribute(_classPrivateFieldGet(this, _$dialog), 'open')) {
-      _classPrivateFieldGet(this, _$dialog).showModal();
-
+function _setOpen2(shouldOpen) {
+  if (shouldOpen) {
+    if (_classPrivateFieldGet(this, _isConnected) && !getBooleanAttribute(_classPrivateFieldGet(this, _$dialog), 'open')) {
       _classPrivateFieldSet(this, _prevOverflowValue, document.body.style.overflow);
 
       document.body.style.overflow = 'hidden';
+
+      _classPrivateFieldGet(this, _$dialog).showModal();
     }
   } else {
     _classPrivateFieldGet(this, _$dialog).close?.();

package/dialog/types.d.ts

@@ -6,10 +6,12 @@ export declare type TSinchDialogElement = HTMLElement & {
     readonly closeButtonRect: TRect;
     addEventListener(type: 'close', listener: (e: CustomEvent<void>) => void): void;
     setAttribute(name: 'caption', value: string): void;
+    setAttribute(name: 'close-aria-label', value: string): void;
 };
 export declare type TSinchDialogReact = TSinchElementReact<TSinchDialogElement> & {
     open: boolean;
     caption: string;
     'aria-label': string;
+    'close-aria-label': string;
     onClose: (event: SyntheticEvent<TSinchDialogElement, CustomEvent<void>>) => void;
 };

package/dropdown/index.js

@@ -14,7 +14,7 @@ function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(
 import { orientationValues } from '../popover/utils';
 import '../popover';
 import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, getCsvSet, getFirstCsvValue, getIntegerAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateIntegerAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}sinch-popover{width:100%}</style><sinch-popover><slot name="target" slot="target"></slot><div id="listbox" slot="content"><slot name="option"></slot></div></sinch-popover>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{width:100%;--sinch-popover-shape-radius:var(--sinch-shape-radius-s)}#listbox{overflow-y:auto}</style><sinch-popover id="wrapper" modal><slot name="target" slot="target"></slot><div id="listbox" slot="content"><slot name="option"></slot></div></sinch-popover>';
 const ITEM_HEIGHT = 40;
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -81,9 +81,13 @@ defineCustomElement('sinch-dropdown', (_$optionSlot = new WeakMap(), _$listbox =
           case 'Space':
           case 'Enter':
             {
-              e.preventDefault();
+              const $option = _classPrivateMethodGet(this, _findSelectedOption, _findSelectedOption2).call(this, _classPrivateMethodGet(this, _getEnabledOptionElements, _getEnabledOptionElements2).call(this));
+
+              if ($option !== null) {
+                e.preventDefault();
 
-              _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, _classPrivateMethodGet(this, _findSelectedOption, _findSelectedOption2).call(this, _classPrivateMethodGet(this, _getEnabledOptionElements, _getEnabledOptionElements2).call(this)));
+                _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, $option);
+              }
 
               break;
             }
@@ -323,11 +327,13 @@ function _getPrevOption2() {
 }
 
 function _selectOption2($option) {
+  const hasMaxVisibleItems = this.hasAttribute('maxvisibleitems');
+
   for (const $op of _classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).call(this)) {
     const isSelected = $op === $option;
     updateBooleanAttribute($op, 'data-selected', isSelected);
 
-    if (isSelected && this.maxVisibleItems !== null) {
+    if (isSelected && hasMaxVisibleItems) {
       $op.scrollIntoView?.({
         block: 'nearest'
       });
@@ -389,13 +395,5 @@ function _dispatchChangeEvent2($opt) {
 function _onOpen2() {
   const $opt = _classPrivateMethodGet(this, _getOptionWithValue, _getOptionWithValue2).call(this, getFirstCsvValue(this.value));
 
-  if ($opt !== null) {
-    _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, $opt);
-
-    $opt.scrollIntoView?.({
-      block: 'nearest'
-    });
-  } else {
-    _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, _classPrivateMethodGet(this, _getFirstOption, _getFirstOption2).call(this));
-  }
+  _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, $opt ?? _classPrivateMethodGet(this, _getFirstOption, _getFirstOption2).call(this));
 }

package/input/index.js

@@ -1,18 +1,18 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$input, _$label, _$optionalText, _$additionalText, _$invalidText, _selectionStart, _selectionEnd, _isPendingDk, _onCompositionStart, _onInput;
+var _$input, _$label, _$optionalText, _$additionalText, _$invalidText, _$iconSlot, _$iconWrapper, _$rightSlot, _$rightWrapper, _cursorPos, _isPendingDk, _onCompositionStart, _onSelectionChange, _onInput, _onIconSlotChange, _onRightSlotChange, _onEventFilter;
 
 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, getLiteralAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute } 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-wrapper{display:flex;flex-direction:row;align-items:center;gap:4px;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:var(--sinch-shape-radius-s);width:100%;height:48px;margin:2px 0;padding:0 8px;background-color:var(--sinch-color-snow-100)}#input{all:initial;flex:1;min-width:0;height:48px;padding:0 4px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto)}#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)}#input[type=password]{font-size:1.5em;letter-spacing:.1em}:host([invalidtext]:not([invalidtext=""]):not([disabled])) #input-wrapper{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-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)}#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><div id="input-wrapper"><input id="input" type="text"/><slot name="right"></slot></div><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute } 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-wrapper{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;border-radius:var(--sinch-shape-radius-s);width:100%;height:48px;background-color:var(--sinch-color-snow-100)}#input{all:initial;flex:1;min-width:0;height:48px;padding:0 12px 0 44px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto)}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#border{position:absolute;border:1px solid var(--sinch-color-stormy-200);border-radius:var(--sinch-shape-radius-s);left:0;right:0;top:0;bottom:0;pointer-events:none}:host([invalidtext]:not([invalidtext=""]):not([disabled])) #border{border-color:var(--sinch-color-text-invalid)}#input:disabled{color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:disabled+#border{border-color:var(--sinch-color-snow-500)}#input:focus+#border{border-color:var(--sinch-color-stormy-600)}#input[type=password]{font-size:1.5em;letter-spacing:.1em}#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}#icon{position:absolute;left:12px;top:12px;pointer-events:none;--sinch-icon-size:24px}#icon.empty{display:none}#icon.empty~#input{padding-left:12px}#right{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;padding-right:8px}#right.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><div id="input-wrapper"><div id="icon"><slot name="icon"></slot></div><input id="input" type="text"/><div id="border"></div><div id="right"><slot name="right"></slot></div></div><div id="bottom"><div id="invalid"></div><div id="additional"></div></div></div>';
 import { inputTypes } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _selectionStart = new WeakMap(), _selectionEnd = new WeakMap(), _isPendingDk = new WeakMap(), _onCompositionStart = new WeakMap(), _onInput = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _$iconSlot = new WeakMap(), _$iconWrapper = new WeakMap(), _$rightSlot = new WeakMap(), _$rightWrapper = new WeakMap(), _cursorPos = new WeakMap(), _isPendingDk = new WeakMap(), _onCompositionStart = new WeakMap(), _onSelectionChange = new WeakMap(), _onInput = new WeakMap(), _onIconSlotChange = new WeakMap(), _onRightSlotChange = new WeakMap(), _onEventFilter = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -41,12 +41,27 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
       value: void 0
     });
 
-    _classPrivateFieldInitSpec(this, _selectionStart, {
+    _classPrivateFieldInitSpec(this, _$iconSlot, {
       writable: true,
-      value: null
+      value: void 0
     });
 
-    _classPrivateFieldInitSpec(this, _selectionEnd, {
+    _classPrivateFieldInitSpec(this, _$iconWrapper, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$rightSlot, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$rightWrapper, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _cursorPos, {
       writable: true,
       value: null
     });
@@ -63,6 +78,13 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
       }
     });
 
+    _classPrivateFieldInitSpec(this, _onSelectionChange, {
+      writable: true,
+      value: () => {
+        _classPrivateFieldSet(this, _cursorPos, _classPrivateFieldGet(this, _$input).selectionEnd);
+      }
+    });
+
     _classPrivateFieldInitSpec(this, _onInput, {
       writable: true,
       value: e => {
@@ -73,29 +95,23 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
         const prevValue = this.value;
 
         if (prevValue !== nextValue) {
-          const nextSelectionStart = _classPrivateFieldGet(this, _$input).selectionStart;
-
-          const nextSelectionEnd = _classPrivateFieldGet(this, _$input).selectionEnd;
-
-          const prevSelectionStart = _classPrivateFieldGet(this, _selectionStart);
-
-          const prevSelectionEnd = _classPrivateFieldGet(this, _selectionEnd);
-
-          const isPrevCursorEnd = prevSelectionStart === prevSelectionEnd && prevSelectionStart === prevValue.length;
+          const nextCursorPos = _classPrivateFieldGet(this, _$input).selectionEnd;
 
           if (!_classPrivateFieldGet(this, _isPendingDk)) {
             _classPrivateFieldGet(this, _$input).value = prevValue;
-          }
 
-          _classPrivateFieldSet(this, _isPendingDk, false);
+            const prevCursorPos = _classPrivateFieldGet(this, _cursorPos);
+
+            const isPrevCursorEnd = prevCursorPos === null || prevCursorPos === prevValue.length;
 
-          if (!isPrevCursorEnd) {
-            _classPrivateFieldGet(this, _$input).setSelectionRange(prevSelectionStart, prevSelectionEnd);
+            if (!isPrevCursorEnd) {
+              _classPrivateFieldGet(this, _$input).setSelectionRange(prevCursorPos, prevCursorPos);
+            }
           }
 
-          _classPrivateFieldSet(this, _selectionStart, nextSelectionStart);
+          _classPrivateFieldSet(this, _isPendingDk, false);
 
-          _classPrivateFieldSet(this, _selectionEnd, nextSelectionEnd);
+          _classPrivateFieldSet(this, _cursorPos, nextCursorPos);
 
           this.dispatchEvent(new CustomEvent('change', {
             detail: nextValue,
@@ -105,6 +121,27 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
       }
     });
 
+    _classPrivateFieldInitSpec(this, _onIconSlotChange, {
+      writable: true,
+      value: () => {
+        setClass(_classPrivateFieldGet(this, _$iconWrapper), 'empty', _classPrivateFieldGet(this, _$iconSlot).assignedElements().length === 0);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onRightSlotChange, {
+      writable: true,
+      value: () => {
+        setClass(_classPrivateFieldGet(this, _$rightWrapper), 'empty', _classPrivateFieldGet(this, _$rightSlot).assignedElements().length === 0);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onEventFilter, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+      }
+    });
+
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
 
@@ -117,6 +154,14 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
     _classPrivateFieldSet(this, _$additionalText, shadowRoot.querySelector('#additional'));
 
     _classPrivateFieldSet(this, _$invalidText, shadowRoot.querySelector('#invalid'));
+
+    _classPrivateFieldSet(this, _$iconSlot, shadowRoot.querySelector('slot[name="icon"]'));
+
+    _classPrivateFieldSet(this, _$iconWrapper, shadowRoot.querySelector('#icon'));
+
+    _classPrivateFieldSet(this, _$rightSlot, shadowRoot.querySelector('slot[name="right"]'));
+
+    _classPrivateFieldSet(this, _$rightWrapper, shadowRoot.querySelector('#right'));
   }
 
   connectedCallback() {
@@ -125,12 +170,48 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
     _classPrivateFieldGet(this, _$input).addEventListener('input', _classPrivateFieldGet(this, _onInput));
 
     _classPrivateFieldGet(this, _$input).addEventListener('compositionstart', _classPrivateFieldGet(this, _onCompositionStart));
+
+    _classPrivateFieldGet(this, _$input).addEventListener('mousedown', _classPrivateFieldGet(this, _onSelectionChange));
+
+    _classPrivateFieldGet(this, _$input).addEventListener('keydown', _classPrivateFieldGet(this, _onSelectionChange));
+
+    _classPrivateFieldGet(this, _$iconSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onIconSlotChange));
+
+    _classPrivateFieldGet(this, _$rightSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onRightSlotChange));
+
+    _classPrivateFieldGet(this, _$rightSlot).addEventListener('input', _classPrivateFieldGet(this, _onEventFilter));
+
+    _classPrivateFieldGet(this, _$rightSlot).addEventListener('change', _classPrivateFieldGet(this, _onEventFilter));
+
+    _classPrivateFieldGet(this, _$rightSlot).addEventListener('focusin', _classPrivateFieldGet(this, _onEventFilter));
+
+    _classPrivateFieldGet(this, _$rightSlot).addEventListener('focusout', _classPrivateFieldGet(this, _onEventFilter));
+
+    _classPrivateFieldGet(this, _onIconSlotChange).call(this);
+
+    _classPrivateFieldGet(this, _onRightSlotChange).call(this);
   }
 
   disconnectedCallback() {
     _classPrivateFieldGet(this, _$input).removeEventListener('input', _classPrivateFieldGet(this, _onInput));
 
     _classPrivateFieldGet(this, _$input).removeEventListener('compositionstart', _classPrivateFieldGet(this, _onCompositionStart));
+
+    _classPrivateFieldGet(this, _$input).removeEventListener('mousedown', _classPrivateFieldGet(this, _onSelectionChange));
+
+    _classPrivateFieldGet(this, _$input).removeEventListener('keydown', _classPrivateFieldGet(this, _onSelectionChange));
+
+    _classPrivateFieldGet(this, _$iconSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onIconSlotChange));
+
+    _classPrivateFieldGet(this, _$rightSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onRightSlotChange));
+
+    _classPrivateFieldGet(this, _$rightSlot).removeEventListener('input', _classPrivateFieldGet(this, _onEventFilter));
+
+    _classPrivateFieldGet(this, _$rightSlot).removeEventListener('change', _classPrivateFieldGet(this, _onEventFilter));
+
+    _classPrivateFieldGet(this, _$rightSlot).removeEventListener('focusin', _classPrivateFieldGet(this, _onEventFilter));
+
+    _classPrivateFieldGet(this, _$rightSlot).removeEventListener('focusout', _classPrivateFieldGet(this, _onEventFilter));
   }
 
   static get observedAttributes() {
@@ -241,12 +322,16 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
         {
           const nextVal = newVal ?? '';
 
-          if (nextVal !== _classPrivateFieldGet(this, _$input).value) {
+          const prevVal = _classPrivateFieldGet(this, _$input).value;
+
+          if (nextVal !== prevVal) {
+            const prevCursorPos = _classPrivateFieldGet(this, _$input).selectionEnd;
+
+            const isPrevCursorEnd = prevCursorPos === prevVal.length;
             _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));
+            if (!isPrevCursorEnd) {
+              _classPrivateFieldGet(this, _$input).setSelectionRange(_classPrivateFieldGet(this, _cursorPos), _classPrivateFieldGet(this, _cursorPos));
             }
           }
 

package/package.json

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

package/popover/index.js

@@ -1,7 +1,7 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$target, _$dialog, _isConnected, _resizeThrottle, _prevOverflowValue, _onExpand, _onCollapse, _isOpen, _onResize, _updateOrientation, _onBackdropClick, _onCancel, _onCloseReactHandler, _dispatchCloseEvent;
+var _$target, _$dialog, _isConnected, _resizeThrottle, _prevOverflowValue, _onExpand, _onCollapse, _isOpen, _onResize, _updateOrientation, _updateOrientationModal, _onBackdropClick, _onCancel, _onCloseReactHandler, _onTargetKeydown, _dispatchCloseEvent;
 
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 
@@ -12,13 +12,13 @@ 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 dialogPolyfill from 'dialog-polyfill';
-import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute, NectaryElement, getCssVar, throttleAnimationFrame } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative}dialog{position:fixed;top:0;left:0;margin:0;outline:0;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:var(--sinch-elevation-level-2);border:1px solid var(--sinch-color-snow-500);border-radius:var(--sinch-shape-radius-s);contain:content;padding:0;box-sizing:border-box;max-width:unset;max-height:unset}dialog:not([open]){display:none}dialog::backdrop{background-color:transparent}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:transparent}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}#target{display:flex;flex-direction:column}</style><div id="wrapper"><div id="target" aria-haspopup="dialog" aria-expanded="false"><slot name="target"></slot></div><dialog id="dialog" tabindex="-1"><slot name="content"></slot></dialog></div>';
+import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute, NectaryElement, throttleAnimationFrame } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative}dialog{position:fixed;top:0;left:0;margin:0;outline:0;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:var(--sinch-elevation-level-2);border:1px solid var(--sinch-color-snow-500);border-radius:var(--sinch-popover-shape-radius,var(--sinch-shape-radius-l));contain:content;padding:0;box-sizing:border-box;max-width:unset;max-height:unset;z-index:1}dialog:not([open]){display:none}dialog::backdrop{background-color:transparent}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:transparent}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}#target{display:flex;flex-direction:column}</style><div id="wrapper"><div id="target" aria-haspopup="dialog" aria-expanded="false"><slot name="target"></slot></div><dialog id="dialog" tabindex="-1"><slot name="content"></slot></dialog></div>';
 import { orientationValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 const POPOVER_OFFSET = 4;
-defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new WeakMap(), _isConnected = new WeakMap(), _resizeThrottle = new WeakMap(), _prevOverflowValue = new WeakMap(), _onExpand = new WeakSet(), _onCollapse = new WeakSet(), _isOpen = new WeakSet(), _onResize = new WeakMap(), _updateOrientation = new WeakMap(), _onBackdropClick = new WeakMap(), _onCancel = new WeakMap(), _onCloseReactHandler = new WeakMap(), _dispatchCloseEvent = new WeakSet(), class extends NectaryElement {
+defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new WeakMap(), _isConnected = new WeakMap(), _resizeThrottle = new WeakMap(), _prevOverflowValue = new WeakMap(), _onExpand = new WeakSet(), _onCollapse = new WeakSet(), _isOpen = new WeakSet(), _onResize = new WeakMap(), _updateOrientation = new WeakMap(), _updateOrientationModal = new WeakMap(), _onBackdropClick = new WeakMap(), _onCancel = new WeakMap(), _onCloseReactHandler = new WeakMap(), _onTargetKeydown = new WeakMap(), _dispatchCloseEvent = new WeakSet(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -65,7 +65,7 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
     _classPrivateFieldInitSpec(this, _updateOrientation, {
       writable: true,
       value: () => {
-        _classPrivateFieldGet(this, _$dialog).style.width = 'fit-content';
+        _classPrivateFieldGet(this, _$dialog).style.width = 'max-content';
 
         const targetRect = _classPrivateFieldGet(this, _$target).getBoundingClientRect();
 
@@ -74,11 +74,43 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
         let leftPos = 0;
         let topPos = 0;
         const orient = this.orientation;
-        const shouldExpandWidthToTarget = getCssVar(this, '--sinch-popover-expand-width') !== null;
-        const largestWidth = Math.max(modalRect.width, targetRect.width);
-        const resultWidth = shouldExpandWidthToTarget ? largestWidth : modalRect.width;
+        const shouldExpandWidthToTarget = orient === 'top' || orient === 'bottom';
+        const resultWidth = shouldExpandWidthToTarget ? Math.max(modalRect.width, targetRect.width) : modalRect.width;
 
-        if (orient === 'bottom-right' || orient === 'top-right') {
+        if (orient === 'bottom-left' || orient === 'top-left') {
+          leftPos = targetRect.width - resultWidth;
+        }
+
+        if (orient === 'bottom-left' || orient === 'bottom-right' || orient === 'bottom') {
+          topPos = targetRect.height + POPOVER_OFFSET;
+        }
+
+        if (orient === 'top-left' || orient === 'top-right' || orient === 'top') {
+          topPos = -(modalRect.height + POPOVER_OFFSET);
+        }
+
+        _classPrivateFieldGet(this, _$dialog).style.left = `${leftPos}px`;
+        _classPrivateFieldGet(this, _$dialog).style.top = `${topPos}px`;
+        _classPrivateFieldGet(this, _$dialog).style.width = `${resultWidth}px`;
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _updateOrientationModal, {
+      writable: true,
+      value: () => {
+        _classPrivateFieldGet(this, _$dialog).style.width = 'max-content';
+
+        const targetRect = _classPrivateFieldGet(this, _$target).getBoundingClientRect();
+
+        const modalRect = _classPrivateFieldGet(this, _$dialog).getBoundingClientRect();
+
+        let leftPos = 0;
+        let topPos = 0;
+        const orient = this.orientation;
+        const shouldExpandWidthToTarget = orient === 'top' || orient === 'bottom';
+        const resultWidth = shouldExpandWidthToTarget ? Math.max(modalRect.width, targetRect.width) : modalRect.width;
+
+        if (orient === 'bottom-right' || orient === 'top-right' || orient === 'top' || orient === 'bottom') {
           leftPos = Math.max(POPOVER_OFFSET, Math.min(targetRect.x, window.innerWidth - resultWidth - POPOVER_OFFSET));
         }
 
@@ -86,11 +118,11 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
           leftPos = Math.max(POPOVER_OFFSET, targetRect.right - resultWidth);
         }
 
-        if (orient === 'bottom-left' || orient === 'bottom-right') {
+        if (orient === 'bottom-left' || orient === 'bottom-right' || orient === 'bottom') {
           topPos = Math.max(POPOVER_OFFSET, Math.min(targetRect.bottom + POPOVER_OFFSET, window.innerHeight - modalRect.height - POPOVER_OFFSET));
         }
 
-        if (orient === 'top-left' || orient === 'top-right') {
+        if (orient === 'top-left' || orient === 'top-right' || orient === 'top') {
           topPos = Math.max(POPOVER_OFFSET, targetRect.top - POPOVER_OFFSET - modalRect.height);
         }
 
@@ -134,6 +166,22 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
       }
     });
 
+    _classPrivateFieldInitSpec(this, _onTargetKeydown, {
+      writable: true,
+      value: e => {
+        switch (e.key) {
+          case 'Escape':
+            {
+              e.preventDefault();
+
+              _classPrivateMethodGet(this, _dispatchCloseEvent, _dispatchCloseEvent2).call(this);
+
+              break;
+            }
+        }
+      }
+    });
+
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
 
@@ -143,7 +191,7 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
 
     _classPrivateFieldSet(this, _isConnected, false);
 
-    _classPrivateFieldSet(this, _resizeThrottle, throttleAnimationFrame(_classPrivateFieldGet(this, _updateOrientation)));
+    _classPrivateFieldSet(this, _resizeThrottle, throttleAnimationFrame(_classPrivateFieldGet(this, _updateOrientationModal)));
 
     dialogPolyfill.registerDialog(_classPrivateFieldGet(this, _$dialog));
   }
@@ -173,11 +221,21 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
 
     this.removeEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
 
+    _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
+
     _classPrivateFieldSet(this, _isConnected, false);
   }
 
   static get observedAttributes() {
-    return ['open', 'orientation'];
+    return ['modal', 'orientation', 'open'];
+  }
+
+  set modal(isModal) {
+    updateBooleanAttribute(this, 'modal', isModal);
+  }
+
+  get modal() {
+    return getBooleanAttribute(this, 'modal');
   }
 
   set open(isOpen) {
@@ -189,7 +247,7 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
   }
 
   get orientation() {
-    return getLiteralAttribute(this, orientationValues, 'orientation', 'bottom-right');
+    return getLiteralAttribute(this, orientationValues, 'orientation', 'bottom');
   }
 
   set orientation(value) {
@@ -201,48 +259,77 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
   }
 
   attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+
     switch (name) {
       case 'open':
         {
-          if (_classPrivateFieldGet(this, _isConnected)) {
-            if (isAttrTrue(newVal)) {
-              _classPrivateMethodGet(this, _onExpand, _onExpand2).call(this);
-            } else {
-              _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
-            }
+          if (isAttrTrue(newVal)) {
+            _classPrivateMethodGet(this, _onExpand, _onExpand2).call(this);
+          } else {
+            _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
           }
 
+          updateBooleanAttribute(this, 'open', isAttrTrue(newVal));
           break;
         }
 
       case 'orientation':
         {
           if (_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
-            _classPrivateFieldGet(this, _updateOrientation).call(this);
+            if (this.modal) {
+              _classPrivateFieldGet(this, _updateOrientationModal).call(this);
+            } else {
+              _classPrivateFieldGet(this, _updateOrientation).call(this);
+            }
           }
 
           break;
         }
+
+      case 'modal':
+        {
+          if (_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
+            _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
+
+            _classPrivateMethodGet(this, _onExpand, _onExpand2).call(this);
+          }
+        }
     }
   }
 
 }));
 
 function _onExpand2() {
-  if (_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
+  if (!_classPrivateFieldGet(this, _isConnected) || _classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
     return;
   }
 
-  _classPrivateFieldGet(this, _$target).setAttribute('aria-expanded', 'true');
+  if (this.modal) {
+    _classPrivateFieldGet(this, _$dialog).style.position = 'fixed';
+
+    _classPrivateFieldGet(this, _$dialog).showModal();
+
+    _classPrivateFieldGet(this, _updateOrientationModal).call(this);
+
+    _classPrivateFieldGet(this, _$target).setAttribute('aria-expanded', 'true');
 
-  _classPrivateFieldGet(this, _$dialog).showModal();
+    _classPrivateFieldSet(this, _prevOverflowValue, document.body.style.overflow);
 
-  _classPrivateFieldGet(this, _updateOrientation).call(this);
+    document.body.style.overflow = 'hidden';
+    window.addEventListener('resize', _classPrivateFieldGet(this, _onResize));
+  } else {
+    this.addEventListener('keydown', _classPrivateFieldGet(this, _onTargetKeydown));
+    _classPrivateFieldGet(this, _$dialog).style.position = 'absolute';
 
-  _classPrivateFieldSet(this, _prevOverflowValue, document.body.style.overflow);
+    _classPrivateFieldGet(this, _$dialog).setAttribute('open', '');
 
-  document.body.style.overflow = 'hidden';
-  window.addEventListener('resize', _classPrivateFieldGet(this, _onResize));
+    _classPrivateFieldGet(this, _updateOrientation).call(this);
+
+    _classPrivateFieldGet(this, _$target).setAttribute('aria-expanded', 'true');
+  }
 }
 
 function _onCollapse2() {
@@ -250,17 +337,24 @@ function _onCollapse2() {
     return;
   }
 
+  if (this.modal) {
+    _classPrivateFieldGet(this, _$dialog).close?.();
+  } else {
+    _classPrivateFieldGet(this, _$dialog).removeAttribute('open');
+  }
+
   _classPrivateFieldGet(this, _$target).setAttribute('aria-expanded', 'false');
 
-  _classPrivateFieldGet(this, _$dialog).close?.();
   document.body.style.overflow = _classPrivateFieldGet(this, _prevOverflowValue);
-  window.removeEventListener('resize', _classPrivateFieldGet(this, _onResize));
 
   _classPrivateFieldGet(this, _resizeThrottle).cancel();
+
+  window.removeEventListener('resize', _classPrivateFieldGet(this, _onResize));
+  this.removeEventListener('keydown', _classPrivateFieldGet(this, _onTargetKeydown));
 }
 
 function _isOpen2() {
-  return _classPrivateFieldGet(this, _isConnected) && getBooleanAttribute(_classPrivateFieldGet(this, _$dialog), 'open');
+  return getBooleanAttribute(_classPrivateFieldGet(this, _$dialog), 'open');
 }
 
 function _dispatchCloseEvent2() {

package/popover/types.d.ts

@@ -1,17 +1,32 @@
 import type { TRect, TSinchElementReact } from '../types';
 import type { SyntheticEvent } from 'react';
-export declare type TSinchPopoverOrientation = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export declare type TSinchPopoverOrientation = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'bottom' | 'top';
 export declare type TSinchPopoverElement = HTMLElement & {
+    /** Open/close state */
     open: boolean;
+    /** Orientation, where it *points to* from origin */
     orientation: TSinchPopoverOrientation;
+    /** Modal/non-modal mode */
+    modal: boolean;
     readonly popoverRect: TRect;
+    /** Close event */
     addEventListener(type: 'close', listener: (e: CustomEvent<void>) => void): void;
+    /** Open/close state */
     setAttribute(name: 'open', value: ''): void;
+    /** Orientation, where it *points to* from origin */
     setAttribute(name: 'orientation', value: TSinchPopoverOrientation): void;
+    /** Modal/non-modal mode */
+    setAttribute(name: 'modal', value: boolean): void;
 };
 export declare type TSinchPopoverReact = TSinchElementReact<TSinchPopoverElement> & {
+    /** Open/close state */
     open: boolean;
+    /** Orientation, where it *points to* from origin */
     orientation?: TSinchPopoverOrientation;
+    /** Modal/non-modal mode */
+    modal?: boolean;
+    /** Label that is used for a11y */
     'aria-label': string;
-    onClose: (event: SyntheticEvent<TSinchPopoverElement, CustomEvent<void>>) => void;
+    /** Close event handler */
+    onClose?: (event: SyntheticEvent<TSinchPopoverElement, CustomEvent<void>>) => void;
 };

package/popover/utils.js

@@ -1 +1 @@
-export const orientationValues = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
+export const orientationValues = ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'bottom', 'top'];

package/select/index.js

@@ -13,7 +13,7 @@ function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(
 
 import '../dropdown';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, 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-popover-expand-width:1}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;margin:2px 0;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}#bottom{height:20px}#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)}#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="button"></label><slot name="tooltip"></slot><span id="optional"></span></div><sinch-dropdown id="dropdown"><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;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" modal 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 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(), class extends NectaryElement {

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, _selectionStart, _selectionEnd, _isPendingDk, _onCompositionStart, _onInput;
+var _$input, _$label, _$optionalText, _$additionalText, _$invalidText, _cursorPos, _isPendingDk, _onCompositionStart, _onSelectionChange, _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, getIntegerAttribute, 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;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:var(--sinch-shape-radius-s);width:100%;margin:2px 0;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}#bottom{height:20px}#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)}#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"></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: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 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(), _selectionStart = new WeakMap(), _selectionEnd = new WeakMap(), _isPendingDk = new WeakMap(), _onCompositionStart = new WeakMap(), _onInput = new WeakMap(), class extends NectaryElement {
+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(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -40,12 +40,7 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
       value: void 0
     });
 
-    _classPrivateFieldInitSpec(this, _selectionStart, {
-      writable: true,
-      value: null
-    });
-
-    _classPrivateFieldInitSpec(this, _selectionEnd, {
+    _classPrivateFieldInitSpec(this, _cursorPos, {
       writable: true,
       value: null
     });
@@ -62,6 +57,13 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
       }
     });
 
+    _classPrivateFieldInitSpec(this, _onSelectionChange, {
+      writable: true,
+      value: () => {
+        _classPrivateFieldSet(this, _cursorPos, _classPrivateFieldGet(this, _$input).selectionEnd);
+      }
+    });
+
     _classPrivateFieldInitSpec(this, _onInput, {
       writable: true,
       value: e => {
@@ -72,29 +74,23 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
         const prevValue = this.value;
 
         if (prevValue !== nextValue) {
-          const nextSelectionStart = _classPrivateFieldGet(this, _$input).selectionStart;
-
-          const nextSelectionEnd = _classPrivateFieldGet(this, _$input).selectionEnd;
-
-          const prevSelectionStart = _classPrivateFieldGet(this, _selectionStart);
-
-          const prevSelectionEnd = _classPrivateFieldGet(this, _selectionEnd);
-
-          const isPrevCursorEnd = prevSelectionStart === prevSelectionEnd && prevSelectionStart === prevValue.length;
+          const nextCursorPos = _classPrivateFieldGet(this, _$input).selectionEnd;
 
           if (!_classPrivateFieldGet(this, _isPendingDk)) {
             _classPrivateFieldGet(this, _$input).value = prevValue;
-          }
 
-          _classPrivateFieldSet(this, _isPendingDk, false);
+            const prevCursorPos = _classPrivateFieldGet(this, _cursorPos);
 
-          if (!isPrevCursorEnd) {
-            _classPrivateFieldGet(this, _$input).setSelectionRange(prevSelectionStart, prevSelectionEnd);
+            const isPrevCursorEnd = prevCursorPos === null || prevCursorPos === prevValue.length;
+
+            if (!isPrevCursorEnd) {
+              _classPrivateFieldGet(this, _$input).setSelectionRange(prevCursorPos, prevCursorPos);
+            }
           }
 
-          _classPrivateFieldSet(this, _selectionStart, nextSelectionStart);
+          _classPrivateFieldSet(this, _isPendingDk, false);
 
-          _classPrivateFieldSet(this, _selectionEnd, nextSelectionEnd);
+          _classPrivateFieldSet(this, _cursorPos, nextCursorPos);
 
           this.dispatchEvent(new CustomEvent('change', {
             detail: nextValue,
@@ -125,12 +121,20 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
     _classPrivateFieldGet(this, _$input).addEventListener('input', _classPrivateFieldGet(this, _onInput));
 
     _classPrivateFieldGet(this, _$input).addEventListener('compositionstart', _classPrivateFieldGet(this, _onCompositionStart));
+
+    _classPrivateFieldGet(this, _$input).addEventListener('mousedown', _classPrivateFieldGet(this, _onSelectionChange));
+
+    _classPrivateFieldGet(this, _$input).addEventListener('keydown', _classPrivateFieldGet(this, _onSelectionChange));
   }
 
   disconnectedCallback() {
     _classPrivateFieldGet(this, _$input).removeEventListener('input', _classPrivateFieldGet(this, _onInput));
 
     _classPrivateFieldGet(this, _$input).removeEventListener('compositionstart', _classPrivateFieldGet(this, _onCompositionStart));
+
+    _classPrivateFieldGet(this, _$input).removeEventListener('mousedown', _classPrivateFieldGet(this, _onSelectionChange));
+
+    _classPrivateFieldGet(this, _$input).removeEventListener('keydown', _classPrivateFieldGet(this, _onSelectionChange));
   }
 
   static get observedAttributes() {
@@ -143,12 +147,16 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
         {
           const nextVal = newVal ?? '';
 
-          if (nextVal !== _classPrivateFieldGet(this, _$input).value) {
+          const prevVal = _classPrivateFieldGet(this, _$input).value;
+
+          if (nextVal !== prevVal) {
+            const prevCursorPos = _classPrivateFieldGet(this, _$input).selectionEnd;
+
+            const isPrevCursorEnd = prevCursorPos === prevVal.length;
             _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));
+            if (!isPrevCursorEnd) {
+              _classPrivateFieldGet(this, _$input).setSelectionRange(_classPrivateFieldGet(this, _cursorPos), _classPrivateFieldGet(this, _cursorPos));
             }
           }