@nectary/components 0.39.0 → 0.41.0

package/inline-alert/index.js

@@ -1,12 +1,3 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$text, _$caption, _$closeWrapper, _$closeSlot, _$actionWrapper, _$actionSlot, _onCloseSlotChange, _onActionSlotChange;
-
-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 '../icons/report-problem';
 import '../icons/report';
 import '../icons/check-circle';
@@ -18,87 +9,38 @@ const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-dire
 import { assertType, typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-inline-alert', (_$text = new WeakMap(), _$caption = new WeakMap(), _$closeWrapper = new WeakMap(), _$closeSlot = new WeakMap(), _$actionWrapper = new WeakMap(), _$actionSlot = new WeakMap(), _onCloseSlotChange = new WeakMap(), _onActionSlotChange = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-inline-alert', class extends NectaryElement {
+  #$text;
+  #$caption;
+  #$closeWrapper;
+  #$closeSlot;
+  #$actionWrapper;
+  #$actionSlot;
+
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$text, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$caption, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$closeWrapper, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$closeSlot, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$actionWrapper, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$actionSlot, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _onCloseSlotChange, {
-      writable: true,
-      value: () => {
-        setClass(_classPrivateFieldGet(this, _$closeWrapper), 'empty', _classPrivateFieldGet(this, _$closeSlot).assignedElements().length === 0);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onActionSlotChange, {
-      writable: true,
-      value: () => {
-        setClass(_classPrivateFieldGet(this, _$actionWrapper), 'empty', _classPrivateFieldGet(this, _$actionSlot).assignedElements().length === 0);
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#text'));
-
-    _classPrivateFieldSet(this, _$caption, shadowRoot.querySelector('#caption'));
-
-    _classPrivateFieldSet(this, _$closeWrapper, shadowRoot.querySelector('#close'));
-
-    _classPrivateFieldSet(this, _$closeSlot, shadowRoot.querySelector('slot[name="close"]'));
-
-    _classPrivateFieldSet(this, _$actionWrapper, shadowRoot.querySelector('#action'));
-
-    _classPrivateFieldSet(this, _$actionSlot, shadowRoot.querySelector('slot[name="action"]'));
+    this.#$text = shadowRoot.querySelector('#text');
+    this.#$caption = shadowRoot.querySelector('#caption');
+    this.#$closeWrapper = shadowRoot.querySelector('#close');
+    this.#$closeSlot = shadowRoot.querySelector('slot[name="close"]');
+    this.#$actionWrapper = shadowRoot.querySelector('#action');
+    this.#$actionSlot = shadowRoot.querySelector('slot[name="action"]');
   }
 
   connectedCallback() {
     this.setAttribute('aria-atomic', 'true');
     this.setAttribute('aria-live', 'polite');
-
-    _classPrivateFieldGet(this, _$closeSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onCloseSlotChange));
-
-    _classPrivateFieldGet(this, _$actionSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onActionSlotChange));
-
-    _classPrivateFieldGet(this, _onCloseSlotChange).call(this);
-
-    _classPrivateFieldGet(this, _onActionSlotChange).call(this);
+    this.#$closeSlot.addEventListener('slotchange', this.#onCloseSlotChange);
+    this.#$actionSlot.addEventListener('slotchange', this.#onActionSlotChange);
+    this.#onCloseSlotChange();
+    this.#onActionSlotChange();
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$closeSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onCloseSlotChange));
-
-    _classPrivateFieldGet(this, _$actionSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onActionSlotChange));
+    this.#$closeSlot.removeEventListener('slotchange', this.#onCloseSlotChange);
+    this.#$actionSlot.removeEventListener('slotchange', this.#onActionSlotChange);
   }
 
   get type() {
@@ -139,16 +81,22 @@ defineCustomElement('sinch-inline-alert', (_$text = new WeakMap(), _$caption = n
 
       case 'text':
         {
-          _classPrivateFieldGet(this, _$text).textContent = newVal;
+          this.#$text.textContent = newVal;
           break;
         }
 
       case 'caption':
         {
-          updateAttribute(_classPrivateFieldGet(this, _$caption), 'text', newVal);
+          updateAttribute(this.#$caption, 'text', newVal);
           break;
         }
     }
   }
 
-}));
+  #onCloseSlotChange = () => {
+    setClass(this.#$closeWrapper, 'empty', this.#$closeSlot.assignedElements().length === 0);
+  };
+  #onActionSlotChange = () => {
+    setClass(this.#$actionWrapper, 'empty', this.#$actionSlot.assignedElements().length === 0);
+  };
+});

