@nectary/components 0.9.0 → 0.10.0

package/dropdown/index.js

@@ -0,0 +1,451 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$button, _$optionSlot, _$listbox, _$targetElement, _$targetSlot, _onTargetFocusin, _onButtonClick, _onListboxClick, _onListboxKeyPress, _onListboxKeyDown, _onOptionSlotChange, _onTargetSlotChange, _onListboxBlur, _onExpand, _onCollapse, _onValueChange, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _selectOption, _getOptionWithValue, _getOptionElements, _getEnabledOptionElements, _dispatchChangeEvent, _focusTargetElement;
+
+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 { isDropdownOptionElement } from '../dropdown-option';
+import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getLiteralAttribute, getRect, updateAttribute, updateBooleanAttribute, updateIntegerAttribute, updateLiteralAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:100%;box-sizing:border-box}#listbox{display:none;position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;box-sizing:border-box;outline:0}#listbox-body{position:absolute;left:0;top:calc(100% + 8px);min-width:100%;width:max-content;box-sizing:border-box;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:1px 2px 4px rgb(0 0 0 / 15%);overflow-y:auto;contain:content}:host([orientation=bottom-left]) #listbox-body{left:unset;right:0}:host([orientation=top-right]) #listbox-body{top:-8px;transform:translateY(-100%)}:host([orientation=top-left]) #listbox-body{top:-8px;transform:translateY(-100%);left:unset;right:0}#button[aria-expanded=true]~#listbox{display:block}::slotted(*){display:block}</style><div id="wrapper"><div id="button" aria-haspopup="listbox" aria-expanded="false"><slot name="target"></slot></div><div id="listbox" tabindex="-1"><div id="listbox-body"><slot name="option"></slot></div></div></div>';
+const orientationValues = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
+const ITEM_HEIGHT = 36;
+
+const findSelectedOption = elements => {
+  for (const el of elements) {
+    if (el.selected) {
+      return el;
+    }
+  }
+
+  return null;
+};
+
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot = new WeakMap(), _$listbox = new WeakMap(), _$targetElement = new WeakMap(), _$targetSlot = new WeakMap(), _onTargetFocusin = new WeakMap(), _onButtonClick = new WeakMap(), _onListboxClick = new WeakMap(), _onListboxKeyPress = new WeakMap(), _onListboxKeyDown = new WeakMap(), _onOptionSlotChange = new WeakMap(), _onTargetSlotChange = new WeakMap(), _onListboxBlur = new WeakMap(), _onExpand = new WeakSet(), _onCollapse = new WeakSet(), _onValueChange = new WeakSet(), _getFirstOption = new WeakSet(), _getLastOption = new WeakSet(), _getNextOption = new WeakSet(), _getPrevOption = new WeakSet(), _selectOption = new WeakSet(), _getOptionWithValue = new WeakSet(), _getOptionElements = new WeakSet(), _getEnabledOptionElements = new WeakSet(), _dispatchChangeEvent = new WeakSet(), _focusTargetElement = new WeakSet(), class extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateMethodInitSpec(this, _focusTargetElement);
+
+    _classPrivateMethodInitSpec(this, _dispatchChangeEvent);
+
+    _classPrivateMethodInitSpec(this, _getEnabledOptionElements);
+
+    _classPrivateMethodInitSpec(this, _getOptionElements);
+
+    _classPrivateMethodInitSpec(this, _getOptionWithValue);
+
+    _classPrivateMethodInitSpec(this, _selectOption);
+
+    _classPrivateMethodInitSpec(this, _getPrevOption);
+
+    _classPrivateMethodInitSpec(this, _getNextOption);
+
+    _classPrivateMethodInitSpec(this, _getLastOption);
+
+    _classPrivateMethodInitSpec(this, _getFirstOption);
+
+    _classPrivateMethodInitSpec(this, _onValueChange);
+
+    _classPrivateMethodInitSpec(this, _onCollapse);
+
+    _classPrivateMethodInitSpec(this, _onExpand);
+
+    _classPrivateFieldInitSpec(this, _$button, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$optionSlot, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$listbox, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$targetElement, {
+      writable: true,
+      value: null
+    });
+
+    _classPrivateFieldInitSpec(this, _$targetSlot, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _onTargetFocusin, {
+      writable: true,
+      value: e => {
+        _classPrivateFieldSet(this, _$targetElement, e.target);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onButtonClick, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+
+        if (this.disabled) {
+          return;
+        }
+
+        if (_classPrivateFieldGet(this, _$button).getAttribute('aria-expanded') !== 'true') {
+          _classPrivateMethodGet(this, _onExpand, _onExpand2).call(this);
+        }
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onListboxClick, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+        const $elem = e.target;
+
+        if ($elem !== _classPrivateFieldGet(this, _$listbox) && isDropdownOptionElement($elem) && $elem.disabled !== true) {
+          _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, $elem);
+        }
+
+        _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
+
+        _classPrivateMethodGet(this, _focusTargetElement, _focusTargetElement2).call(this);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onListboxKeyPress, {
+      writable: true,
+      value: e => {
+        switch (e.code) {
+          case 'Space':
+          case 'Enter':
+            {
+              e.preventDefault();
+
+              _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, findSelectedOption(_classPrivateMethodGet(this, _getEnabledOptionElements, _getEnabledOptionElements2).call(this)));
+
+              _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
+
+              _classPrivateMethodGet(this, _focusTargetElement, _focusTargetElement2).call(this);
+
+              break;
+            }
+        }
+      }
+    });
+
+    _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;
+            }
+
+          case 'Escape':
+            {
+              e.preventDefault();
+
+              _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
+
+              _classPrivateMethodGet(this, _focusTargetElement, _focusTargetElement2).call(this);
+
+              break;
+            }
+        }
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onOptionSlotChange, {
+      writable: true,
+      value: () => {
+        _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
+
+        _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, this.value);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onTargetSlotChange, {
+      writable: true,
+      value: () => {
+        _classPrivateFieldSet(this, _$targetElement, null);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onListboxBlur, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+
+        _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
+      }
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'closed',
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$button, shadowRoot.querySelector('#button'));
+
+    _classPrivateFieldSet(this, _$listbox, shadowRoot.querySelector('#listbox'));
+
+    _classPrivateFieldSet(this, _$optionSlot, shadowRoot.querySelector('slot[name="option"]'));
+
+    _classPrivateFieldSet(this, _$targetSlot, shadowRoot.querySelector('slot[name="target"]'));
+  }
+
+  connectedCallback() {
+    this.setAttribute('role', 'listbox');
+
+    _classPrivateFieldGet(this, _$button).addEventListener('click', _classPrivateFieldGet(this, _onButtonClick));
+
+    _classPrivateFieldGet(this, _$button).addEventListener('focusin', _classPrivateFieldGet(this, _onTargetFocusin));
+
+    _classPrivateFieldGet(this, _$listbox).addEventListener('blur', _classPrivateFieldGet(this, _onListboxBlur));
+
+    _classPrivateFieldGet(this, _$listbox).addEventListener('click', _classPrivateFieldGet(this, _onListboxClick));
+
+    _classPrivateFieldGet(this, _$listbox).addEventListener('keydown', _classPrivateFieldGet(this, _onListboxKeyDown));
+
+    _classPrivateFieldGet(this, _$listbox).addEventListener('keypress', _classPrivateFieldGet(this, _onListboxKeyPress));
+
+    _classPrivateFieldGet(this, _$optionSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onOptionSlotChange));
+
+    _classPrivateFieldGet(this, _$targetSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onTargetSlotChange));
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$button).removeEventListener('click', _classPrivateFieldGet(this, _onButtonClick));
+
+    _classPrivateFieldGet(this, _$button).removeEventListener('focusin', _classPrivateFieldGet(this, _onTargetFocusin));
+
+    _classPrivateFieldGet(this, _$listbox).removeEventListener('blur', _classPrivateFieldGet(this, _onListboxBlur));
+
+    _classPrivateFieldGet(this, _$listbox).removeEventListener('click', _classPrivateFieldGet(this, _onListboxClick));
+
+    _classPrivateFieldGet(this, _$listbox).removeEventListener('keydown', _classPrivateFieldGet(this, _onListboxKeyDown));
+
+    _classPrivateFieldGet(this, _$listbox).removeEventListener('keypress', _classPrivateFieldGet(this, _onListboxKeyPress));
+
+    _classPrivateFieldGet(this, _$optionSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onOptionSlotChange));
+
+    _classPrivateFieldGet(this, _$targetSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onTargetSlotChange));
+  }
+
+  static get observedAttributes() {
+    return ['value', 'maxvisibleitems'];
+  }
+
+  get nodeName() {
+    return 'select';
+  }
+
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+
+  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 disabled(isDisabled) {
+    updateBooleanAttribute(this, 'disabled', isDisabled);
+  }
+
+  get disabled() {
+    return getBooleanAttribute(this, 'disabled');
+  }
+
+  get dropdownRect() {
+    return getRect(_classPrivateFieldGet(this, _$listbox).firstElementChild);
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case 'value':
+        {
+          _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, newVal ?? '');
+
+          break;
+        }
+
+      case 'maxvisibleitems':
+        {
+          const $list = _classPrivateFieldGet(this, _$listbox).firstElementChild;
+
+          $list.style.maxHeight = attrValueToPixels(newVal, {
+            min: 2,
+            multiplier: ITEM_HEIGHT
+          });
+          break;
+        }
+    }
+  }
+
+  focus() {
+    _classPrivateMethodGet(this, _focusTargetElement, _focusTargetElement2).call(this);
+  }
+
+  blur() {
+    _classPrivateFieldGet(this, _$button).blur();
+
+    _classPrivateFieldGet(this, _$listbox).blur();
+  }
+
+}));
+
+function _onExpand2() {
+  _classPrivateFieldGet(this, _$button).setAttribute('aria-expanded', 'true');
+
+  _classPrivateFieldGet(this, _$listbox).focus();
+
+  _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, _classPrivateMethodGet(this, _getOptionWithValue, _getOptionWithValue2).call(this, this.value) ?? _classPrivateMethodGet(this, _getFirstOption, _getFirstOption2).call(this));
+}
+
+function _onCollapse2() {
+  _classPrivateFieldGet(this, _$button).setAttribute('aria-expanded', 'false');
+}
+
+function _onValueChange2(value) {
+  let $checkedOption = null;
+
+  for (const $option of _classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).call(this)) {
+    const isChecked = $checkedOption === null && $option.disabled !== true && $option.value === value;
+    $option.checked = isChecked;
+
+    if (isChecked) {
+      $checkedOption = $option;
+    }
+  }
+}
+
+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 = findSelectedOption($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 = findSelectedOption($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.scrollIntoView?.({
+        block: 'nearest'
+      });
+    }
+  }
+}
+
+function _getOptionWithValue2(value) {
+  for (const $option of _classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).call(this)) {
+    if ($option.disabled !== true && $option.value === value) {
+      return $option;
+    }
+  }
+
+  return null;
+}
+
+function _getOptionElements2() {
+  let $elements = _classPrivateFieldGet(this, _$optionSlot).assignedElements();
+
+  if ($elements.length === 1 && $elements[0].tagName === 'SLOT') {
+    $elements = $elements[0].assignedElements();
+  }
+
+  return $elements.filter(isDropdownOptionElement);
+}
+
+function _getEnabledOptionElements2() {
+  return _classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).call(this).filter(opt => opt.disabled !== true);
+}
+
+function _dispatchChangeEvent2($opt) {
+  if ($opt != null && this.value !== $opt.value) {
+    this.dispatchEvent(new CustomEvent('change', {
+      detail: $opt.value,
+      bubbles: true
+    }));
+  }
+}
+
+function _focusTargetElement2() {
+  const el = _classPrivateFieldGet(this, _$targetElement);
+
+  _classPrivateFieldSet(this, _$targetElement, null);
+
+  el?.focus();
+}

