@nectary/components 0.20.0 → 0.21.0

package/card-container/index.d.ts

@@ -0,0 +1,13 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchCardContainerElement = HTMLElement & {};
+export declare type TSinchCardContainerReact = TSinchElementReact<TSinchCardContainerElement> & {};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-card-container': TSinchCardContainerReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-card-container': TSinchCardContainerElement;
+    }
+}

package/card-container/index.js

@@ -0,0 +1,15 @@
+import { defineCustomElement } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{position:relative;padding:24px;box-sizing:border-box;background-color:var(--sinch-color-snow-100);border-radius:8px;border:1px solid var(--sinch-color-snow-700)}</style><div id="wrapper"><slot></slot></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-card-container', class extends HTMLElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({
+      mode: 'closed',
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+});

package/dialog/index.js

@@ -1,7 +1,7 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$dialog, _$closeButton, _$caption, _isConected, _onCancel, _onCloseClick, _onBackdropClick, _onCloseReactHandler, _dispatchCloseEvent, _setOpen;
+var _$dialog, _$closeButton, _$caption, _isConnected, _onCancel, _onCloseClick, _onBackdropClick, _onCloseReactHandler, _dispatchCloseEvent, _setOpen;
 
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 
@@ -12,24 +12,13 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
 
 import dialogPolyfill from 'dialog-polyfill';
-import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute, getReactEventHandler } from '../utils';
 import '../icon-button';
 import '../icon/close';
