@nectary/components 4.12.1 → 5.0.1

package/text/index.js

@@ -1,9 +1,10 @@
-import { defineCustomElement, getBooleanAttribute, updateBooleanAttribute, NectaryElement, getLiteralAttribute, updateLiteralAttribute, isAttrTrue, isAttrEqual } from '../utils';
-const templateHTML = '<style>:host{text-align:var(--sinch-comp-text-align);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);--sinch-comp-text-align:unset}: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');
+import { isAttrEqual, updateBooleanAttribute, getLiteralAttribute, updateLiteralAttribute, getBooleanAttribute, isAttrTrue } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import { typeValues } from "./utils.js";
+const templateHTML = '<style>\n  :host {\n    text-align: var(--sinch-comp-text-align);\n    display: block;\n    font: var(--sinch-comp-text-font);\n    color: var(--sinch-global-color-text, var(--sinch-sys-color-text-default));\n\n    --sinch-comp-text-font: var(--sinch-sys-font-body-m);\n    --sinch-comp-text-align: unset;\n  }\n\n  :host([inline]) {\n    display: inline;\n  }\n\n  :host([type="s"]) {\n    --sinch-comp-text-font: var(--sinch-sys-font-body-s);\n  }\n\n  :host([type="xs"]) {\n    --sinch-comp-text-font: var(--sinch-sys-font-body-xs);\n  }\n\n  :host([type="xxs"]) {\n    --sinch-comp-text-font: var(--sinch-sys-font-body-xxs);\n  }\n\n  :host([type="m"][emphasized]) {\n    --sinch-comp-text-font: var(--sinch-sys-font-body-emphasize);\n  }\n\n  :host([type="s"][emphasized]) {\n    --sinch-comp-text-font: var(--sinch-sys-font-body-emphasize-s);\n  }\n\n  :host([ellipsis]) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    --sinch-global-text-white-space: nowrap;\n  }\n</style>\n\n<slot></slot>';
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class Text extends NectaryElement {
+class Text extends NectaryElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -13,53 +14,57 @@ export class Text extends NectaryElement {
     this.#updateRole();
   }
   static get observedAttributes() {
-    return ['inline', 'ellipsis', 'emphasized'];
+    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;
-        }
+      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');
+    return getLiteralAttribute(this, typeValues, "type");
   }
   set type(value) {
-    updateLiteralAttribute(this, typeValues, 'type', value);
+    updateLiteralAttribute(this, typeValues, "type", value);
   }
   set inline(isInline) {
-    updateBooleanAttribute(this, 'inline', isInline);
+    updateBooleanAttribute(this, "inline", isInline);
   }
   get inline() {
-    return getBooleanAttribute(this, 'inline');
+    return getBooleanAttribute(this, "inline");
   }
   set ellipsis(isEllipsis) {
-    updateBooleanAttribute(this, 'ellipsis', isEllipsis);
+    updateBooleanAttribute(this, "ellipsis", isEllipsis);
   }
   get ellipsis() {
-    return getBooleanAttribute(this, 'ellipsis');
+    return getBooleanAttribute(this, "ellipsis");
   }
   set emphasized(isEmphasized) {
-    updateBooleanAttribute(this, 'emphasized', isEmphasized);
+    updateBooleanAttribute(this, "emphasized", isEmphasized);
   }
   get emphasized() {
-    return getBooleanAttribute(this, 'emphasized');
+    return getBooleanAttribute(this, "emphasized");
   }
   #updateRole() {
-    this.setAttribute('role', getBooleanAttribute(this, 'inline') ? 'text' : 'paragraph');
+    this.setAttribute(
+      "role",
+      getBooleanAttribute(this, "inline") ? "text" : "paragraph"
+    );
   }
 }
-defineCustomElement('sinch-text', Text);
+defineCustomElement("sinch-text", Text);
+export {
+  Text
+};

package/text/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchTextType = 'm' | 's' | 'xs' | 'xxs';
 export type TSinchTextProps = {
     /** Type */
@@ -29,3 +29,23 @@ export type TSinchText = {
 };
 export type TSinchTextElement = NectaryComponentVanillaByType<TSinchText>;
 export type TSinchTextReact = NectaryComponentReactByType<TSinchText>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-text': TSinchText;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-text': NectaryComponentVanilla<'sinch-text'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-text': NectaryComponentReact<'sinch-text'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-text': NectaryComponentReact<'sinch-text'>;
+        }
+    }
+}