package/dropdown-option/index.d.ts

@@ -0,0 +1,44 @@
+import type { TSinchElementReact } from '../types';
+export declare class DropdownOption extends HTMLElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set value(value: string);
+    get value(): string;
+    set text(value: string);
+    get text(): string;
+    set disabled(isDisabled: boolean);
+    get disabled(): boolean;
+    set checked(isChecked: boolean);
+    get checked(): boolean;
+    set selected(isSelected: boolean);
+    get selected(): boolean;
+    get icon(): Element | null;
+}
+export declare const isDropdownOptionElement: (element: EventTarget | Element | null) => element is TSinchDropdownOptionElement;
+export declare type TSinchDropdownOptionElement = HTMLElement & {
+    value: string;
+    text: string;
+    checked: boolean;
+    selected: boolean;
+    disabled: boolean;
+    readonly icon: Element | null;
+};
+export declare type TSinchDropdownOptionReact = TSinchElementReact<TSinchDropdownOptionElement> & {
+    value: string;
+    text: string;
+    disabled?: boolean;
+    'aria-label': string;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-dropdown-option': TSinchDropdownOptionReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-dropdown-option': TSinchDropdownOptionElement;
+    }
+}

package/dropdown-option/index.js

@@ -0,0 +1,116 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+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, updateAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block}*{pointer-events:none}#wrapper{display:flex;position:relative;box-sizing:border-box;padding:6px 12px;width:100%;align-items:center;gap:12px}#content{flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:hover)>#wrapper,:host([data-selected])>#wrapper{background-color:var(--sinch-color-snow-500)}:host([checked])>#wrapper{padding-right:36px}:host([checked])>#wrapper::after{content:"";position:absolute;top:10px;right:11px;width:18px;height:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M6 11.17 1.83 7 .41 8.41 6 14 18 2 16.59.59 6 11.17Z\' fill=\'%230A273D\'/%3E%3C/svg%3E");background-size:cover;background-repeat:no-repeat}: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><span id="content"></span></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+
+var _$iconSlot = new WeakMap();
+
+var _$content = new WeakMap();
+
+export class DropdownOption extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$iconSlot, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$content, {
+      writable: true,
+      value: void 0
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'closed'
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$iconSlot, shadowRoot.querySelector('slot'));
+
+    _classPrivateFieldSet(this, _$content, shadowRoot.querySelector('span'));
+  }
+
+  connectedCallback() {
+    this.setAttribute('role', 'option');
+  }
+
+  static get observedAttributes() {
+    return ['text', 'checked'];
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+
+    switch (name) {
+      case 'text':
+        {
+          _classPrivateFieldGet(this, _$content).textContent = newVal;
+          break;
+        }
+
+      case 'checked':
+        {
+          updateAttribute(this, 'aria-selected', isAttrTrue(newVal));
+        }
+    }
+  }
+
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+
+  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 checked(isChecked) {
+    updateBooleanAttribute(this, 'checked', isChecked);
+  }
+
+  get checked() {
+    return getBooleanAttribute(this, 'checked');
+  }
+
+  set selected(isSelected) {
+    updateBooleanAttribute(this, 'data-selected', isSelected);
+  }
+
+  get selected() {
+    return getBooleanAttribute(this, 'data-selected');
+  }
+
+  get icon() {
+    return _classPrivateFieldGet(this, _$iconSlot).assignedElements()[0] ?? null;
+  }
+
+}
+defineCustomElement('sinch-dropdown-option', DropdownOption);
+export const isDropdownOptionElement = element => {
+  return element instanceof DropdownOption;
+};