-const templateHTML = '<style>dialog{position:absolute;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px;width:100%;max-width:512px;border-radius:4px;box-sizing:border-box;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);border:none;box-shadow:1px 2px 8px rgb(0 0 0 / 10%)}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.55}dialog::backdrop{background-color:#000;opacity:.55}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}#header{display:flex;flex-direction:row;justify-content:space-between;align-content:center;margin-bottom:16px}#caption{font:var(--sinch-font-title-m);color:var(--sinch-color-text-default)}#content-wrapper{max-height:50vh;overflow-y:auto}#close{all:initial;cursor:pointer;--sinch-size-icon:24px}#buttons{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:24px}</style><dialog><div id="header"><span id="caption"></span> <button id="close"><sinch-icon-close></sinch-icon-close></button></div><div id="content-wrapper"><slot name="content"></slot></div><div id="buttons"><slot name="buttons"></slot></div></dialog>';
+const templateHTML = '<style>dialog{position:absolute;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px;width:100%;max-width:512px;border-radius:4px;box-sizing:border-box;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);border:none;box-shadow:1px 2px 8px rgba(0,0,0,.1)}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.55}dialog::backdrop{background-color:#000;opacity:.55}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}#header{display:flex;flex-direction:row;justify-content:space-between;align-content:center;margin-bottom:16px}#caption{font:var(--sinch-font-title-m);color:var(--sinch-color-text-default)}#content-wrapper{max-height:50vh;overflow-y:auto}#close{all:initial;cursor:pointer;--sinch-size-icon:24px}#buttons{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:24px}</style><dialog><div id="header"><span id="caption"></span> <button id="close"><sinch-icon-close></sinch-icon-close></button></div><div id="content-wrapper"><slot name="content"></slot></div><div id="buttons"><slot name="buttons"></slot></div></dialog>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-
-const getReactEventHandler = ($element, handlerName) => {
-  for (const key in $element) {
-    if (key.startsWith('__reactProps$')) {
-      return $element[key][handlerName];
-    }
-  }
-
-  return null;
-};
-
-defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = new WeakMap(), _$caption = new WeakMap(), _isConected = new WeakMap(), _onCancel = new WeakMap(), _onCloseClick = new WeakMap(), _onBackdropClick = new WeakMap(), _onCloseReactHandler = new WeakMap(), _dispatchCloseEvent = new WeakSet(), _setOpen = new WeakSet(), class extends HTMLElement {
+defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = new WeakMap(), _$caption = new WeakMap(), _isConnected = new WeakMap(), _onCancel = new WeakMap(), _onCloseClick = new WeakMap(), _onBackdropClick = new WeakMap(), _onCloseReactHandler = new WeakMap(), _dispatchCloseEvent = new WeakSet(), _setOpen = new WeakSet(), class extends HTMLElement {
   constructor() {
     super();
 
@@ -52,7 +41,7 @@ defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = n
       value: void 0
     });
 
-    _classPrivateFieldInitSpec(this, _isConected, {
+    _classPrivateFieldInitSpec(this, _isConnected, {
       writable: true,
       value: false
     });
@@ -123,7 +112,7 @@ defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = n
 
       case 'open':
         {
-          if (_classPrivateFieldGet(this, _isConected)) {
+          if (_classPrivateFieldGet(this, _isConnected)) {
             _classPrivateMethodGet(this, _setOpen, _setOpen2).call(this, isAttrTrue(newVal));
           }
 
@@ -150,7 +139,7 @@ defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = n
 
     _classPrivateFieldGet(this, _$dialog).addEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
 
-    _classPrivateFieldSet(this, _isConected, true);
+    _classPrivateFieldSet(this, _isConnected, true);
 
     if (getBooleanAttribute(this, 'open')) {
       _classPrivateMethodGet(this, _setOpen, _setOpen2).call(this, true);
@@ -165,7 +154,7 @@ defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = n
 
     _classPrivateFieldGet(this, _$dialog).removeEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
 
-    _classPrivateFieldSet(this, _isConected, false);
+    _classPrivateFieldSet(this, _isConnected, false);
   }
 
   get dialogRect() {
@@ -190,6 +179,6 @@ function _setOpen2(isOpen) {
       _classPrivateFieldGet(this, _$dialog).showModal();
     }
   } else {
-    _classPrivateFieldGet(this, _$dialog).close();
+    _classPrivateFieldGet(this, _$dialog).close?.();
   }
 }

package/dropdown/index.d.ts

@@ -3,20 +3,21 @@ import type { FocusEvent, SyntheticEvent } from 'react';
 declare const orientationValues: readonly ["top-left", "top-right", "bottom-left", "bottom-right"];
 export declare type TSinchDropdownOrientation = typeof orientationValues[number];
 export declare type TSinchDropdownElement = HTMLElement & {
+    open: boolean;
     orientation: TSinchDropdownOrientation;
     value: string;
-    disabled: boolean;
     maxVisibleItems: number | null;
     readonly dropdownRect: TRect;
     focus(): void;
     blur(): void;
 };
 export declare type TSinchDropdownReact = TSinchElementReact<TSinchDropdownElement> & {
+    open: boolean;
     orientation?: TSinchDropdownOrientation;
     value: string;
-    disabled?: boolean;
     maxVisibleItems?: number;
     'aria-label': string;
+    onClose: (event: SyntheticEvent<TSinchDropdownElement, CustomEvent<void>>) => void;
     onChange: (e: SyntheticEvent<TSinchDropdownElement, CustomEvent<string>>) => void;
     onFocus?: (e: FocusEvent<TSinchDropdownElement>) => void;
     onBlur?: (e: FocusEvent<TSinchDropdownElement>) => void;

package/dropdown/index.js

@@ -1,7 +1,7 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$button, _$optionSlot, _$listbox, _onButtonClick, _onListboxClick, _onListboxKeyPress, _onListboxKeyDown, _onOptionSlotChange, _setOpen, _onExpand, _onCollapse, _onValueChange, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _selectOption, _getOptionWithValue, _getOptionElements, _getEnabledOptionElements, _dispatchChangeEvent;
+var _$target, _$optionSlot, _$listbox, _isConnected, _onListboxClick, _onListboxKeyPress, _onListboxKeyDown, _onOptionSlotChange, _onExpand, _onCollapse, _isOpen, _updateOrientation, _onValueChange, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _selectOption, _getOptionWithValue, _getOptionElements, _getEnabledOptionElements, _dispatchChangeEvent, _dispatchCloseEvent, _onCancel, _onCloseReactHandler;
 
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 
@@ -11,9 +11,10 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 
 function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
 
+import dialogPolyfill from 'dialog-polyfill';
 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}dialog{outline:0;border:none;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;padding:0;border-radius:4px;cursor:pointer}dialog::backdrop{background-color:transparent}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:transparent}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}::slotted(*){display:block}</style><div id="wrapper"><div id="button" aria-haspopup="listbox" aria-expanded="false"><slot name="target"></slot></div><dialog id="listbox" tabindex="-1"><slot name="option"></slot></dialog></div>';
+import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getLiteralAttribute, getReactEventHandler, getRect, isAttrTrue, 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}dialog{outline:0;border:none;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:1px 2px 4px rgba(0,0,0,.15);overflow-y:auto;contain:content;padding:0;border-radius:4px;cursor:pointer}dialog::backdrop{background-color:transparent}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:transparent}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}::slotted(*){display:block}</style><div id="wrapper"><div id="target" aria-haspopup="listbox" aria-expanded="false"><slot name="target"></slot></div><dialog id="listbox" tabindex="-1"><slot name="option"></slot></dialog></div>';
 const orientationValues = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
 const ITEM_HEIGHT = 40;
 
