@nectary/components 0.9.0 → 0.11.0

package/select/index.js

@@ -1,109 +1,30 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$button, _$buttonContent, _$label, _$optionalText, _$additionalText, _$invalidText, _$selectSlot, _$listbox, _onButtonClick, _onListboxClick, _onListboxKeyUp, _onListboxKeyDown, _onSlotChange, _onListboxBlur;
+var _$button, _$buttonContent, _$label, _$optionalText, _$additionalText, _$invalidText, _$dropdown, _$optionSlot, _updateButtonContent, _onValueChange, _getOptionWithValue, _onLabelClick;
+
+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 { isSelectOptionElement } from '../select-option';
-import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute, updateIntegerAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:100%;box-sizing:border-box}#button{all:initial;display:flex;align-items:center;gap:8px;border:1px solid var(--sinch-color-stormy-200);border-radius:2px;box-sizing:border-box;width:100%;height:48px;margin:2px 0;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100)}#dropdown-icon{fill:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button[data-unselected]{color:var(--sinch-color-text-muted)}#button:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100)}#button:disabled #dropdown-icon{fill:var(--sinch-color-stormy-100)}#button:focus{border-color:var(--sinch-color-stormy-300)}:host([invalidtext]:not([invalidtext=""])) #button:not(:disabled){border-color:var(--sinch-color-text-invalid)}#content{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#bottom,#top{display:flex;align-items:baseline}#top{height:24px}#bottom{height:20px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-4);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted)}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid)}::slotted(sinch-help-tooltip){align-self:center;margin:0 8px}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])){--sinch-color-icon:var(--sinch-color-stormy-100)}#listbox{position:absolute;left:0;top:0;padding-top:74px;width:100%;display:none;list-style:none;outline:0;z-index:1}#listbox>*{font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);border:1px solid var(--sinch-color-stormy-500);border-top-width:0;border-bottom-left-radius:2px;border-bottom-right-radius:2px;width:100%;box-sizing:border-box;box-shadow:1px 2px 4px rgb(0 0 0 / 15%);overflow-y:auto}#button[aria-expanded=true]{border-bottom-left-radius:0;border-bottom-right-radius:0}#button[aria-expanded=true]~#listbox{display:block}</style><div id="wrapper"><div id="top"><label id="label" for="button"></label><slot name="tooltip"></slot><span id="optional"></span></div><button id="button" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="label button"><span id="content"></span> <svg id="dropdown-icon" width="12" height="8"><path d="M1.41.59 6 5.17 10.59.59 12 2 6 8 0 2 1.41.59Z"/></svg></button><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div><div id="listbox" tabindex="-1"><div><slot name="select"></slot></div></div></div>';
-const ITEM_HEIGHT = 36;
-
-const getEnabledOptionElements = $slot => {
-  return $slot.assignedElements().filter(opt => isSelectOptionElement(opt) && opt.disabled !== true);
-};
-
-const findSelectedOption = elements => {
-  return elements.find(el => el.selected) ?? null;
-};
-
-const getOptionWithValue = ($slot, value) => {
-  for (const $option of $slot.assignedElements()) {
-    if (isSelectOptionElement($option) && $option.disabled !== true && $option.value === value) {
-      return $option;
-    }
-  }
-
-  return null;
-};
-
-const getFirstOption = $slot => {
-  for (const $option of $slot.assignedElements()) {
-    if (isSelectOptionElement($option) && $option.disabled !== true) {
-      return $option;
-    }
-  }
-
-  return null;
-};
-
-const getLastOption = $slot => {
-  for (const $option of $slot.assignedElements().reverse()) {
-    if (isSelectOptionElement($option) && $option.disabled !== true) {
-      return $option;
-    }
-  }
-
-  return null;
-};
-
-const getNextOption = $slot => {
-  const $options = getEnabledOptionElements($slot);
-  const $selectedOption = findSelectedOption($options);
-  const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
-
-  if (currentIndex < 0) {
-    return getFirstOption($slot);
-  }
-
-  return $options[(currentIndex + 1) % $options.length];
-};
-
-const getPrevOption = $slot => {
-  const $options = getEnabledOptionElements($slot);
-  const $selectedOption = findSelectedOption($options);
-  const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
-
-  if (currentIndex < 0) {
-    return getLastOption($slot);
-  }
-
-  return $options[(currentIndex - 1 + $options.length) % $options.length];
-};
-
-const selectOption = ($slot, $option) => {
-  for (const $op of $slot.assignedElements()) {
-    if (isSelectOptionElement($op)) {
-      const isSelected = $op === $option;
-      $op.selected = isSelected;
-
-      if (isSelected) {
-        $op.scrollIntoView?.({
-          block: 'nearest'
-        });
-      }
-    }
-  }
-};
-
-const dispatchChangeEvent = ($root, $opt) => {
-  if ($opt != null && $root.value !== $opt.value) {
-    $root.dispatchEvent(new CustomEvent('change', {
-      detail: $opt.value,
-      bubbles: true
-    }));
-  }
-};
+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 '../select-option';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute, updateIntegerAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{position:relative}sinch-dropdown{display:block}#button{all:initial;display:flex;align-items:center;gap:8px;border:1px solid var(--sinch-color-stormy-200);border-radius:2px;box-sizing:border-box;width:100%;height:48px;margin:2px 0;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);cursor:pointer}#button:focus{border-color:var(--sinch-color-stormy-300)}#dropdown-icon{fill:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button[data-unselected]{color:var(--sinch-color-text-muted)}#button:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100);cursor:initial}#button:disabled #dropdown-icon{fill:var(--sinch-color-stormy-100)}:host([invalidtext]:not([invalidtext=""])) #button:not(:disabled){border-color:var(--sinch-color-text-invalid)}#content{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#bottom,#top{display:flex;align-items:baseline}#top{height:24px}#bottom{height:20px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-4);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted)}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid)}::slotted(sinch-help-tooltip){align-self:center;margin:0 8px}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])){--sinch-color-icon:var(--sinch-color-stormy-100)}#listbox{position:absolute;left:0;top:0;padding-top:74px;width:100%;display:none;list-style:none;outline:0;z-index:1}#listbox-body{font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);border:1px solid var(--sinch-color-stormy-500);border-top-width:0;border-bottom-left-radius:2px;border-bottom-right-radius:2px;width:100%;box-sizing:border-box;box-shadow:1px 2px 4px rgb(0 0 0 / 15%);overflow-y:auto}#button[aria-expanded=true]~#listbox{display:block}</style><div id="wrapper"><div id="top"><label id="label" for="dropdown"></label><slot name="tooltip"></slot><span id="optional"></span></div><sinch-dropdown id="dropdown"><button slot="target" id="button"><span id="content"></span> <svg id="dropdown-icon" width="12" height="8" aria-hidden="true"><path d="M1.41.59 6 5.17 10.59.59 12 2 6 8 0 2 1.41.59Z"/></svg></button><slot name="option" slot="option"></slot></sinch-dropdown><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _$selectSlot = new WeakMap(), _$listbox = new WeakMap(), _onButtonClick = new WeakMap(), _onListboxClick = new WeakMap(), _onListboxKeyUp = new WeakMap(), _onListboxKeyDown = new WeakMap(), _onSlotChange = new WeakMap(), _onListboxBlur = new WeakMap(), class extends HTMLElement {
+defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _$dropdown = new WeakMap(), _$optionSlot = new WeakMap(), _updateButtonContent = new WeakSet(), _onValueChange = new WeakMap(), _getOptionWithValue = new WeakSet(), _onLabelClick = new WeakMap(), class extends HTMLElement {
   constructor() {
     super();
 
+    _classPrivateMethodInitSpec(this, _getOptionWithValue);
+
+    _classPrivateMethodInitSpec(this, _updateButtonContent);
+
     _classPrivateFieldInitSpec(this, _$button, {
       writable: true,
       value: void 0
@@ -134,113 +55,35 @@ defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent =
       value: void 0
     });
 
-    _classPrivateFieldInitSpec(this, _$selectSlot, {
+    _classPrivateFieldInitSpec(this, _$dropdown, {
       writable: true,
       value: void 0
     });
 
-    _classPrivateFieldInitSpec(this, _$listbox, {
+    _classPrivateFieldInitSpec(this, _$optionSlot, {
       writable: true,
       value: void 0
     });
 
-    _classPrivateFieldInitSpec(this, _onButtonClick, {
-      writable: true,
-      value: e => {
-        e.stopPropagation();
-
-        if (_classPrivateFieldGet(this, _$button).getAttribute('aria-expanded') !== 'true') {
-          this.onExpand();
-        }
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onListboxClick, {
-      writable: true,
-      value: e => {
-        e.stopPropagation();
-        const $elem = e.target;
-
-        if ($elem !== _classPrivateFieldGet(this, _$listbox) && isSelectOptionElement($elem) && $elem.disabled !== true) {
-          dispatchChangeEvent(this, $elem);
-        }
-
-        this.onCollapse();
-
-        _classPrivateFieldGet(this, _$button).focus();
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onListboxKeyUp, {
+    _classPrivateFieldInitSpec(this, _onValueChange, {
       writable: true,
       value: e => {
-        switch (e.code) {
-          case 'Space':
-          case 'Enter':
-            {
-              e.preventDefault();
-              dispatchChangeEvent(this, findSelectedOption(getEnabledOptionElements(_classPrivateFieldGet(this, _$selectSlot))));
-              this.onCollapse();
-
-              _classPrivateFieldGet(this, _$button).focus();
-
-              break;
-            }
-        }
+        this.dispatchEvent(new CustomEvent('change', {
+          detail: e.detail,
+          bubbles: true
+        }));
       }
     });
 
-    _classPrivateFieldInitSpec(this, _onListboxKeyDown, {
-      writable: true,
-      value: e => {
-        switch (e.code) {
-          case 'ArrowUp':
-          case 'ArrowLeft':
-            {
-              e.preventDefault();
-              selectOption(_classPrivateFieldGet(this, _$selectSlot), getPrevOption(_classPrivateFieldGet(this, _$selectSlot)));
-              break;
-            }
-
-          case 'ArrowDown':
-          case 'ArrowRight':
-            {
-              e.preventDefault();
-              selectOption(_classPrivateFieldGet(this, _$selectSlot), getNextOption(_classPrivateFieldGet(this, _$selectSlot)));
-              break;
-            }
-
-          case 'Escape':
-            {
-              e.preventDefault();
-              this.onCollapse();
-
-              _classPrivateFieldGet(this, _$button).focus();
-
-              break;
-            }
-        }
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onSlotChange, {
+    _classPrivateFieldInitSpec(this, _onLabelClick, {
       writable: true,
       value: () => {
-        this.onCollapse();
-        this.onValueChange(this.value);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onListboxBlur, {
-      writable: true,
-      value: e => {
-        e.stopPropagation();
-        this.onCollapse();
+        this.focus();
       }
     });
 
     const shadowRoot = this.attachShadow({
-      mode: 'production' === 'development' ? 'open' : 'closed',
+      mode: 'closed',
       delegatesFocus: true
     });
     shadowRoot.appendChild(template.content.cloneNode(true));
@@ -249,8 +92,6 @@ defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent =
 
     _classPrivateFieldSet(this, _$buttonContent, shadowRoot.querySelector('#content'));
 
-    _classPrivateFieldSet(this, _$listbox, shadowRoot.querySelector('#listbox'));
-
     _classPrivateFieldSet(this, _$label, shadowRoot.querySelector('#label'));
 
     _classPrivateFieldSet(this, _$optionalText, shadowRoot.querySelector('#optional'));
@@ -259,41 +100,27 @@ defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent =
 
     _classPrivateFieldSet(this, _$invalidText, shadowRoot.querySelector('#invalid'));
 
-    _classPrivateFieldSet(this, _$selectSlot, shadowRoot.querySelector('slot[name="select"]'));
+    _classPrivateFieldSet(this, _$dropdown, shadowRoot.querySelector('sinch-dropdown'));
+
+    _classPrivateFieldSet(this, _$optionSlot, shadowRoot.querySelector('slot[name="option"]'));
   }
 
   connectedCallback() {
     this.setAttribute('role', 'listbox');
 
-    _classPrivateFieldGet(this, _$button).addEventListener('click', _classPrivateFieldGet(this, _onButtonClick));
-
-    _classPrivateFieldGet(this, _$listbox).addEventListener('blur', _classPrivateFieldGet(this, _onListboxBlur));
-
-    _classPrivateFieldGet(this, _$listbox).addEventListener('click', _classPrivateFieldGet(this, _onListboxClick));
+    _classPrivateFieldGet(this, _$dropdown).addEventListener('change', _classPrivateFieldGet(this, _onValueChange));
 
-    _classPrivateFieldGet(this, _$listbox).addEventListener('keydown', _classPrivateFieldGet(this, _onListboxKeyDown));
-
-    _classPrivateFieldGet(this, _$listbox).addEventListener('keypress', _classPrivateFieldGet(this, _onListboxKeyUp));
-
-    _classPrivateFieldGet(this, _$selectSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
+    _classPrivateFieldGet(this, _$label).addEventListener('click', _classPrivateFieldGet(this, _onLabelClick));
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$button).removeEventListener('click', _classPrivateFieldGet(this, _onButtonClick));
-
-    _classPrivateFieldGet(this, _$listbox).removeEventListener('blur', _classPrivateFieldGet(this, _onListboxBlur));
+    _classPrivateFieldGet(this, _$dropdown).removeEventListener('change', _classPrivateFieldGet(this, _onValueChange));
 
-    _classPrivateFieldGet(this, _$listbox).removeEventListener('click', _classPrivateFieldGet(this, _onListboxClick));
-
-    _classPrivateFieldGet(this, _$listbox).removeEventListener('keydown', _classPrivateFieldGet(this, _onListboxKeyDown));
-
-    _classPrivateFieldGet(this, _$listbox).removeEventListener('keypress', _classPrivateFieldGet(this, _onListboxKeyUp));
-
-    _classPrivateFieldGet(this, _$selectSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
+    _classPrivateFieldGet(this, _$label).removeEventListener('click', _classPrivateFieldGet(this, _onLabelClick));
   }
 
   static get observedAttributes() {
-    return ['value', 'label', 'optionaltext', 'additionaltext', 'invalidtext', 'disabled', 'maxvisibleitems'];
+    return ['value', 'label', 'placeholder', 'optionaltext', 'additionaltext', 'invalidtext', 'disabled', 'maxvisibleitems'];
   }
 
   get nodeName() {
@@ -364,24 +191,33 @@ defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent =
     return getIntegerAttribute(this, 'maxvisibleitems', null);
   }
 
+  get dropdownRect() {
+    return _classPrivateFieldGet(this, _$dropdown).dropdownRect;
+  }
+
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
       case 'value':
         {
-          this.onValueChange(newVal ?? '');
+          updateAttribute(_classPrivateFieldGet(this, _$dropdown), 'value', newVal);
+
+          _classPrivateMethodGet(this, _updateButtonContent, _updateButtonContent2).call(this);
+
           break;
         }
 
       case 'placeholder':
         {
-          this.onValueChange(this.value);
+          updateAttribute(this, 'role-description', newVal);
+
+          _classPrivateMethodGet(this, _updateButtonContent, _updateButtonContent2).call(this);
+
           break;
         }
 
       case 'label':
         {
           _classPrivateFieldGet(this, _$label).textContent = newVal;
-          updateAttribute(this, 'aria-label', newVal ?? '');
           break;
         }
 
@@ -400,93 +236,64 @@ defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent =
       case 'invalidtext':
         {
           _classPrivateFieldGet(this, _$invalidText).textContent = newVal;
+          updateAttribute(this, 'aria-invalid', String(newVal !== null && newVal !== ''));
           break;
         }
 
       case 'disabled':
         {
+          updateAttribute(_classPrivateFieldGet(this, _$dropdown), 'disabled', newVal);
           _classPrivateFieldGet(this, _$button).disabled = isAttrTrue(newVal);
-
-          if (_classPrivateFieldGet(this, _$button).disabled) {
-            this.onCollapse();
-          }
-
           break;
         }
 
       case 'maxvisibleitems':
         {
-          const $list = _classPrivateFieldGet(this, _$listbox).firstElementChild;
-
-          $list.style.maxHeight = attrValueToPixels(newVal, {
-            min: 2,
-            multiplier: ITEM_HEIGHT
-          });
+          updateAttribute(_classPrivateFieldGet(this, _$dropdown), 'maxvisibleitems', newVal);
           break;
         }
     }
   }
 
-  onExpand() {
-    _classPrivateFieldGet(this, _$button).setAttribute('aria-expanded', 'true');
-
-    _classPrivateFieldGet(this, _$listbox).focus();
-
-    selectOption(_classPrivateFieldGet(this, _$selectSlot), getOptionWithValue(_classPrivateFieldGet(this, _$selectSlot), this.value) ?? getFirstOption(_classPrivateFieldGet(this, _$selectSlot)));
+  focus() {
+    _classPrivateFieldGet(this, _$dropdown).focus();
   }
 
-  onCollapse() {
-    _classPrivateFieldGet(this, _$button).setAttribute('aria-expanded', 'false');
+  blur() {
+    _classPrivateFieldGet(this, _$dropdown).blur();
   }
 
-  onValueChange(value) {
-    let $checkedOption = null;
-
-    for (const $option of _classPrivateFieldGet(this, _$selectSlot).assignedElements()) {
-      if (isSelectOptionElement($option)) {
-        const isChecked = $checkedOption === null && $option.disabled !== true && $option.value === value;
-        $option.checked = isChecked;
-
-        if (isChecked) {
-          $checkedOption = $option;
-
-          _classPrivateFieldGet(this, _$listbox).setAttribute('aria-activedescendant', $option.id);
-        }
-      }
-    }
+}));
 
-    this.updateButtonContent($checkedOption);
+function _updateButtonContent2() {
+  if (_classPrivateFieldGet(this, _$button).firstElementChild !== _classPrivateFieldGet(this, _$buttonContent)) {
+    _classPrivateFieldGet(this, _$button).removeChild(_classPrivateFieldGet(this, _$button).firstElementChild);
   }
 
-  updateButtonContent($option) {
-    if (_classPrivateFieldGet(this, _$button).firstElementChild !== _classPrivateFieldGet(this, _$buttonContent)) {
-      _classPrivateFieldGet(this, _$button).removeChild(_classPrivateFieldGet(this, _$button).firstElementChild);
-    }
+  const $option = _classPrivateMethodGet(this, _getOptionWithValue, _getOptionWithValue2).call(this, this.value);
 
-    if ($option === null) {
-      _classPrivateFieldGet(this, _$button).setAttribute('data-unselected', '');
+  if ($option == null) {
+    _classPrivateFieldGet(this, _$button).setAttribute('data-unselected', '');
 
-      _classPrivateFieldGet(this, _$buttonContent).textContent = this.placeholder ?? '';
-    } else {
-      _classPrivateFieldGet(this, _$button).removeAttribute('data-unselected');
+    _classPrivateFieldGet(this, _$buttonContent).textContent = this.placeholder ?? '';
+  } else {
+    _classPrivateFieldGet(this, _$button).removeAttribute('data-unselected');
 
-      _classPrivateFieldGet(this, _$buttonContent).textContent = $option.text;
-      const $icon = $option.icon?.cloneNode(true);
+    _classPrivateFieldGet(this, _$buttonContent).textContent = $option.text;
+    const $icon = $option.icon;
 
-      if ($icon != null) {
-        _classPrivateFieldGet(this, _$button).prepend($icon);
-      }
+    if ($icon != null) {
+      _classPrivateFieldGet(this, _$button).prepend($icon.cloneNode(true));
     }
   }
+}
 
-  focus() {
-    _classPrivateFieldGet(this, _$button).focus();
-  }
-
-  blur() {
-    _classPrivateFieldGet(this, _$button).blur();
-
-    _classPrivateFieldGet(this, _$listbox).blur();
+function _getOptionWithValue2(value) {
+  for (const $option of _classPrivateFieldGet(this, _$optionSlot).assignedElements()) {
+    if (isDropdownOptionElement($option) && $option.disabled !== true && $option.value === value) {
+      return $option;
+    }
   }
 
-}));
+  return null;
+}

package/select-option/index.d.ts

@@ -1,20 +1,6 @@
-import type { TSinchElementReact } from '../types';
-export declare const isSelectOptionElement: (element: EventTarget | Element | null) => element is TSinchSelectOptionElement;
-export declare type TSinchSelectOptionElement = HTMLElement & {
-    value: string;
-    text: string;
-    checked: boolean;
-    selected: boolean;
-    disabled: boolean;
-    readonly icon: Element | null;
-};
-export declare type TSinchSelectOptionReact = TSinchElementReact<TSinchSelectOptionElement> & {
-    value: string;
-    text: string;
-    checked?: boolean;
-    selected?: boolean;
-    disabled?: boolean;
-};
+import type { TSinchDropdownOptionElement, TSinchDropdownOptionReact } from '../dropdown-option';
+export declare type TSinchSelectOptionElement = TSinchDropdownOptionElement;
+export declare type TSinchSelectOptionReact = TSinchDropdownOptionReact;
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/select-option/index.js

@@ -1,107 +1,8 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$iconSlot, _$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, 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}#content{flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::slotted(*){margin-right:12px}:host(:hover)>#wrapper,:host([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>';
-export const isSelectOptionElement = element => {
-  return element instanceof Element && element.tagName === 'SINCH-SELECT-OPTION';
-};
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-defineCustomElement('sinch-select-option', (_$iconSlot = new WeakMap(), _$content = new WeakMap(), class extends HTMLElement {
+import { DropdownOption } from '../dropdown-option';
+import { defineCustomElement } from '../utils';
+defineCustomElement('sinch-select-option', class extends DropdownOption {
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$iconSlot, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$content, {
-      writable: true,
-      value: void 0
-    });
-
-    const shadowRoot = this.attachShadow({
-      mode: 'production' === 'development' ? 'open' : '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'];
-  }
-
-  attributeChangedCallback(name, oldVal, newVal) {
-    if (oldVal === newVal) {
-      return;
-    }
-
-    switch (name) {
-      case 'text':
-        {
-          _classPrivateFieldGet(this, _$content).textContent = newVal;
-          break;
-        }
-    }
-  }
-
-  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, 'selected', isSelected);
-  }
-
-  get selected() {
-    return getBooleanAttribute(this, 'selected');
-  }
-
-  get icon() {
-    return _classPrivateFieldGet(this, _$iconSlot).assignedElements()[0] ?? null;
   }
 
-}));
+});

package/spinner/index.js

@@ -7,7 +7,7 @@ defineCustomElement('sinch-spinner', class extends HTMLElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow({
-      mode: 'production' === 'development' ? 'open' : 'closed'
+      mode: 'closed'
     });
     shadowRoot.appendChild(template.content.cloneNode(true));
   }

package/table/index.js

@@ -6,7 +6,7 @@ defineCustomElement('sinch-table', class extends HTMLElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow({
-      mode: 'production' === 'development' ? 'open' : 'closed'
+      mode: 'closed'
     });
     shadowRoot.appendChild(template.content.cloneNode(true));
   }

package/table-body/index.js

@@ -6,7 +6,7 @@ defineCustomElement('sinch-table-body', class extends HTMLElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow({
-      mode: 'production' === 'development' ? 'open' : 'closed'
+      mode: 'closed'
     });
     shadowRoot.appendChild(template.content.cloneNode(true));
   }

package/table-cell/index.js

@@ -7,7 +7,7 @@ defineCustomElement('sinch-table-cell', class extends HTMLElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow({
-      mode: 'production' === 'development' ? 'open' : 'closed'
+      mode: 'closed'
     });
     shadowRoot.appendChild(template.content.cloneNode(true));
   }

package/table-head/index.js

@@ -6,7 +6,7 @@ defineCustomElement('sinch-table-head', class extends HTMLElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow({
-      mode: 'production' === 'development' ? 'open' : 'closed'
+      mode: 'closed'
     });
     shadowRoot.appendChild(template.content.cloneNode(true));
   }