@nectary/components 4.10.5 → 4.11.1

package/spinner/index.d.ts

@@ -1,5 +1,17 @@
+import { NectaryElement } from '../utils';
 import type { TSinchSpinner } from './types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { TSinchSize } from '../utils/size';
+export declare class Spinner extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set size(size: TSinchSize);
+    get size(): TSinchSize;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-spinner': TSinchSpinner;

package/spinner/index.js

@@ -3,7 +3,7 @@ import { DEFAULT_SIZE, sizeValues } from '../utils/size';
 const templateHTML = '<style>@keyframes spinner{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}:host{display:block}:host([data-size="l"]){width:50px;height:50px;contain:strict}:host([data-size="m"]){width:24px;height:24px;contain:strict}:host([data-size="s"]){width:16px;height:16px;contain:strict}#spinner-size-l,#spinner-size-m,#spinner-size-s{display:none;will-change:transform}:host([data-size="l"])>#spinner-size-l{display:block;animation:1s linear infinite spinner}:host([data-size="m"])>#spinner-size-m{display:block;animation:1s linear infinite spinner}:host([data-size="s"])>#spinner-size-s{display:block;animation:1s linear infinite spinner}.bg{opacity:.3;stroke:var(--sinch-global-color-icon,var(--sinch-sys-color-text-default))}.fg{stroke:var(--sinch-global-color-icon,var(--sinch-sys-color-text-default))}</style><svg id="spinner-size-l" width="50" height="50" fill="none"><circle class="bg" cx="25" cy="25" r="22" stroke-width="6"/><path class="fg" d="M25 3a22 22 0 0 1 22 22" stroke-width="6" stroke-linecap="round"/></svg><svg id="spinner-size-m" width="24" height="24" fill="none"><circle class="bg" cx="12" cy="12" r="9" stroke-width="4"/><path class="fg" d="M21 12a9 9 0 0 0-9-9" stroke-width="4" stroke-linecap="round"/></svg><svg id="spinner-size-s" width="16" height="16" fill="none"><circle class="bg" cx="8" cy="8" r="6" stroke-width="2"/><path class="fg" d="M14 8a6 6 0 0 0-6-6" stroke-width="2" stroke-linecap="round"/></svg>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-spinner', class extends NectaryElement {
+export class Spinner extends NectaryElement {
   #controller = null;
   constructor() {
     super();
@@ -55,4 +55,5 @@ defineCustomElement('sinch-spinner', class extends NectaryElement {
         }
     }
   };
-});
+}
+defineCustomElement('sinch-spinner', Spinner);

package/stop-events/index.d.ts

@@ -1 +1,6 @@
-export {};
+export declare class StopEvents extends HTMLElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}

