@nectary/components 0.26.0 → 0.28.0

package/accordion/index.js

@@ -1,21 +1,26 @@
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 
-var _$slot, _onSlotChange, _onOptionChange;
+var _$slot, _onSlotChange, _onOptionChange, _onValueChange;
+
+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"); } }
 
-import { isAccordionItemElement } from '../accordion-item';
-import { defineCustomElement, getAttribute, getBooleanAttribute, getCSVSet, getFirstCSValue, NectaryElement, updateAttribute, updateBooleanAttribute, updateCSV } from '../utils';
+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, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv } from '../utils';
 const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:100%}::slotted(sinch-accordion-item){flex-shrink:1}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-accordion', (_$slot = new WeakMap(), _onSlotChange = new WeakMap(), _onOptionChange = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-accordion', (_$slot = new WeakMap(), _onSlotChange = new WeakMap(), _onOptionChange = new WeakMap(), _onValueChange = new WeakSet(), class extends NectaryElement {
   constructor() {
     super();
 
+    _classPrivateMethodInitSpec(this, _onValueChange);
+
     _classPrivateFieldInitSpec(this, _$slot, {
       writable: true,
       value: void 0
@@ -24,7 +29,7 @@ defineCustomElement('sinch-accordion', (_$slot = new WeakMap(), _onSlotChange =
     _classPrivateFieldInitSpec(this, _onSlotChange, {
       writable: true,
       value: () => {
-        this.onValueChange(this.value);
+        _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, this.value);
       }
     });
 
@@ -32,18 +37,11 @@ defineCustomElement('sinch-accordion', (_$slot = new WeakMap(), _onSlotChange =
       writable: true,
       value: e => {
         e.stopPropagation();
-
-        if (!isAccordionItemElement(e.target)) {
-          return;
-        }
-
-        const {
-          value,
-          isChecked
-        } = e.detail;
-        const csv = updateCSV(this.multiple ? this.value : value, value, isChecked);
+        const $elem = e.target;
+        const value = e.detail;
+        const result = this.multiple ? updateCsv(this.value, value, !$elem.checked) : $elem.checked ? '' : value;
         this.dispatchEvent(new CustomEvent('change', {
-          detail: csv,
+          detail: result,
           bubbles: true
         }));
       }
@@ -90,30 +88,29 @@ defineCustomElement('sinch-accordion', (_$slot = new WeakMap(), _onSlotChange =
     switch (name) {
       case 'value':
         {
-          this.onValueChange(newVal ?? '');
+          _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, newVal ?? '');
+
           break;
         }
     }
   }
 
-  onValueChange(csv) {
-    if (this.multiple) {
-      const values = getCSVSet(csv);
+}));
 
-      for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
-        if (isAccordionItemElement($option)) {
-          $option.checked = $option.disabled !== true && values.has($option.value);
-        }
-      }
-    } else {
-      const value = getFirstCSValue(csv);
+function _onValueChange2(csv) {
+  if (this.multiple) {
+    const values = getCsvSet(csv);
 
-      for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
-        if (isAccordionItemElement($option)) {
-          $option.checked = $option.disabled !== true && $option.value === value;
-        }
-      }
+    for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
+      const isChecked = !getBooleanAttribute($option, 'disabled') && values.has(getAttribute($option, 'value', ''));
+      updateBooleanAttribute($option, '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, 'checked', isChecked);
+    }
+  }
+}

package/accordion-item/index.d.ts

@@ -1,28 +1,5 @@
 import '../icons/keyboard-arrow-down';
-import type { TSinchElementReact } from '../types';
-import type { FocusEvent } from 'react';
-export declare const isAccordionItemElement: (element: EventTarget | Element | null) => element is TSinchAccordionItemElement;
-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 {
@@ -33,4 +10,3 @@ declare global {
         'sinch-accordion-item': TSinchAccordionItemElement;
     }
 }
-export {};

package/accordion-item/index.js

@@ -10,10 +10,7 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 import '../icons/keyboard-arrow-down';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, 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>';
-export const isAccordionItemElement = element => {
-  return element instanceof Element && element.tagName === 'SINCH-ACCORDION-ITEM';
-};
-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 {
@@ -41,10 +38,7 @@ defineCustomElement('sinch-accordion-item', (_$button = new WeakMap(), _$buttonC
         e.stopPropagation();
         this.dispatchEvent(new CustomEvent('change', {
           bubbles: true,
-          detail: {
-            value: this.value,
-            isChecked: !this.checked
-          }
+          detail: this.value
         }));
       }
     });

package/accordion-item/types.d.ts

@@ -0,0 +1,23 @@
+import type { TSinchElementReact } from '../types';
+import type { statusValues } from './utils';
+import type { FocusEvent } from 'react';
+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;
+};

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,29 @@
+import '../popover';
+import type { TSinchPopoverOrientation } from '../popover';
+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;
+    focus(): void;
+    blur(): void;
+};
+export declare type TSinchActionMenuReact = TSinchElementReact<TSinchActionMenuElement> & {
+    open: boolean;
+    orientation?: TSinchPopoverOrientation;
+    maxVisibleItems?: number;
+    'aria-label': string;
+    onClose: (event: SyntheticEvent<TSinchActionMenuElement, CustomEvent<void>>) => void;
+};
+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;
+    $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 (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-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,95 @@
+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');
+  }
+
+  set selected(isSelected) {
+    updateBooleanAttribute(this, 'data-selected', isSelected);
+  }
+
+  get selected() {
+    return getBooleanAttribute(this, 'data-selected');
+  }
+
+  focus() {
+    _classPrivateFieldGet(this, _$button).focus();
+  }
+
+  blur() {
+    _classPrivateFieldGet(this, _$button).blur();
+  }
+
+}));

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

