@nectary/components 2.4.0

package/tabs-icon-option/types.d.ts

@@ -0,0 +1,19 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchTabsIconOptionElement = HTMLElement & {
+    /** Value */
+    value: string;
+    /** Disabled */
+    disabled: boolean;
+    /** Value */
+    setAttribute(name: 'value', value: string): void;
+    /** Disabled */
+    setAttribute(name: 'disabled', value: ''): void;
+};
+export type TSinchTabsIconOptionReact = TSinchElementReact<TSinchTabsIconOptionElement> & {
+    /** Value */
+    value: string;
+    /** Label that is used for a11y */
+    'aria-label': string;
+    /** Disabled */
+    disabled?: boolean;
+};

package/tabs-icon-option/types.js

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

package/tabs-option/index.d.ts

@@ -0,0 +1,12 @@
+import '../text';
+import type { TSinchTabsOptionElement, TSinchTabsOptionReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-tabs-option': TSinchTabsOptionReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-tabs-option': TSinchTabsOptionElement;
+    }
+}

package/tabs-option/index.js

@@ -0,0 +1,86 @@
+import '../text';
+import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrEqual, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block}#button{all:initial;position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 16px;box-sizing:border-box;cursor:pointer;background-color:var(--sinch-comp-tab-color-default-background-initial);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);height:39px;--sinch-global-color-text:var(--sinch-comp-tab-color-default-text-initial);--sinch-global-color-icon:var(--sinch-comp-tab-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-tab-size-icon)}#button:hover{background-color:var(--sinch-comp-tab-color-default-background-hover)}#button:focus-visible::after{content:"";position:absolute;inset:0;bottom:-3px;border:2px solid var(--sinch-comp-tab-color-default-outline-focus);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);pointer-events:none}#button:disabled{cursor:unset;pointer-events:none;--sinch-global-color-text:var(--sinch-comp-tab-color-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-tab-color-disabled-icon-initial)}:host([data-checked]) #button{--sinch-global-color-text:var(--sinch-comp-tab-color-checked-text-initial);--sinch-global-color-icon:var(--sinch-comp-tab-color-checked-icon-initial)}:host([data-checked]) #button::before{content:"";position:absolute;left:0;right:0;bottom:-1px;pointer-events:none;border-top:2px solid var(--sinch-comp-tab-color-checked-border-initial)}#text{flex-shrink:1;flex-basis:auto;min-width:0;--sinch-comp-text-font:var(--sinch-comp-tab-font-label)}::slotted(*){display:block}</style><button id="button" tabindex="0"><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text></button>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-tabs-option', class extends NectaryElement {
+  #$button;
+  #$text;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$button = shadowRoot.querySelector('#button');
+    this.#$text = shadowRoot.querySelector('#text');
+  }
+  connectedCallback() {
+    this.role = 'tab';
+    this.#$button.addEventListener('click', this.#onClick);
+  }
+  disconnectedCallback() {
+    this.#$button.removeEventListener('click', this.#onClick);
+  }
+  static get observedAttributes() {
+    return ['data-checked', 'disabled', 'text'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (isAttrEqual(oldVal, newVal)) {
+      return;
+    }
+    switch (name) {
+      case 'text':
+        {
+          this.#$text.textContent = newVal;
+          break;
+        }
+      case 'data-checked':
+        {
+          updateExplicitBooleanAttribute(this, 'aria-selected', isAttrTrue(newVal));
+          break;
+        }
+      case 'disabled':
+        {
+          const isDisabled = isAttrTrue(newVal);
+          this.#$button.disabled = isDisabled;
+          updateBooleanAttribute(this, name, isDisabled);
+          break;
+        }
+    }
+  }
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+  set disabled(isDisabled) {
+    updateBooleanAttribute(this, 'disabled', isDisabled);
+  }
+  get disabled() {
+    return getBooleanAttribute(this, 'disabled');
+  }
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+  get focusable() {
+    return true;
+  }
+  focus() {
+    this.#$button.focus();
+  }
+  blur() {
+    this.#$button.blur();
+  }
+  #onClick = e => {
+    e.stopPropagation();
+    this.dispatchEvent(new CustomEvent('option-change', {
+      bubbles: true,
+      detail: this.value
+    }));
+  };
+});

package/tabs-option/types.d.ts