package/stop-events/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, unpackCsv } from '../utils';
-defineCustomElement('sinch-stop-events', class extends HTMLElement {
+export class StopEvents extends HTMLElement {
   #controller = null;
   constructor() {
     super();
@@ -24,4 +24,5 @@ defineCustomElement('sinch-stop-events', class extends HTMLElement {
   #stopEvent = e => {
     e.stopPropagation();
   };
-});
+}
+defineCustomElement('sinch-stop-events', StopEvents);

package/table/index.d.ts

@@ -1,4 +1,9 @@
+import { NectaryElement } from '../utils';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class Table extends NectaryElement {
+    constructor();
+    connectedCallback(): void;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-table': {};

package/table/index.js

@@ -2,7 +2,7 @@ import { defineCustomElement, NectaryElement } from '../utils';
 const templateHTML = '<style>:host{display:table}</style><slot></slot>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-table', class extends NectaryElement {
+export class Table extends NectaryElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -11,4 +11,5 @@ defineCustomElement('sinch-table', class extends NectaryElement {
   connectedCallback() {
     this.setAttribute('role', 'table');
   }
-});
+}
+defineCustomElement('sinch-table', Table);

package/table-body/index.d.ts

@@ -1,4 +1,9 @@
+import { NectaryElement } from '../utils';
 import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
+export declare class TableBody extends NectaryElement {
+    constructor();
+    connectedCallback(): void;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-table-body': {};

package/table-body/index.js

@@ -2,7 +2,7 @@ import { defineCustomElement, NectaryElement } from '../utils';
 const templateHTML = '<style>:host{display:table-row-group}</style><slot></slot>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-table-body', class extends NectaryElement {
+export class TableBody extends NectaryElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -11,4 +11,5 @@ defineCustomElement('sinch-table-body', class extends NectaryElement {
   connectedCallback() {
     this.setAttribute('role', 'rowgroup');
   }
-});
+}
+defineCustomElement('sinch-table-body', TableBody);

package/table-cell/index.d.ts

@@ -1,5 +1,12 @@
-import type { TSinchTableCell } from './types';
+import { NectaryElement } from '../utils';
+import type { TSinchTableAlignType, TSinchTableCell } from './types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class TableCell extends NectaryElement {
+    constructor();
+    connectedCallback(): void;
+    set align(value: TSinchTableAlignType);
+    get align(): TSinchTableAlignType;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-table-cell': TSinchTableCell;

package/table-cell/index.js

@@ -3,7 +3,7 @@ const templateHTML = '<style>:host{display:table-cell;vertical-align:top;border-
 import { alignValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-table-cell', class extends NectaryElement {
+export class TableCell extends NectaryElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -18,4 +18,5 @@ defineCustomElement('sinch-table-cell', class extends NectaryElement {
   get align() {
     return getLiteralAttribute(this, alignValues, 'align', 'start');
   }
-});
+}
+defineCustomElement('sinch-table-cell', TableCell);

package/table-head/index.d.ts

@@ -1,4 +1,9 @@
+import { NectaryElement } from '../utils';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class TableHead extends NectaryElement {
+    constructor();
+    connectedCallback(): void;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-table-head': {};

package/table-head/index.js

@@ -2,7 +2,7 @@ import { defineCustomElement, NectaryElement } from '../utils';
 const templateHTML = '<style>:host{display:table-header-group}</style><slot></slot>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-table-head', class extends NectaryElement {
+export class TableHead extends NectaryElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -11,4 +11,5 @@ defineCustomElement('sinch-table-head', class extends NectaryElement {
   connectedCallback() {
     this.setAttribute('role', 'rowgroup');
   }
-});
+}
+defineCustomElement('sinch-table-head', TableHead);

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

@@ -1,6 +1,21 @@
 import '../text';
+import { NectaryElement } from '../utils';
 import type { TSinchTableHeaderCell } from './types';
+import type { TSinchTableAlignType } from '../table-cell/types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class TableHeadCell extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set text(value: string | null);
+    get text(): string | null;
+    set align(value: TSinchTableAlignType);
+    get align(): TSinchTableAlignType;
+    set fit(isFit: boolean);
+    get fit(): boolean;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-table-head-cell': TSinchTableHeaderCell;

package/table-head-cell/index.js

@@ -4,7 +4,7 @@ import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttri
 const templateHTML = '<style>:host{display:table-cell;border-bottom:1px solid var(--sinch-comp-table-color-head-cell-default-border-initial);vertical-align:middle}#wrapper{position:relative;display:flex;align-items:center;gap:8px;width:100%;height:100%;padding:8px;box-sizing:border-box;--sinch-global-color-icon:var(--sinch-comp-table-color-head-cell-default-icon-initial)}#text{flex-shrink:1;min-width:0;--sinch-global-color-text:var(--sinch-comp-table-color-head-cell-default-text-initial)}#text:empty{display:none}:host([align=center])>#wrapper{justify-content:center}:host([align=end])>#wrapper{justify-content:flex-end}:host([fit]){width:1px}</style><div id="wrapper"><slot name="checkbox"></slot><slot name="left"></slot><sinch-text id="text" type="m"></sinch-text><slot name="tooltip"></slot><slot name="right"></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-table-head-cell', class extends NectaryElement {
+export class TableHeadCell extends NectaryElement {
   #$text;
   constructor() {
     super();
@@ -54,4 +54,5 @@ defineCustomElement('sinch-table-head-cell', class extends NectaryElement {
   get fit() {
     return getBooleanAttribute(this, 'fit');
   }
-});
+}
+defineCustomElement('sinch-table-head-cell', TableHeadCell);

package/table-row/index.d.ts

@@ -1,5 +1,16 @@
+import { NectaryElement } from '../utils';
 import type { TSinchTableRow } from './types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class TableRow extends NectaryElement {
+    constructor();
+    connectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set sticky(isSticky: boolean);
+    get sticky(): boolean;
+    set selected(isSelected: boolean);
+    get selected(): boolean;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-table-row': TSinchTableRow;

package/table-row/index.js

@@ -2,7 +2,7 @@ import { defineCustomElement, getBooleanAttribute, isAttrEqual, isAttrTrue, Nect
 const templateHTML = '<style>:host{display:table-row;background-color:var(--sinch-comp-table-color-row-default-background-initial)}:host([selected]){background-color:var(--sinch-comp-table-color-row-checked-background-initial)}:host(:hover){background-color:var(--sinch-comp-table-color-row-default-background-hover)}:host([sticky]) ::slotted(sinch-table-head-cell){position:sticky;top:0;z-index:1;background-color:var(--sinch-comp-table-color-row-default-background-sticky)}:host(:last-child) ::slotted(sinch-table-cell){border-bottom:none}</style><slot></slot>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-table-row', class extends NectaryElement {
+export class TableRow extends NectaryElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -39,4 +39,5 @@ defineCustomElement('sinch-table-row', class extends NectaryElement {
   get selected() {
     return getBooleanAttribute(this, 'selected');
   }
-});
+}
+defineCustomElement('sinch-table-row', TableRow);

package/tabs/index.d.ts

@@ -1,5 +1,17 @@
+import { NectaryElement } from '../utils';
 import type { TSinchTabs } from './types';
-import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
+import type { NectaryComponentVanilla, NectaryComponentReact, TRect } from '../types';
+export declare class Tabs extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, _: string | null, newVal: string | null): void;
+    set value(value: string);
+    get value(): string;
+    nthOptionRect(index: number): TRect | null;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-tabs': TSinchTabs;

package/tabs/index.js

@@ -2,7 +2,7 @@ import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHa
 const templateHTML = '<style>:host{display:block}#wrapper{display:flex;width:100%;height:40px;border-bottom:1px solid var(--sinch-comp-tab-color-default-border-initial);box-sizing:border-box}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-tabs', class extends NectaryElement {
+export class Tabs extends NectaryElement {
   #$slot;
   #controller = null;
   constructor() {
@@ -77,4 +77,5 @@ defineCustomElement('sinch-tabs', class extends NectaryElement {
   #onChangeReactHandler = e => {
     getReactEventHandler(this, 'on-change')?.(e);
   };
-});
+}
+defineCustomElement('sinch-tabs', Tabs);

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

@@ -1,5 +1,21 @@
+import { NectaryElement } from '../utils';
 import type { TSinchTabsIconOption } from './types';
 import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
+export declare class TabsIconOption extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    set value(value: string);
+    get value(): string;
+    set disabled(isDisabled: boolean);
+    get disabled(): boolean;
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    get focusable(): boolean;
+    focus(): void;
+    blur(): void;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-tabs-icon-option': TSinchTabsIconOption;

package/tabs-icon-option/index.js

@@ -2,7 +2,7 @@ import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrEqual, is
 const templateHTML = '<style>:host{display:block;outline:0}#button{all:initial;position:relative;display:flex;flex-direction:column;padding:12px 16px 0;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-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-icon:var(--sinch-comp-tab-color-disabled-icon-initial)}:host([data-checked]) #button{--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)}::slotted(*){display:block}</style><sinch-tooltip id="tooltip"><button id="button" tabindex="0"><slot name="icon"></slot></button></sinch-tooltip>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-tabs-icon-option', class extends NectaryElement {
+export class TabsIconOption extends NectaryElement {
   #$button;
   #$tooltip;
   constructor() {
@@ -76,4 +76,5 @@ defineCustomElement('sinch-tabs-icon-option', class extends NectaryElement {
       detail: this.value
     }));
   };
-});
+}
+defineCustomElement('sinch-tabs-icon-option', TabsIconOption);

package/tabs-option/index.d.ts

@@ -1,6 +1,24 @@
 import '../text';
+import { NectaryElement } from '../utils';
 import type { TSinchTabsOption } from './types';
 import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
+export declare class TabsOption extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set value(value: string);
+    get value(): string;
+    set disabled(isDisabled: boolean);
+    get disabled(): boolean;
+    set text(value: string);
+    get text(): string;
+    get focusable(): boolean;
+    focus(): void;
+    blur(): void;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-tabs-option': TSinchTabsOption;

package/tabs-option/index.js

@@ -3,7 +3,7 @@ import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrEqual, is
 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 {
+export class TabsOption extends NectaryElement {
   #$button;
   #$text;
   constructor() {
@@ -83,4 +83,5 @@ defineCustomElement('sinch-tabs-option', class extends NectaryElement {
       detail: this.value
     }));
   };
-});
+}
+defineCustomElement('sinch-tabs-option', TabsOption);

package/tag/index.d.ts

@@ -1,7 +1,22 @@
 import '../text';
 import '../tooltip';
+import { NectaryElement } from '../utils';
 import type { TSinchTag } from './types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class Tag extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    get color(): string | null;
+    set color(value: string | null);
+    get text(): string;
+    set text(value: string);
+    get small(): boolean;
+    set small(isSmall: boolean);
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-tag': TSinchTag;

package/tag/index.js

@@ -5,7 +5,7 @@ const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;ou
 import { getTagColorBg, getTagColorFg } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-tag', class extends NectaryElement {
+export class Tag extends NectaryElement {
   #$text;
   #$tooltip;
   #$wrapper;
@@ -98,4 +98,5 @@ defineCustomElement('sinch-tag', class extends NectaryElement {
       }
     });
   }
-});
+}
+defineCustomElement('sinch-tag', Tag);

