@nectary/components 0.38.0 → 0.40.0

package/segmented-icon-control/index.js

@@ -1,84 +1,28 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$slot, _onSlotChange, _onOptionChange, _onValueChange, _onChangeReactHandler;
-
-function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
-
-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"); } }
-
-function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
-
 import { defineCustomElement, getAttribute, getBooleanAttribute, getCsvSet, getFirstCsvValue, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:row}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-segmented-icon-control', (_$slot = new WeakMap(), _onSlotChange = new WeakMap(), _onOptionChange = new WeakMap(), _onValueChange = new WeakSet(), _onChangeReactHandler = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-segmented-icon-control', class extends NectaryElement {
+  #$slot;
+
   constructor() {
     super();
-
-    _classPrivateMethodInitSpec(this, _onValueChange);
-
-    _classPrivateFieldInitSpec(this, _$slot, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _onSlotChange, {
-      writable: true,
-      value: () => {
-        _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, this.value);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onOptionChange, {
-      writable: true,
-      value: e => {
-        e.stopPropagation();
-        const $elem = e.target;
-        const value = e.detail;
-        const detail = this.multiple ? updateCsv(this.value, value, !getBooleanAttribute($elem, 'data-checked')) : value;
-        this.dispatchEvent(new CustomEvent('change', {
-          detail,
-          bubbles: true
-        }));
-        this.dispatchEvent(new CustomEvent('-change', {
-          detail
-        }));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onChangeReactHandler, {
-      writable: true,
-      value: e => {
-        getReactEventHandler(this, 'on-change')?.(e);
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$slot, shadowRoot.querySelector('slot'));
+    this.#$slot = shadowRoot.querySelector('slot');
   }
 
   connectedCallback() {
     this.setAttribute('role', 'tablist');
-
-    _classPrivateFieldGet(this, _$slot).addEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
-
-    _classPrivateFieldGet(this, _$slot).addEventListener('option-change', _classPrivateFieldGet(this, _onOptionChange));
-
-    this.addEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+    this.#$slot.addEventListener('slotchange', this.#onSlotChange);
+    this.#$slot.addEventListener('option-change', this.#onOptionChange);
+    this.addEventListener('-change', this.#onChangeReactHandler);
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$slot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
-
-    _classPrivateFieldGet(this, _$slot).removeEventListener('option-change', _classPrivateFieldGet(this, _onOptionChange));
-
-    this.removeEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+    this.#$slot.removeEventListener('slotchange', this.#onSlotChange);
+    this.#$slot.removeEventListener('option-change', this.#onOptionChange);
+    this.removeEventListener('-change', this.#onChangeReactHandler);
   }
 
   static get observedAttributes() {
@@ -113,29 +57,48 @@ defineCustomElement('sinch-segmented-icon-control', (_$slot = new WeakMap(), _on
     switch (name) {
       case 'value':
         {
-          _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, newVal ?? '');
-
+          this.#onValueChange(newVal ?? '');
           break;
         }
     }
   }
 
-}));
-
-function _onValueChange2(csv) {
-  if (this.multiple) {
-    const values = getCsvSet(csv);
-
-    for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
-      const isChecked = !getBooleanAttribute($option, 'disabled') && values.has(getAttribute($option, 'value', ''));
-      updateBooleanAttribute($option, 'data-checked', isChecked);
-    }
-  } else {
-    const value = getFirstCsvValue(csv);
+  #onSlotChange = () => {
+    this.#onValueChange(this.value);
+  };
+  #onOptionChange = e => {
+    e.stopPropagation();
+    const $elem = e.target;
+    const value = e.detail;
+    const detail = this.multiple ? updateCsv(this.value, value, !getBooleanAttribute($elem, 'data-checked')) : value;
+    this.dispatchEvent(new CustomEvent('change', {
+      detail,
+      bubbles: true
+    }));
+    this.dispatchEvent(new CustomEvent('-change', {
+      detail
+    }));
+  };
+
+  #onValueChange(csv) {
+    if (this.multiple) {
+      const values = getCsvSet(csv);
+
+      for (const $option of this.#$slot.assignedElements()) {
+        const isChecked = !getBooleanAttribute($option, 'disabled') && values.has(getAttribute($option, 'value', ''));
+        updateBooleanAttribute($option, 'data-checked', isChecked);
+      }
+    } else {
+      const value = getFirstCsvValue(csv);
 
-    for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
-      const isChecked = !getBooleanAttribute($option, 'disabled') && value === getAttribute($option, 'value', '');
-      updateBooleanAttribute($option, 'data-checked', isChecked);
+      for (const $option of this.#$slot.assignedElements()) {
+        const isChecked = !getBooleanAttribute($option, 'disabled') && value === getAttribute($option, 'value', '');
+        updateBooleanAttribute($option, 'data-checked', isChecked);
+      }
     }
   }
-}
+
+  #onChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-change')?.(e);
+  };
+});

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