@@ -0,0 +1,25 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchTabsOptionElement = HTMLElement & {
+    /** Value */
+    value: string;
+    /** Text */
+    text: string;
+    /** Disabled */
+    disabled: boolean;
+    /** Value */
+    setAttribute(name: 'value', value: string): void;
+    /** Text */
+    setAttribute(name: 'text', value: string): void;
+    /** Disabled */
+    setAttribute(name: 'disabled', value: ''): void;
+};
+export type TSinchTabsOptionReact = TSinchElementReact<TSinchTabsOptionElement> & {
+    /** Value */
+    value: string;
+    /** Text */
+    text: string;
+    /** Label that is used for a11y */
+    'aria-label': string;
+    /** Disabled */
+    disabled?: boolean;
+};

package/tabs-option/types.js

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

package/tag/index.d.ts

@@ -0,0 +1,12 @@
+import '../text';
+import type { TSinchTagElement, TSinchTagReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-tag': TSinchTagReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-tag': TSinchTagElement;
+    }
+}

package/tag/index.js

@@ -0,0 +1,84 @@
+import '../text';
+import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, isAttrTrue, isAttrEqual } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:var(--sinch-comp-tag-size-container-m);padding:0 9px;border-radius:var(--sinch-comp-tag-shape-radius);background-color:var(--sinch-comp-tag-color-default-background);box-sizing:border-box;user-select:none;--sinch-global-color-text:var(--sinch-comp-tag-color-default-foreground);--sinch-global-color-icon:var(--sinch-comp-tag-color-default-foreground);--sinch-global-size-icon:var(--sinch-comp-tag-size-icon-m)}:host([small]) #wrapper{height:var(--sinch-comp-tag-size-container-s);padding:0 8px;--sinch-global-size-icon:var(--sinch-comp-tag-size-icon-s)}#text{flex:1;--sinch-comp-text-font:var(--sinch-comp-tag-font-size-m-label)}:host([small]) #text{--sinch-comp-text-font:var(--sinch-comp-tag-font-size-s-label)}::slotted(*){margin-left:-4px}</style><div id="wrapper"><slot name="icon"></slot><sinch-text id="text" type="s" ellipsis></sinch-text></div>';
+import { getTagColorBg, getTagColorFg } from './utils';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-tag', class extends NectaryElement {
+  #$text;
+  #$wrapper;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$wrapper = shadowRoot.querySelector('#wrapper');
+    this.#$text = shadowRoot.querySelector('#text');
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.#updateColor();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+  get color() {
+    return getAttribute(this, 'color');
+  }
+  set color(value) {
+    updateAttribute(this, 'color', value);
+  }
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+  get small() {
+    return getBooleanAttribute(this, 'small');
+  }
+  set small(isSmall) {
+    updateBooleanAttribute(this, 'small', isSmall);
+  }
+  static get observedAttributes() {
+    return ['text', 'color', 'small'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (isAttrEqual(oldVal, newVal)) {
+      return;
+    }
+    switch (name) {
+      case 'color':
+        {
+          this.#updateColor();
+          break;
+        }
+      case 'text':
+        {
+          this.#$text.textContent = newVal;
+          break;
+        }
+      case 'small':
+        {
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+          break;
+        }
+    }
+  }
+  #updateColor() {
+    if (!this.isDomConnected) {
+      return;
+    }
+    const colorName = this.color;
+    if (colorName !== null && colorName.length > 0) {
+      const bg = getTagColorBg(colorName);
+      const fg = getTagColorFg(colorName);
+      this.#$wrapper.style.setProperty('background-color', bg);
+      this.#$wrapper.style.setProperty('--sinch-global-color-text', fg);
+      this.#$wrapper.style.setProperty('--sinch-global-color-icon', fg);
+    } else {
+      this.#$wrapper.style.removeProperty('background-color');
+      this.#$wrapper.style.removeProperty('--sinch-global-color-text');
+      this.#$wrapper.style.removeProperty('--sinch-global-color-icon');
+    }
+  }
+});

package/tag/types.d.ts

@@ -0,0 +1,23 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchTagElement = HTMLElement & {
+    /** Text */
+    text: string;
+    /** Color, gray by default */
+    color: string | null;
+    /** Small */
+    small: boolean;
+    /** Text */
+    setAttribute(name: 'text', value: string): void;
+    /** Color, gray by default */
+    setAttribute(name: 'color', value: string): void;
+    /** Small */
+    setAttribute(name: 'small', value: ''): void;
+};
+export type TSinchTagReact = TSinchElementReact<TSinchTagElement> & {
+    /** Text */
+    text: string;
+    /** Color, gray by default */
+    color?: string;
+    /** Small */
+    small?: boolean;
+};