package/text/index.d.ts

@@ -1,5 +1,21 @@
-import type { TSinchText } from './types';
+import { NectaryElement } from '../utils';
+import type { TSinchTextType, TSinchText } from './types';
 import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
+export declare class Text extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    get type(): TSinchTextType;
+    set type(value: TSinchTextType);
+    set inline(isInline: boolean);
+    get inline(): boolean;
+    set ellipsis(isEllipsis: boolean);
+    get ellipsis(): boolean;
+    set emphasized(isEmphasized: boolean);
+    get emphasized(): boolean;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-text': TSinchText;

package/text/index.js

@@ -3,7 +3,7 @@ const templateHTML = '<style>:host{text-align:var(--sinch-comp-text-align);displ
 import { typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-text', class extends NectaryElement {
+export class Text extends NectaryElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -61,4 +61,5 @@ defineCustomElement('sinch-text', class extends NectaryElement {
   #updateRole() {
     this.setAttribute('role', getBooleanAttribute(this, 'inline') ? 'text' : 'paragraph');
   }
-});
+}
+defineCustomElement('sinch-text', Text);

package/textarea/index.d.ts

@@ -1,5 +1,43 @@
+import { NectaryElement } from '../utils';
 import type { TSinchTextarea } from './types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class Textarea extends NectaryElement {