@@ -11,6 +11,7 @@ export declare type TSinchSegmentedIconControlReact = TSinchElementReact<TSinchS
     value: string;
     multiple?: boolean;
     'aria-label': string;
+    /** @deprecated */
     onChange?: (event: SyntheticEvent<TSinchSegmentedIconControlElement, CustomEvent<string>>) => void;
     'on-change'?: (e: CustomEvent<string>) => void;
 };

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

@@ -1,92 +1,32 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$button, _onButtonClick, _onButtonFocus, _onButtonBlur, _onFocusReactHandler, _onBlurReactHandler;
-
-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, getReactEventHandler, 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([data-checked]) #wrapper{border-color:var(--sinch-color-stormy-500)}:host([data-checked]:not(:first-child)) #wrapper::before{content:"";width:1px;background-color:var(--sinch-color-stormy-500);position:absolute;left:-1px;top:-1px;bottom:-1px}:host([data-checked]: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 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-400)}: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([data-checked]) #wrapper{border-color:var(--sinch-color-stormy-500)}:host([data-checked]:not(:first-child)) #wrapper::before{content:"";width:1px;background-color:var(--sinch-color-stormy-500);position:absolute;left:-1px;top:-1px;bottom:-1px}:host([data-checked]: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', (_$button = new WeakMap(), _onButtonClick = new WeakMap(), _onButtonFocus = new WeakMap(), _onButtonBlur = new WeakMap(), _onFocusReactHandler = new WeakMap(), _onBlurReactHandler = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-segmented-icon-control-option', class extends NectaryElement {
+  #$button;
+
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$button, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _onButtonClick, {
-      writable: true,
-      value: e => {
-        e.stopPropagation();
-        this.dispatchEvent(new CustomEvent('option-change', {
-          detail: this.value,
-          bubbles: true
-        }));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onButtonFocus, {
-      writable: true,
-      value: () => {
-        this.dispatchEvent(new CustomEvent('-focus'));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onButtonBlur, {
-      writable: true,
-      value: () => {
-        this.dispatchEvent(new CustomEvent('-blur'));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onFocusReactHandler, {
-      writable: true,
-      value: () => {
-        getReactEventHandler(this, 'on-focus')?.();
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onBlurReactHandler, {
-      writable: true,
-      value: () => {
-        getReactEventHandler(this, 'on-blur')?.();
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$button, shadowRoot.querySelector('#button'));
+    this.#$button = shadowRoot.querySelector('#button');
   }
 
   connectedCallback() {
     this.setAttribute('role', 'tab');
-
-    _classPrivateFieldGet(this, _$button).addEventListener('click', _classPrivateFieldGet(this, _onButtonClick));
-
-    _classPrivateFieldGet(this, _$button).addEventListener('focus', _classPrivateFieldGet(this, _onButtonFocus));
-
-    _classPrivateFieldGet(this, _$button).addEventListener('blur', _classPrivateFieldGet(this, _onButtonBlur));
-
-    this.addEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
-    this.addEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
+    this.#$button.addEventListener('click', this.#onButtonClick);
+    this.#$button.addEventListener('focus', this.#onButtonFocus);
+    this.#$button.addEventListener('blur', this.#onButtonBlur);
+    this.addEventListener('-focus', this.#onFocusReactHandler);
+    this.addEventListener('-blur', this.#onBlurReactHandler);
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$button).removeEventListener('click', _classPrivateFieldGet(this, _onButtonClick));
-
-    _classPrivateFieldGet(this, _$button).removeEventListener('focus', _classPrivateFieldGet(this, _onButtonFocus));
-
-    _classPrivateFieldGet(this, _$button).removeEventListener('blur', _classPrivateFieldGet(this, _onButtonBlur));
-
-    this.removeEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
-    this.removeEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
+    this.#$button.removeEventListener('click', this.#onButtonClick);
+    this.#$button.removeEventListener('focus', this.#onButtonFocus);
+    this.#$button.removeEventListener('blur', this.#onButtonBlur);
+    this.removeEventListener('-focus', this.#onFocusReactHandler);
+    this.removeEventListener('-blur', this.#onBlurReactHandler);
   }
 
   static get observedAttributes() {
@@ -119,18 +59,37 @@ defineCustomElement('sinch-segmented-icon-control-option', (_$button = new WeakM
 
       case 'disabled':
         {
-          _classPrivateFieldGet(this, _$button).disabled = isAttrTrue(newVal);
+          this.#$button.disabled = isAttrTrue(newVal);
           break;
         }
     }
   }
 
   focus() {
-    _classPrivateFieldGet(this, _$button).focus();
+    this.#$button.focus();
   }
 
   blur() {
-    _classPrivateFieldGet(this, _$button).blur();
+    this.#$button.blur();
   }
 
-}));
+  #onButtonClick = e => {
+    e.stopPropagation();
+    this.dispatchEvent(new CustomEvent('option-change', {
+      detail: this.value,
+      bubbles: true
+    }));
+  };
+  #onButtonFocus = () => {
+    this.dispatchEvent(new CustomEvent('-focus'));
+  };
+  #onButtonBlur = () => {
+    this.dispatchEvent(new CustomEvent('-blur'));
+  };
+  #onFocusReactHandler = () => {
+    getReactEventHandler(this, 'on-focus')?.();
+  };
+  #onBlurReactHandler = () => {
+    getReactEventHandler(this, 'on-blur')?.();
+  };
+});

package/select-button/index.d.ts

@@ -0,0 +1,13 @@
+import '../text';
+import '../icons/keyboard-arrow-down';
+import type { TSinchSelectButtonElement, TSinchSelectButtonReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-select-button': TSinchSelectButtonReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-select-button': TSinchSelectButtonElement;
+    }
+}

package/select-button/index.js

@@ -0,0 +1,153 @@
+import '../text';
+import '../icons/keyboard-arrow-down';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:48px;padding:0 12px;background-color:var(--sinch-color-snow-100);border-radius:var(--sinch-shape-radius-s);--sinch-size-icon:24px;--sinch-color-icon:var(--sinch-color-stormy-500)}#button{all:initial;cursor:pointer;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;border-radius:var(--sinch-shape-radius-s);border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box}#text{flex:1;min-width:0;color:var(--sinch-color-text-muted)}:host([text]:not([text=""])) #text{color:var(--sinch-color-text-default)}#button:disabled{border-color:var(--sinch-color-snow-500);cursor:initial}#button:focus-visible{border-color:var(--sinch-color-stormy-600)}@supports not selector(:focus-visible){#button:focus{border-color:var(--sinch-color-stormy-600)}}:host([invalid]) #button:enabled{border-color:var(--sinch-color-text-invalid)}#button:disabled~#text{color:var(--sinch-color-stormy-100)}:host([disabled]) #wrapper{--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><button id="button"></button><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text><sinch-icon-keyboard-arrow-down></sinch-icon-keyboard-arrow-down></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-select-button', class extends NectaryElement {
+  #$button;
+  #$text;
+  #controller = new AbortController();
+
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$button = shadowRoot.querySelector('#button');
+    this.#$text = shadowRoot.querySelector('#text');
+  }
+
+  connectedCallback() {
+    const {
+      signal
+    } = this.#controller;
+    this.setAttribute('role', 'button');
+    this.#$button.addEventListener('click', this.#onButtonClick, {
+      signal
+    });
+    this.#$button.addEventListener('focus', this.#onButtonFocus, {
+      signal
+    });
+    this.#$button.addEventListener('blur', this.#onButtonBlur, {
+      signal
+    });
+    this.addEventListener('-click', this.#onClickReactHandler, {
+      signal
+    });
+    this.addEventListener('-focus', this.#onFocusReactHandler, {
+      signal
+    });
+    this.addEventListener('-blur', this.#onBlurReactHandler, {
+      signal
+    });
+  }
+
+  disconnectedCallback() {
+    this.#controller.abort();
+  }
+
+  static get observedAttributes() {
+    return ['text', 'placeholder', 'invalid', 'disabled'];
+  }
+
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+
+  set placeholder(value) {
+    updateAttribute(this, 'placeholder', value);
+  }
+
+  get placeholder() {
+    return getAttribute(this, 'placeholder');
+  }
+
+  set invalid(isInvalid) {
+    updateBooleanAttribute(this, 'invalid', isInvalid);
+  }
+
+  get invalid() {
+    return getBooleanAttribute(this, 'invalid');
+  }
+
+  set disabled(isDisabled) {
+    updateBooleanAttribute(this, 'disabled', isDisabled);
+  }
+
+  get disabled() {
+    return getBooleanAttribute(this, 'disabled');
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+
+    switch (name) {
+      case 'text':
+        {
+          const value = newVal ?? '';
+          this.#$text.textContent = value.length > 0 ? value : this.placeholder;
+          break;
+        }
+
+      case 'placeholder':
+        {
+          const value = this.text;
+
+          if (value.length === 0) {
+            this.#$text.textContent = newVal ?? '';
+          }
+
+          break;
+        }
+
+      case 'invalid':
+        {
+          const isInvalid = isAttrTrue(newVal);
+          updateBooleanAttribute(this, 'invalid', isInvalid);
+          updateExplicitBooleanAttribute(this, 'aria-invalid', isInvalid);
+          break;
+        }
+
+      case 'disabled':
+        {
+          const isDisabled = isAttrTrue(newVal);
+          this.#$button.disabled = isDisabled;
+          updateBooleanAttribute(this, 'disabled', isDisabled);
+          break;
+        }
+    }
+  }
+
+  focus() {
+    this.#$button.focus();
+  }
+
+  blur() {
+    this.#$button.blur();
+  }
+
+  #onButtonFocus = () => {
+    this.dispatchEvent(new CustomEvent('-focus'));
+  };
+  #onButtonBlur = () => {
+    this.dispatchEvent(new CustomEvent('-blur'));
+  };
+  #onButtonClick = () => {
+    this.dispatchEvent(new CustomEvent('-click'));
+  };
+  #onClickReactHandler = e => {
+    getReactEventHandler(this, 'on-click')?.(e);
+  };
+  #onFocusReactHandler = () => {
+    getReactEventHandler(this, 'on-focus')?.();
+  };
+  #onBlurReactHandler = () => {
+    getReactEventHandler(this, 'on-blur')?.();
+  };
+});

