@nectary/components 0.27.0 → 0.29.0

package/table-head-cell/index.js

@@ -7,11 +7,11 @@ 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 { alignValues } from '../table-cell/utils';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:table-cell;border-bottom:1px solid var(--sinch-color-stormy-200);height:48px;vertical-align:middle;padding:0 6px;--sinch-color-icon:var(--sinch-color-stormy-200)}:host(:first-child){padding-left:8px}:host(:last-child){padding-right:8px}#wrapper{position:relative;display:flex;align-items:center;gap:8px;width:100%;height:100%;box-sizing:border-box;font:var(--sinch-font-title-s);color:var(--sinch-color-stormy-300);--sinch-icon-button-color:var(--sinch-color-stormy-100)}#text{flex-shrink:1;min-width:0;font:var(--sinch-font-title-s);color:var(--sinch-color-stormy-200);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([align=center])>#wrapper{justify-content:center}:host([align=end])>#wrapper{justify-content:flex-end}:host(:is([text=""],:not([text])))>#wrapper{display:none}:host([fit]:not([fit=false])){width:1px}</style><slot name="checkbox"></slot><div id="wrapper"><slot name="left"></slot><span id="text"></span><slot name="tooltip"></slot><slot name="right"></slot></div>';
+const templateHTML = '<style>:host{display:table-cell;border-bottom:1px solid var(--sinch-color-stormy-200);vertical-align:middle;--sinch-color-icon:var(--sinch-color-stormy-200)}#wrapper{position:relative;display:flex;align-items:center;gap:8px;width:100%;height:100%;padding:8px;box-sizing:border-box;font:var(--sinch-font-title-s);color:var(--sinch-color-stormy-300);--sinch-icon-button-color:var(--sinch-color-stormy-100)}#text{flex-shrink:1;min-width:0;font:var(--sinch-font-title-s);color:var(--sinch-color-stormy-200)}:host([align=center])>#wrapper{justify-content:center}:host([align=end])>#wrapper{justify-content:flex-end}:host(:is([text=""],:not([text]))) #text{display:none}:host([fit]:not([fit=false])){width:1px}</style><div id="wrapper"><slot name="checkbox"></slot><slot name="left"></slot><span id="text"></span><slot name="tooltip"></slot><slot name="right"></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-const alignValues = ['start', 'center', 'end'];
 defineCustomElement('sinch-table-head-cell', (_$text = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();

package/table-head-cell/types.d.ts

@@ -0,0 +1,15 @@
+import type { TAlignType } from '../table-cell/types';
+import type { TSinchElementReact } from '../types';
+export declare type TSinchTableHeaderCellElement = HTMLElement & {
+    text: string | null;
+    align: TAlignType;
+    fit: boolean;
+    setAttribute(name: 'text', value: string): void;
+    setAttribute(name: 'align', value: TAlignType): void;
+    setAttribute(name: 'fit', value: ''): void;
+};
+export declare type TSinchTableHeaderCellReact = TSinchElementReact<TSinchTableHeaderCellElement> & {
+    text?: string;
+    fit?: boolean;
+    align?: TAlignType;
+};

package/table-head-cell/types.js

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

package/table-row/index.d.ts

@@ -1,12 +1,4 @@
-import type { TSinchElementReact } from '../types';
-export declare type TSinchTableRowElement = HTMLElement & {
-    sticky: boolean;
-    selected: boolean;
-};
-export declare type TSinchTableRowReact = TSinchElementReact<TSinchTableRowElement> & {
-    sticky?: boolean;
-    selected?: boolean;
-};
+import type { TSinchTableRowElement, TSinchTableRowReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/table-row/types.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchTableRowElement = HTMLElement & {
+    sticky: boolean;
+    selected: boolean;
+    setAttribute(name: 'sticky', value: ''): void;
+    setAttribute(name: 'selected', value: ''): void;
+};
+export declare type TSinchTableRowReact = TSinchElementReact<TSinchTableRowElement> & {
+    sticky?: boolean;
+    selected?: boolean;
+};

package/table-row/types.js

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

package/tabs/index.d.ts

@@ -1,13 +1,4 @@
-import type { TSinchElementReact } from '../types';
-import type { SyntheticEvent } from 'react';
-export declare type TSinchTabsElement = HTMLElement & {
-    value: string;
-};
-export declare type TSinchTabsReact = TSinchElementReact<TSinchTabsElement> & {
-    value: string;
-    'aria-label': string;
-    onChange: (event: SyntheticEvent<TSinchTabsElement, CustomEvent<string>>) => void;
-};
+import type { TSinchTabsElement, TSinchTabsReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/tabs/types.d.ts

@@ -0,0 +1,12 @@
+import type { TSinchElementReact } from '../types';
+import type { SyntheticEvent } from 'react';
+export declare type TSinchTabsElement = HTMLElement & {
+    value: string;
+    addEventListener(type: 'change', listener: (e: CustomEvent<string>) => void): void;
+    setAttribute(name: 'value', value: string): void;
+};
+export declare type TSinchTabsReact = TSinchElementReact<TSinchTabsElement> & {
+    value: string;
+    'aria-label': string;
+    onChange: (event: SyntheticEvent<TSinchTabsElement, CustomEvent<string>>) => void;
+};

package/tabs/types.js

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

package/tabs-option/index.d.ts

@@ -1,22 +1,4 @@
-import type { TSinchElementReact } from '../types';
-import type { FocusEvent } from 'react';
-export declare const isTabsOptionElement: (element: EventTarget | Element | null) => element is TSinchTabsOptionElement;
-export declare type TSinchTabsOptionElement = HTMLElement & {
-    value: string;
-    disabled: boolean;
-    checked: boolean;
-    text: string;
-    focus(): void;
-    blur(): void;
-};
-export declare type TSinchTabsOptionReact = TSinchElementReact<TSinchTabsOptionElement> & {
-    value: string;
-    disabled?: boolean;
-    text: string;
-    'aria-label': string;
-    onFocus?: (e: FocusEvent<TSinchTabsOptionElement>) => void;
-    onBlur?: (e: FocusEvent<TSinchTabsOptionElement>) => void;
-};
+import type { TSinchTabsOptionElement, TSinchTabsOptionReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/tabs-option/index.js

@@ -1,22 +1,30 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _onClick;
+var _$button, _$label, _onClick;
 
 function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
 
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 
-import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0}:host()>*{pointer-events:none}#wrapper{display:flex;flex-direction:row;align-items:center;gap:12px;position:relative;width:100%;height:42px;padding:8px 20px;box-sizing:border-box;box-shadow:0 1px 0 0 var(--sinch-color-stormy-100);color:var(--sinch-color-stormy-500);background-color:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:16px}#content{font:var(--sinch-font-title-s);flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([checked]:not([checked=false])) #wrapper{box-shadow:0 2px 0 0 var(--sinch-color-stormy-500)}#button{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer}#button:disabled{cursor:unset}:host([disabled]:not([disabled=false])) #wrapper{color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><slot name="icon"></slot><label for="input" id="content"></label> <button id="button" type="radio"/></div>';
-export const isTabsOptionElement = element => {
-  return element instanceof Element && element.tagName === 'SINCH-TABS-OPTION';
-};
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-tabs-option', (_onClick = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-tabs-option', (_$button = new WeakMap(), _$label = new WeakMap(), _onClick = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
+    _classPrivateFieldInitSpec(this, _$button, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$label, {
+      writable: true,
+      value: void 0
+    });
+
     _classPrivateFieldInitSpec(this, _onClick, {
       writable: true,
       value: e => {
@@ -30,17 +38,20 @@ defineCustomElement('sinch-tabs-option', (_onClick = new WeakMap(), class extend
 
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.$button = shadowRoot.querySelector('#button');
-    this.$label = shadowRoot.querySelector('#content');
+
+    _classPrivateFieldSet(this, _$button, shadowRoot.querySelector('#button'));
+
+    _classPrivateFieldSet(this, _$label, shadowRoot.querySelector('#content'));
   }
 
   connectedCallback() {
     this.setAttribute('role', 'tab');
-    this.$button.addEventListener('click', _classPrivateFieldGet(this, _onClick));
+
+    _classPrivateFieldGet(this, _$button).addEventListener('click', _classPrivateFieldGet(this, _onClick));
   }
 
   disconnectedCallback() {
-    this.$button.removeEventListener('click', _classPrivateFieldGet(this, _onClick));
+    _classPrivateFieldGet(this, _$button).removeEventListener('click', _classPrivateFieldGet(this, _onClick));
   }
 
   static get observedAttributes() {
@@ -83,30 +94,32 @@ defineCustomElement('sinch-tabs-option', (_onClick = new WeakMap(), class extend
     switch (name) {
       case 'text':
         {
-          this.$label.textContent = newVal;
+          _classPrivateFieldGet(this, _$label).textContent = newVal;
           break;
         }
 
       case 'checked':
         {
-          updateAttribute(this, 'aria-selected', isAttrTrue(newVal));
+          updateExplicitBooleanAttribute(this, 'aria-selected', isAttrTrue(newVal));
           break;
         }
 
       case 'disabled':
         {
-          this.$button.disabled = isAttrTrue(newVal);
+          const isDisabled = isAttrTrue(newVal);
+          _classPrivateFieldGet(this, _$button).disabled = isDisabled;
+          updateBooleanAttribute(this, 'disabled', isDisabled);
           break;
         }
     }
   }
 
   focus() {
-    this.$button.focus();
+    _classPrivateFieldGet(this, _$button).focus();
   }
 
   blur() {
-    this.$button.blur();
+    _classPrivateFieldGet(this, _$button).blur();
   }
 
 }));

package/tabs-option/types.d.ts

@@ -0,0 +1,19 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchTabsOptionElement = HTMLElement & {
+    value: string;
+    disabled: boolean;
+    checked: boolean;
+    text: string;
+    focus(): void;
+    blur(): void;
+    setAttribute(name: 'value', value: string): void;
+    setAttribute(name: 'disabled', value: ''): void;
+    setAttribute(name: 'checked', value: ''): void;
+    setAttribute(name: 'text', value: string): void;
+};
+export declare type TSinchTabsOptionReact = TSinchElementReact<TSinchTabsOptionElement> & {
+    value: string;
+    disabled?: boolean;
+    text: string;
+    'aria-label': string;
+};

package/tabs-option/types.js

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

package/tag/index.d.ts

@@ -1,19 +1,5 @@
 import '../icons/cancel';
-import type { TSinchElementReact } from '../types';
-declare const categoryValues: readonly ["candy", "bolt", "aqua", "grass", "berry", "orange", "night", "mud", "dirt"];
-export declare type TSinchTagCategory = typeof categoryValues[number];
-export declare type TSinchTagElement = HTMLElement & {
-    category: TSinchTagCategory | null;
-    text: string;
-    inverted: boolean;
-    small: boolean;
-};
-export declare type TSinchTagReact = TSinchElementReact<TSinchTagElement> & {
-    category?: TSinchTagCategory;
-    text: string;
-    inverted?: boolean;
-    small?: boolean;
-};
+import type { TSinchTagElement, TSinchTagReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -24,4 +10,3 @@ declare global {
         'sinch-tag': TSinchTagElement;
     }
 }
-export {};

package/tag/index.js

@@ -10,7 +10,7 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 import '../icons/cancel';
 import { defineCustomElement, getBooleanAttribute, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, NectaryElement } 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;position:relative;padding:2px 8px;border-radius:12px;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-600);width:100%;height:24px;box-sizing:border-box;--sinch-color-icon:var(--sinch-color-stormy-400);--sinch-size-icon:16px}:host([category=candy])>#wrapper{background-color:var(--sinch-color-candy-200)}:host([category=bolt])>#wrapper{background-color:var(--sinch-color-bolt-200)}:host([category=aqua])>#wrapper{background-color:var(--sinch-color-aqua-200)}:host([category=grass])>#wrapper{background-color:var(--sinch-color-grass-200)}:host([category=berry])>#wrapper{background-color:var(--sinch-color-berry-200)}:host([category=orange])>#wrapper{background-color:var(--sinch-color-orange-200)}:host([category=night])>#wrapper{background-color:var(--sinch-color-night-200)}:host([category=mud])>#wrapper{background-color:var(--sinch-color-mud-200)}:host([category=dirt])>#wrapper{background-color:var(--sinch-color-dirt-200)}:host([inverted]:not([inverted=false]))>#wrapper{background-color:var(--sinch-color-stormy-500);color:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-snow-100)}:host([small]:not([small=false])) #wrapper{height:20px;border-radius:10px;padding:0 8px;--sinch-size-icon:14px}#text{text-overflow:ellipsis;white-space:nowrap;overflow:auto;flex:1}</style><div id="wrapper"><slot name="icon"></slot><span id="text"></span><slot name="close"></slot></div>';
-const categoryValues = ['candy', 'bolt', 'aqua', 'grass', 'berry', 'orange', 'night', 'mud', 'dirt'];
+import { categoryValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-tag', (_$text = new WeakMap(), class extends NectaryElement {

package/tag/types.d.ts

@@ -0,0 +1,19 @@
+import type { TSinchElementReact } from '../types';
+import type { categoryValues } from './utils';
+export declare type TSinchTagCategory = typeof categoryValues[number];
+export declare type TSinchTagElement = HTMLElement & {
+    category: TSinchTagCategory | null;
+    text: string;
+    inverted: boolean;
+    small: boolean;
+    setAttribute(name: 'category', value: TSinchTagCategory): void;
+    setAttribute(name: 'text', value: string): void;
+    setAttribute(name: 'inverted', value: ''): void;
+    setAttribute(name: 'small', value: ''): void;
+};
+export declare type TSinchTagReact = TSinchElementReact<TSinchTagElement> & {
+    category?: TSinchTagCategory;
+    text: string;
+    inverted?: boolean;
+    small?: boolean;
+};

package/tag/types.js

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

package/tag/utils.d.ts

@@ -0,0 +1 @@
+export declare const categoryValues: readonly ["candy", "bolt", "aqua", "grass", "berry", "orange", "night", "mud", "dirt"];

package/tag/utils.js

@@ -0,0 +1 @@
+export const categoryValues = ['candy', 'bolt', 'aqua', 'grass', 'berry', 'orange', 'night', 'mud', 'dirt'];

package/tag-close/index.d.ts

@@ -1,15 +1,5 @@
 import '../icons/cancel';
-import type { TSinchElementReact } from '../types';
-import type { FocusEvent, MouseEvent } from 'react';
-export declare type TSinchTagCloseElement = HTMLElement & {
-    focus(): void;
-    blur(): void;
-};
-export declare type TSinchTagCloseReact = TSinchElementReact<TSinchTagCloseElement> & {
-    onClick?: (e: MouseEvent<TSinchTagCloseElement>) => void;
-    onFocus?: (e: FocusEvent<TSinchTagCloseElement>) => void;
-    onBlur?: (e: FocusEvent<TSinchTagCloseElement>) => void;
-};
+import type { TSinchTagCloseElement, TSinchTagCloseReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/tag-close/types.d.ts

@@ -0,0 +1,6 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchTagCloseElement = HTMLElement & {
+    focus(): void;
+    blur(): void;
+};
+export declare type TSinchTagCloseReact = TSinchElementReact<TSinchTagCloseElement>;

package/tag-close/types.js

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

package/text/index.d.ts

@@ -0,0 +1,12 @@
+import '../icons/cancel';
+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,65 @@
+import '../icons/cancel';
+import { defineCustomElement, getBooleanAttribute, updateBooleanAttribute, NectaryElement, getLiteralAttribute, updateLiteralAttribute, isAttrTrue } from '../utils';
+const templateHTML = '<style>:host{display:block;font:var(--sinch-font-text-m)}:host([inline]:not([inline=false])){display:inline}:host([emphasized]:not([emphasized=false])){font-weight:var(--sinch-font-weight-emphasized)}:host([type="s"]){font:var(--sinch-font-text-s)}:host([type=xs]){font:var(--sinch-font-text-xs)}:host([type=xxs]){font:var(--sinch-font-text-xxs)}</style><slot></slot>';
+import { assertType, typeValues } from './utils';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-text', class extends NectaryElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({
+      delegatesFocus: false
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback() {
+    this.setAttribute('role', getBooleanAttribute(this, 'inline') ? 'text' : 'paragraph');
+    assertType(this.getAttribute('type'));
+  }
+
+  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 emphasized(isEmphasized) {
+    updateBooleanAttribute(this, 'emphasized', isEmphasized);
+  }
+
+  get emphasized() {
+    return getBooleanAttribute(this, 'emphasized');
+  }
+
+  static get observedAttributes() {
+    return ['type', 'inline'];
+  }
+
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'type':
+        {
+          assertType(newVal);
+          break;
+        }
+
+      case 'inline':
+        {
+          this.setAttribute('role', isAttrTrue(newVal) ? 'text' : 'paragraph');
+          break;
+        }
+    }
+  }
+
+});

package/text/types.d.ts

@@ -0,0 +1,16 @@
+import type { TSinchElementReact } from '../types';
+import type { typeValues } from './utils';
+export declare type TSinchTextType = typeof typeValues[number];
+export declare type TSinchTextElement = HTMLElement & {
+    type: TSinchTextType;
+    inline: boolean;
+    emphasized: boolean;
+    setAttribute(name: 'type', value: TSinchTextType): void;
+    setAttribute(name: 'inline', value: ''): void;
+    setAttribute(name: 'emphasized', value: ''): void;
+};
+export declare type TSinchTextReact = TSinchElementReact<TSinchTextElement> & {
+    type: TSinchTextType;
+    inline?: boolean;
+    emphasized?: boolean;
+};

package/text/types.js

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

package/text/utils.d.ts

@@ -0,0 +1,5 @@
+import type { TSinchTextType } from './types';
+export declare const typeValues: readonly ["m", "s", "xs", "xxs"];
+declare type TAssertType = (value: string | null) => asserts value is TSinchTextType;
+export declare const assertType: TAssertType;
+export {};

package/text/utils.js

@@ -0,0 +1,6 @@
+export const typeValues = ['m', 's', 'xs', 'xxs'];
+export const assertType = value => {
+  if (value === null || !typeValues.includes(value)) {
+    throw new Error(`sinch-title: invalid type attribute: ${value}`);
+  }
+};

package/textarea/index.d.ts

@@ -1,37 +1,4 @@
-import type { TSinchElementReact } from '../types';
-import type { DOMAttributes, FocusEvent, SyntheticEvent } from 'react';
-export declare type TSinchTextareaElement = HTMLElement & {
-    value: string;
-    label: string;
-    placeholder: string | null;
-    optionalText: string | null;
-    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;
-};
-export declare type TSinchTextareaReact = TSinchElementReact<TSinchTextareaElement> & {
-    value: string;
-    label: string;
-    placeholder?: string;
-    optionalText?: string;
-    invalidText?: string;
-    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;
-    onBlur?: (e: FocusEvent<TSinchTextareaElement>) => void;
-};
+import type { TSinchTextareaElement, TSinchTextareaReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/textarea/index.js

@@ -7,7 +7,7 @@ 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, getIntegerAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{width:100%;box-sizing:border-box}#input{all:initial;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius: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);background-color:var(--sinch-color-snow-100);resize:none}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#input:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:focus{border-color:var(--sinch-color-stormy-600)}:host([resizable]:not([resizable=false])) #input{resize:vertical}:host([invalidtext]:not([invalidtext=""])) #input:not(:disabled){border-color:var(--sinch-color-text-invalid)}#bottom,#top{display:flex;align-items:baseline}#top{height:24px}#bottom{height:20px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted)}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid)}::slotted(sinch-help-tooltip){align-self:center;margin:0 8px}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])){--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><slot name="tooltip"></slot><span id="optional"></span></div><textarea id="input"></textarea><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -182,14 +182,17 @@ defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new We
 
       case 'invalidtext':
         {
+          const isInvalid = newVal !== null && newVal !== '';
           _classPrivateFieldGet(this, _$invalidText).textContent = newVal;
-          updateAttribute(this, 'aria-invalid', String(newVal !== null && newVal !== ''));
+          updateExplicitBooleanAttribute(this, 'aria-invalid', isInvalid);
           break;
         }
 
       case 'disabled':
         {
-          _classPrivateFieldGet(this, _$input).disabled = isAttrTrue(newVal);
+          const isDisabled = isAttrTrue(newVal);
+          _classPrivateFieldGet(this, _$input).disabled = isDisabled;
+          updateBooleanAttribute(this, 'disabled', isDisabled);
           break;
         }
 

package/textarea/types.d.ts

@@ -0,0 +1,41 @@
+import type { TSinchElementReact } from '../types';
+import type { SyntheticEvent } from 'react';
+export declare type TSinchTextareaElement = HTMLElement & {
+    value: string;
+    label: string;
+    placeholder: string | null;
+    optionalText: string | null;
+    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;
+    addEventListener(type: 'change', listener: (e: CustomEvent<string>) => void): void;
+    setAttribute(name: 'value', value: string): void;
+    setAttribute(name: 'label', value: string): void;
+    setAttribute(name: 'placeholder', value: string): void;
+    setAttribute(name: 'optionaltext', value: string): void;
+    setAttribute(name: 'invalidtext', value: string): void;
+    setAttribute(name: 'additionaltext', value: string): void;
+    setAttribute(name: 'disabled', value: ''): void;
+    setAttribute(name: 'rows', value: string): void;
+    setAttribute(name: 'resizable', value: ''): void;
+};
+export declare type TSinchTextareaReact = TSinchElementReact<TSinchTextareaElement> & {
+    value: string;
+    label: string;
+    placeholder?: string;
+    optionalText?: string;
+    invalidText?: string;
+    additionalText?: string;
+    disabled?: boolean;
+    'aria-label': string;
+    rows?: number;
+    resizable?: boolean;
+    onChange: (e: SyntheticEvent<TSinchTextareaElement, CustomEvent<string>>) => void;
+};

package/textarea/types.js

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

package/theme.css

@@ -1,6 +1,8 @@
 :root,
 :host {
   --sinch-theme: 1;
+
+  /* Colors */
   --sinch-color-honey-700: #CC8800;
   --sinch-color-honey-600: #FFAA00;
   --sinch-color-honey-500: #FFBE3C;
@@ -71,16 +73,26 @@
   --sinch-color-bolt-400: #FFBE3C;
   --sinch-color-bolt-200: #FFE6B3;
   --sinch-color-transparent: transparent;
-  --sinch-font-hero: 700 56px/72px "Gilroy", "Arial", "sans-serif";
-  --sinch-font-title-xl: 600 40px/48px "Gilroy", "Arial", "sans-serif";
-  --sinch-font-title-l: 600 24px/32px "Gilroy", "Arial", "sans-serif";
-  --sinch-font-title-m: 600 20px/24px "Gilroy", "Arial", "sans-serif";
-  --sinch-font-title-s: 600 16px/24px "Gilroy", "Arial", "sans-serif";
-  --sinch-font-title-xs: 600 14px/22px "Gilroy", "Arial", "sans-serif";
-  --sinch-font-body: 400 16px/24px "Gilroy", "Arial", "sans-serif";
-  --sinch-font-emphasized-body: 600 16px/24px "Gilroy", "Arial", "sans-serif";
-  --sinch-font-small-text: 400 14px/22px "Gilroy", "Arial", "sans-serif";
-  --sinch-font-extra-small-text: 400 12px/20px "Gilroy", "Arial", "sans-serif";
+
+  /* Typography */
+  --sinch-font-family: "Gilroy", "Arial", "sans-serif";
+  --sinch-font-weight-emphasized: 600;
+  --sinch-font-title-xl: 600 40px/48px var(--sinch-font-family);
+  --sinch-font-title-l: 600 24px/32px var(--sinch-font-family);
+  --sinch-font-title-m: 600 20px/24px var(--sinch-font-family);
+  --sinch-font-title-s: 600 16px/24px var(--sinch-font-family);
+  --sinch-font-title-xs: 600 14px/22px var(--sinch-font-family);
+  --sinch-font-text-m: 400 16px/24px var(--sinch-font-family);
+  --sinch-font-text-s: 400 14px/22px var(--sinch-font-family);
+  --sinch-font-text-xs: 400 12px/20px var(--sinch-font-family);
+  --sinch-font-text-xxs: 400 10px/16px var(--sinch-font-family);
+
+  /* Deprecated */
+  --sinch-font-hero: 700 56px/72px var(--sinch-font-family);
+  --sinch-font-body: 400 16px/24px var(--sinch-font-family);
+  --sinch-font-emphasized-body: 600 16px/24px var(--sinch-font-family);
+  --sinch-font-small-text: 400 14px/22px var(--sinch-font-family);
+  --sinch-font-extra-small-text: 400 12px/20px var(--sinch-font-family);
   --sinch-font-monospace: 400 16px/24px "monospace";
 }