package/tag/types.js

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

package/tag/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const getTagColorBg: (id: string) => string;
+export declare const getTagColorFg: (id: string) => string;

package/tag/utils.js

@@ -0,0 +1,6 @@
+export const getTagColorBg = id => {
+  return `var(--sinch-comp-tag-color-${id}-background)`;
+};
+export const getTagColorFg = id => {
+  return `var(--sinch-comp-tag-color-${id}-foreground)`;
+};

package/text/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchTextElement, TSinchTextReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-text': TSinchTextReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-text': TSinchTextElement;
+    }
+}

package/text/index.js

@@ -0,0 +1,64 @@
+import { defineCustomElement, getBooleanAttribute, updateBooleanAttribute, NectaryElement, getLiteralAttribute, updateLiteralAttribute, isAttrTrue, isAttrEqual } from '../utils';
+const templateHTML = '<style>:host{display:block;font:var(--sinch-comp-text-font);color:var(--sinch-global-color-text,var(--sinch-sys-color-text-default));--sinch-comp-text-font:var(--sinch-sys-font-body-m)}:host([inline]){display:inline}:host([type="s"]){--sinch-comp-text-font:var(--sinch-sys-font-body-s)}:host([type=xs]){--sinch-comp-text-font:var(--sinch-sys-font-body-xs)}:host([type=xxs]){--sinch-comp-text-font:var(--sinch-sys-font-body-xxs)}:host([type="m"][emphasized]){--sinch-comp-text-font:var(--sinch-sys-font-body-emphasize)}:host([type="s"][emphasized]){--sinch-comp-text-font:var(--sinch-sys-font-body-emphasize-s)}:host([ellipsis]){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--sinch-global-text-white-space:nowrap}</style><slot></slot>';
+import { typeValues } from './utils';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-text', class extends NectaryElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+  connectedCallback() {
+    this.#updateRole();
+  }
+  static get observedAttributes() {
+    return ['inline', 'ellipsis', 'emphasized'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (isAttrEqual(oldVal, newVal)) {
+      return;
+    }
+    switch (name) {
+      case 'inline':
+        {
+          this.#updateRole();
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+          break;
+        }
+      case 'ellipsis':
+      case 'emphasized':
+        {
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+          break;
+        }
+    }
+  }
+  get type() {
+    return getLiteralAttribute(this, typeValues, 'type');
+  }
+  set type(value) {
+    updateLiteralAttribute(this, typeValues, 'type', value);
+  }
+  set inline(isInline) {
+    updateBooleanAttribute(this, 'inline', isInline);
+  }
+  get inline() {
+    return getBooleanAttribute(this, 'inline');
+  }
+  set ellipsis(isEllipsis) {
+    updateBooleanAttribute(this, 'ellipsis', isEllipsis);
+  }
+  get ellipsis() {
+    return getBooleanAttribute(this, 'ellipsis');
+  }
+  set emphasized(isEmphasized) {
+    updateBooleanAttribute(this, 'emphasized', isEmphasized);
+  }
+  get emphasized() {
+    return getBooleanAttribute(this, 'emphasized');
+  }
+  #updateRole() {
+    this.setAttribute('role', getBooleanAttribute(this, 'inline') ? 'text' : 'paragraph');
+  }
+});

package/text/types.d.ts

@@ -0,0 +1,30 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchTextType = 'm' | 's' | 'xs' | 'xxs';
+export type TSinchTextElement = HTMLElement & {
+    /** Type */
+    type: TSinchTextType;
+    /** Block (“paragraph”, default) or inline (“span”) */
+    inline: boolean;
+    /** Emphasized */
+    emphasized: boolean;
+    /** Cuts the long text with “…” ellipsis */
+    ellipsis: boolean;
+    /** Type */
+    setAttribute(name: 'type', value: TSinchTextType): void;
+    /** Block (“paragraph”, default) or inline (“span”) */
+    setAttribute(name: 'inline', value: ''): void;
+    /** Emphasized */
+    setAttribute(name: 'emphasized', value: ''): void;
+    /** Cuts the long text with “…” ellipsis */
+    setAttribute(name: 'ellipsis', value: ''): void;
+};
+export type TSinchTextReact = TSinchElementReact<TSinchTextElement> & {
+    /** Type */
+    type: TSinchTextType;
+    /** Block (“paragraph”, default) or inline (“span”) */
+    inline?: boolean;
+    /** Emphasized */
+    emphasized?: boolean;
+    /** Cuts the long text with “…” ellipsis */
+    ellipsis?: boolean;
+};