@@ -29,10 +30,12 @@ const findSelectedOption = elements => {
 
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot = new WeakMap(), _$listbox = new WeakMap(), _onButtonClick = new WeakMap(), _onListboxClick = new WeakMap(), _onListboxKeyPress = new WeakMap(), _onListboxKeyDown = new WeakMap(), _onOptionSlotChange = new WeakMap(), _setOpen = new WeakSet(), _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(), class extends HTMLElement {
+defineCustomElement('sinch-dropdown', (_$target = new WeakMap(), _$optionSlot = new WeakMap(), _$listbox = new WeakMap(), _isConnected = new WeakMap(), _onListboxClick = new WeakMap(), _onListboxKeyPress = new WeakMap(), _onListboxKeyDown = new WeakMap(), _onOptionSlotChange = new WeakMap(), _onExpand = new WeakSet(), _onCollapse = new WeakSet(), _isOpen = new WeakSet(), _updateOrientation = 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(), _dispatchCloseEvent = new WeakSet(), _onCancel = new WeakMap(), _onCloseReactHandler = new WeakMap(), class extends HTMLElement {
   constructor() {
     super();
 
+    _classPrivateMethodInitSpec(this, _dispatchCloseEvent);
+
     _classPrivateMethodInitSpec(this, _dispatchChangeEvent);
 
     _classPrivateMethodInitSpec(this, _getEnabledOptionElements);
@@ -53,13 +56,15 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
 
     _classPrivateMethodInitSpec(this, _onValueChange);
 
+    _classPrivateMethodInitSpec(this, _updateOrientation);
+
+    _classPrivateMethodInitSpec(this, _isOpen);
+
     _classPrivateMethodInitSpec(this, _onCollapse);
 
     _classPrivateMethodInitSpec(this, _onExpand);
 
-    _classPrivateMethodInitSpec(this, _setOpen);
-
-    _classPrivateFieldInitSpec(this, _$button, {
+    _classPrivateFieldInitSpec(this, _$target, {
       writable: true,
       value: void 0
     });
@@ -74,32 +79,30 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
       value: void 0
     });
 
-    _classPrivateFieldInitSpec(this, _onButtonClick, {
+    _classPrivateFieldInitSpec(this, _isConnected, {
       writable: true,
-      value: e => {
-        e.stopPropagation();
-
-        if (this.disabled) {
-          return;
-        }
-
-        if (_classPrivateFieldGet(this, _$button).getAttribute('aria-expanded') !== 'true') {
-          _classPrivateMethodGet(this, _onExpand, _onExpand2).call(this);
-        }
-      }
+      value: false
     });
 
     _classPrivateFieldInitSpec(this, _onListboxClick, {
       writable: true,
       value: e => {
-        e.stopPropagation();
+        const rect = this.dropdownRect;
+        const isInside = e.x >= rect.x && e.x < rect.x + rect.width && e.y >= rect.y && e.y < rect.y + rect.height;
+
+        if (!isInside) {
+          _classPrivateMethodGet(this, _dispatchCloseEvent, _dispatchCloseEvent2).call(this);
+
+          return;
+        }
+
         const $elem = e.target;
 
-        if ($elem !== _classPrivateFieldGet(this, _$listbox) && isDropdownOptionElement($elem) && $elem.disabled !== true) {
+        if ($elem !== _classPrivateFieldGet(this, _$listbox) && isDropdownOptionElement($elem)) {
+          e.stopPropagation();
+
           _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, $elem);
         }
-
-        _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
       }
     });
 
@@ -114,8 +117,6 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
 
               _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, findSelectedOption(_classPrivateMethodGet(this, _getEnabledOptionElements, _getEnabledOptionElements2).call(this)));
 
-              _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
-
               break;
             }
         }
@@ -143,15 +144,6 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
 
               _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, _classPrivateMethodGet(this, _getNextOption, _getNextOption2).call(this));
 
-              break;
-            }
-
-          case 'Escape':
-            {
-              e.preventDefault();
-
-              _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
-
               break;
             }
         }
@@ -161,29 +153,47 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
     _classPrivateFieldInitSpec(this, _onOptionSlotChange, {
       writable: true,
       value: () => {
-        _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
-
         _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, this.value);
       }
     });
 
+    _classPrivateFieldInitSpec(this, _onCancel, {
+      writable: true,
+      value: e => {
+        e.preventDefault();
+
+        _classPrivateMethodGet(this, _dispatchCloseEvent, _dispatchCloseEvent2).call(this);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onCloseReactHandler, {
+      writable: true,
+      value: () => {
+        getReactEventHandler(this, 'onClose')?.();
+      }
+    });
+
     const shadowRoot = this.attachShadow({
       mode: 'closed',
       delegatesFocus: true
     });
     shadowRoot.appendChild(template.content.cloneNode(true));
 
-    _classPrivateFieldSet(this, _$button, shadowRoot.querySelector('#button'));
+    _classPrivateFieldSet(this, _$target, shadowRoot.querySelector('#target'));
 
     _classPrivateFieldSet(this, _$listbox, shadowRoot.querySelector('#listbox'));
 
     _classPrivateFieldSet(this, _$optionSlot, shadowRoot.querySelector('slot[name="option"]'));
+
+    dialogPolyfill.registerDialog(_classPrivateFieldGet(this, _$listbox));
   }
 
   connectedCallback() {
+    _classPrivateFieldSet(this, _isConnected, true);
+
     this.setAttribute('role', 'listbox');
 
-    _classPrivateFieldGet(this, _$button).addEventListener('click', _classPrivateFieldGet(this, _onButtonClick));
+    _classPrivateFieldGet(this, _$listbox).addEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
 
     _classPrivateFieldGet(this, _$listbox).addEventListener('click', _classPrivateFieldGet(this, _onListboxClick));
 
@@ -192,10 +202,20 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
     _classPrivateFieldGet(this, _$listbox).addEventListener('keypress', _classPrivateFieldGet(this, _onListboxKeyPress));
 
     _classPrivateFieldGet(this, _$optionSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onOptionSlotChange));
+
+    this.addEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
+
+    if (getBooleanAttribute(this, 'open')) {
+      _classPrivateMethodGet(this, _onExpand, _onExpand2).call(this);
+    } else {
+      _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
+    }
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$button).removeEventListener('click', _classPrivateFieldGet(this, _onButtonClick));
+    _classPrivateFieldSet(this, _isConnected, false);
+
+    _classPrivateFieldGet(this, _$listbox).removeEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
 
     _classPrivateFieldGet(this, _$listbox).removeEventListener('click', _classPrivateFieldGet(this, _onListboxClick));
 
@@ -204,10 +224,12 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
     _classPrivateFieldGet(this, _$listbox).removeEventListener('keypress', _classPrivateFieldGet(this, _onListboxKeyPress));
 
     _classPrivateFieldGet(this, _$optionSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onOptionSlotChange));