package/select-button/types.d.ts

@@ -0,0 +1,43 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchSelectButtonElement = HTMLElement & {
+    /** Text */
+    text: string;
+    /** Text that appears in the text field when it has no text set */
+    placeholder: string;
+    /** Invalid state */
+    invalid: boolean;
+    /** Disabled */
+    disabled: boolean;
+    /** Click event */
+    addEventListener(type: '-click', listener: (e: CustomEvent<void>) => void): void;
+    /** Focus event */
+    addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
+    /** Blur event */
+    addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
+    /** Text */
+    setAttribute(name: 'text', value: string): void;
+    /** Text that appears in the text field when it has no value set */
+    setAttribute(name: 'placeholder', value: string): void;
+    /** Invalid state */
+    setAttribute(name: 'invalid', value: ''): void;
+    /** Disabled */
+    setAttribute(name: 'disabled', value: ''): void;
+};
+export declare type TSinchSelectButtonReact = TSinchElementReact<TSinchSelectButtonElement> & {
+    /** Text */
+    text: string;
+    /** Label that is used for a11y` */
+    'aria-label': string;
+    /** Text that appears in the text field when it has no text set */
+    placeholder: string;
+    /** Invalid state */
+    invalid?: boolean;
+    /** Disabled */
+    disabled?: boolean;
+    /** Click handler */
+    'on-click'?: (e: CustomEvent<void>) => void;
+    /** Focus handler */
+    'on-focus'?: (e: CustomEvent<void>) => void;
+    /** Blur handler */
+    'on-blur'?: (e: CustomEvent<void>) => void;
+};

package/select-menu/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchSelectMenuElement, TSinchSelectMenuReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-select-menu': TSinchSelectMenuReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-select-menu': TSinchSelectMenuElement;
+    }
+}