@@ -0,0 +1,17 @@
+import type { TSinchElementReact } from '../types';
+import type { FocusEvent, MouseEvent } from 'react';
+export declare type TSinchActionMenuOptionElement = HTMLElement & {
+    text: string;
+    selected: boolean;
+    disabled: boolean;
+    focus(): void;
+    blur(): void;
+};
+export declare type TSinchActionMenuOptionReact = TSinchElementReact<TSinchActionMenuOptionElement> & {
+    text: string;
+    disabled?: boolean;
+    'aria-label': string;
+    onClick: (e: MouseEvent<TSinchActionMenuOptionElement>) => void;
+    onFocus?: (e: FocusEvent<TSinchActionMenuOptionElement>) => void;
+    onBlur?: (e: FocusEvent<TSinchActionMenuOptionElement>) => void;
+};

package/action-menu-option/types.js

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

package/avatar/index.d.ts

@@ -1,4 +1,3 @@
-import '../icons/cancel';
 import type { TSinchElementReact } from '../types';
 declare const backgroundValues: readonly ["grey", "yellow", "blue"];
 declare const sizeValues: readonly ["l", "m", "s"];

package/avatar/index.js

@@ -7,7 +7,6 @@ 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/cancel';
 import { defineCustomElement, getAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateLiteralAttribute } from '../utils';
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:40px;height:40px;font:var(--sinch-font-title-s);line-height:38px;color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-700);text-align:center;border-radius:50%;border:1px solid var(--sinch-color-snow-100);box-sizing:border-box;text-transform:uppercase;--sinch-avatar-badge-size:16px;--sinch-avatar-badge-font:700 12px/14px "Gilroy","Arial","sans-serif"}:host([background=blue]) #wrapper{background-color:var(--sinch-color-stormy-500);color:var(--sinch-color-snow-100)}:host([background=yellow]) #wrapper{background-color:var(--sinch-color-honey-500)}:host([size="l"]) #wrapper{width:56px;height:56px;font:var(--sinch-font-title-m);line-height:54px;--sinch-avatar-badge-size:20px;--sinch-avatar-badge-font:700 12px/18px "Gilroy","Arial","sans-serif"}:host([size="s"]) #wrapper{width:24px;height:24px;font:var(--sinch-font-extra-small-text);line-height:22px;--sinch-avatar-badge-size:11px;--sinch-avatar-badge-font:500 8px/9px "Gilroy","Arial","sans-serif"}#text{display:block;width:100%;height:100%;box-sizing:border-box}#image{display:none;width:100%;height:100%;object-fit:contain;position:absolute;left:0;top:0;border-radius:50%}:host([src]:not([src=""])) #image{display:block}::slotted(sinch-avatar-badge){position:absolute;top:-2px;left:calc(100% - 15px)}:host([size="l"]) ::slotted(sinch-avatar-badge){left:calc(100% - 19px)}:host([size="s"]) ::slotted(sinch-avatar-badge){left:calc(100% - 9px)}::slotted(sinch-avatar-status){position:absolute;bottom:-2px;right:-2px}:host([size="l"]) ::slotted(sinch-avatar-status){bottom:2px;right:2px}</style><div id="wrapper"><span id="text"></span> <img id="image" alt=""/><slot name="badge"></slot><slot name="status"></slot></div>';
 const backgroundValues = ['grey', 'yellow', 'blue'];

package/avatar-badge/index.d.ts

@@ -1,4 +1,3 @@
-import '../icons/cancel';
 import type { TSinchElementReact } from '../types';
 export declare type TSinchAvatarBadgeElement = HTMLElement & {
     text: string;