+
+    this.removeEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
   }
 
   static get observedAttributes() {
-    return ['value', 'maxvisibleitems'];
+    return ['value', 'maxvisibleitems', 'open', 'orientation'];
   }
 
   get nodeName() {
@@ -238,12 +260,12 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
     updateLiteralAttribute(this, orientationValues, 'orientation', value);
   }
 
-  set disabled(isDisabled) {
-    updateBooleanAttribute(this, 'disabled', isDisabled);
+  set open(isOpen) {
+    updateBooleanAttribute(this, 'open', isOpen);
   }
 
-  get disabled() {
-    return getBooleanAttribute(this, 'disabled');
+  get open() {
+    return getBooleanAttribute(this, 'open');
   }
 
   get dropdownRect() {
@@ -252,6 +274,28 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
 
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
+      case 'open':
+        {
+          if (_classPrivateFieldGet(this, _isConnected)) {
+            if (isAttrTrue(newVal)) {
+              _classPrivateMethodGet(this, _onExpand, _onExpand2).call(this);
+            } else {
+              _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
+            }
+          }
+
+          break;
+        }
+
+      case 'orientation':
+        {
+          if (_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
+            _classPrivateMethodGet(this, _updateOrientation, _updateOrientation2).call(this);
+          }
+
+          break;
+        }
+
       case 'value':
         {
           _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, newVal ?? '');
@@ -283,22 +327,35 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
 
 }));
 
-function _setOpen2(isOpen) {
-  if (isOpen) {
-    if (!getBooleanAttribute(_classPrivateFieldGet(this, _$listbox), 'open')) {
-      _classPrivateFieldGet(this, _$listbox).showModal();
-    }
-  } else {
-    _classPrivateFieldGet(this, _$listbox).close();
+function _onExpand2() {
+  _classPrivateFieldGet(this, _$target).setAttribute('aria-expanded', 'true');
+
+  if (!_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
+    _classPrivateFieldGet(this, _$listbox).showModal();
   }
+
+  _classPrivateMethodGet(this, _updateOrientation, _updateOrientation2).call(this);
+
+  _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, _classPrivateMethodGet(this, _getOptionWithValue, _getOptionWithValue2).call(this, this.value) ?? _classPrivateMethodGet(this, _getFirstOption, _getFirstOption2).call(this));
 }
 
-function _onExpand2() {
-  _classPrivateFieldGet(this, _$button).setAttribute('aria-expanded', 'true');
+function _onCollapse2() {
+  _classPrivateFieldGet(this, _$target).setAttribute('aria-expanded', 'false');
 
-  _classPrivateMethodGet(this, _setOpen, _setOpen2).call(this, true);
+  if (_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
+    _classPrivateFieldGet(this, _$listbox).close?.();
+  }
+}
 
-  const buttonRect = _classPrivateFieldGet(this, _$button).getBoundingClientRect();
+function _isOpen2() {
+  return _classPrivateFieldGet(this, _isConnected) && getBooleanAttribute(_classPrivateFieldGet(this, _$listbox), 'open');
+}
+
+function _updateOrientation2() {
+  _classPrivateFieldGet(this, _$listbox).style.transform = `initial`;
+  _classPrivateFieldGet(this, _$listbox).style.width = `max-content`;
+
+  const buttonRect = _classPrivateFieldGet(this, _$target).getBoundingClientRect();
 
   const modalRect = _classPrivateFieldGet(this, _$listbox).getBoundingClientRect();
 
@@ -326,17 +383,6 @@ function _onExpand2() {
 
   _classPrivateFieldGet(this, _$listbox).style.transform = `translateX(${leftOffset}px) translateY(${topOffset}px)`;
   _classPrivateFieldGet(this, _$listbox).style.width = `${width}px`;
-
-  _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');
-
-  _classPrivateMethodGet(this, _setOpen, _setOpen2).call(this, false);
-
-  _classPrivateFieldGet(this, _$listbox).style.transform = `initial`;
-  _classPrivateFieldGet(this, _$listbox).style.width = `max-content`;
 }
 
 function _onValueChange2(value) {
@@ -430,4 +476,10 @@ function _dispatchChangeEvent2($opt) {
       bubbles: true
     }));
   }
+}
+
+function _dispatchCloseEvent2() {
+  this.dispatchEvent(new CustomEvent('close', {
+    bubbles: true
+  }));
 }