package/help-tooltip/index.js

@@ -8,7 +8,7 @@ defineCustomElement('sinch-help-tooltip', class extends HTMLElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow({
-      mode: 'production' === 'development' ? 'open' : 'closed'
+      mode: 'closed'
     });
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.$tooltip = shadowRoot.querySelector('sinch-tooltip');
@@ -50,6 +50,10 @@ defineCustomElement('sinch-help-tooltip', class extends HTMLElement {
     updateAttribute(this, 'orientation', value);
   }
 
+  get tooltipRect() {
+    return this.$tooltip.tooltipRect;
+  }
+
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case 'text':

package/icon/cancel/index.js

@@ -1,4 +1,4 @@
 import { defineCustomElement } from '../../utils';
 import { createIconClass } from '../create-icon-class';
-const templateHTML = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2Zm4.3 14.3a.996.996 0 0 1-1.41 0L12 13.41 9.11 16.3a.996.996 0 1 1-1.41-1.41L10.59 12 7.7 9.11A.996.996 0 1 1 9.11 7.7L12 10.59l2.89-2.89a.996.996 0 1 1 1.41 1.41L13.41 12l2.89 2.89c.38.38.38 1.02 0 1.41Z"/></svg>';
+const templateHTML = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2Zm4.3 14.3a.996.996 0 0 1-1.41 0L12 13.41 9.11 16.3a.996.996 0 1 1-1.41-1.41L10.59 12 7.7 9.11A.996.996 0 1 1 9.11 7.7L12 10.59l2.89-2.89a.996.996 0 1 1 1.41 1.41L13.41 12l2.89 2.89c.38.38.38 1.02 0 1.41Z"/></svg>';
 defineCustomElement('sinch-icon-cancel', createIconClass(templateHTML));

package/icon/close/index.js

@@ -1,4 +1,4 @@
 import { defineCustomElement } from '../../utils';
 import { createIconClass } from '../create-icon-class';
-const templateHTML = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59 7.11 5.7A.996.996 0 1 0 5.7 7.11L10.59 12 5.7 16.89a.996.996 0 1 0 1.41 1.41L12 13.41l4.89 4.89a.996.996 0 1 0 1.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4Z"/></svg>';
+const templateHTML = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59 7.11 5.7A.996.996 0 1 0 5.7 7.11L10.59 12 5.7 16.89a.996.996 0 1 0 1.41 1.41L12 13.41l4.89 4.89a.996.996 0 1 0 1.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4Z"/></svg>';
 defineCustomElement('sinch-icon-close', createIconClass(templateHTML));

package/icon/create-icon-class.js

@@ -10,7 +10,7 @@ export const createIconClass = templateHTML => {
     constructor() {
       super();
       const shadowRoot = this.attachShadow({
-        mode: 'production' === 'development' ? 'open' : 'closed'
+        mode: 'closed'
       });
       shadowRoot.appendChild(template.content.cloneNode(true));
       this.$svg = shadowRoot.querySelector('svg');

package/icon/east/index.js

@@ -1,4 +1,4 @@
 import { defineCustomElement } from '../../utils';
 import { createIconClass } from '../create-icon-class';
-const templateHTML = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14.29 5.71a.996.996 0 0 0 0 1.41L18.17 11H3c-.55 0-1 .45-1 1s.45 1 1 1h15.18l-3.88 3.88a.996.996 0 1 0 1.41 1.41l5.59-5.59a.996.996 0 0 0 0-1.41l-5.6-5.58a.996.996 0 0 0-1.41 0Z"/></svg>';
+const templateHTML = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14.29 5.71a.996.996 0 0 0 0 1.41L18.17 11H3c-.55 0-1 .45-1 1s.45 1 1 1h15.18l-3.88 3.88a.996.996 0 1 0 1.41 1.41l5.59-5.59a.996.996 0 0 0 0-1.41l-5.6-5.58a.996.996 0 0 0-1.41 0Z"/></svg>';
 defineCustomElement('sinch-icon-east', createIconClass(templateHTML));

package/icon/help-outline/index.js

@@ -1,4 +1,4 @@
 import { defineCustomElement } from '../../utils';
 import { createIconClass } from '../create-icon-class';
-const templateHTML = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Zm-1-4h2v2h-2v-2Zm1.61-9.96c-2.06-.3-3.88.97-4.43 2.79-.18.58.26 1.17.87 1.17h.2c.41 0 .74-.29.88-.67.32-.89 1.27-1.5 2.3-1.28.95.2 1.65 1.13 1.57 2.1-.1 1.34-1.62 1.63-2.45 2.88 0 .01-.01.01-.01.02-.01.02-.02.03-.03.05-.09.15-.18.32-.25.5-.01.03-.03.05-.04.08-.01.02-.01.04-.02.07-.12.34-.2.75-.2 1.25h2c0-.42.11-.77.28-1.07.02-.03.03-.06.05-.09.08-.14.18-.27.28-.39.01-.01.02-.03.03-.04.1-.12.21-.23.33-.34.96-.91 2.26-1.65 1.99-3.56-.24-1.74-1.61-3.21-3.35-3.47Z"/></svg>';
+const templateHTML = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Zm-1-4h2v2h-2v-2Zm1.61-9.96c-2.06-.3-3.88.97-4.43 2.79-.18.58.26 1.17.87 1.17h.2c.41 0 .74-.29.88-.67.32-.89 1.27-1.5 2.3-1.28.95.2 1.65 1.13 1.57 2.1-.1 1.34-1.62 1.63-2.45 2.88 0 .01-.01.01-.01.02-.01.02-.02.03-.03.05-.09.15-.18.32-.25.5-.01.03-.03.05-.04.08-.01.02-.01.04-.02.07-.12.34-.2.75-.2 1.25h2c0-.42.11-.77.28-1.07.02-.03.03-.06.05-.09.08-.14.18-.27.28-.39.01-.01.02-.03.03-.04.1-.12.21-.23.33-.34.96-.91 2.26-1.65 1.99-3.56-.24-1.74-1.61-3.21-3.35-3.47Z"/></svg>';
 defineCustomElement('sinch-icon-help-outline', createIconClass(templateHTML));

package/icon/more-horiz/index.js

@@ -1,4 +1,4 @@
 import { defineCustomElement } from '../../utils';
 import { createIconClass } from '../create-icon-class';
-const templateHTML = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Z"/></svg>';
+const templateHTML = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Z"/></svg>';
 defineCustomElement('sinch-icon-more-horiz', createIconClass(templateHTML));