@nectary/components 0.27.0 → 0.29.0

package/accordion/index.d.ts

@@ -1,14 +1,4 @@
-import type { TSinchElementReact } from '../types';
-import type { SyntheticEvent } from 'react';
-export declare type TSinchAccordionElement = HTMLElement & {
-    value: string;
-    multiple: boolean;
-};
-export declare type TSinchAccordionReact = TSinchElementReact<TSinchAccordionElement> & {
-    multiple?: boolean;
-    value: string;
-    onChange: (e: SyntheticEvent<TSinchAccordionElement, CustomEvent<string>>) => void;
-};
+import type { TSinchAccordionElement, TSinchAccordionReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/accordion/index.js

@@ -39,7 +39,7 @@ defineCustomElement('sinch-accordion', (_$slot = new WeakMap(), _onSlotChange =
         e.stopPropagation();
         const $elem = e.target;
         const value = e.detail;
-        const result = this.multiple ? updateCsv(this.value, value, !$elem.checked) : $elem.checked ? '' : value;
+        const result = this.multiple ? updateCsv(this.value, value, !getBooleanAttribute($elem, 'checked')) : getBooleanAttribute($elem, 'checked') ? '' : value;
         this.dispatchEvent(new CustomEvent('change', {
           detail: result,
           bubbles: true

package/accordion/types.d.ts

@@ -0,0 +1,14 @@
+import type { TSinchElementReact } from '../types';
+import type { SyntheticEvent } from 'react';
+export declare type TSinchAccordionElement = HTMLElement & {
+    value: string;
+    multiple: boolean;
+    addEventListener(type: 'change', listener: (e: CustomEvent<string>) => void): void;
+    setAttribute(name: 'value', value: string): void;
+    setAttribute(name: 'multiple', value: ''): void;
+};
+export declare type TSinchAccordionReact = TSinchElementReact<TSinchAccordionElement> & {
+    multiple?: boolean;
+    value: string;
+    onChange: (e: SyntheticEvent<TSinchAccordionElement, CustomEvent<string>>) => void;
+};

package/accordion/types.js

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

package/accordion-item/index.d.ts

@@ -1,27 +1,5 @@
 import '../icons/keyboard-arrow-down';
-import type { TSinchElementReact } from '../types';
-import type { FocusEvent } from 'react';
-declare const statusValues: readonly ["info", "success", "warn", "error"];
-export declare type TSinchAccordionStatusType = typeof statusValues[number];
-export declare type TSinchAccordionItemElement = HTMLElement & {
-    value: string;
-    label: string;
-    optionalText: string | null;
-    disabled: boolean;
-    checked: boolean;
-    status: TSinchAccordionStatusType | null;
-    focus(): void;
-    blur(): void;
-};
-export declare type TSinchAccordionItemReact = TSinchElementReact<TSinchAccordionItemElement> & {
-    value: string;
-    label: string;
-    optionalText?: string;
-    disabled?: boolean;
-    status?: TSinchAccordionStatusType;
-    onFocus?: (e: FocusEvent<TSinchAccordionItemElement>) => void;
-    onBlur?: (e: FocusEvent<TSinchAccordionItemElement>) => void;
-};
+import type { TSinchAccordionItemElement, TSinchAccordionItemReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -32,4 +10,3 @@ declare global {
         'sinch-accordion-item': TSinchAccordionItemElement;
     }
 }
-export {};

package/accordion-item/index.js

@@ -8,9 +8,9 @@ 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 '../icons/keyboard-arrow-down';
-import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0;min-height:48px}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;height:100%;box-sizing:border-box;overflow:hidden;border-bottom:1px solid var(--sinch-color-stormy-200);--sinch-size-icon:16px}#button{all:initial;cursor:pointer;display:flex;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:48px;padding:12px 8px;font:var(--sinch-font-title-s);color:var(--sinch-color-text-default);fill:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button:disabled{cursor:initial;color:var(--sinch-color-stormy-100);fill:var(--sinch-color-stormy-100)}#button::before{width:8px;height:8px;border-radius:50%;margin-left:2px;margin-right:8px}:host([status=success]) #button::before{content:"";background-color:var(--sinch-color-success-500)}:host([status=warn]) #button::before{content:"";background-color:var(--sinch-color-warning-500)}:host([status=error]) #button::before{content:"";background-color:var(--sinch-color-error-500)}:host([status=info]) #button::before{content:"";background-color:var(--sinch-color-informative-500)}#title{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#content{display:none;overflow-y:auto;flex-shrink:1;min-height:0;padding:0 8px 18px;font:var(--sinch-font-body);color:var(--sinch-color-text-default)}#dropdown-icon{--sinch-size-icon:24px}#button[aria-expanded=true]>#dropdown-icon{transform:rotate(180deg)}#button[aria-expanded=true]+#content{display:block}#optional{font:var(--sinch-font-small-text);color:var(--sinch-color-stormy-300)}</style><div id="wrapper"><button id="button" aria-controls="content" aria-expanded="false"><slot name="icon"></slot><span id="title"></span> <span id="optional"></span><sinch-icon-keyboard-arrow-down id="dropdown-icon"></sinch-icon-keyboard-arrow-down></button><div id="content" role="region" aria-labelledby="button"><slot name="content"></slot></div></div>';
-const statusValues = ['info', 'success', 'warn', 'error'];
+import { statusValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-accordion-item', (_$button = new WeakMap(), _$buttonContent = new WeakMap(), _$optionalText = new WeakMap(), _onButtonClick = new WeakMap(), class extends NectaryElement {
@@ -81,14 +81,6 @@ defineCustomElement('sinch-accordion-item', (_$button = new WeakMap(), _$buttonC
     return getAttribute(this, 'label', '');
   }
 
-  set checked(isChecked) {
-    updateBooleanAttribute(this, 'checked', isChecked);
-  }
-
-  get checked() {
-    return getBooleanAttribute(this, 'checked');
-  }
-
   set disabled(isDisabled) {
     updateBooleanAttribute(this, 'disabled', isDisabled);
   }
@@ -129,7 +121,7 @@ defineCustomElement('sinch-accordion-item', (_$button = new WeakMap(), _$buttonC
 
       case 'checked':
         {
-          updateAttribute(_classPrivateFieldGet(this, _$button), 'aria-expanded', isAttrTrue(newVal));
+          updateExplicitBooleanAttribute(_classPrivateFieldGet(this, _$button), 'aria-expanded', isAttrTrue(newVal));
           break;
         }
 

package/accordion-item/types.d.ts

@@ -0,0 +1,24 @@
+import type { TSinchElementReact } from '../types';
+import type { statusValues } from './utils';
+export declare type TSinchAccordionStatusType = typeof statusValues[number];
+export declare type TSinchAccordionItemElement = HTMLElement & {
+    value: string;
+    label: string;
+    optionalText: string | null;
+    disabled: boolean;
+    status: TSinchAccordionStatusType | null;
+    focus(): void;
+    blur(): void;
+    setAttribute(name: 'value', value: string): void;
+    setAttribute(name: 'label', value: string): void;
+    setAttribute(name: 'optionaltext', value: string): void;
+    setAttribute(name: 'disabled', value: ''): void;
+    setAttribute(name: 'status', value: TSinchAccordionStatusType): void;
+};
+export declare type TSinchAccordionItemReact = TSinchElementReact<TSinchAccordionItemElement> & {
+    value: string;
+    label: string;
+    optionalText?: string;
+    disabled?: boolean;
+    status?: TSinchAccordionStatusType;
+};

package/accordion-item/types.js

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

package/accordion-item/utils.d.ts

@@ -0,0 +1 @@
+export declare const statusValues: readonly ["info", "success", "warn", "error"];

package/accordion-item/utils.js

@@ -0,0 +1 @@
+export const statusValues = ['info', 'success', 'warn', 'error'];

package/action-menu/index.d.ts

@@ -0,0 +1,12 @@
+import '../popover';
+import type { TSinchActionMenuElement, TSinchActionMenuReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-action-menu': TSinchActionMenuReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-action-menu': TSinchActionMenuElement;
+    }
+}

package/action-menu/index.js

@@ -0,0 +1,274 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$optionSlot, _$listbox, _$popover, _onListboxKeyDown, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _selectOption, _getOptionElements, _findSelectedOption, _getEnabledOptionElements, _onOpen, _onClose, _onReactClose;
+
+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 { orientationValues } from '../popover/utils';
+import '../popover';
+import { attrValueToPixels, defineCustomElement, getBooleanAttribute, getIntegerAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateIntegerAttribute, updateLiteralAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}sinch-popover{width:100%}</style><sinch-popover><slot name="target" slot="target"></slot><div id="listbox" slot="content"><slot name="option"></slot></div></sinch-popover>';
+const ITEM_HEIGHT = 40;
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-action-menu', (_$optionSlot = new WeakMap(), _$listbox = new WeakMap(), _$popover = new WeakMap(), _onListboxKeyDown = new WeakMap(), _getFirstOption = new WeakSet(), _getLastOption = new WeakSet(), _getNextOption = new WeakSet(), _getPrevOption = new WeakSet(), _selectOption = new WeakSet(), _getOptionElements = new WeakSet(), _findSelectedOption = new WeakSet(), _getEnabledOptionElements = new WeakSet(), _onOpen = new WeakSet(), _onClose = new WeakMap(), _onReactClose = new WeakMap(), class extends NectaryElement {
+  constructor() {
+    super();
+
+    _classPrivateMethodInitSpec(this, _onOpen);
+
+    _classPrivateMethodInitSpec(this, _getEnabledOptionElements);
+
+    _classPrivateMethodInitSpec(this, _findSelectedOption);
+
+    _classPrivateMethodInitSpec(this, _getOptionElements);
+
+    _classPrivateMethodInitSpec(this, _selectOption);
+
+    _classPrivateMethodInitSpec(this, _getPrevOption);
+
+    _classPrivateMethodInitSpec(this, _getNextOption);
+
+    _classPrivateMethodInitSpec(this, _getLastOption);
+
+    _classPrivateMethodInitSpec(this, _getFirstOption);
+
+    _classPrivateFieldInitSpec(this, _$optionSlot, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$listbox, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$popover, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _onListboxKeyDown, {
+      writable: true,
+      value: e => {
+        switch (e.code) {
+          case 'ArrowUp':
+          case 'ArrowLeft':
+            {
+              e.preventDefault();
+
+              _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, _classPrivateMethodGet(this, _getPrevOption, _getPrevOption2).call(this));
+
+              break;
+            }
+
+          case 'ArrowDown':
+          case 'ArrowRight':
+            {
+              e.preventDefault();
+
+              _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, _classPrivateMethodGet(this, _getNextOption, _getNextOption2).call(this));
+
+              break;
+            }
+        }
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onClose, {
+      writable: true,
+      value: () => {
+        this.dispatchEvent(new CustomEvent('close', {
+          bubbles: true
+        }));
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onReactClose, {
+      writable: true,
+      value: () => {
+        getReactEventHandler(this, 'onClose')?.();
+      }
+    });
+
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$optionSlot, shadowRoot.querySelector('slot[name="option"]'));
+
+    _classPrivateFieldSet(this, _$listbox, shadowRoot.querySelector('#listbox'));
+
+    _classPrivateFieldSet(this, _$popover, shadowRoot.querySelector('sinch-popover'));
+  }
+
+  connectedCallback() {
+    this.setAttribute('role', 'listbox');
+    this.addEventListener('close', _classPrivateFieldGet(this, _onReactClose));
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('close', _classPrivateFieldGet(this, _onReactClose));
+  }
+
+  static get observedAttributes() {
+    return ['open', 'orientation', 'maxvisibleitems'];
+  }
+
+  get nodeName() {
+    return 'select';
+  }
+
+  set maxVisibleItems(value) {
+    updateIntegerAttribute(this, 'maxvisibleitems', value);
+  }
+
+  get maxVisibleItems() {
+    return getIntegerAttribute(this, 'maxvisibleitems', null);
+  }
+
+  get orientation() {
+    return getLiteralAttribute(this, orientationValues, 'orientation', 'bottom-right');
+  }
+
+  set orientation(value) {
+    updateLiteralAttribute(this, orientationValues, 'orientation', value);
+  }
+
+  set open(isOpen) {
+    updateBooleanAttribute(this, 'open', isOpen);
+  }
+
+  get open() {
+    return getBooleanAttribute(this, 'open');
+  }
+
+  get dropdownRect() {
+    return _classPrivateFieldGet(this, _$popover).popoverRect;
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case 'open':
+        {
+          updateAttribute(_classPrivateFieldGet(this, _$popover), 'open', newVal);
+
+          if (isAttrTrue(newVal)) {
+            _classPrivateMethodGet(this, _onOpen, _onOpen2).call(this);
+
+            _classPrivateFieldGet(this, _$popover).addEventListener('keydown', _classPrivateFieldGet(this, _onListboxKeyDown));
+
+            _classPrivateFieldGet(this, _$popover).addEventListener('close', _classPrivateFieldGet(this, _onClose));
+          } else {
+            _classPrivateFieldGet(this, _$popover).removeEventListener('keydown', _classPrivateFieldGet(this, _onListboxKeyDown));
+
+            _classPrivateFieldGet(this, _$popover).removeEventListener('close', _classPrivateFieldGet(this, _onClose));
+          }
+
+          break;
+        }
+
+      case 'orientation':
+        {
+          updateAttribute(_classPrivateFieldGet(this, _$popover), 'orientation', newVal);
+          break;
+        }
+
+      case 'maxvisibleitems':
+        {
+          if (newVal === '0') {
+            _classPrivateFieldGet(this, _$listbox).style.maxHeight = 'unset';
+          } else {
+            _classPrivateFieldGet(this, _$listbox).style.maxHeight = attrValueToPixels(newVal, {
+              min: 2,
+              multiplier: ITEM_HEIGHT
+            });
+          }
+
+          break;
+        }
+    }
+  }
+
+}));
+
+function _getFirstOption2() {
+  return _classPrivateMethodGet(this, _getEnabledOptionElements, _getEnabledOptionElements2).call(this)[0] ?? null;
+}
+
+function _getLastOption2() {
+  return _classPrivateMethodGet(this, _getEnabledOptionElements, _getEnabledOptionElements2).call(this).reverse()[0] ?? null;
+}
+
+function _getNextOption2() {
+  const $options = _classPrivateMethodGet(this, _getEnabledOptionElements, _getEnabledOptionElements2).call(this);
+
+  const $selectedOption = _classPrivateMethodGet(this, _findSelectedOption, _findSelectedOption2).call(this, $options);
+
+  const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
+
+  if (currentIndex < 0) {
+    return _classPrivateMethodGet(this, _getFirstOption, _getFirstOption2).call(this);
+  }
+
+  return $options[(currentIndex + 1) % $options.length];
+}
+
+function _getPrevOption2() {
+  const $options = _classPrivateMethodGet(this, _getEnabledOptionElements, _getEnabledOptionElements2).call(this);
+
+  const $selectedOption = _classPrivateMethodGet(this, _findSelectedOption, _findSelectedOption2).call(this, $options);
+
+  const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
+
+  if (currentIndex < 0) {
+    return _classPrivateMethodGet(this, _getLastOption, _getLastOption2).call(this);
+  }
+
+  return $options[(currentIndex - 1 + $options.length) % $options.length];
+}
+
+function _selectOption2($option) {
+  for (const $op of _classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).call(this)) {
+    const isSelected = $op === $option;
+    updateBooleanAttribute($op, 'selected', isSelected);
+
+    if (isSelected) {
+      $op.focus();
+    }
+  }
+}
+
+function _getOptionElements2() {
+  let $elements = _classPrivateFieldGet(this, _$optionSlot).assignedElements();
+
+  if ($elements.length === 1 && $elements[0].tagName === 'SLOT') {
+    $elements = $elements[0].assignedElements();
+  }
+
+  return $elements;
+}
+
+function _findSelectedOption2(elements) {
+  for (const el of elements) {
+    if (getBooleanAttribute(el, 'selected')) {
+      return el;
+    }
+  }
+
+  return null;
+}
+
+function _getEnabledOptionElements2() {
+  return _classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).call(this).filter(opt => opt.disabled !== true);
+}
+
+function _onOpen2() {
+  _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, _classPrivateMethodGet(this, _getFirstOption, _getFirstOption2).call(this));
+}

package/action-menu/types.d.ts

@@ -0,0 +1,20 @@
+import type { TSinchPopoverOrientation } from '../popover/types';
+import type { TRect, TSinchElementReact } from '../types';
+import type { SyntheticEvent } from 'react';
+export declare type TSinchActionMenuElement = HTMLElement & {
+    open: boolean;
+    orientation: TSinchPopoverOrientation;
+    maxVisibleItems: number | null;
+    readonly dropdownRect: TRect;
+    addEventListener(type: 'close', listener: (e: CustomEvent<void>) => void): void;
+    setAttribute(name: 'open', value: ''): void;
+    setAttribute(name: 'orientation', value: TSinchPopoverOrientation): void;
+    setAttribute(name: 'maxvisibleitems', value: string): void;
+};
+export declare type TSinchActionMenuReact = TSinchElementReact<TSinchActionMenuElement> & {
+    open: boolean;
+    orientation?: TSinchPopoverOrientation;
+    maxVisibleItems?: number;
+    'aria-label': string;
+    onClose: (event: SyntheticEvent<TSinchActionMenuElement, CustomEvent<void>>) => void;
+};

package/action-menu/types.js

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

package/action-menu-option/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchActionMenuOptionElement, TSinchActionMenuOptionReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-action-menu-option': TSinchActionMenuOptionReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-action-menu-option': TSinchActionMenuOptionElement;
+    }
+}