package/text/types.js

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

package/text/utils.d.ts

@@ -0,0 +1,2 @@
+import type { TSinchTextType } from './types';
+export declare const typeValues: readonly TSinchTextType[];

package/text/utils.js

@@ -0,0 +1 @@
+export const typeValues = ['m', 's', 'xs', 'xxs'];

package/textarea/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchTextareaElement, TSinchTextareaReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-textarea': TSinchTextareaReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-textarea': TSinchTextareaElement;
+    }
+}

package/textarea/index.js

@@ -0,0 +1,228 @@
+import { Context, defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getReactEventHandler, isAttrEqual, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
+import { DEFAULT_SIZE } from '../utils/size';
+const templateHTML = '<style>:host{all:initial;display:inline-block;vertical-align:middle}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;box-sizing:border-box;background-color:var(--sinch-comp-textarea-color-default-background-initial);border-radius:var(--sinch-local-shape-radius);padding-right:2px;padding-bottom:2px;overflow:hidden;--sinch-local-shape-radius:var(--sinch-comp-textarea-shape-radius)}#input{all:initial;display:block;font:var(--sinch-comp-textarea-font-input);color:var(--sinch-comp-textarea-color-default-text-initial);resize:none;white-space:pre-wrap;overflow-wrap:break-word;padding:8px 10px 8px 12px;border:none}#input::placeholder{color:var(--sinch-comp-textarea-color-default-text-placeholder);opacity:1}#input:disabled{color:var(--sinch-comp-textarea-color-disabled-text-initial);-webkit-text-fill-color:var(--sinch-comp-textarea-color-disabled-text-initial)}:host([resizable]) #input{resize:vertical}#border{position:absolute;border:1px solid var(--sinch-comp-textarea-color-default-border-initial);border-radius:var(--sinch-local-shape-radius);inset:0;pointer-events:none}:host([invalid]) #border{border-color:var(--sinch-comp-textarea-color-invalid-border-initial)}#input:focus+#border{border-color:var(--sinch-comp-textarea-color-default-border-focus);border-width:2px}#input:disabled+#border{border-color:var(--sinch-comp-textarea-color-disabled-border-initial)}#bottom{display:flex;flex-direction:row;align-items:center;gap:8px;padding:8px 10px 10px 12px}#bottom.empty{display:none}</style><div id="wrapper"><textarea id="input"></textarea><div id="border"></div><div id="bottom"><slot name="bottom"></slot></div></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-textarea', class extends NectaryElement {
+  #$input;
+  #$bottomSlot;
+  #$bottomWrapper;
+  #cursorPos = null;
+  #isPendingDk = false;
+  #controller = null;
+  #sizeContext;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$input = shadowRoot.querySelector('#input');
+    this.#$bottomSlot = shadowRoot.querySelector('slot[name="bottom"]');
+    this.#$bottomWrapper = shadowRoot.querySelector('#bottom');
+    this.#sizeContext = new Context(this.#$bottomWrapper, 'size');
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.#controller = new AbortController();
+    const options = {
+      signal: this.#controller.signal
+    };
+    this.role = 'textbox';
+    this.ariaMultiLine = 'true';
+    this.#$input.addEventListener('input', this.#onInput, options);
+    this.#$input.addEventListener('compositionstart', this.#onCompositionStart, options);
+    this.#$input.addEventListener('mousedown', this.#onSelectionChange, options);
+    this.#$input.addEventListener('keydown', this.#onSelectionChange, options);
+    this.#$input.addEventListener('focus', this.#onInputFocus, options);
+    this.#$input.addEventListener('blur', this.#onInputBlur, options);
+    this.#$bottomSlot.addEventListener('slotchange', this.#onBottomSlotChange, options);
+    this.addEventListener('-change', this.#onChangeReactHandler, options);
+    this.addEventListener('-focus', this.#onFocusReactHandler, options);
+    this.addEventListener('-blur', this.#onBlurReactHandler, options);
+    this.#sizeContext.listen(this.#controller.signal);
+    this.#onBottomSlotChange();
+    this.#onSizeUpdate();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#controller.abort();
+    this.#controller = null;
+  }
+  static get observedAttributes() {
+    return ['value', 'placeholder', 'invalid', 'disabled', 'rows', 'resizable'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case 'value':
+        {
+          const nextVal = newVal ?? '';
+          const prevVal = this.#$input.value;
+          if (nextVal !== prevVal) {
+            const prevCursorPos = this.#$input.selectionEnd;
+            const isPrevCursorEnd = prevCursorPos === prevVal.length;
+            this.#$input.value = nextVal;
+            if (!isPrevCursorEnd) {
+              this.#$input.setSelectionRange(this.#cursorPos, this.#cursorPos);
+            }
+          }
+          break;
+        }
+      case 'placeholder':
+        {
+          this.#$input.placeholder = newVal ?? '';
+          updateAttribute(this, 'aria-placeholder', newVal);
+          break;
+        }
+      case 'invalid':
+        {
+          if (isAttrEqual(oldVal, newVal)) {
+            break;
+          }
+          const isInvalid = isAttrTrue(newVal);
+          updateExplicitBooleanAttribute(this, 'aria-invalid', isInvalid);
+          updateBooleanAttribute(this, 'invalid', isInvalid);
+          break;
+        }
+      case 'disabled':
+        {
+          if (isAttrEqual(oldVal, newVal)) {
+            break;
+          }
+          const isDisabled = isAttrTrue(newVal);
+          this.#$input.disabled = isDisabled;
+          updateBooleanAttribute(this, 'disabled', isDisabled);
+          break;
+        }
+      case 'rows':
+        {
+          updateAttribute(this.#$input, 'rows', newVal);
+          break;
+        }
+      case 'resizable':
+        {
+          if (isAttrEqual(oldVal, newVal)) {
+            break;
+          }
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+          break;
+        }
+    }
+  }
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+  set placeholder(value) {
+    updateAttribute(this, 'placeholder', value);
+  }
+  get placeholder() {
+    return getAttribute(this, 'placeholder');
+  }
+  set invalid(value) {
+    updateBooleanAttribute(this, 'invalid', value);
+  }
+  get invalid() {
+    return getBooleanAttribute(this, 'invalid');
+  }
+  set disabled(isDisabled) {
+    updateBooleanAttribute(this, 'disabled', isDisabled);
+  }
+  get disabled() {
+    return getBooleanAttribute(this, 'disabled');
+  }
+  set resizable(isResizable) {
+    updateBooleanAttribute(this, 'resizable', isResizable);
+  }
+  get resizable() {
+    return getBooleanAttribute(this, 'resizable');
+  }
+  set rows(value) {
+    updateAttribute(this, 'rows', value);
+  }
+  get rows() {
+    return getIntegerAttribute(this, 'rows', 0);
+  }
+  get selectionStart() {
+    return this.#$input.selectionStart;
+  }
+  set selectionStart(value) {
+    this.#$input.selectionStart = value;
+  }
+  get selectionEnd() {
+    return this.#$input.selectionEnd;
+  }
+  set selectionEnd(value) {
+    this.#$input.selectionEnd = value;
+  }
+  get selectionDirection() {
+    return this.#$input.selectionDirection;
+  }
+  set selectionDirection(value) {
+    this.#$input.selectionDirection = value;
+  }
+  get focusable() {
+    return true;
+  }
+  focus() {
+    this.#$input.focus();
+  }
+  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
+      }));
+    }
+  };
+  #onInputFocus = () => {
+    this.dispatchEvent(new CustomEvent('-focus'));
+  };
+  #onInputBlur = () => {
+    this.dispatchEvent(new CustomEvent('-blur'));
+  };
+  #onBottomSlotChange = () => {
+    const isEmpty = this.#$bottomSlot.assignedElements().length === 0;
+    setClass(this.#$bottomWrapper, 'empty', isEmpty);
+  };
+  #onSizeUpdate() {
+    if (!this.isDomConnected) {
+      return;
+    }
+    const size = this.getAttribute('data-size') ?? DEFAULT_SIZE;
+    this.#sizeContext.dispatch(size);
+  }
+  #onChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-change')?.(e);
+  };
+  #onFocusReactHandler = () => {
+    getReactEventHandler(this, 'on-focus')?.();
+  };
+  #onBlurReactHandler = () => {
+    getReactEventHandler(this, 'on-blur')?.();
+  };
+});