@nectary/components 0.17.0 → 0.18.0

package/accordion-item/index.d.ts

@@ -1,3 +1,4 @@
+import '../icon/keyboard-arrow-down';
 import type { TSinchElementReact } from '../types';
 import type { FocusEvent } from 'react';
 export declare const isAccordionItemElement: (element: EventTarget | Element | null) => element is TSinchAccordionItemElement;
@@ -6,6 +7,7 @@ export declare type TSinchAccordionStatusType = typeof statusValues[number];
 export declare type TSinchAccordionItemElement = HTMLElement & {
     value: string;
     label: string;
+    optionalText: string | null;
     disabled: boolean;
     checked: boolean;
     status: TSinchAccordionStatusType | null;
@@ -15,6 +17,7 @@ export declare type TSinchAccordionItemElement = HTMLElement & {
 export declare type TSinchAccordionItemReact = TSinchElementReact<TSinchAccordionItemElement> & {
     value: string;
     label: string;
+    optionalText?: string;
     disabled?: boolean;
     status?: TSinchAccordionStatusType;
     onFocus?: (e: FocusEvent<TSinchAccordionItemElement>) => void;

package/accordion-item/index.js

@@ -1,21 +1,22 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$button, _$buttonContent, _onButtonClick;
+var _$button, _$buttonContent, _$optionalText, _onButtonClick;
 
 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 '../icon/keyboard-arrow-down';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0;min-height:48px}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;height:100%;box-sizing:border-box;overflow:hidden;border-bottom:1px solid var(--sinch-color-stormy-200);--sinch-size-icon:16px}#button{all:initial;cursor:pointer;display:flex;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:48px;padding:12px 8px;font:var(--sinch-font-title-4);color:var(--sinch-color-text-default);fill:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button:disabled{cursor:initial;color:var(--sinch-color-stormy-100);fill:var(--sinch-color-stormy-100)}#button::before{width:8px;height:8px;border-radius:50%;margin-left:2px;margin-right:8px}:host([status=success]) #button::before{content:"";background-color:var(--sinch-color-success-500)}:host([status=warn]) #button::before{content:"";background-color:var(--sinch-color-warning-500)}:host([status=error]) #button::before{content:"";background-color:var(--sinch-color-error-500)}:host([status=info]) #button::before{content:"";background-color:var(--sinch-color-informative-500)}#title{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#content{display:none;overflow-y:auto;flex-shrink:1;min-height:0;padding:0 8px 18px;font:var(--sinch-font-body);color:var(--sinch-color-text-default)}#button[aria-expanded=true]>#dropdown-icon{transform:rotate(180deg)}#button[aria-expanded=true]+#content{display:block}</style><div id="wrapper"><button id="button" aria-controls="content" aria-expanded="false"><slot name="icon"></slot><span id="title"></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><div id="content" role="region" aria-labelledby="button"><slot name="content"></slot></div></div>';
+const templateHTML = '<style>:host{display:block;outline:0;min-height:48px}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;height:100%;box-sizing:border-box;overflow:hidden;border-bottom:1px solid var(--sinch-color-stormy-200);--sinch-size-icon:16px}#button{all:initial;cursor:pointer;display:flex;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:48px;padding:12px 8px;font:var(--sinch-font-title-4);color:var(--sinch-color-text-default);fill:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button:disabled{cursor:initial;color:var(--sinch-color-stormy-100);fill:var(--sinch-color-stormy-100)}#button::before{width:8px;height:8px;border-radius:50%;margin-left:2px;margin-right:8px}:host([status=success]) #button::before{content:"";background-color:var(--sinch-color-success-500)}:host([status=warn]) #button::before{content:"";background-color:var(--sinch-color-warning-500)}:host([status=error]) #button::before{content:"";background-color:var(--sinch-color-error-500)}:host([status=info]) #button::before{content:"";background-color:var(--sinch-color-informative-500)}#title{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#content{display:none;overflow-y:auto;flex-shrink:1;min-height:0;padding:0 8px 18px;font:var(--sinch-font-body);color:var(--sinch-color-text-default)}#dropdown-icon{--sinch-size-icon:24px}#button[aria-expanded=true]>#dropdown-icon{transform:rotate(180deg)}#button[aria-expanded=true]+#content{display:block}#optional{font:var(--sinch-font-small-text);color:var(--sinch-color-stormy-300)}</style><div id="wrapper"><button id="button" aria-controls="content" aria-expanded="false"><slot name="icon"></slot><span id="title"></span> <span id="optional"></span><sinch-icon-keyboard-arrow-down id="dropdown-icon"></sinch-icon-keyboard-arrow-down></button><div id="content" role="region" aria-labelledby="button"><slot name="content"></slot></div></div>';
 export const isAccordionItemElement = element => {
   return element instanceof Element && element.tagName === 'SINCH-ACCORDION-ITEM';
 };
 const statusValues = ['info', 'success', 'warn', 'error'];
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-accordion-item', (_$button = new WeakMap(), _$buttonContent = new WeakMap(), _onButtonClick = new WeakMap(), class extends HTMLElement {
+defineCustomElement('sinch-accordion-item', (_$button = new WeakMap(), _$buttonContent = new WeakMap(), _$optionalText = new WeakMap(), _onButtonClick = new WeakMap(), class extends HTMLElement {
   constructor() {
     super();
 
@@ -29,6 +30,11 @@ defineCustomElement('sinch-accordion-item', (_$button = new WeakMap(), _$buttonC
       value: void 0
     });
 
+    _classPrivateFieldInitSpec(this, _$optionalText, {
+      writable: true,
+      value: void 0
+    });
+
     _classPrivateFieldInitSpec(this, _onButtonClick, {
       writable: true,
       value: e => {
@@ -52,6 +58,8 @@ defineCustomElement('sinch-accordion-item', (_$button = new WeakMap(), _$buttonC
     _classPrivateFieldSet(this, _$button, shadowRoot.querySelector('#button'));
 
     _classPrivateFieldSet(this, _$buttonContent, shadowRoot.querySelector('#title'));
+
+    _classPrivateFieldSet(this, _$optionalText, shadowRoot.querySelector('#optional'));
   }
 
   connectedCallback() {
@@ -63,7 +71,7 @@ defineCustomElement('sinch-accordion-item', (_$button = new WeakMap(), _$buttonC
   }
 
   static get observedAttributes() {
-    return ['label', 'disabled', 'checked'];
+    return ['label', 'disabled', 'checked', 'optionaltext'];
   }
 
   set value(value) {
@@ -106,6 +114,14 @@ defineCustomElement('sinch-accordion-item', (_$button = new WeakMap(), _$buttonC
     updateLiteralAttribute(this, statusValues, 'status', value);
   }
 
+  set optionalText(value) {
+    updateAttribute(this, 'optionaltext', value);
+  }
+
+  get optionalText() {
+    return getAttribute(this, 'optionaltext', null);
+  }
+
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
       case 'label':
@@ -125,6 +141,12 @@ defineCustomElement('sinch-accordion-item', (_$button = new WeakMap(), _$buttonC
           updateAttribute(_classPrivateFieldGet(this, _$button), 'aria-expanded', isAttrTrue(newVal));
           break;
         }
+
+      case 'optionaltext':
+        {
+          _classPrivateFieldGet(this, _$optionalText).textContent = newVal;
+          break;
+        }
     }
   }
 

package/avatar/index.d.ts

@@ -0,0 +1,29 @@
+import '../icon/cancel';
+import type { TSinchElementReact } from '../types';
+declare const backgroundValues: readonly ["grey", "yellow", "blue"];
+declare const sizeValues: readonly ["l", "m", "s"];
+export declare type TSinchAvatarBackground = typeof backgroundValues[number];
+export declare type TSinchAvatarSize = typeof sizeValues[number];
+export declare type TSinchAvatarElement = HTMLElement & {
+    alt: string;
+    src: string | null;
+    background: TSinchAvatarBackground;
+    size: TSinchAvatarSize;
+};
+export declare type TSinchAvatarReact = TSinchElementReact<TSinchAvatarElement> & {
+    alt: string;
+    src?: string;
+    background?: TSinchAvatarBackground;
+    size?: TSinchAvatarSize;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-avatar': TSinchAvatarReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-avatar': TSinchAvatarElement;
+    }
+}
+export {};

package/avatar/index.js

@@ -0,0 +1,94 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$text, _$image;
+
+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 '../icon/cancel';
+import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:32px;height:32px;font:var(--sinch-font-title-5);line-height:30px;color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-700);text-align:center;border-radius:50%;border:1px solid var(--sinch-color-snow-100);box-sizing:border-box;overflow:hidden}:host([background=blue]) #wrapper{background-color:var(--sinch-color-stormy-500);color:var(--sinch-color-snow-100)}:host([background=yellow]) #wrapper{background-color:var(--sinch-color-honey-500)}:host([size="l"]) #wrapper{width:40px;height:40px;font:var(--sinch-font-title-4);line-height:38px}:host([size="s"]) #wrapper{width:24px;height:24px;font:var(--sinch-font-extra-small-text);line-height:22px}#text{display:block;width:100%;height:100%;box-sizing:border-box}#image{display:none;width:100%;height:100%;object-fit:contain;position:absolute;left:0;top:0}:host([src]:not([src=""])) #image{display:block}</style><div id="wrapper"><span id="text"></span><img id="image" alt=""/></div>';
+const backgroundValues = ['grey', 'yellow', 'blue'];
+const sizeValues = ['l', 'm', 's'];
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-avatar', (_$text = new WeakMap(), _$image = new WeakMap(), class extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$text, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$image, {
+      writable: true,
+      value: void 0
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'closed'
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#text'));
+
+    _classPrivateFieldSet(this, _$image, shadowRoot.querySelector('#image'));
+  }
+
+  get src() {
+    return getAttribute(this, 'src', null);
+  }
+
+  set src(value) {
+    updateAttribute(this, 'src', value);
+  }
+
+  get alt() {
+    return getAttribute(this, 'alt', '');
+  }
+
+  set alt(value) {
+    updateAttribute(this, 'alt', value);
+  }
+
+  get background() {
+    return getLiteralAttribute(this, backgroundValues, 'background', 'grey');
+  }
+
+  set background(value) {
+    updateLiteralAttribute(this, backgroundValues, 'background', value);
+  }
+
+  get size() {
+    return getLiteralAttribute(this, sizeValues, 'size', 'm');
+  }
+
+  set size(value) {
+    updateLiteralAttribute(this, sizeValues, 'size', value);
+  }
+
+  static get observedAttributes() {
+    return ['alt', 'src'];
+  }
+
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'alt':
+        {
+          _classPrivateFieldGet(this, _$text).textContent = newVal;
+          _classPrivateFieldGet(this, _$image).alt = newVal ?? '';
+          break;
+        }
+
+      case 'src':
+        {
+          _classPrivateFieldGet(this, _$image).src = newVal ?? '';
+          break;
+        }
+    }
+  }
+
+}));

package/colors.json

@@ -0,0 +1,69 @@
+{
+  "colorHoney700": "#CC8800",
+  "colorHoney600": "#FFAA00",
+  "colorHoney500": "#FFBE3C",
+  "colorHoney400": "#FFCC66",
+  "colorHoney300": "#FFDD99",
+  "colorHoney200": "#FFEECC",
+  "colorHoney100": "#FFF7E6",
+  "colorTropical700": "#003D3D",
+  "colorTropical600": "#005757",
+  "colorTropical500": "#007171",
+  "colorTropical400": "#338D8D",
+  "colorTropical300": "#66AAAA",
+  "colorTropical200": "#99C6C6",
+  "colorTropical100": "#CCE3E3",
+  "colorStormy600": "#061927",
+  "colorStormy500": "#0A273D",
+  "colorStormy400": "#3B5264",
+  "colorStormy300": "#677784",
+  "colorStormy200": "#7F8F99",
+  "colorStormy100": "#9CA8B0",
+  "colorSnow800": "#C6CDD2",
+  "colorSnow700": "#D4DADD",
+  "colorSnow600": "#E3E6E8",
+  "colorSnow500": "#F1F3F4",
+  "colorSnow100": "#FFFFFF",
+  "colorRaspberry700": "#881125",
+  "colorRaspberry600": "#B61631",
+  "colorRaspberry500": "#E31C3D",
+  "colorRaspberry400": "#E94964",
+  "colorRaspberry300": "#EE778B",
+  "colorRaspberry200": "#F4A4B1",
+  "colorRaspberry100": "#F9D2D8",
+  "colorTextDefault": "#0A273D",
+  "colorTextInverted": "#FFFFFF",
+  "colorTextMuted": "#677784",
+  "colorTextLink": "#007171",
+  "colorTextInvalid": "#E31C3D",
+  "colorError800": "#57000E",
+  "colorError500": "#E31C3D",
+  "colorError200": "#FCD7D4",
+  "colorSuccess700": "#005419",
+  "colorSuccess500": "#2E8540",
+  "colorSuccess200": "#D7F1D8",
+  "colorInformative700": "#003B7E",
+  "colorInformative500": "#2071CE",
+  "colorInformative200": "#D5E5F8",
+  "colorWarning700": "#9C2E00",
+  "colorWarning500": "#F35B1C",
+  "colorWarning200": "#FFE8D6",
+  "colorNight400": "#3247E9",
+  "colorNight200": "#D1D6FA",
+  "colorAqua400": "#3DAED8",
+  "colorAqua200": "#AADBEE",
+  "colorGrass400": "#39B93D",
+  "colorGrass200": "#B4E4B5",
+  "colorDirt400": "#828282",
+  "colorDirt200": "#E0DDDC",
+  "colorBerry400": "#F95252",
+  "colorBerry200": "#FCA7A7",
+  "colorCandy400": "#E467C3",
+  "colorCandy200": "#F6CBEA",
+  "colorMud400": "#8B6559",
+  "colorMud200": "#D7C6C1",
+  "colorOrange400": "#FF8C34",
+  "colorOrange200": "#FFD4B3",
+  "colorBolt400": "#FFBE3C",
+  "colorBolt200": "#FFE6B3"
+}

package/index.d.ts

@@ -138,3 +138,4 @@ import './search';
 import './search-option';
 import './segment';
 import './segment-collapse';
+import './avatar';

package/index.js

@@ -137,4 +137,5 @@ import './icon-button';
 import './search';
 import './search-option';
 import './segment';
-import './segment-collapse';
+import './segment-collapse';
+import './avatar';

package/input/index.d.ts

@@ -11,6 +11,9 @@ export declare type TSinchInputElement = HTMLElement & {
     invalidText: string | null;
     additionalText: string | null;
     disabled: boolean;
+    selectionStart: HTMLInputElement['selectionStart'];
+    selectionEnd: HTMLInputElement['selectionEnd'];
+    selectionDirection: HTMLInputElement['selectionDirection'];
     focus(): void;
     blur(): void;
 };

package/input/index.js

@@ -208,6 +208,30 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
     return getBooleanAttribute(this, 'disabled');
   }
 
+  get selectionStart() {
+    return _classPrivateFieldGet(this, _$input).selectionStart;
+  }
+
+  set selectionStart(value) {
+    _classPrivateFieldGet(this, _$input).selectionStart = value;
+  }
+
+  get selectionEnd() {
+    return _classPrivateFieldGet(this, _$input).selectionEnd;
+  }
+
+  set selectionEnd(value) {
+    _classPrivateFieldGet(this, _$input).selectionEnd = value;
+  }
+
+  get selectionDirection() {
+    return _classPrivateFieldGet(this, _$input).selectionDirection;
+  }
+
+  set selectionDirection(value) {
+    _classPrivateFieldGet(this, _$input).selectionDirection = value;
+  }
+
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case 'type':

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "files": [
     "theme.css",
     "**/*/*.js",
@@ -9,7 +9,8 @@
     "utils.d.ts",
     "index.js",
     "index.d.ts",
-    "types.d.ts"
+    "types.d.ts",
+    "colors.json"
   ],
   "scripts": {
     "prebuild": "rimraf utils.{js,d.ts} index.{js,d.ts} */*.{js,d.ts} */**/*.{js,d.ts}",

package/search/index.d.ts

@@ -1,5 +1,6 @@
 import '../icon/search';
 import '../icon/close';
+import '../icon-button';
 import type { TRect, TSinchElementReact } from '../types';
 import type { FocusEvent, SyntheticEvent } from 'react';
 export declare type TSinchSearchElement = HTMLElement & {

package/search/index.js

@@ -13,9 +13,10 @@ function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(
 
 import { isSearchOptionElement } from '../search-option';
 import { attrValueToPixels, defineCustomElement, getAttribute, getIntegerAttribute, getRect, updateAttribute, updateIntegerAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:100%;box-sizing:border-box;--sinch-size-icon:24px}#label{display:none;font:var(--sinch-font-title-4);color:var(--sinch-color-text-default);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;height:24px;margin-bottom:2px}#input{all:initial;display:block;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:4px;width:100%;height:48px;padding: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)}#input:focus{border-color:var(--sinch-color-stormy-600)}#icon-search{position:absolute;left:12px;top:12px;pointer-events:none;--sinch-color-icon:var(--sinch-color-stormy-500)}#clear{all:initial;position:absolute;right:8px;top:8px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;--sinch-color-icon:var(--sinch-color-stormy-300)}#clear:focus{--sinch-color-icon:var(--sinch-color-stormy-500)}:host([value=""]) #clear{display:none}:host([value=""]) #input{padding-right:12px}#listbox{display:none;position:absolute;z-index:1;left:0;top:calc(100% + 8px);width:100%;box-sizing:border-box;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:1px 2px 4px rgb(0 0 0 / 15%);overflow-y:auto;contain:content}:host([aria-expanded=true]) #listbox{display:block}:host([label]:not([label=""])) #label{display:block}</style><label id="label" for="input"></label><div id="wrapper"><input id="input" type="text"/><sinch-icon-search id="icon-search"></sinch-icon-search><button id="clear"><sinch-icon-close id="icon-close"></sinch-icon-close></button><div id="listbox"><slot name="option"></slot></div></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:100%;box-sizing:border-box;--sinch-size-icon:24px}#label{display:none;font:var(--sinch-font-title-4);color:var(--sinch-color-text-default);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;height:24px;margin-bottom:2px}#input{all:initial;display:block;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:4px;width:100%;height:48px;padding:0 44px;padding-right:12px;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:focus{border-color:var(--sinch-color-stormy-600)}#icon-search{position:absolute;left:12px;top:12px;pointer-events:none;--sinch-color-icon:var(--sinch-color-stormy-500)}#clear{position:absolute;right:8px;top:8px;display:none;--sinch-color-icon:red}#clear:focus{--sinch-color-icon:var(--sinch-color-stormy-500)}:host([value]:not([value=""])) #clear{display:flex}:host([value]:not([value=""])) #input{padding-right:44px}#listbox{display:none;position:absolute;z-index:1;left:0;top:calc(100% + 8px);width:100%;box-sizing:border-box;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:1px 2px 4px rgb(0 0 0 / 15%);overflow-y:auto;contain:content}:host([aria-expanded=true]) #listbox{display:block}:host([label]:not([label=""])) #label{display:block}</style><label id="label" for="input"></label><div id="wrapper"><input id="input" type="text"/><sinch-icon-search id="icon-search"></sinch-icon-search><sinch-icon-button id="clear" small><sinch-icon-close id="icon-close" slot="icon"></sinch-icon-close></sinch-icon-button><div id="listbox"><slot name="option"></slot></div></div>';
 import '../icon/search';
 import '../icon/close';
+import '../icon-button';
 const ITEM_HEIGHT = 40;
 
 const findSelectedOption = elements => {

package/textarea/index.d.ts

@@ -8,6 +8,11 @@ export declare type TSinchTextareaElement = HTMLElement & {
     invalidText: string | null;
     additionalText: string | null;
     disabled: boolean;
+    selectionStart: HTMLTextAreaElement['selectionStart'];
+    selectionEnd: HTMLTextAreaElement['selectionEnd'];
+    selectionDirection: HTMLTextAreaElement['selectionDirection'];
+    rows: HTMLTextAreaElement['rows'];
+    resizable: boolean;
     focus(): void;
     blur(): void;
 };
@@ -20,6 +25,8 @@ export declare type TSinchTextareaReact = TSinchElementReact<TSinchTextareaEleme
     additionalText?: string;
     disabled?: boolean;
     'aria-label': string;
+    rows?: number;
+    resizable?: boolean;
     onChange: (e: SyntheticEvent<TSinchTextareaElement, CustomEvent<string>>) => void;
     onKeyPress?: DOMAttributes<TSinchTextareaElement>['onKeyPress'];
     onFocus?: (e: FocusEvent<TSinchTextareaElement>) => void;

package/textarea/index.js

@@ -7,8 +7,8 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
 
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 
-import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--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:4px;width:100%;min-height:86px;margin:2px 0;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto);resize:vertical}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#input:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:focus{border-color:var(--sinch-color-stormy-600)}:host([invalidtext]:not([invalidtext=""])) #input:not(:disabled){border-color:var(--sinch-color-text-invalid)}#bottom,#top{display:flex;align-items:baseline}#top{height:24px}#bottom{height:20px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-4);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted)}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid)}::slotted(sinch-help-tooltip){align-self:center;margin:0 8px}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])){--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><slot name="tooltip"></slot><span id="optional"></span></div><textarea id="input" rows="3"></textarea><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute } 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:4px;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);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-4);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted)}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid)}::slotted(sinch-help-tooltip){align-self:center;margin:0 8px}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])){--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><slot name="tooltip"></slot><span id="optional"></span></div><textarea id="input"></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 HTMLElement {
@@ -137,7 +137,7 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
   }
 
   static get observedAttributes() {
-    return ['value', 'placeholder', 'label', 'optionaltext', 'additionaltext', 'invalidtext', 'disabled'];
+    return ['value', 'placeholder', 'label', 'optionaltext', 'additionaltext', 'invalidtext', 'disabled', 'rows'];
   }
 
   attributeChangedCallback(name, _, newVal) {
@@ -195,6 +195,12 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
           _classPrivateFieldGet(this, _$input).disabled = isAttrTrue(newVal);
           break;
         }
+
+      case 'rows':
+        {
+          updateAttribute(_classPrivateFieldGet(this, _$input), 'rows', newVal);
+          break;
+        }
     }
   }
 
@@ -258,6 +264,46 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
     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 _classPrivateFieldGet(this, _$input).selectionStart;
+  }
+
+  set selectionStart(value) {
+    _classPrivateFieldGet(this, _$input).selectionStart = value;
+  }
+
+  get selectionEnd() {
+    return _classPrivateFieldGet(this, _$input).selectionEnd;
+  }
+
+  set selectionEnd(value) {
+    _classPrivateFieldGet(this, _$input).selectionEnd = value;
+  }
+
+  get selectionDirection() {
+    return _classPrivateFieldGet(this, _$input).selectionDirection;
+  }
+
+  set selectionDirection(value) {
+    _classPrivateFieldGet(this, _$input).selectionDirection = value;
+  }
+
   focus() {
     _classPrivateFieldGet(this, _$input).focus();
   }