package/index.d.ts

@@ -8,6 +8,7 @@ import './button';
 import './card';
 import './card-button';
 import './card-link';
+import './card-container';
 import './checkbox';
 import './input';
 import './help-tooltip';
@@ -146,3 +147,4 @@ import './chat-bubble';
 import './chat-block';
 import './chat';
 import './title';
+import './popover';

package/index.js

@@ -8,6 +8,7 @@ import './button';
 import './card';
 import './card-button';
 import './card-link';
+import './card-container';
 import './checkbox';
 import './input';
 import './help-tooltip';
@@ -145,4 +146,5 @@ import './chat-avatar';
 import './chat-bubble';
 import './chat-block';
 import './chat';
-import './title';
+import './title';
+import './popover';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "files": [
     "theme.css",
     "**/*/*.js",

package/popover/index.d.ts

@@ -0,0 +1,26 @@
+import type { TRect, TSinchElementReact } from '../types';
+import type { SyntheticEvent } from 'react';
+declare const orientationValues: readonly ["top-left", "top-right", "bottom-left", "bottom-right"];
+export declare type TSinchPopoverOrientation = typeof orientationValues[number];
+export declare type TSinchPopoverElement = HTMLElement & {
+    open: boolean;
+    orientation: TSinchPopoverOrientation;
+    readonly popoverRect: TRect;
+};
+export declare type TSinchPopoverReact = TSinchElementReact<TSinchPopoverElement> & {
+    open: boolean;
+    orientation?: TSinchPopoverOrientation;
+    'aria-label': string;
+    onClose: (event: SyntheticEvent<TSinchPopoverElement, CustomEvent<void>>) => void;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-popover': TSinchPopoverReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-popover': TSinchPopoverElement;
+    }
+}
+export {};

package/popover/index.js