package/text/types.js

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

package/text/utils.js

@@ -1 +1,4 @@
-export const typeValues = ['m', 's', 'xs', 'xxs'];
+const typeValues = ["m", "s", "xs", "xxs"];
+export {
+  typeValues
+};

package/textarea/global/index.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/textarea/global/index.js

@@ -0,0 +1,2 @@
+import { defineCustomElement } from "../../utils/element.js";
+defineCustomElement("sinch-textarea");

package/textarea/index.d.ts

@@ -1,6 +1,5 @@
 import { NectaryElement } from '../utils';
-import type { TSinchTextarea } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export * from './types';
 export declare class Textarea extends NectaryElement {
     #private;
     static formAssociated: boolean;
@@ -38,23 +37,3 @@ export declare class Textarea extends NectaryElement {
     focus(): void;
     blur(): void;
 }
-declare global {
-    interface NectaryComponentMap {
-        'sinch-textarea': TSinchTextarea;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-textarea': NectaryComponentVanilla<'sinch-textarea'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-textarea': NectaryComponentReact<'sinch-textarea'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-textarea': NectaryComponentReact<'sinch-textarea'>;
-        }
-    }
-}

package/textarea/index.js

@@ -1,10 +1,14 @@
-import { Context, defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getReactEventHandler, getRect, hasClass, isAttrEqual, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
-import { setFormValue } from '../utils/form';
-import { DEFAULT_SIZE } from '../utils/size';
-const templateHTML = '<style>:host{display:block}#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;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;box-sizing:border-box}#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)}#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:12px 4px 4px}#bottom.empty{display:none}:host([resizable]) #bottom{padding-right:calc(var(--sinch-comp-textarea-size-resize-handle) + 4px)}#resize-handle{display:none;position:absolute;width:var(--sinch-comp-textarea-size-resize-handle);height:var(--sinch-comp-textarea-size-resize-handle);bottom:0;right:0;cursor:ns-resize}:host([resizable]) #resize-handle{display:block}#resize-icon{display:block;pointer-events:none;fill:var(--sinch-comp-textarea-color-default-border-initial)}</style><div id="wrapper"><textarea id="input"></textarea><div id="border"></div><div id="bottom"><slot name="bottom"></slot><div id="resize-handle"><svg id="resize-icon" width="16" height="16"><path d="m14.833 4.724-9.61 9.61-.942-.944 9.61-9.609.942.943ZM15.443 10 10.5 14.943 9.557 14 14.5 9.057l.943.943Z"/></svg></div></div></div>';
-const template = document.createElement('template');
+import { Context } from "../utils/context.js";
+import { getBooleanAttribute, isAttrEqual, updateBooleanAttribute, hasClass, setClass, updateAttribute, isAttrTrue, getAttribute, getIntegerAttribute } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import { getRect } from "../utils/rect.js";
+import { getReactEventHandler } from "../utils/get-react-event-handler.js";
+import { setFormValue } from "../utils/form.js";
+import { DEFAULT_SIZE } from "../utils/size.js";
+const templateHTML = '<style>\n:host {\n  display: block;\n}\n\n#wrapper {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  background-color: var(--sinch-comp-textarea-color-default-background-initial);\n  border-radius: var(--sinch-local-shape-radius);\n  padding-right: 2px;\n  overflow: hidden;\n\n  --sinch-local-shape-radius: var(--sinch-comp-textarea-shape-radius);\n}\n\n#input {\n  all: initial;\n  display: block;\n  font: var(--sinch-comp-textarea-font-input);\n  color: var(--sinch-comp-textarea-color-default-text-initial);\n  resize: none;\n  white-space: pre-wrap;\n  overflow-wrap: break-word;\n  padding: 8px 10px 8px 12px;\n  border: none;\n  box-sizing: border-box;\n}\n\n/* #input::-webkit-resizer {\n\n} */\n\n#input::placeholder {\n  color: var(--sinch-comp-textarea-color-default-text-placeholder);\n  opacity: 1;\n}\n\n#input:disabled {\n  color: var(--sinch-comp-textarea-color-disabled-text-initial);\n  -webkit-text-fill-color: var(--sinch-comp-textarea-color-disabled-text-initial);\n}\n\n#border {\n  position: absolute;\n  border: 1px solid var(--sinch-comp-textarea-color-default-border-initial);\n  border-radius: var(--sinch-local-shape-radius);\n  inset: 0;\n  pointer-events: none;\n}\n\n:host([invalid]) #border {\n  border-color: var(--sinch-comp-textarea-color-invalid-border-initial);\n}\n\n#input:focus + #border {\n  border-color: var(--sinch-comp-textarea-color-default-border-focus);\n  border-width: 2px;\n}\n\n#input:disabled + #border {\n  border-color: var(--sinch-comp-textarea-color-disabled-border-initial);\n}\n\n#bottom {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 4px 4px;\n}\n\n#bottom.empty {\n  display: none;\n}\n\n:host([resizable]) #bottom {\n  padding-right: calc(var(--sinch-comp-textarea-size-resize-handle) + 4px);\n}\n\n#resize-handle {\n  display: none;\n  position: absolute;\n  width: var(--sinch-comp-textarea-size-resize-handle);\n  height: var(--sinch-comp-textarea-size-resize-handle);\n  bottom: 0;\n  right: 0;\n  cursor: ns-resize;\n}\n\n:host([resizable]) #resize-handle {\n  display: block;\n}\n\n#resize-icon {\n  display: block;\n  pointer-events: none;\n  fill: var(--sinch-comp-textarea-color-default-border-initial);\n}\n</style>\n\n<div id="wrapper">\n  <textarea id="input"></textarea>\n  <div id="border"></div>\n  <div id="bottom">\n    <slot name="bottom"></slot>\n    <div id="resize-handle">\n      <svg id="resize-icon" width="16" height="16">\n        <path d="m14.833 4.724-9.61 9.61-.942-.944 9.61-9.609.942.943ZM15.443 10 10.5 14.943 9.557 14 14.5 9.057l.943.943Z"/>\n      </svg>\n    </div>\n  </div>\n</div>\n';
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class Textarea extends NectaryElement {
+class Textarea extends NectaryElement {
   #$input;
   #$bottomSlot;
   #$bottomWrapper;
@@ -20,16 +24,14 @@ export class Textarea extends NectaryElement {
   static formAssociated = true;
   constructor() {
     super();
-    const shadowRoot = this.attachShadow({
-      delegatesFocus: true
-    });
+    const shadowRoot = this.attachShadow({ delegatesFocus: true });
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#internals = this.attachInternals();
-    this.#$input = shadowRoot.querySelector('#input');
+    this.#$input = shadowRoot.querySelector("#input");
     this.#$bottomSlot = shadowRoot.querySelector('slot[name="bottom"]');
-    this.#$bottomWrapper = shadowRoot.querySelector('#bottom');
-    this.#$resizeHandle = shadowRoot.querySelector('#resize-handle');
-    this.#sizeContext = new Context(this.#$bottomWrapper, 'size');
+    this.#$bottomWrapper = shadowRoot.querySelector("#bottom");
+    this.#$resizeHandle = shadowRoot.querySelector("#resize-handle");
+    this.#sizeContext = new Context(this.#$bottomWrapper, "size");
   }
   connectedCallback() {
     super.connectedCallback();
@@ -37,21 +39,21 @@ export class Textarea extends NectaryElement {
     const options = {
       signal: this.#controller.signal
     };
-    this.setAttribute('role', 'textbox');
-    this.#internals.role = 'textbox';
-    this.ariaMultiLine = 'true';
-    this.#internals.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.#$resizeHandle.addEventListener('mousedown', this.#onDragStart, 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.setAttribute("role", "textbox");
+    this.#internals.role = "textbox";
+    this.ariaMultiLine = "true";
+    this.#internals.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.#$resizeHandle.addEventListener("mousedown", this.#onDragStart, 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.#updateMinRows();
@@ -70,149 +72,150 @@ export class Textarea extends NectaryElement {
     setFormValue(this.#internals, this.#$input.value);
   }
   formResetCallback() {
-    this.#$input.value = '';
-    setFormValue(this.#internals, '');
+    this.#$input.value = "";
+    setFormValue(this.#internals, "");
   }
   formStateRestoreCallback(state) {
-    if (this.#internals.form === null || getBooleanAttribute(this.#internals.form, 'data-form-state-restore') === false) {
+    if (this.#internals.form === null || getBooleanAttribute(this.#internals.form, "data-form-state-restore") === false) {
       return;
     }
     if (state !== null) {
-      const value = typeof state === 'string' ? state : state.get(this.name);
-      this.#$input.value = value?.toString() ?? '';
-      setFormValue(this.#internals, value?.toString() ?? '');
+      const value = typeof state === "string" ? state : state.get(this.name);
+      this.#$input.value = value?.toString() ?? "";
+      setFormValue(this.#internals, value?.toString() ?? "");
     }
   }
   static get observedAttributes() {
-    return ['value', 'placeholder', 'invalid', 'disabled', 'rows', 'minrows', 'resizable'];
+    return [
+      "value",
+      "placeholder",
+      "invalid",
+      "disabled",
+      "rows",
+      "minrows",
+      "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;
-            const isShrinkingContent = nextVal.length < prevVal.length;
-            this.#$input.value = nextVal;
-            setFormValue(this.#internals, nextVal);
-            if (!this.resizable) {
-              if (isShrinkingContent) {
-                this.#$input.style.removeProperty('height');
-              }
-              const nextContentHeight = this.#$input.scrollHeight;
-              if (isShrinkingContent || nextContentHeight !== this.#prevContentHeight) {
-                this.#prevContentHeight = nextContentHeight;
-                this.#$input.style.setProperty('height', `${this.#prevContentHeight}px`);
-              }
+      case "value": {
+        const nextVal = newVal ?? "";
+        const prevVal = this.#$input.value;
+        if (nextVal !== prevVal) {
+          const prevCursorPos = this.#$input.selectionEnd;
+          const isPrevCursorEnd = prevCursorPos === prevVal.length;
+          const isShrinkingContent = nextVal.length < prevVal.length;
+          this.#$input.value = nextVal;
+          setFormValue(this.#internals, nextVal);
+          if (!this.resizable) {
+            if (isShrinkingContent) {
+              this.#$input.style.removeProperty("height");
             }
-            if (!isPrevCursorEnd) {
-              this.#$input.setSelectionRange(this.#cursorPos, this.#cursorPos);
+            const nextContentHeight = this.#$input.scrollHeight;
+            if (isShrinkingContent || nextContentHeight !== this.#prevContentHeight) {
+              this.#prevContentHeight = nextContentHeight;
+              this.#$input.style.setProperty("height", `${this.#prevContentHeight}px`);
             }
           }
-          break;
-        }
-      case 'placeholder':
-        {
-          this.#$input.placeholder = newVal ?? '';
-          updateAttribute(this, 'aria-placeholder', newVal);
-          this.#internals.ariaPlaceholder = newVal ?? '';
-          break;
-        }
-      case 'invalid':
-        {
-          if (isAttrEqual(oldVal, newVal)) {
-            break;
+          if (!isPrevCursorEnd) {
+            this.#$input.setSelectionRange(this.#cursorPos, this.#cursorPos);
           }
-          const isInvalid = isAttrTrue(newVal);
-          this.ariaInvalid = isInvalid.toString();
-          this.#internals.ariaInvalid = isInvalid.toString();
-          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 "placeholder": {
+        this.#$input.placeholder = newVal ?? "";
+        updateAttribute(this, "aria-placeholder", newVal);
+        this.#internals.ariaPlaceholder = newVal ?? "";
+        break;
+      }
+      case "invalid": {
+        if (isAttrEqual(oldVal, newVal)) {
           break;
         }
-      case 'rows':
-        {
-          updateAttribute(this.#$input, 'rows', newVal);
+        const isInvalid = isAttrTrue(newVal);
+        this.ariaInvalid = isInvalid.toString();
+        this.#internals.ariaInvalid = isInvalid.toString();
+        updateBooleanAttribute(this, "invalid", isInvalid);
+        break;
+      }
+      case "disabled": {
+        if (isAttrEqual(oldVal, newVal)) {
           break;
         }
-      case 'minrows':
-        {
-          this.#updateMinRows();
+        const isDisabled = isAttrTrue(newVal);
+        this.#$input.disabled = isDisabled;
+        updateBooleanAttribute(this, "disabled", isDisabled);
+        break;
+      }
+      case "rows": {
+        updateAttribute(this.#$input, "rows", newVal);
+        break;
+      }
+      case "minrows": {
+        this.#updateMinRows();
+        break;
+      }
+      case "resizable": {
+        if (isAttrEqual(oldVal, newVal)) {
           break;
         }
-      case 'resizable':
-        {
-          if (isAttrEqual(oldVal, newVal)) {
-            break;
-          }
-          const isNewValTrue = isAttrTrue(newVal);
-          updateBooleanAttribute(this, name, isNewValTrue);
-          if (hasClass(this.#$bottomWrapper, 'empty') && isNewValTrue) {
-            setClass(this.#$bottomWrapper, 'empty', false);
-          }
-          break;
+        const isNewValTrue = isAttrTrue(newVal);
+        updateBooleanAttribute(this, name, isNewValTrue);
+        if (hasClass(this.#$bottomWrapper, "empty") && isNewValTrue) {
+          setClass(this.#$bottomWrapper, "empty", false);
         }
+        break;
+      }
     }
   }
   set name(value) {
-    updateAttribute(this, 'name', value);
+    updateAttribute(this, "name", value);
   }
   get name() {
-    return getAttribute(this, 'name', '');
+    return getAttribute(this, "name", "");
   }
   set value(value) {
-    updateAttribute(this, 'value', value);
+    updateAttribute(this, "value", value);
   }
   get value() {
-    return getAttribute(this, 'value', '');
+    return getAttribute(this, "value", "");
   }
   set placeholder(value) {
-    updateAttribute(this, 'placeholder', value);
+    updateAttribute(this, "placeholder", value);
   }
   get placeholder() {
-    return getAttribute(this, 'placeholder');
+    return getAttribute(this, "placeholder");
   }
   set invalid(value) {
-    updateBooleanAttribute(this, 'invalid', value);
+    updateBooleanAttribute(this, "invalid", value);
   }
   get invalid() {
-    return getBooleanAttribute(this, 'invalid');
+    return getBooleanAttribute(this, "invalid");
   }
   set disabled(isDisabled) {
-    updateBooleanAttribute(this, 'disabled', isDisabled);
+    updateBooleanAttribute(this, "disabled", isDisabled);
   }
   get disabled() {
-    return getBooleanAttribute(this, 'disabled');
+    return getBooleanAttribute(this, "disabled");
   }
   set resizable(isResizable) {
-    updateBooleanAttribute(this, 'resizable', isResizable);
+    updateBooleanAttribute(this, "resizable", isResizable);
   }
   get resizable() {
-    return getBooleanAttribute(this, 'resizable');
+    return getBooleanAttribute(this, "resizable");
   }
   set rows(value) {
-    updateAttribute(this, 'rows', value);
+    updateAttribute(this, "rows", value);
   }
   get rows() {
-    return getIntegerAttribute(this, 'rows', 0);
+    return getIntegerAttribute(this, "rows", 0);
   }
   set minRows(value) {
-    updateAttribute(this, 'minrows', value);
+    updateAttribute(this, "minrows", value);
   }
   get minRows() {
-    return getIntegerAttribute(this, 'minrows', 0);
+    return getIntegerAttribute(this, "minrows", 0);
   }
   get selectionStart() {
     return this.#$input.selectionStart;
@@ -244,7 +247,7 @@ export class Textarea extends NectaryElement {
   #updateMinRows() {
     const minRows = this.minRows;
     if (minRows <= 0) {
-      this.#$input.style.removeProperty('min-height');
+      this.#$input.style.removeProperty("min-height");
       if (this.#intersectionObserver !== null) {
         this.#intersectionObserver.disconnect();
         this.#intersectionObserver = null;
@@ -254,22 +257,19 @@ export class Textarea extends NectaryElement {
         this.#calcMinRows();
       }
       if (this.#intersectionObserver === null) {
-        this.#intersectionObserver = new IntersectionObserver(this.#intersectionObserverCallback, {
-          root: null
-        });
+        this.#intersectionObserver = new IntersectionObserver(this.#intersectionObserverCallback, { root: null });
         this.#intersectionObserver.observe(this.#$input);
       }
     }
   }
-  #intersectionObserverCallback = _ref => {
-    let [entry] = _ref;
+  #intersectionObserverCallback = ([entry]) => {
     if (entry != null && entry.isIntersecting) {
       this.#calcMinRows();
     }
   };
   #calcMinRows() {
     this.#$input.rows = this.minRows;
-    this.#$input.style.setProperty('min-height', `${getRect(this.#$input).height}px`);
+    this.#$input.style.setProperty("min-height", `${getRect(this.#$input).height}px`);
     this.#$input.rows = this.rows;
   }
   #onCompositionStart = () => {
@@ -278,7 +278,7 @@ export class Textarea extends NectaryElement {
   #onSelectionChange = () => {
     this.#cursorPos = this.#$input.selectionEnd;
   };
-  #onInput = e => {
+  #onInput = (e) => {
     e.stopPropagation();
     const nextValue = this.#$input.value;
     const prevValue = this.value;
@@ -295,68 +295,63 @@ export class Textarea extends NectaryElement {
       }
       this.#isPendingDk = false;
       this.#cursorPos = nextCursorPos;
-      this.dispatchEvent(new CustomEvent('-change', {
-        detail: nextValue
-      }));
+      this.dispatchEvent(
+        new CustomEvent("-change", {
+          detail: nextValue
+        })
+      );
     }
   };
-  #onDragStart = e => {
+  #onDragStart = (e) => {
     if (this.#dragStartY !== 0) {
       return;
     }
     this.#dragStartY = e.clientY;
     this.#prevContentHeight = getRect(this.#$input).height;
-    window.addEventListener('mousemove', this.#onDragResize, {
-      signal: this.#controller.signal,
-      capture: true
-    });
-    window.addEventListener('mouseup', this.#onDragEnd, {
-      signal: this.#controller.signal,
-      capture: true
-    });
+    window.addEventListener("mousemove", this.#onDragResize, { signal: this.#controller.signal, capture: true });
+    window.addEventListener("mouseup", this.#onDragEnd, { signal: this.#controller.signal, capture: true });
   };
-  #onDragResize = e => {
+  #onDragResize = (e) => {
     const dy = e.clientY - this.#dragStartY;
     const height = Math.round(Math.max(0, this.#prevContentHeight + dy));
-    this.#$input.style.setProperty('height', `${height}px`);
+    this.#$input.style.setProperty("height", `${height}px`);
   };
   #onDragEnd = () => {
-    window.removeEventListener('mousemove', this.#onDragResize, {
-      capture: true
-    });
-    window.removeEventListener('mouseup', this.#onDragEnd, {
-      capture: true
-    });
+    window.removeEventListener("mousemove", this.#onDragResize, { capture: true });
+    window.removeEventListener("mouseup", this.#onDragEnd, { capture: true });
     this.#dragStartY = 0;
     this.#prevContentHeight = 0;
   };
   #onInputFocus = () => {
-    this.dispatchEvent(new CustomEvent('-focus'));
+    this.dispatchEvent(new CustomEvent("-focus"));
   };
   #onInputBlur = () => {
-    this.dispatchEvent(new CustomEvent('-blur'));
+    this.dispatchEvent(new CustomEvent("-blur"));
   };
   #onBottomSlotChange = () => {
     const isEmpty = this.#$bottomSlot.assignedElements().length === 0;
     if (!this.resizable) {
-      setClass(this.#$bottomWrapper, 'empty', isEmpty);
+      setClass(this.#$bottomWrapper, "empty", isEmpty);
     }
   };
   #onSizeUpdate() {
     if (!this.isDomConnected) {
       return;
     }
-    const size = this.getAttribute('data-size') ?? DEFAULT_SIZE;
+    const size = this.getAttribute("data-size") ?? DEFAULT_SIZE;
     this.#sizeContext.dispatch(size);
   }
-  #onChangeReactHandler = e => {
-    getReactEventHandler(this, 'on-change')?.(e);
+  #onChangeReactHandler = (e) => {
+    getReactEventHandler(this, "on-change")?.(e);
   };
   #onFocusReactHandler = () => {
-    getReactEventHandler(this, 'on-focus')?.();
+    getReactEventHandler(this, "on-focus")?.();
   };
   #onBlurReactHandler = () => {
-    getReactEventHandler(this, 'on-blur')?.();
+    getReactEventHandler(this, "on-blur")?.();
   };
 }
-defineCustomElement('sinch-textarea', Textarea);
+defineCustomElement("sinch-textarea", Textarea);
+export {
+  Textarea
+};