+    #private;
+    static formAssociated: boolean;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    formAssociatedCallback(): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string | FormData | null): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set name(value: string);
+    get name(): string;
+    set value(value: string);
+    get value(): string;
+    set placeholder(value: string | null);
+    get placeholder(): string | null;
+    set invalid(value: boolean);
+    get invalid(): boolean;
+    set disabled(isDisabled: boolean);
+    get disabled(): boolean;
+    set resizable(isResizable: boolean);
+    get resizable(): boolean;
+    set rows(value: HTMLTextAreaElement['rows']);
+    get rows(): HTMLTextAreaElement['rows'];
+    set minRows(value: number);
+    get minRows(): number;
+    get selectionStart(): HTMLTextAreaElement['selectionStart'];
+    set selectionStart(value: HTMLTextAreaElement['selectionStart']);
+    get selectionEnd(): HTMLTextAreaElement['selectionEnd'];
+    set selectionEnd(value: HTMLTextAreaElement['selectionEnd']);
+    get selectionDirection(): HTMLTextAreaElement['selectionDirection'];
+    set selectionDirection(value: HTMLTextAreaElement['selectionDirection']);
+    get focusable(): boolean;
+    focus(): void;
+    blur(): void;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-textarea': TSinchTextarea;

package/textarea/index.js

