@nectary/components 0.28.0 → 0.29.1

package/segmented-icon-control-option/index.js

@@ -1,19 +1,25 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _onClick;
+var _$button, _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}#wrapper{position:relative;width:56px;height:32px;padding:3px 16px;box-sizing:border-box;border:1px solid var(--sinch-color-snow-600);border-left-width:0;border-right-width:0;color:var(--sinch-color-stormy-500);background-color:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:24px}#wrapper:hover{background-color:var(--sinch-color-snow-500)}:host(:first-child) #wrapper{border-left-width:1px;border-top-left-radius:4px;border-bottom-left-radius:4px}:host(:last-child) #wrapper{border-right-width:1px;border-top-right-radius:4px;border-bottom-right-radius:4px}:host([checked]:not([checked=false])) #wrapper{border-color:var(--sinch-color-stormy-500)}:host([checked]:not([checked=false]):not(:first-child)) #wrapper::before{content:"";width:1px;background-color:var(--sinch-color-stormy-500);position:absolute;left:-1px;top:-1px;bottom:-1px}:host([checked]:not([checked=false]):not(:last-child)) #wrapper::after{content:"";width:1px;background-color:var(--sinch-color-stormy-500);position:absolute;right:0;top:-1px;bottom:-1px}#button{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer;z-index:1}#button:disabled{cursor:unset}#button:focus::before{content:"";position:absolute;left:-4px;right:-3px;top:-4px;bottom:-4px;border-style:solid;border-color:var(--sinch-color-aqua-400);border-width:0}#button:focus-visible::before{border-width:2px}:host(:first-child) #button:focus::before{left:-4px;border-top-left-radius:6px;border-bottom-left-radius:6px}:host(:last-child) #button:focus::before{right:-4px;border-top-right-radius:6px;border-bottom-right-radius:6px}@supports not selector(:focus-visible){#button:focus::before{border-width:2px}}:host([disabled]:not([disabled=false])) #wrapper{background-color:var(--sinch-color-snow-100);color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}::slotted(*){display:block}</style><div id="wrapper"><slot name="icon"></slot><button id="button"></button></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-segmented-icon-control-option', (_onClick = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-segmented-icon-control-option', (_$button = new WeakMap(), _onClick = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
+    _classPrivateFieldInitSpec(this, _$button, {
+      writable: true,
+      value: void 0
+    });
+
     _classPrivateFieldInitSpec(this, _onClick, {
       writable: true,
       value: e => {
@@ -27,30 +33,24 @@ defineCustomElement('sinch-segmented-icon-control-option', (_onClick = new WeakM
 
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.$button = shadowRoot.querySelector('#button');
+
+    _classPrivateFieldSet(this, _$button, shadowRoot.querySelector('#button'));
   }
 
   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() {
     return ['checked', 'disabled', 'value'];
   }
 
-  set checked(isChecked) {
-    updateBooleanAttribute(this, 'checked', isChecked);
-  }
-
-  get checked() {
-    return getBooleanAttribute(this, 'checked');
-  }
-
   set value(value) {
     updateAttribute(this, 'value', value);
   }
@@ -71,24 +71,24 @@ defineCustomElement('sinch-segmented-icon-control-option', (_onClick = new WeakM
     switch (name) {
       case 'checked':
         {
-          updateAttribute(this, 'aria-selected', isAttrTrue(newVal));
+          updateExplicitBooleanAttribute(this, 'aria-selected', isAttrTrue(newVal));
           break;
         }
 
       case 'disabled':
         {
-          this.$button.disabled = isAttrTrue(newVal);
+          _classPrivateFieldGet(this, _$button).disabled = isAttrTrue(newVal);
           break;
         }
     }
   }
 
   focus() {
-    this.$button.focus();
+    _classPrivateFieldGet(this, _$button).focus();
   }
 
   blur() {
-    this.$button.blur();
+    _classPrivateFieldGet(this, _$button).blur();
   }
 
 }));

package/segmented-icon-control-option/types.d.ts

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

package/segmented-icon-control-option/types.js

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

package/select/index.d.ts

@@ -1,33 +1,5 @@
 import '../dropdown';
-import type { TRect, TSinchElementReact } from '../types';
-import type { FocusEvent, SyntheticEvent } from 'react';
-export declare type TSinchSelectElement = HTMLElement & {
-    value: string;
-    label: string;
-    placeholder: string | null;
-    optionalText: string | null;
-    invalidText: string | null;
-    additionalText: string | null;
-    disabled: boolean;
-    maxVisibleItems: number | null;
-    readonly dropdownRect: TRect;
-    focus(): void;
-    blur(): void;
-};
-export declare type TSinchSelectReact = TSinchElementReact<TSinchSelectElement> & {
-    value: string;
-    label: string;
-    placeholder?: string;
-    optionalText?: string;
-    invalidText?: string;
-    additionalText?: string;
-    disabled?: boolean;
-    maxVisibleItems?: number;
-    'aria-label': string;
-    onChange: (e: SyntheticEvent<TSinchSelectElement, CustomEvent<string>>) => void;
-    onFocus?: (e: FocusEvent<TSinchSelectElement>) => void;
-    onBlur?: (e: FocusEvent<TSinchSelectElement>) => void;
-};
+import type { TSinchSelectElement, TSinchSelectReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/select/index.js

@@ -12,7 +12,7 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
 
 import '../dropdown';
-import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateIntegerAttribute } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateIntegerAttribute } from '../utils';
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{position:relative;--sinch-popover-expand-width:1}sinch-dropdown{display:block}#button{all:initial;display:flex;align-items:center;gap:8px;border:1px solid var(--sinch-color-stormy-200);border-radius:4px;box-sizing:border-box;width:100%;height:48px;margin:2px 0;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);cursor:pointer}#button:focus{border-color:var(--sinch-color-stormy-600)}#dropdown-icon{fill:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button[data-unselected]{color:var(--sinch-color-text-muted)}#button:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100);cursor:initial}#button:disabled #dropdown-icon{fill:var(--sinch-color-stormy-100)}:host([invalidtext]:not([invalidtext=""])) #button:not(:disabled){border-color:var(--sinch-color-text-invalid)}#content{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#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)}#listbox{position:absolute;left:0;top:0;padding-top:74px;width:100%;display:none;list-style:none;outline:0;z-index:1}#listbox-body{font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);border:1px solid var(--sinch-color-stormy-500);border-top-width:0;border-bottom-left-radius:2px;border-bottom-right-radius:2px;width:100%;box-sizing:border-box;box-shadow:1px 2px 4px rgba(0,0,0,.15);overflow-y:auto}#button[aria-expanded=true]~#listbox{display:block}</style><div id="wrapper"><div id="top"><label id="label" for="dropdown"></label><slot name="tooltip"></slot><span id="optional"></span></div><sinch-dropdown id="dropdown"><button slot="target" id="button"><span id="content"></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><slot name="option" slot="option"></slot></sinch-dropdown><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -127,6 +127,7 @@ defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent =
 
   connectedCallback() {
     this.setAttribute('role', 'listbox');
+    this.setAttribute('aria-haspopup', 'listbox');
 
     _classPrivateFieldGet(this, _$dropdown).addEventListener('change', _classPrivateFieldGet(this, _onValueChange));
 
@@ -263,15 +264,18 @@ defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent =
 
       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':
         {
-          updateAttribute(_classPrivateFieldGet(this, _$dropdown), 'disabled', newVal);
-          _classPrivateFieldGet(this, _$button).disabled = isAttrTrue(newVal);
+          const isDisabled = isAttrTrue(newVal);
+          updateBooleanAttribute(_classPrivateFieldGet(this, _$dropdown), 'disabled', isDisabled);
+          updateBooleanAttribute(this, 'disabled', isDisabled);
+          _classPrivateFieldGet(this, _$button).disabled = isDisabled;
           break;
         }
 

package/select/types.d.ts

@@ -0,0 +1,35 @@
+import type { TRect, TSinchElementReact } from '../types';
+import type { SyntheticEvent } from 'react';
+export declare type TSinchSelectElement = HTMLElement & {
+    value: string;
+    label: string;
+    placeholder: string | null;
+    optionalText: string | null;
+    invalidText: string | null;
+    additionalText: string | null;
+    maxVisibleItems: number | null;
+    disabled: boolean;
+    readonly dropdownRect: TRect;
+    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: 'additionaltext', value: string): void;
+    setAttribute(name: 'maxvisibleitems', value: string): void;
+    setAttribute(name: 'disabled', value: ''): void;
+};
+export declare type TSinchSelectReact = TSinchElementReact<TSinchSelectElement> & {
+    value: string;
+    label: string;
+    placeholder?: string;
+    optionalText?: string;
+    invalidText?: string;
+    additionalText?: string;
+    disabled?: boolean;
+    maxVisibleItems?: number;
+    'aria-label': string;
+    onChange: (e: SyntheticEvent<TSinchSelectElement, CustomEvent<string>>) => void;
+};

package/select/types.js

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

package/spinner/index.d.ts

@@ -1,13 +1,4 @@
-import type { TSinchElementReact } from '../types';
-declare const spinnerTypes: readonly ["large", "medium", "small"];
-export declare type TSinchSpinnerType = typeof spinnerTypes[number];
-export declare type TSinchSpinnerElement = HTMLElement & {
-    type: TSinchSpinnerType;
-};
-export declare type TSinchSpinnerReact = TSinchElementReact<TSinchSpinnerElement> & {
-    type?: TSinchSpinnerType;
-    static?: boolean;
-};
+import type { TSinchSpinnerElement, TSinchSpinnerReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -18,4 +9,3 @@ declare global {
         'sinch-spinner': TSinchSpinnerElement;
     }
 }
-export {};

package/spinner/index.js

@@ -1,6 +1,6 @@
 import { defineCustomElement, getLiteralAttribute, NectaryElement, updateLiteralAttribute } from '../utils';
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}@keyframes spinner{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}div{animation:1.5s linear infinite spinner;animation-play-state:running;border:solid 3px var(--sinch-color-spinner-bg,#d4dadd);border-bottom-color:var(--sinch-color-spinner-fg,#0a273d);border-radius:50%;height:20px;width:20px;box-sizing:border-box;will-change:transform}:host([type=large]) div{height:46px;width:46px;border-width:4px}:host([type=small]) div{height:14px;width:14px;border-width:2px}:host([static]:not([static=false])) div{animation-play-state:paused}</style><div></div>';
-const spinnerTypes = ['large', 'medium', 'small'];
+import { spinnerTypes } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-spinner', class extends NectaryElement {

package/spinner/types.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchElementReact } from '../types';
+import type { spinnerTypes } from './utils';
+export declare type TSinchSpinnerType = typeof spinnerTypes[number];
+export declare type TSinchSpinnerElement = HTMLElement & {
+    type: TSinchSpinnerType;
+    setAttribute(name: 'type', value: TSinchSpinnerType): void;
+};
+export declare type TSinchSpinnerReact = TSinchElementReact<TSinchSpinnerElement> & {
+    type?: TSinchSpinnerType;
+    static?: boolean;
+};

package/spinner/types.js

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

package/spinner/utils.d.ts

@@ -0,0 +1 @@
+export declare const spinnerTypes: readonly ["large", "medium", "small"];

package/spinner/utils.js

@@ -0,0 +1 @@
+export const spinnerTypes = ['large', 'medium', 'small'];

package/table/index.d.ts

@@ -1,6 +1,4 @@
-import type { TSinchElementReact } from '../types';
-export declare type TSinchTableElement = HTMLElement;
-export declare type TSinchTableReact = TSinchElementReact<TSinchTableElement>;
+import type { TSinchTableElement, TSinchTableReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/table/types.d.ts

@@ -0,0 +1,3 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchTableElement = HTMLElement;
+export declare type TSinchTableReact = TSinchElementReact<TSinchTableElement>;

package/table/types.js

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

package/table-body/index.d.ts

@@ -1,6 +1,4 @@
-import type { TSinchElementReact } from '../types';
-export declare type TSinchTableBodyElement = HTMLElement;
-export declare type TSinchTableBodyReact = TSinchElementReact<TSinchTableBodyElement>;
+import type { TSinchTableBodyElement, TSinchTableBodyReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/table-body/types.d.ts

@@ -0,0 +1,3 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchTableBodyElement = HTMLElement;
+export declare type TSinchTableBodyReact = TSinchElementReact<TSinchTableBodyElement>;

package/table-body/types.js

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

package/table-cell/index.d.ts

@@ -1,12 +1,4 @@
-import type { TSinchElementReact } from '../types';
-declare const alignValues: readonly ["start", "center", "end"];
-export declare type TAlignType = typeof alignValues[number];
-export declare type TSinchTableCellElement = HTMLElement & {
-    align: TAlignType;
-};
-export declare type TSinchTableCellReact = TSinchElementReact<TSinchTableCellElement> & {
-    align?: TAlignType;
-};
+import type { TSinchTableCellElement, TSinchTableCellReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -17,4 +9,3 @@ declare global {
         'sinch-table-cell': TSinchTableCellElement;
     }
 }
-export {};

package/table-cell/index.js

@@ -1,8 +1,8 @@
 import { defineCustomElement, getLiteralAttribute, NectaryElement, updateLiteralAttribute } from '../utils';
 const templateHTML = '<style>:host{display:table-cell;vertical-align:top;border-bottom:1px solid var(--sinch-color-snow-600)}#wrapper{display:flex;flex-direction:column;justify-content:center;min-height:48px;box-sizing:border-box;padding:8px}:host([align=end]) #wrapper{text-align:end;align-items:flex-end}:host([align=center]) #wrapper{text-align:center;align-items:center}</style><div id="wrapper"><slot></slot></div>';
+import { alignValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-const alignValues = ['start', 'center', 'end'];
 defineCustomElement('sinch-table-cell', class extends NectaryElement {
   constructor() {
     super();

package/table-cell/types.d.ts

@@ -0,0 +1,10 @@
+import type { TSinchElementReact } from '../types';
+import type { alignValues } from './utils';
+export declare type TAlignType = typeof alignValues[number];
+export declare type TSinchTableCellElement = HTMLElement & {
+    align: TAlignType;
+    setAttribute(name: 'align', value: TAlignType): void;
+};
+export declare type TSinchTableCellReact = TSinchElementReact<TSinchTableCellElement> & {
+    align?: TAlignType;
+};

package/table-cell/types.js

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

package/table-cell/utils.d.ts

@@ -0,0 +1 @@
+export declare const alignValues: readonly ["start", "center", "end"];

package/table-cell/utils.js

@@ -0,0 +1 @@
+export const alignValues = ['start', 'center', 'end'];

package/table-head/index.d.ts

@@ -1,6 +1,4 @@
-import type { TSinchElementReact } from '../types';
-export declare type TSinchTableHeadElement = HTMLElement;
-export declare type TSinchTableHeadReact = TSinchElementReact<TSinchTableHeadElement>;
+import type { TSinchTableHeadElement, TSinchTableHeadReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/table-head/types.d.ts

@@ -0,0 +1,3 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchTableHeadElement = HTMLElement;
+export declare type TSinchTableHeadReact = TSinchElementReact<TSinchTableHeadElement>;

package/table-head/types.js

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

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

@@ -1,16 +1,4 @@
-import type { TSinchElementReact } from '../types';
-declare const alignValues: readonly ["start", "center", "end"];
-export declare type TAlignType = typeof alignValues[number];
-export declare type TSinchTableHeaderCellElement = HTMLElement & {
-    text: string | null;
-    align: TAlignType;
-    fit: boolean;
-};
-export declare type TSinchTableHeaderCellReact = TSinchElementReact<TSinchTableHeaderCellElement> & {
-    text?: string;
-    fit?: boolean;
-    align?: TAlignType;
-};
+import type { TSinchTableHeaderCellElement, TSinchTableHeaderCellReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -21,4 +9,3 @@ declare global {
         'sinch-table-head-cell': TSinchTableHeaderCellElement;
     }
 }
-export {};

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);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.js

@@ -1,19 +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>';
 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 => {
@@ -27,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() {
@@ -80,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

@@ -1,5 +1,4 @@
 import type { TSinchElementReact } from '../types';
-import type { FocusEvent } from 'react';
 export declare type TSinchTabsOptionElement = HTMLElement & {
     value: string;
     disabled: boolean;
@@ -7,12 +6,14 @@ export declare type TSinchTabsOptionElement = HTMLElement & {
     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;
-    onFocus?: (e: FocusEvent<TSinchTabsOptionElement>) => void;
-    onBlur?: (e: FocusEvent<TSinchTabsOptionElement>) => void;
 };