package/input/index.js

@@ -1,220 +1,57 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$input, _$iconSlot, _$iconWrapper, _$rightSlot, _$rightWrapper, _cursorPos, _isPendingDk, _onCompositionStart, _onSelectionChange, _onInput, _onIconSlotChange, _onRightSlotChange, _onInputFocus, _onInputBlur, _onChangeReactHandler, _onFocusReactHandler, _onBlurReactHandler;
-
-function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
-
-function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
-
 import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#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);--sinch-color-icon:var(--sinch-color-stormy-500)}#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)}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted);opacity:1}#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([invalid]:not([invalid=false]):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}#icon{display:flex;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}:host([disabled]:not([disabled=false])){--sinch-color-icon:var(--sinch-color-stormy-100)}</style><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>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#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);--sinch-color-icon:var(--sinch-color-stormy-500)}#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)}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted);opacity:1}#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([invalid]:not([invalid=false]):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}#icon{display:flex;position:absolute;left:12px;top:12px;pointer-events:none;--sinch-size-icon: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}:host([disabled]:not([disabled=false])){--sinch-color-icon:var(--sinch-color-stormy-100)}</style><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>';
 import { inputTypes } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-input', (_$input = 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(), _onInputFocus = new WeakMap(), _onInputBlur = new WeakMap(), _onChangeReactHandler = new WeakMap(), _onFocusReactHandler = new WeakMap(), _onBlurReactHandler = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-input', class extends NectaryElement {
+  #$input;
+  #$iconSlot;
+  #$iconWrapper;
+  #$rightSlot;
+  #$rightWrapper;
+  #cursorPos = null;
+  #isPendingDk = false;
+
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$input, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$iconSlot, {
-      writable: true,
-      value: void 0
-    });
-
-    _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
-    });
-
-    _classPrivateFieldInitSpec(this, _isPendingDk, {
-      writable: true,
-      value: false
-    });
-
-    _classPrivateFieldInitSpec(this, _onCompositionStart, {
-      writable: true,
-      value: () => {
-        _classPrivateFieldSet(this, _isPendingDk, true);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onSelectionChange, {
-      writable: true,
-      value: () => {
-        _classPrivateFieldSet(this, _cursorPos, _classPrivateFieldGet(this, _$input).selectionEnd);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onInput, {
-      writable: true,
-      value: e => {
-        e.stopPropagation();
-
-        const nextValue = _classPrivateFieldGet(this, _$input).value;
-
-        const prevValue = this.value;
-
-        if (prevValue !== nextValue) {
-          const nextCursorPos = _classPrivateFieldGet(this, _$input).selectionEnd;
-
-          if (!_classPrivateFieldGet(this, _isPendingDk)) {
-            _classPrivateFieldGet(this, _$input).value = prevValue;
-
-            const prevCursorPos = _classPrivateFieldGet(this, _cursorPos);
-
-            const isPrevCursorEnd = prevCursorPos === null || prevCursorPos === prevValue.length;
-
-            if (!isPrevCursorEnd) {
-              _classPrivateFieldGet(this, _$input).setSelectionRange(prevCursorPos, prevCursorPos);
-            }
-          }
-
-          _classPrivateFieldSet(this, _isPendingDk, false);
-
-          _classPrivateFieldSet(this, _cursorPos, nextCursorPos);
-
-          this.dispatchEvent(new CustomEvent('change', {
-            detail: nextValue,
-            bubbles: true
-          }));
-          this.dispatchEvent(new CustomEvent('-change', {
-            detail: nextValue
-          }));
-        }
-      }
-    });
-
-    _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, _onInputFocus, {
-      writable: true,
-      value: () => {
-        this.dispatchEvent(new CustomEvent('-focus'));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onInputBlur, {
-      writable: true,
-      value: () => {
-        this.dispatchEvent(new CustomEvent('-blur'));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onChangeReactHandler, {
-      writable: true,
-      value: e => {
-        getReactEventHandler(this, 'on-change')?.(e);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onFocusReactHandler, {
-      writable: true,
-      value: () => {
-        getReactEventHandler(this, 'on-focus')?.();
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onBlurReactHandler, {
-      writable: true,
-      value: () => {
-        getReactEventHandler(this, 'on-blur')?.();
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$input, shadowRoot.querySelector('#input'));
-
-    _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'));
+    this.#$input = shadowRoot.querySelector('#input');
+    this.#$iconSlot = shadowRoot.querySelector('slot[name="icon"]');
+    this.#$iconWrapper = shadowRoot.querySelector('#icon');
+    this.#$rightSlot = shadowRoot.querySelector('slot[name="right"]');
+    this.#$rightWrapper = shadowRoot.querySelector('#right');
   }
 
   connectedCallback() {
     this.setAttribute('role', 'textbox');
-
-    _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, _$input).addEventListener('focus', _classPrivateFieldGet(this, _onInputFocus));
-
-    _classPrivateFieldGet(this, _$input).addEventListener('blur', _classPrivateFieldGet(this, _onInputBlur));
-
-    _classPrivateFieldGet(this, _$iconSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onIconSlotChange));
-
-    _classPrivateFieldGet(this, _$rightSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onRightSlotChange));
-
-    this.addEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
-    this.addEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
-    this.addEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
-
-    _classPrivateFieldGet(this, _onIconSlotChange).call(this);
-
-    _classPrivateFieldGet(this, _onRightSlotChange).call(this);
+    this.#$input.addEventListener('input', this.#onInput);
+    this.#$input.addEventListener('compositionstart', this.#onCompositionStart);
+    this.#$input.addEventListener('mousedown', this.#onSelectionChange);
+    this.#$input.addEventListener('keydown', this.#onSelectionChange);
+    this.#$input.addEventListener('focus', this.#onInputFocus);
+    this.#$input.addEventListener('blur', this.#onInputBlur);
+    this.#$iconSlot.addEventListener('slotchange', this.#onIconSlotChange);
+    this.#$rightSlot.addEventListener('slotchange', this.#onRightSlotChange);
+    this.addEventListener('-change', this.#onChangeReactHandler);
+    this.addEventListener('-focus', this.#onFocusReactHandler);
+    this.addEventListener('-blur', this.#onBlurReactHandler);
+    this.#onIconSlotChange();
+    this.#onRightSlotChange();
   }
 
   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, _$input).removeEventListener('focus', _classPrivateFieldGet(this, _onInputFocus));
-
-    _classPrivateFieldGet(this, _$input).removeEventListener('blur', _classPrivateFieldGet(this, _onInputBlur));
-
-    _classPrivateFieldGet(this, _$iconSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onIconSlotChange));
-
-    _classPrivateFieldGet(this, _$rightSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onRightSlotChange));
-
-    this.removeEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
-    this.removeEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
-    this.removeEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
+    this.#$input.removeEventListener('input', this.#onInput);
+    this.#$input.removeEventListener('compositionstart', this.#onCompositionStart);
+    this.#$input.removeEventListener('mousedown', this.#onSelectionChange);
+    this.#$input.removeEventListener('keydown', this.#onSelectionChange);
+    this.#$input.removeEventListener('focus', this.#onInputFocus);
+    this.#$input.removeEventListener('blur', this.#onInputBlur);
+    this.#$iconSlot.removeEventListener('slotchange', this.#onIconSlotChange);
+    this.#$rightSlot.removeEventListener('slotchange', this.#onRightSlotChange);
+    this.removeEventListener('-change', this.#onChangeReactHandler);
+    this.removeEventListener('-focus', this.#onFocusReactHandler);
+    this.removeEventListener('-blur', this.#onBlurReactHandler);
   }
 
   static get observedAttributes() {
@@ -246,7 +83,7 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$iconSlot = new We
   }
 
   get placeholder() {
-    return getAttribute(this, 'placeholder', null);
+    return getAttribute(this, 'placeholder');
   }
 
   set invalid(isInvalid) {
@@ -266,51 +103,49 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$iconSlot = new We
   }
 
   get selectionStart() {
-    return _classPrivateFieldGet(this, _$input).selectionStart;
+    return this.#$input.selectionStart;
   }
 
   set selectionStart(value) {
-    _classPrivateFieldGet(this, _$input).selectionStart = value;
+    this.#$input.selectionStart = value;
   }
 
   get selectionEnd() {
-    return _classPrivateFieldGet(this, _$input).selectionEnd;
+    return this.#$input.selectionEnd;
   }
 
   set selectionEnd(value) {
-    _classPrivateFieldGet(this, _$input).selectionEnd = value;
+    this.#$input.selectionEnd = value;
   }
 
   get selectionDirection() {
-    return _classPrivateFieldGet(this, _$input).selectionDirection;
+    return this.#$input.selectionDirection;
   }
 
   set selectionDirection(value) {
-    _classPrivateFieldGet(this, _$input).selectionDirection = value;
+    this.#$input.selectionDirection = value;
   }
 
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case 'type':
         {
-          updateLiteralAttribute(_classPrivateFieldGet(this, _$input), inputTypes, 'type', newVal);
+          updateLiteralAttribute(this.#$input, inputTypes, 'type', newVal);
           break;
         }
 
       case 'value':
         {
           const nextVal = newVal ?? '';
-
-          const prevVal = _classPrivateFieldGet(this, _$input).value;
+          const prevVal = this.#$input.value;
 
           if (nextVal !== prevVal) {
-            const prevCursorPos = _classPrivateFieldGet(this, _$input).selectionEnd;
-
+            const prevCursorPos = this.#$input.selectionEnd;
             const isPrevCursorEnd = prevCursorPos === prevVal.length;
-            _classPrivateFieldGet(this, _$input).value = nextVal;
+            this.#$input.value = nextVal;
 
             if (!isPrevCursorEnd) {
-              _classPrivateFieldGet(this, _$input).setSelectionRange(_classPrivateFieldGet(this, _cursorPos), _classPrivateFieldGet(this, _cursorPos));
+              this.#$input.setSelectionRange(this.#cursorPos, this.#cursorPos);
             }
           }
 
@@ -319,7 +154,7 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$iconSlot = new We
 
       case 'placeholder':
         {
-          _classPrivateFieldGet(this, _$input).placeholder = newVal ?? '';
+          this.#$input.placeholder = newVal ?? '';
           updateAttribute(this, 'aria-placeholder', newVal);
           break;
         }
@@ -333,19 +168,79 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$iconSlot = new We
       case 'disabled':
         {
           const isDisabled = isAttrTrue(newVal);
-          _classPrivateFieldGet(this, _$input).disabled = isDisabled;
+          this.#$input.disabled = isDisabled;
           updateBooleanAttribute(this, 'disabled', isDisabled);
           break;
         }
     }
   }
 
+  get focusable() {
+    return true;
+  }
+
   focus() {
-    _classPrivateFieldGet(this, _$input).focus();
+    this.#$input.focus();
   }
 
   blur() {
-    _classPrivateFieldGet(this, _$input).blur();
-  }
+    this.#$input.blur();
+  }
+
+  #onCompositionStart = () => {
+    this.#isPendingDk = true;
+  };
+  #onSelectionChange = () => {
+    this.#cursorPos = this.#$input.selectionEnd;
+  };
+  #onInput = e => {
+    e.stopPropagation();
+    const nextValue = this.#$input.value;
+    const prevValue = this.value;
+
+    if (prevValue !== nextValue) {
+      const nextCursorPos = this.#$input.selectionEnd;
+
+      if (!this.#isPendingDk) {
+        this.#$input.value = prevValue;
+        const prevCursorPos = this.#cursorPos;
+        const isPrevCursorEnd = prevCursorPos === null || prevCursorPos === prevValue.length;
+
+        if (!isPrevCursorEnd) {
+          this.#$input.setSelectionRange(prevCursorPos, prevCursorPos);
+        }
+      }
 
-}));
+      this.#isPendingDk = false;
+      this.#cursorPos = nextCursorPos;
+      this.dispatchEvent(new CustomEvent('change', {
+        detail: nextValue,
+        bubbles: true
+      }));
+      this.dispatchEvent(new CustomEvent('-change', {
+        detail: nextValue
+      }));
+    }
+  };
+  #onIconSlotChange = () => {
+    setClass(this.#$iconWrapper, 'empty', this.#$iconSlot.assignedElements().length === 0);
+  };
+  #onRightSlotChange = () => {
+    setClass(this.#$rightWrapper, 'empty', this.#$rightSlot.assignedElements().length === 0);
+  };
+  #onInputFocus = () => {
+    this.dispatchEvent(new CustomEvent('-focus'));
+  };
+  #onInputBlur = () => {
+    this.dispatchEvent(new CustomEvent('-blur'));
+  };
+  #onChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-change')?.(e);
+  };
+  #onFocusReactHandler = () => {
+    getReactEventHandler(this, 'on-focus')?.();
+  };
+  #onBlurReactHandler = () => {
+    getReactEventHandler(this, 'on-blur')?.();
+  };
+});