@@ -0,0 +1,230 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$target, _$dialog, _isConnected, _onExpand, _onCollapse, _isOpen, _updateOrientation, _onBackdropClick, _onCancel, _onCloseReactHandler, _dispatchCloseEvent;
+
+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 dialogPolyfill from 'dialog-polyfill';
+import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative}dialog{outline:0;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:1px 2px 6px rgba(0,0,0,.15);border:1px solid var(--sinch-color-snow-500);border-radius:4px;overflow-y:auto;contain:content;padding:12px;box-sizing:border-box}dialog:not([open]){display:none}dialog::backdrop{background-color:transparent}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:transparent}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}</style><div id="wrapper"><div id="target" aria-haspopup="dialog" aria-expanded="false"><slot name="target"></slot></div><dialog id="dialog" tabindex="-1"><slot name="content"></slot></dialog></div>';
+const orientationValues = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new WeakMap(), _isConnected = new WeakMap(), _onExpand = new WeakSet(), _onCollapse = new WeakSet(), _isOpen = new WeakSet(), _updateOrientation = new WeakSet(), _onBackdropClick = new WeakMap(), _onCancel = new WeakMap(), _onCloseReactHandler = new WeakMap(), _dispatchCloseEvent = new WeakSet(), class extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateMethodInitSpec(this, _dispatchCloseEvent);
+
+    _classPrivateMethodInitSpec(this, _updateOrientation);
+
+    _classPrivateMethodInitSpec(this, _isOpen);
+
+    _classPrivateMethodInitSpec(this, _onCollapse);
+
+    _classPrivateMethodInitSpec(this, _onExpand);
+
+    _classPrivateFieldInitSpec(this, _$target, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$dialog, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _isConnected, {
+      writable: true,
+      value: false
+    });
+
+    _classPrivateFieldInitSpec(this, _onBackdropClick, {
+      writable: true,
+      value: e => {
+        const rect = this.popoverRect;
+        const isInside = e.x >= rect.x && e.x < rect.x + rect.width && e.y >= rect.y && e.y < rect.y + rect.height;
+
+        if (!isInside) {
+          _classPrivateMethodGet(this, _dispatchCloseEvent, _dispatchCloseEvent2).call(this);
+        }
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onCancel, {
+      writable: true,
+      value: e => {
+        e.preventDefault();
+
+        _classPrivateMethodGet(this, _dispatchCloseEvent, _dispatchCloseEvent2).call(this);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onCloseReactHandler, {
+      writable: true,
+      value: () => {
+        getReactEventHandler(this, 'onClose')?.();
+      }
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'closed',
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$target, shadowRoot.querySelector('#target'));
+
+    _classPrivateFieldSet(this, _$dialog, shadowRoot.querySelector('#dialog'));
+
+    dialogPolyfill.registerDialog(_classPrivateFieldGet(this, _$dialog));
+  }
+
+  connectedCallback() {
+    this.setAttribute('role', 'dialog');
+
+    _classPrivateFieldGet(this, _$dialog).addEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
+
+    _classPrivateFieldGet(this, _$dialog).addEventListener('click', _classPrivateFieldGet(this, _onBackdropClick));
+
+    this.addEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
+
+    _classPrivateFieldSet(this, _isConnected, true);
+
+    if (getBooleanAttribute(this, 'open')) {
+      _classPrivateMethodGet(this, _onExpand, _onExpand2).call(this);
+    } else {
+      _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
+    }
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$dialog).removeEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
+
+    _classPrivateFieldGet(this, _$dialog).removeEventListener('click', _classPrivateFieldGet(this, _onBackdropClick));
+
+    this.removeEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
+
+    _classPrivateFieldSet(this, _isConnected, false);
+  }
+
+  static get observedAttributes() {
+    return ['open', 'orientation'];
+  }
+
+  set open(isOpen) {
+    updateBooleanAttribute(this, 'open', isOpen);
+  }
+
+  get open() {
+    return getBooleanAttribute(this, 'open');
+  }
+
+  get orientation() {
+    return getLiteralAttribute(this, orientationValues, 'orientation', 'bottom-right');
+  }
+
+  set orientation(value) {
+    updateLiteralAttribute(this, orientationValues, 'orientation', value);
+  }
+
+  get popoverRect() {
+    return getRect(_classPrivateFieldGet(this, _$dialog));
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case 'open':
+        {
+          if (_classPrivateFieldGet(this, _isConnected)) {
+            if (isAttrTrue(newVal)) {
+              _classPrivateMethodGet(this, _onExpand, _onExpand2).call(this);
+            } else {
+              _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
+            }
+          }
+
+          break;
+        }
+
+      case 'orientation':
+        {
+          if (_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
+            _classPrivateMethodGet(this, _updateOrientation, _updateOrientation2).call(this);
+          }
+
+          break;
+        }
+    }
+  }
+
+}));
+
+function _onExpand2() {
+  _classPrivateFieldGet(this, _$target).setAttribute('aria-expanded', 'true');
+
+  if (!_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
+    _classPrivateFieldGet(this, _$dialog).showModal();
+  }
+
+  _classPrivateMethodGet(this, _updateOrientation, _updateOrientation2).call(this);
+}
+
+function _onCollapse2() {
+  _classPrivateFieldGet(this, _$target).setAttribute('aria-expanded', 'false');
+
+  if (_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
+    _classPrivateFieldGet(this, _$dialog).close?.();
+  }
+}
+
+function _isOpen2() {
+  return _classPrivateFieldGet(this, _isConnected) && getBooleanAttribute(_classPrivateFieldGet(this, _$dialog), 'open');
+}
+
+function _updateOrientation2() {
+  _classPrivateFieldGet(this, _$dialog).style.transform = `initial`;
+  _classPrivateFieldGet(this, _$dialog).style.width = `max-content`;
+
+  const buttonRect = _classPrivateFieldGet(this, _$target).getBoundingClientRect();
+
+  const modalRect = _classPrivateFieldGet(this, _$dialog).getBoundingClientRect();
+
+  const width = Math.max(modalRect.width, buttonRect.width);
+  const widthDiff = Math.max(buttonRect.width - modalRect.width, 0);
+  let leftOffset = 0;
+  let topOffset = 0;
+  const orient = this.orientation;
+
+  if (orient === 'bottom-right' || orient === 'top-right') {
+    leftOffset = Math.min(modalRect.x, Math.max(-modalRect.x, buttonRect.x - modalRect.x + widthDiff * 0.5));
+  }
+
+  if (orient === 'bottom-left' || orient === 'top-left') {
+    leftOffset = Math.min(modalRect.x, Math.max(-modalRect.x, buttonRect.x + buttonRect.width - modalRect.x - modalRect.width - widthDiff * 0.5));
+  }
+
+  if (orient === 'bottom-left' || orient === 'bottom-right') {
+    topOffset = Math.min(modalRect.y, Math.max(-modalRect.y, buttonRect.y + buttonRect.height - modalRect.y + 8));
+  }
+
+  if (orient === 'top-left' || orient === 'top-right') {
+    topOffset = Math.min(modalRect.y, Math.max(-modalRect.y, buttonRect.y - modalRect.y - modalRect.height - 8));
+  }
+
+  _classPrivateFieldGet(this, _$dialog).style.transform = `translateX(${leftOffset}px) translateY(${topOffset}px)`;
+  _classPrivateFieldGet(this, _$dialog).style.width = `${width}px`;
+}
+
+function _dispatchCloseEvent2() {
+  this.dispatchEvent(new CustomEvent('close', {
+    bubbles: true
+  }));
+}