@@ -4,7 +4,7 @@ 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');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-textarea', class extends NectaryElement {
+export class Textarea extends NectaryElement {
   #$input;
   #$bottomSlot;
   #$bottomWrapper;
@@ -358,4 +358,5 @@ defineCustomElement('sinch-textarea', class extends NectaryElement {
   #onBlurReactHandler = () => {
     getReactEventHandler(this, 'on-blur')?.();
   };
-});
+}
+defineCustomElement('sinch-textarea', Textarea);

package/tile-control/index.d.ts

@@ -1,5 +1,22 @@
+import { NectaryElement } from '../utils';
 import type { TSinchTileControl } from './types';
 import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
+export declare class TileControl extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set value(value: string);
+    get value(): string;
+    set small(isSmall: boolean);
+    get small(): boolean;
+    set multiple(isMultiple: boolean);
+    get multiple(): boolean;
+    set cols(value: number);
+    get cols(): number;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-tile-control': TSinchTileControl;

package/tile-control/index.js

@@ -2,7 +2,7 @@ import { defineCustomElement, getAttribute, getBooleanAttribute, unpackCsv, getF
 const templateHTML = '<style>:host{display:block;outline:0;--sinch-grid-num-columns:1}#wrapper{display:grid;grid-template-columns:repeat(var(--sinch-grid-num-columns),auto);gap:16px;width:fit-content}:host([small]) #wrapper{gap:8px}:host([cols="2"]){--sinch-grid-num-columns:2}:host([cols="3"]){--sinch-grid-num-columns:3}:host([cols="4"]){--sinch-grid-num-columns:4}:host([cols="5"]){--sinch-grid-num-columns:5}:host([cols="6"]){--sinch-grid-num-columns:6}:host([cols="7"]){--sinch-grid-num-columns:7}:host([cols="8"]){--sinch-grid-num-columns:8}:host([cols="9"]){--sinch-grid-num-columns:9}:host([cols="10"]){--sinch-grid-num-columns:10}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-tile-control', class extends NectaryElement {
+export class TileControl extends NectaryElement {
   #$slot;
   constructor() {
     super();
@@ -107,4 +107,5 @@ defineCustomElement('sinch-tile-control', class extends NectaryElement {
   #onChangeReactHandler = e => {
     getReactEventHandler(this, 'on-change')?.(e);
   };
-});
+}
+defineCustomElement('sinch-tile-control', TileControl);

package/tile-control-option/index.d.ts

@@ -1,5 +1,23 @@
+import { NectaryElement } from '../utils';
 import type { TSinchTileControlOption } from './types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class TileControlOption extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set value(value: string);
+    get value(): string;
+    set disabled(isDisabled: boolean);
+    get disabled(): boolean;
+    set text(value: string);
+    get text(): string;
+    get focusable(): boolean;
+    focus(): void;
+    blur(): void;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-tile-control-option': TSinchTileControlOption;

package/tile-control-option/index.js

@@ -2,7 +2,7 @@ import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHa
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}button{all:initial;position:relative;display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box;width:var(--sinch-local-size);height:var(--sinch-local-size);padding:16px 8px 8px;border-radius:var(--sinch-local-shape-radius);background-color:var(--sinch-local-color-background);box-shadow:var(--sinch-local-shadow);cursor:pointer;--sinch-local-color-background:var(--sinch-comp-tile-control-color-default-background-initial);--sinch-local-color-border:var(--sinch-comp-tile-control-color-default-border-initial);--sinch-local-color-text:var(--sinch-comp-tile-control-color-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-tile-control-color-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-tile-control-shadow-initial);--sinch-local-shape-radius:var(--sinch-comp-tile-control-shape-radius-l);--sinch-local-size:88px;--sinch-local-size-icon:var(--sinch-comp-tile-control-size-m-icon)}button::before{content:"";position:absolute;inset:0;border:1px solid var(--sinch-local-color-border);border-radius:var(--sinch-local-shape-radius);pointer-events:none}button:focus-visible::after{position:absolute;content:"";inset:-4px;padding:2px;border:2px solid var(--sinch-comp-tile-control-color-default-outline-focus);border-radius:calc(var(--sinch-local-shape-radius) + 4px);pointer-events:none}:host([data-small])>button{padding:12px 4px 4px;--sinch-local-shape-radius:var(--sinch-comp-tile-control-shape-radius-s);--sinch-local-size:64px;--sinch-local-size-icon:var(--sinch-comp-tile-control-size-s-icon)}button:enabled:hover{--sinch-local-color-background:var(--sinch-comp-tile-control-color-default-background-hover);--sinch-local-color-border:var(--sinch-comp-tile-control-color-default-border-hover);--sinch-local-shadow:var(--sinch-comp-tile-control-shadow-hover)}:host([data-checked])>button:enabled,button:enabled:active{--sinch-local-color-background:var(--sinch-comp-tile-control-color-checked-background-initial);--sinch-local-color-border:var(--sinch-comp-tile-control-color-checked-border-initial);--sinch-local-color-text:var(--sinch-comp-tile-control-color-checked-text-initial);--sinch-local-color-icon:var(--sinch-comp-tile-control-color-checked-icon-initial);--sinch-local-shadow:var(--sinch-comp-tile-control-shadow-active)}:host([data-checked])>button:enabled::before,button:enabled:active::before{border-width:2px}button:disabled{cursor:initial;--sinch-local-color-background:var(--sinch-comp-tile-control-color-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-tile-control-color-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-tile-control-color-disabled-text-initial);--sinch-local-color-icon:var(--sinch-comp-tile-control-color-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-tile-control-shadow-disabled)}#text{display:inline-block;min-height:20px;text-align:center;font:var(--sinch-comp-tile-control-font-label);color:var(--sinch-local-color-text);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#icon{width:var(--sinch-local-size-icon);height:var(--sinch-local-size-icon);align-self:center;--sinch-global-size-icon:var(--sinch-local-size-icon);--sinch-global-color-icon:var(--sinch-local-color-icon)}</style><button><div id="icon"><slot name="icon"></slot></div><span id="text"></span></button>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-tile-control-option', class extends NectaryElement {
+export class TileControlOption extends NectaryElement {
   #$button;
   #$text;
   constructor() {
@@ -95,4 +95,5 @@ defineCustomElement('sinch-tile-control-option', class extends NectaryElement {
   #onBlurReactHandler = () => {
     getReactEventHandler(this, 'on-blur')?.();
   };
-});
+}
+defineCustomElement('sinch-tile-control-option', TileControlOption);

package/time-picker/index.d.ts

@@ -1,8 +1,28 @@
 import '../icon';
 import '../segmented-control';
 import '../segmented-control-option';
+import { NectaryElement } from '../utils';
 import type { TSinchTimePicker } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReact, NectaryComponentVanilla, TRect } from '../types';
+export declare class TimePicker extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, prevValue: string | null, newVal: string | null): void;
+    set value(value: string);
+    get value(): string;
+    set ampm(value: boolean);
+    get ampm(): boolean;
+    set submitAriaLabel(value: string);
+    get submitAriaLabel(): string;
+    get submitButtonRect(): TRect;
+    get amButtonRect(): TRect | null;
+    get pmButtonRect(): TRect | null;
+    hourDigitRect(hour: number): TRect | null;
+    minuteDigitRect(minute: number): TRect | null;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-time-picker': TSinchTimePicker;