package/action-menu-option/index.js

@@ -0,0 +1,87 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$button, _$content;
+
+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';
+const templateHTML = '<style>:host{display:block}#wrapper{all:initial;display:flex;position:relative;box-sizing:border-box;height:40px;width:100%;padding:6px 12px;align-items:center;gap:12px;user-select:none;cursor:pointer;font:inherit;color:inherit;--sinch-size-icon:24px}#content{flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#wrapper:focus,:host(:hover)>#wrapper{background-color:var(--sinch-color-snow-500)}:host([disabled]:not([disabled=false]))>#wrapper{color:var(--sinch-color-stormy-100);cursor:initial;--sinch-color-icon:var(--sinch-color-stormy-100)}</style><button id="wrapper"><slot name="icon"></slot><span id="content"></span></button>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-action-menu-option', (_$button = new WeakMap(), _$content = new WeakMap(), class ActionMenuOption extends NectaryElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$button, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$content, {
+      writable: true,
+      value: void 0
+    });
+
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$button, shadowRoot.querySelector('#wrapper'));
+
+    _classPrivateFieldSet(this, _$content, shadowRoot.querySelector('#content'));
+  }
+
+  connectedCallback() {
+    this.setAttribute('role', 'option');
+  }
+
+  static get observedAttributes() {
+    return ['text', 'disabled'];
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+
+    switch (name) {
+      case 'text':
+        {
+          _classPrivateFieldGet(this, _$content).textContent = newVal;
+          break;
+        }
+
+      case 'disabled':
+        {
+          _classPrivateFieldGet(this, _$button).disabled = isAttrTrue(newVal);
+        }
+    }
+  }
+
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+
+  set disabled(isDisabled) {
+    updateBooleanAttribute(this, 'disabled', isDisabled);
+  }
+
+  get disabled() {
+    return getBooleanAttribute(this, 'disabled');
+  }
+
+  focus() {
+    _classPrivateFieldGet(this, _$button).focus();
+  }
+
+  blur() {
+    _classPrivateFieldGet(this, _$button).blur();
+  }
+
+}));

package/action-menu-option/types.d.ts

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

package/action-menu-option/types.js

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

package/alert/index.d.ts

@@ -1,18 +1,4 @@
-import type { TSinchElementReact } from '../types';
-declare const typeValues: readonly ["info", "success", "warn", "error"];
-export declare type TSinchAlertType = typeof typeValues[number];
-export declare type TSinchAlertElement = HTMLElement & {
-    type: TSinchAlertType;
-    text: string;
-    title: string;
-    multiline: boolean;
-};
-export declare type TSinchAlertReact = TSinchElementReact<TSinchAlertElement> & {
-    type: TSinchAlertType;
-    text: string;
-    title?: string;
-    multiline?: boolean;
-};
+import type { TSinchAlertElement, TSinchAlertReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -23,4 +9,3 @@ declare global {
         'sinch-alert': TSinchAlertElement;
     }
 }
-export {};