package/search/index.js

@@ -13,7 +13,7 @@ function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(
 
 import { isSearchOptionElement } from '../search-option';
 import { attrValueToPixels, defineCustomElement, getAttribute, getIntegerAttribute, getRect, updateAttribute, updateIntegerAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:100%;box-sizing:border-box;--sinch-size-icon:24px}#label{display:none;font:var(--sinch-font-title-s);color:var(--sinch-color-text-default);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;height:24px;margin-bottom:2px}#input{all:initial;display:block;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:4px;width:100%;height:48px;padding:0 44px;padding-right:12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto)}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#input:focus{border-color:var(--sinch-color-stormy-600)}#icon-search{position:absolute;left:12px;top:12px;pointer-events:none;--sinch-color-icon:var(--sinch-color-stormy-500)}#clear{position:absolute;right:8px;top:8px;display:none;--sinch-color-icon:red}#clear:focus{--sinch-color-icon:var(--sinch-color-stormy-500)}:host([value]:not([value=""])) #clear{display:flex}:host([value]:not([value=""])) #input{padding-right:44px}#listbox{display:none;position:absolute;z-index:1;left:0;top:calc(100% + 8px);width:100%;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([aria-expanded=true]) #listbox{display:block}:host([label]:not([label=""])) #label{display:block}</style><label id="label" for="input"></label><div id="wrapper"><input id="input" type="text"/><sinch-icon-search id="icon-search"></sinch-icon-search><sinch-icon-button id="clear" small><sinch-icon-close id="icon-close" slot="icon"></sinch-icon-close></sinch-icon-button><div id="listbox"><slot name="option"></slot></div></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:100%;box-sizing:border-box;--sinch-size-icon:24px}#label{display:none;font:var(--sinch-font-title-s);color:var(--sinch-color-text-default);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;height:24px;margin-bottom:2px}#input{all:initial;display:block;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:4px;width:100%;height:48px;padding:0 44px;padding-right:12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto)}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#input:focus{border-color:var(--sinch-color-stormy-600)}#icon-search{position:absolute;left:12px;top:12px;pointer-events:none;--sinch-color-icon:var(--sinch-color-stormy-500)}#clear{position:absolute;right:8px;top:8px;display:none;--sinch-color-icon:red}#clear:focus{--sinch-color-icon:var(--sinch-color-stormy-500)}:host([value]:not([value=""])) #clear{display:flex}:host([value]:not([value=""])) #input{padding-right:44px}#listbox{display:none;position:absolute;z-index:1;left:0;top:calc(100% + 8px);width:100%;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 rgba(0,0,0,.15);overflow-y:auto;contain:content}:host([aria-expanded=true]) #listbox{display:block}:host([label]:not([label=""])) #label{display:block}</style><label id="label" for="input"></label><div id="wrapper"><input id="input" type="text"/><sinch-icon-search id="icon-search"></sinch-icon-search><sinch-icon-button id="clear" small><sinch-icon-close id="icon-close" slot="icon"></sinch-icon-close></sinch-icon-button><div id="listbox"><slot name="option"></slot></div></div>';
 import '../icon/search';
 import '../icon/close';
 import '../icon-button';

package/segment/index.js

@@ -8,7 +8,7 @@ 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 { defineCustomElement, getAttribute, getBooleanAttribute, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;width:100%;border-radius:4px;box-sizing:border-box;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);border:none;box-shadow:1px 2px 8px rgb(0 0 0 / 10%)}#header{position:relative;display:flex;flex-direction:row;align-items:center;gap:16px;height:32px;padding:24px 32px 16px;--sinch-size-icon:32px}#caption{font:var(--sinch-font-title-l);color:var(--sinch-color-text-default);flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#content-wrapper{padding:0 32px}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;padding:16px 32px 24px}#info{position:relative;display:flex;flex-direction:row;align-items:center;gap:16px;z-index:1}:host([collapsed]:not([collapsed=false])) :is(#content-wrapper,#action){display:none}:host([collapsed]:not([collapsed=false])) #header{padding-bottom:24px}</style><div id="wrapper"><div id="header"><slot name="icon"></slot><span id="caption"></span><div id="info"><slot name="info"></slot></div><slot name="collapse"></slot></div><div id="content-wrapper"><slot name="content"></slot></div><div id="action"><slot name="action"></slot></div></div>';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;width:100%;height:100%;border-radius:4px;box-sizing:border-box;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);border:none;box-shadow:1px 2px 8px rgba(0,0,0,.1)}#header{position:relative;display:flex;flex-direction:row;align-items:center;gap:16px;height:32px;padding:24px 32px 16px;--sinch-size-icon:32px}#caption{font:var(--sinch-font-title-l);color:var(--sinch-color-text-default);flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#content-wrapper{padding:0 32px;flex:1;min-height:0;overflow:auto}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;padding:16px 32px 24px}#info{position:relative;display:flex;flex-direction:row;align-items:center;gap:16px;z-index:1}:host([collapsed]:not([collapsed=false])) :is(#content-wrapper,#action){display:none}:host([collapsed]:not([collapsed=false])) #header{padding-bottom:24px}</style><div id="wrapper"><div id="header"><slot name="icon"></slot><span id="caption"></span><div id="info"><slot name="info"></slot></div><slot name="collapse"></slot></div><div id="content-wrapper"><slot name="content"></slot></div><div id="action"><slot name="action"></slot></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-segment', (_$caption = new WeakMap(), class extends HTMLElement {

package/select/index.js

@@ -1,7 +1,7 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$button, _$buttonContent, _$label, _$optionalText, _$additionalText, _$invalidText, _$dropdown, _$optionSlot, _updateButtonContent, _onValueChange, _getOptionWithValue, _onLabelClick;
+var _$button, _$buttonContent, _$label, _$optionalText, _$additionalText, _$invalidText, _$dropdown, _$optionSlot, _updateButtonContent, _onValueChange, _getOptionWithValue, _onLabelClick, _onDropdownClick, _onDropdownClose;
 
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 
@@ -15,10 +15,10 @@ import { isDropdownOptionElement } from '../dropdown-option';
 import '../select-option';
 import '../dropdown';
 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:4px;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-600)}#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-s);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 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:4px;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-600)}#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-s);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 rgba(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(), _$dropdown = new WeakMap(), _$optionSlot = new WeakMap(), _updateButtonContent = new WeakSet(), _onValueChange = new WeakMap(), _getOptionWithValue = new WeakSet(), _onLabelClick = 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(), _onDropdownClick = new WeakMap(), _onDropdownClose = new WeakMap(), class extends HTMLElement {
   constructor() {
     super();
 
@@ -69,6 +69,7 @@ defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent =
     _classPrivateFieldInitSpec(this, _onValueChange, {
       writable: true,
       value: e => {
+        _classPrivateFieldGet(this, _$dropdown).open = false;
         this.dispatchEvent(new CustomEvent('change', {
           detail: e.detail,
           bubbles: true
@@ -83,6 +84,20 @@ defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent =
       }
     });
 
+    _classPrivateFieldInitSpec(this, _onDropdownClick, {
+      writable: true,
+      value: () => {
+        _classPrivateFieldGet(this, _$dropdown).open = true;
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onDropdownClose, {
+      writable: true,
+      value: () => {
+        _classPrivateFieldGet(this, _$dropdown).open = false;
+      }
+    });
+
     const shadowRoot = this.attachShadow({
       mode: 'closed',
       delegatesFocus: true
@@ -111,12 +126,20 @@ defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent =
 
     _classPrivateFieldGet(this, _$dropdown).addEventListener('change', _classPrivateFieldGet(this, _onValueChange));
 
+    _classPrivateFieldGet(this, _$dropdown).addEventListener('close', _classPrivateFieldGet(this, _onDropdownClose));
+
+    _classPrivateFieldGet(this, _$button).addEventListener('click', _classPrivateFieldGet(this, _onDropdownClick));
+
     _classPrivateFieldGet(this, _$label).addEventListener('click', _classPrivateFieldGet(this, _onLabelClick));
   }
 
   disconnectedCallback() {
     _classPrivateFieldGet(this, _$dropdown).removeEventListener('change', _classPrivateFieldGet(this, _onValueChange));
 
+    _classPrivateFieldGet(this, _$dropdown).removeEventListener('close', _classPrivateFieldGet(this, _onDropdownClose));
+
+    _classPrivateFieldGet(this, _$button).removeEventListener('click', _classPrivateFieldGet(this, _onDropdownClick));
+
     _classPrivateFieldGet(this, _$label).removeEventListener('click', _classPrivateFieldGet(this, _onLabelClick));
   }
 

package/utils.d.ts

@@ -1,4 +1,5 @@
 import type { TRect } from './types';
+export declare const getReactEventHandler: ($element: HTMLElement, handlerName: string) => ((arg?: any) => void) | null;
 export declare const defineCustomElement: (name: string, constructor: CustomElementConstructor) => void;
 export declare const defineNectaryElements: (registry: CustomElementRegistry) => void;
 export declare type TEventHandler = (arg?: any) => void;

package/utils.js

@@ -1,5 +1,14 @@
 const nectaryDefinitions = new Map();
 let nectaryRegistry = null;
+export const getReactEventHandler = ($element, handlerName) => {
+  for (const key in $element) {
+    if (key.startsWith('__reactProps$')) {
+      return $element[key][handlerName];
+    }
+  }
+
+  return null;
+};
 export const defineCustomElement = (name, constructor) => {
   if (nectaryRegistry !== null) {
     if (nectaryRegistry.get(name) == null) {