@nectary/components 0.14.0 → 0.16.0

package/card/index.js

@@ -10,7 +10,7 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 import { isSinchCardButtonElement } from '../card-button';
 import { isSinchCardLinkElement } from '../card-link';
 import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, setClass } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative}#card-body{padding:24px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px;background-color:var(--sinch-color-snow-100);border-radius:8px;border:1px solid var(--sinch-color-snow-700)}#illustration-wrapper{display:none;flex-direction:column;align-items:center;border-top-left-radius:8px;border-top-right-radius:8px;overflow:hidden;background-color:var(--sinch-color-stormy-500);height:240px}#illustration-wrapper.active{display:flex}#illustration-wrapper.active+#card-body{border-top-left-radius:0;border-top-right-radius:0;border-top:none}#label{margin:0;font:var(--sinch-font-title-5);color:var(--sinch-color-stormy-300);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#label:empty{display:none}#header{display:flex;flex-direction:row;align-items:center;gap:8px;--sinch-size-icon:48px}#title{font:var(--sinch-font-title-3);color:var(--sinch-color-stormy-500);flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#description{margin:0;font:var(--sinch-font-body);color:var(--sinch-color-stormy-500);flex:1;min-height:0;max-height:120px;overflow-y:auto}#description:empty{display:none}:host([disabled]:not([disabled=false])) :is(#illustration-wrapper,#description,#header,#label){opacity:60%}::slotted(sinch-card-button),::slotted(sinch-card-link){margin-top:20px;align-self:flex-start;max-width:100%}</style><div id="wrapper"><div id="illustration-wrapper"><slot name="illustration"></slot></div><div id="card-body"><p id="label"></p><div id="header"><slot name="icon"></slot><span id="title"></span></div><p id="description"></p><slot name="action"></slot></div></div>';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative}#card-body{padding:24px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px;background-color:var(--sinch-color-snow-100);border-radius:8px;border:1px solid var(--sinch-color-snow-700)}#illustration-wrapper{display:none;flex-direction:column;align-items:center;border-top-left-radius:8px;border-top-right-radius:8px;overflow:hidden;background-color:var(--sinch-color-stormy-500);height:240px}#illustration-wrapper.active{display:flex}#illustration-wrapper.active+#card-body{border-top-left-radius:0;border-top-right-radius:0;border-top:none}#label{margin:0;font:var(--sinch-font-title-5);color:var(--sinch-color-stormy-300);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#label:empty{display:none}#header{display:flex;flex-direction:row;align-items:center;gap:8px;--sinch-size-icon:48px}#title{font:var(--sinch-font-title-3);color:var(--sinch-color-stormy-500);flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#description{margin:0;font:var(--sinch-font-body);color:var(--sinch-color-stormy-500);flex:1;min-height:0;max-height:120px;overflow-y:auto}#description:empty{display:none}:host([disabled]:not([disabled=false])) :is(#illustration-wrapper,#description,#header,#label){opacity:.6}::slotted(sinch-card-button),::slotted(sinch-card-link){margin-top:20px;align-self:flex-start;max-width:100%}</style><div id="wrapper"><div id="illustration-wrapper"><slot name="illustration"></slot></div><div id="card-body"><p id="label"></p><div id="header"><slot name="icon"></slot><span id="title"></span></div><p id="description"></p><slot name="action"></slot></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-card', (_$text = new WeakMap(), _$label = new WeakMap(), _$title = new WeakMap(), _$illustrationSlot = new WeakMap(), _$actionSlot = new WeakMap(), _$illustrationSlotWrapper = new WeakMap(), _onIllustrationSlotChange = new WeakMap(), _updateDisabledAttributeInChildren = new WeakMap(), class extends HTMLElement {

package/checkbox/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, isAttrTrue, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{--sinch-color-checkbox-circle:var(--sinch-color-transparent);--sinch-color-checkbox-background:var(--sinch-color-snow-100);--sinch-color-checkbox-border:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-checked:var(--sinch-color-transparent);--sinch-color-checkbox-background-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-hover:var(--sinch-color-snow-500);--sinch-color-checkbox-background-hover:var(--sinch-color-snow-100);--sinch-color-checkbox-border-hover:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-hover-checked:var(--sinch-color-tropical-100);--sinch-color-checkbox-background-hover-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-hover-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-focus:var(--sinch-color-snow-800);--sinch-color-checkbox-background-focus:var(--sinch-color-snow-100);--sinch-color-checkbox-border-focus:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-focus-checked:var(--sinch-color-tropical-200);--sinch-color-checkbox-background-focus-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-focus-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-active:var(--sinch-color-stormy-100);--sinch-color-checkbox-background-active:var(--sinch-color-snow-100);--sinch-color-checkbox-border-active:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-active-checked:var(--sinch-color-tropical-300);--sinch-color-checkbox-background-active-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-active-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-disabled:var(--sinch-color-transparent);--sinch-color-checkbox-background-disabled:var(--sinch-color-snow-100);--sinch-color-checkbox-border-disabled:var(--sinch-color-stormy-100);--sinch-color-checkbox-circle-disabled-checked:var(--sinch-color-transparent);--sinch-color-checkbox-background-disabled-checked:var(--sinch-color-stormy-100);--sinch-color-checkbox-border-disabled-checked:var(--sinch-color-stormy-100);--sinch-color-checkbox-text:var(--sinch-color-text-default);--sinch-color-checkbox-text-disabled:var(--sinch-color-stormy-200);display:inline-block;vertical-align:middle;outline:0}:host([invalid]:not([invalid=false])){--sinch-color-checkbox-border:var(--sinch-color-raspberry-500);--sinch-color-checkbox-background-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-hover:var(--sinch-color-raspberry-500);--sinch-color-checkbox-circle-hover-checked:var(--sinch-color-raspberry-100);--sinch-color-checkbox-background-hover-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-hover-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-focus:var(--sinch-color-raspberry-500);--sinch-color-checkbox-circle-focus-checked:var(--sinch-color-raspberry-200);--sinch-color-checkbox-background-focus-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-focus-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-active:var(--sinch-color-raspberry-500);--sinch-color-checkbox-circle-active-checked:var(--sinch-color-raspberry-300);--sinch-color-checkbox-background-active-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-active-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-disabled:var(--sinch-color-raspberry-200);--sinch-color-checkbox-background-disabled-checked:var(--sinch-color-raspberry-200);--sinch-color-checkbox-border-disabled-checked:var(--sinch-color-raspberry-200);--sinch-color-checkbox-text:var(--sinch-color-text-invalid);--sinch-color-checkbox-text-disabled:var(--sinch-color-raspberry-200)}#wrapper{display:flex;flex-direction:row;box-sizing:border-box;width:100%;height:32px}#checkbox{all:initial;display:block;width:32px;height:32px;cursor:pointer}#checkbox:disabled{cursor:initial}#icon-container{position:relative;width:32px;height:32px}#checkbox::before{content:"";position:absolute;top:0;left:0;width:32px;height:32px;border-radius:16px;pointer-events:none;background-color:var(--sinch-color-checkbox-circle);transition:background-color .1s linear}#checkbox::after{content:"";position:absolute;top:7px;left:7px;width:18px;height:18px;border-radius:2px;pointer-events:none;background-color:var(--sinch-color-checkbox-background);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border) inset;transition:background-color .1s linear}#icon-checkmark{position:absolute;left:9px;top:10px;transition:opacity .1s linear;opacity:0%;pointer-events:none}#icon-indeterminate{position:absolute;left:10px;top:15px;transition:opacity .1s linear;opacity:0%;pointer-events:none}@media (prefers-reduced-motion){#checkbox::after,#checkbox::before,#icon-checkmark,#icon-indeterminate{transition:none}}#label{display:none;flex:1;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:6px;font:var(--sinch-font-body);color:var(--sinch-color-checkbox-text)}:host([text]:not([text=""])) #label{display:block}:host([disabled]:not([disabled=false])) #label{color:var(--sinch-color-checkbox-text-disabled)}:host(:is(:not([indeterminate]),[indeterminate=false])) #checkbox:checked~#icon-checkmark{opacity:100%}:host([indeterminate]:not([indeterminate=false])) #checkbox:checked~#icon-indeterminate{opacity:100%}#checkbox:checked::before{background-color:var(--sinch-color-checkbox-circle-checked)}#checkbox:checked::after{background-color:var(--sinch-color-checkbox-background-checked);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-checked) inset}#checkbox:focus::before{background-color:var(--sinch-color-checkbox-circle-focus)}#checkbox:focus::after{background-color:var(--sinch-color-checkbox-background-focus);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-focus) inset}#checkbox:hover::before{background-color:var(--sinch-color-checkbox-circle-hover)}#checkbox:hover::after{background-color:var(--sinch-color-checkbox-background-hover);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-hover) inset}#checkbox:active::before{background-color:var(--sinch-color-checkbox-circle-active)}#checkbox:active::after{background-color:var(--sinch-color-checkbox-background-active);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-active) inset}#checkbox:disabled::before{background-color:var(--sinch-color-checkbox-circle-disabled)}#checkbox:disabled::after{background-color:var(--sinch-color-checkbox-background-disabled);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-disabled) inset}#checkbox:focus:checked::before{background-color:var(--sinch-color-checkbox-circle-focus-checked)}#checkbox:focus:checked::after{background-color:var(--sinch-color-checkbox-background-focus-checked);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-focus-checked) inset}#checkbox:hover:checked::before{background-color:var(--sinch-color-checkbox-circle-hover-checked)}#checkbox:hover:checked::after{background-color:var(--sinch-color-checkbox-background-hover-checked);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-hover-checked) inset}#checkbox:active:checked::before{background-color:var(--sinch-color-checkbox-circle-active-checked)}#checkbox:active:checked::after{background-color:var(--sinch-color-checkbox-background-active-checked);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-active-checked) inset}#checkbox:disabled:checked::before{background-color:var(--sinch-color-checkbox-circle-disabled-checked)}#checkbox:disabled:checked::after{background-color:var(--sinch-color-checkbox-background-disabled-checked);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-disabled-checked) inset}</style><div id="wrapper"><div id="icon-container"><input id="checkbox" type="checkbox"/> <svg id="icon-checkmark" width="14" height="11" aria-hidden="true"><path d="M14 1.99999L12.59 0.579987L4.98995 8.17L1.49997 4.5L0.0799694 5.91L4.98995 11L14 1.99999Z" fill="white"/></svg> <svg id="icon-indeterminate" width="12" height="2" aria-hidden="true"><line y1="1" x2="12" y2="1" stroke="white" stroke-width="2"/></svg></div><label for="checkbox" id="label"></label></div>';
+const templateHTML = '<style>:host{--sinch-color-checkbox-circle:var(--sinch-color-transparent);--sinch-color-checkbox-background:var(--sinch-color-snow-100);--sinch-color-checkbox-border:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-checked:var(--sinch-color-transparent);--sinch-color-checkbox-background-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-hover:var(--sinch-color-snow-500);--sinch-color-checkbox-background-hover:var(--sinch-color-snow-100);--sinch-color-checkbox-border-hover:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-hover-checked:var(--sinch-color-tropical-100);--sinch-color-checkbox-background-hover-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-hover-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-focus:var(--sinch-color-snow-800);--sinch-color-checkbox-background-focus:var(--sinch-color-snow-100);--sinch-color-checkbox-border-focus:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-focus-checked:var(--sinch-color-tropical-200);--sinch-color-checkbox-background-focus-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-focus-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-active:var(--sinch-color-stormy-100);--sinch-color-checkbox-background-active:var(--sinch-color-snow-100);--sinch-color-checkbox-border-active:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-active-checked:var(--sinch-color-tropical-300);--sinch-color-checkbox-background-active-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-active-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-disabled:var(--sinch-color-transparent);--sinch-color-checkbox-background-disabled:var(--sinch-color-snow-100);--sinch-color-checkbox-border-disabled:var(--sinch-color-stormy-100);--sinch-color-checkbox-circle-disabled-checked:var(--sinch-color-transparent);--sinch-color-checkbox-background-disabled-checked:var(--sinch-color-stormy-100);--sinch-color-checkbox-border-disabled-checked:var(--sinch-color-stormy-100);--sinch-color-checkbox-text:var(--sinch-color-text-default);--sinch-color-checkbox-text-disabled:var(--sinch-color-stormy-200);display:inline-block;vertical-align:middle;outline:0}:host([invalid]:not([invalid=false])){--sinch-color-checkbox-border:var(--sinch-color-raspberry-500);--sinch-color-checkbox-background-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-hover:var(--sinch-color-raspberry-500);--sinch-color-checkbox-circle-hover-checked:var(--sinch-color-raspberry-100);--sinch-color-checkbox-background-hover-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-hover-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-focus:var(--sinch-color-raspberry-500);--sinch-color-checkbox-circle-focus-checked:var(--sinch-color-raspberry-200);--sinch-color-checkbox-background-focus-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-focus-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-active:var(--sinch-color-raspberry-500);--sinch-color-checkbox-circle-active-checked:var(--sinch-color-raspberry-300);--sinch-color-checkbox-background-active-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-active-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-disabled:var(--sinch-color-raspberry-200);--sinch-color-checkbox-background-disabled-checked:var(--sinch-color-raspberry-200);--sinch-color-checkbox-border-disabled-checked:var(--sinch-color-raspberry-200);--sinch-color-checkbox-text:var(--sinch-color-text-invalid);--sinch-color-checkbox-text-disabled:var(--sinch-color-raspberry-200)}#wrapper{display:flex;flex-direction:row;box-sizing:border-box;width:100%;height:32px}#checkbox{all:initial;display:block;width:32px;height:32px;cursor:pointer}#checkbox:disabled{cursor:initial}#icon-container{position:relative;width:32px;height:32px}#checkbox::before{content:"";position:absolute;top:0;left:0;width:32px;height:32px;border-radius:16px;pointer-events:none;background-color:var(--sinch-color-checkbox-circle);transition:background-color .1s linear}#checkbox::after{content:"";position:absolute;top:7px;left:7px;width:18px;height:18px;border-radius:2px;pointer-events:none;background-color:var(--sinch-color-checkbox-background);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border) inset;transition:background-color .1s linear}#icon-checkmark{position:absolute;left:9px;top:10px;transition:opacity .1s linear;opacity:0;pointer-events:none}#icon-indeterminate{position:absolute;left:10px;top:15px;transition:opacity .1s linear;opacity:0;pointer-events:none}@media (prefers-reduced-motion){#checkbox::after,#checkbox::before,#icon-checkmark,#icon-indeterminate{transition:none}}#label{display:none;flex:1;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:6px;font:var(--sinch-font-body);color:var(--sinch-color-checkbox-text)}:host([text]:not([text=""])) #label{display:block}:host([disabled]:not([disabled=false])) #label{color:var(--sinch-color-checkbox-text-disabled)}:host(:is(:not([indeterminate]),[indeterminate=false])) #checkbox:checked~#icon-checkmark{opacity:1}:host([indeterminate]:not([indeterminate=false])) #checkbox:checked~#icon-indeterminate{opacity:1}#checkbox:checked::before{background-color:var(--sinch-color-checkbox-circle-checked)}#checkbox:checked::after{background-color:var(--sinch-color-checkbox-background-checked);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-checked) inset}#checkbox:focus::before{background-color:var(--sinch-color-checkbox-circle-focus)}#checkbox:focus::after{background-color:var(--sinch-color-checkbox-background-focus);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-focus) inset}#checkbox:hover::before{background-color:var(--sinch-color-checkbox-circle-hover)}#checkbox:hover::after{background-color:var(--sinch-color-checkbox-background-hover);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-hover) inset}#checkbox:active::before{background-color:var(--sinch-color-checkbox-circle-active)}#checkbox:active::after{background-color:var(--sinch-color-checkbox-background-active);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-active) inset}#checkbox:disabled::before{background-color:var(--sinch-color-checkbox-circle-disabled)}#checkbox:disabled::after{background-color:var(--sinch-color-checkbox-background-disabled);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-disabled) inset}#checkbox:focus:checked::before{background-color:var(--sinch-color-checkbox-circle-focus-checked)}#checkbox:focus:checked::after{background-color:var(--sinch-color-checkbox-background-focus-checked);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-focus-checked) inset}#checkbox:hover:checked::before{background-color:var(--sinch-color-checkbox-circle-hover-checked)}#checkbox:hover:checked::after{background-color:var(--sinch-color-checkbox-background-hover-checked);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-hover-checked) inset}#checkbox:active:checked::before{background-color:var(--sinch-color-checkbox-circle-active-checked)}#checkbox:active:checked::after{background-color:var(--sinch-color-checkbox-background-active-checked);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-active-checked) inset}#checkbox:disabled:checked::before{background-color:var(--sinch-color-checkbox-circle-disabled-checked)}#checkbox:disabled:checked::after{background-color:var(--sinch-color-checkbox-background-disabled-checked);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-disabled-checked) inset}</style><div id="wrapper"><div id="icon-container"><input id="checkbox" type="checkbox"/> <svg id="icon-checkmark" width="14" height="11" aria-hidden="true"><path d="M14 1.99999L12.59 0.579987L4.98995 8.17L1.49997 4.5L0.0799694 5.91L4.98995 11L14 1.99999Z" fill="white"/></svg> <svg id="icon-indeterminate" width="12" height="2" aria-hidden="true"><line y1="1" x2="12" y2="1" stroke="white" stroke-width="2"/></svg></div><label for="checkbox" id="label"></label></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-checkbox', (_$input = new WeakMap(), _$label = new WeakMap(), _onCheckboxInput = new WeakMap(), class extends HTMLElement {

package/dialog/index.d.ts

@@ -1,13 +1,15 @@
+import '../icon-button';
 import '../icon/close';
 import type { TRect, TSinchElementReact } from '../types';
 import type { SyntheticEvent } from 'react';
 declare type TSinchDialogElement = HTMLElement & {
-    title: string;
+    caption: string;
     readonly dialogRect: TRect;
     readonly closeButtonRect: TRect;
 };
 declare type TSinchDialogReact = TSinchElementReact<TSinchDialogElement> & {
-    title: string;
+    open: boolean;
+    caption: string;
     'aria-label': string;
     onClose: (event: SyntheticEvent<TSinchDialogElement, CustomEvent<void>>) => void;
 };

package/dialog/index.js

@@ -1,15 +1,21 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$main, _$closeButton, _$backDrop, _$title, _$prevActiveElement, _focusIn, _onCloseByMouse, _onCloseByEsc, _onClose, _onCloseReactHandler;
+var _$dialog, _$closeButton, _$caption, _isConected, _onCancel, _onCloseClick, _onBackdropClick, _onCloseReactHandler, _dispatchCloseEvent, _setOpen;
+
+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 { defineCustomElement, getAttribute, getRect, updateAttribute } from '../utils';
+function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
+
+import dialogPolyfill from 'dialog-polyfill';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute } from '../utils';
+import '../icon-button';
 import '../icon/close';
-const templateHTML = '<style>:host{outline:0}#wrapper{position:fixed;top:0;left:0;height:100vh;width:100vw;color:var(--sinch-color-text-default);font:var(--sinch-font-body);z-index:2147483647}#backdrop{background-color:#000;position:absolute;left:0;top:0;opacity:55%;width:100%;height:100%}#main{display:flex;flex-direction:column;position:relative;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);padding:24px;width:100%;max-width:512px;border-radius:4px;box-sizing:border-box;background-color:var(--sinch-color-snow-100)}#header{display:flex;flex-direction:row;justify-content:space-between;align-content:center;margin-bottom:16px}#title{font:var(--sinch-font-title-3);color:var(--sinch-color-text-default)}#content-wrapper{max-height:50vh;overflow-y:auto;margin-top:16px}#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><div id="wrapper"><div id="backdrop"></div><div id="main"><div id="header"><span id="title"></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></div></div>';
+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-3);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;
 
@@ -23,84 +29,65 @@ const getReactEventHandler = ($element, handlerName) => {
   return null;
 };
 
-defineCustomElement('sinch-dialog', (_$main = new WeakMap(), _$closeButton = new WeakMap(), _$backDrop = new WeakMap(), _$title = new WeakMap(), _$prevActiveElement = new WeakMap(), _focusIn = new WeakMap(), _onCloseByMouse = new WeakMap(), _onCloseByEsc = new WeakMap(), _onClose = new WeakMap(), _onCloseReactHandler = new WeakMap(), class extends HTMLElement {
+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 {
   constructor() {
     super();
 
-    _classPrivateFieldInitSpec(this, _$main, {
-      writable: true,
-      value: void 0
-    });
+    _classPrivateMethodInitSpec(this, _setOpen);
 
-    _classPrivateFieldInitSpec(this, _$closeButton, {
+    _classPrivateMethodInitSpec(this, _dispatchCloseEvent);
+
+    _classPrivateFieldInitSpec(this, _$dialog, {
       writable: true,
       value: void 0
     });
 
-    _classPrivateFieldInitSpec(this, _$backDrop, {
+    _classPrivateFieldInitSpec(this, _$closeButton, {
       writable: true,
       value: void 0
     });
 
-    _classPrivateFieldInitSpec(this, _$title, {
+    _classPrivateFieldInitSpec(this, _$caption, {
       writable: true,
       value: void 0
     });
 
-    _classPrivateFieldInitSpec(this, _$prevActiveElement, {
+    _classPrivateFieldInitSpec(this, _isConected, {
       writable: true,
-      value: null
+      value: false
     });
 
-    _classPrivateFieldInitSpec(this, _focusIn, {
+    _classPrivateFieldInitSpec(this, _onCancel, {
       writable: true,
       value: e => {
-        if (e.target === this) {
-          return;
-        }
+        e.preventDefault();
 
-        if (!this.contains(e.target)) {
-          _classPrivateFieldGet(this, _$closeButton).focus();
-        }
+        _classPrivateMethodGet(this, _dispatchCloseEvent, _dispatchCloseEvent2).call(this);
       }
     });
 
-    _classPrivateFieldInitSpec(this, _onCloseByMouse, {
+    _classPrivateFieldInitSpec(this, _onCloseClick, {
       writable: true,
       value: e => {
         e.stopPropagation();
 
-        _classPrivateFieldGet(this, _onClose).call(this);
+        _classPrivateMethodGet(this, _dispatchCloseEvent, _dispatchCloseEvent2).call(this);
       }
     });
 
-    _classPrivateFieldInitSpec(this, _onCloseByEsc, {
+    _classPrivateFieldInitSpec(this, _onBackdropClick, {
       writable: true,
       value: e => {
-        switch (e.key) {
-          case 'Escape':
-            {
-              e.preventDefault();
-              e.stopPropagation();
-
-              _classPrivateFieldGet(this, _onClose).call(this);
+        e.stopPropagation();
+        const rect = this.dialogRect;
+        const isInside = e.x >= rect.x && e.x < rect.x + rect.width && e.y >= rect.y && e.y < rect.y + rect.height;
 
-              break;
-            }
+        if (!isInside) {
+          _classPrivateMethodGet(this, _dispatchCloseEvent, _dispatchCloseEvent2).call(this);
         }
       }
     });
 
-    _classPrivateFieldInitSpec(this, _onClose, {
-      writable: true,
-      value: () => {
-        _classPrivateFieldGet(this, _$prevActiveElement)?.focus();
-        this.dispatchEvent(new CustomEvent('close', {
-          bubbles: true
-        }));
-      }
-    });
-
     _classPrivateFieldInitSpec(this, _onCloseReactHandler, {
       writable: true,
       value: () => {
@@ -114,69 +101,94 @@ defineCustomElement('sinch-dialog', (_$main = new WeakMap(), _$closeButton = new
     });
     shadowRoot.appendChild(template.content.cloneNode(true));
 
-    _classPrivateFieldSet(this, _$main, shadowRoot.querySelector('#main'));
+    _classPrivateFieldSet(this, _$dialog, shadowRoot.querySelector('dialog'));
 
     _classPrivateFieldSet(this, _$closeButton, shadowRoot.querySelector('#close'));
 
-    _classPrivateFieldSet(this, _$backDrop, shadowRoot.querySelector('#backdrop'));
+    _classPrivateFieldSet(this, _$caption, shadowRoot.querySelector('#caption'));
 
-    _classPrivateFieldSet(this, _$title, shadowRoot.querySelector('#title'));
+    dialogPolyfill.registerDialog(_classPrivateFieldGet(this, _$dialog));
   }
 
   static get observedAttributes() {
-    return ['title'];
+    return ['caption', 'open'];
   }
 
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
-      case 'title':
+      case 'caption':
+        {
+          _classPrivateFieldGet(this, _$caption).textContent = newVal;
+          break;
+        }
+
+      case 'open':
         {
-          _classPrivateFieldGet(this, _$title).textContent = newVal;
+          if (_classPrivateFieldGet(this, _isConected)) {
+            _classPrivateMethodGet(this, _setOpen, _setOpen2).call(this, isAttrTrue(newVal));
+          }
+
           break;
         }
     }
   }
 
-  set title(title) {
-    updateAttribute(this, 'title', title);
+  set caption(caption) {
+    updateAttribute(this, 'caption', caption);
   }
 
-  get title() {
-    return getAttribute(this, 'title', '');
+  get caption() {
+    return getAttribute(this, 'caption', '');
   }
 
   connectedCallback() {
     this.setAttribute('role', 'dialog');
 
-    _classPrivateFieldSet(this, _$prevActiveElement, document.activeElement);
+    _classPrivateFieldGet(this, _$closeButton).addEventListener('click', _classPrivateFieldGet(this, _onCloseClick));
 
-    _classPrivateFieldGet(this, _$closeButton).addEventListener('click', _classPrivateFieldGet(this, _onCloseByMouse));
+    this.addEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
+    this.addEventListener('click', _classPrivateFieldGet(this, _onBackdropClick));
 
-    _classPrivateFieldGet(this, _$backDrop).addEventListener('click', _classPrivateFieldGet(this, _onCloseByMouse));
+    _classPrivateFieldGet(this, _$dialog).addEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
 
-    this.addEventListener('keydown', _classPrivateFieldGet(this, _onCloseByEsc));
-    this.addEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
-    document.addEventListener('focusin', _classPrivateFieldGet(this, _focusIn));
+    _classPrivateFieldSet(this, _isConected, true);
+
+    if (getBooleanAttribute(this, 'open')) {
+      _classPrivateMethodGet(this, _setOpen, _setOpen2).call(this, true);
+    }
   }
 
   disconnectedCallback() {
-    _classPrivateFieldSet(this, _$prevActiveElement, null);
+    _classPrivateFieldGet(this, _$closeButton).removeEventListener('click', _classPrivateFieldGet(this, _onCloseClick));
 
-    _classPrivateFieldGet(this, _$closeButton).removeEventListener('click', _classPrivateFieldGet(this, _onCloseByMouse));
+    this.removeEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
+    this.removeEventListener('click', _classPrivateFieldGet(this, _onBackdropClick));
 
-    _classPrivateFieldGet(this, _$backDrop).removeEventListener('click', _classPrivateFieldGet(this, _onCloseByMouse));
+    _classPrivateFieldGet(this, _$dialog).removeEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
 
-    this.removeEventListener('keydown', _classPrivateFieldGet(this, _onCloseByEsc));
-    this.removeEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
-    document.removeEventListener('focusin', _classPrivateFieldGet(this, _focusIn));
+    _classPrivateFieldSet(this, _isConected, false);
   }
 
   get dialogRect() {
-    return getRect(_classPrivateFieldGet(this, _$main));
+    return getRect(_classPrivateFieldGet(this, _$dialog));
   }
 
   get closeButtonRect() {
     return getRect(_classPrivateFieldGet(this, _$closeButton));
   }
 
-}));
+}));
+
+function _dispatchCloseEvent2() {
+  this.dispatchEvent(new CustomEvent('close', {
+    bubbles: true
+  }));
+}
+
+function _setOpen2(isOpen) {
+  if (isOpen) {
+    _classPrivateFieldGet(this, _$dialog).showModal();
+  } else {
+    _classPrivateFieldGet(this, _$dialog).close();
+  }
+}

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, _$targetElement, _$targetSlot, _onTargetFocusin, _onButtonClick, _onListboxClick, _onListboxKeyPress, _onListboxKeyDown, _onOptionSlotChange, _onTargetSlotChange, _onListboxBlur, _onExpand, _onCollapse, _onValueChange, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _selectOption, _getOptionWithValue, _getOptionElements, _getEnabledOptionElements, _dispatchChangeEvent, _focusTargetElement;
+var _$button, _$optionSlot, _$listbox, _onButtonClick, _onListboxClick, _onListboxKeyPress, _onListboxKeyDown, _onOptionSlotChange, _setOpen, _onExpand, _onCollapse, _onValueChange, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _selectOption, _getOptionWithValue, _getOptionElements, _getEnabledOptionElements, _dispatchChangeEvent;
 
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 
@@ -13,9 +13,9 @@ function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(
 
 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 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>';
 const orientationValues = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
-const ITEM_HEIGHT = 36;
+const ITEM_HEIGHT = 40;
 
 const findSelectedOption = elements => {
   for (const el of elements) {
@@ -29,12 +29,10 @@ const findSelectedOption = elements => {
 
 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 {
+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 {
   constructor() {
     super();
 
-    _classPrivateMethodInitSpec(this, _focusTargetElement);
-
     _classPrivateMethodInitSpec(this, _dispatchChangeEvent);
 
     _classPrivateMethodInitSpec(this, _getEnabledOptionElements);
@@ -59,6 +57,8 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
 
     _classPrivateMethodInitSpec(this, _onExpand);
 
+    _classPrivateMethodInitSpec(this, _setOpen);
+
     _classPrivateFieldInitSpec(this, _$button, {
       writable: true,
       value: void 0
@@ -74,23 +74,6 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
       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 => {
@@ -117,8 +100,6 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
         }
 
         _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
-
-        _classPrivateMethodGet(this, _focusTargetElement, _focusTargetElement2).call(this);
       }
     });
 
@@ -135,8 +116,6 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
 
               _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
 
-              _classPrivateMethodGet(this, _focusTargetElement, _focusTargetElement2).call(this);
-
               break;
             }
         }
@@ -173,8 +152,6 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
 
               _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
 
-              _classPrivateMethodGet(this, _focusTargetElement, _focusTargetElement2).call(this);
-
               break;
             }
         }
@@ -190,22 +167,6 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
       }
     });
 
-    _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
@@ -217,8 +178,6 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
     _classPrivateFieldSet(this, _$listbox, shadowRoot.querySelector('#listbox'));
 
     _classPrivateFieldSet(this, _$optionSlot, shadowRoot.querySelector('slot[name="option"]'));
-
-    _classPrivateFieldSet(this, _$targetSlot, shadowRoot.querySelector('slot[name="target"]'));
   }
 
   connectedCallback() {
@@ -226,10 +185,6 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
 
     _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));
@@ -237,17 +192,11 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
     _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));
@@ -255,8 +204,6 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
     _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() {
@@ -300,7 +247,7 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
   }
 
   get dropdownRect() {
-    return getRect(_classPrivateFieldGet(this, _$listbox).firstElementChild);
+    return getRect(_classPrivateFieldGet(this, _$listbox));
   }
 
   attributeChangedCallback(name, oldVal, newVal) {
@@ -314,39 +261,80 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
 
       case 'maxvisibleitems':
         {
-          const $list = _classPrivateFieldGet(this, _$listbox).firstElementChild;
+          const $list = _classPrivateFieldGet(this, _$listbox);
+
+          if (newVal === '0') {
+            $list.style.maxHeight = 'unset';
+          } else {
+            $list.style.maxHeight = attrValueToPixels(newVal, {
+              min: 2,
+              multiplier: ITEM_HEIGHT
+            });
+          }
 
-          $list.style.maxHeight = attrValueToPixels(newVal, {
-            min: 2,
-            multiplier: ITEM_HEIGHT
-          });
           break;
         }
     }
   }
 
-  focus() {
-    _classPrivateMethodGet(this, _focusTargetElement, _focusTargetElement2).call(this);
-  }
-
-  blur() {
-    _classPrivateFieldGet(this, _$button).blur();
+  focus() {}
 
-    _classPrivateFieldGet(this, _$listbox).blur();
-  }
+  blur() {}
 
 }));
 
+function _setOpen2(isOpen) {
+  if (isOpen) {
+    _classPrivateFieldGet(this, _$listbox).showModal();
+  } else {
+    _classPrivateFieldGet(this, _$listbox).close();
+  }
+}
+
 function _onExpand2() {
   _classPrivateFieldGet(this, _$button).setAttribute('aria-expanded', 'true');
 
-  _classPrivateFieldGet(this, _$listbox).focus();
+  _classPrivateMethodGet(this, _setOpen, _setOpen2).call(this, true);
+
+  const buttonRect = _classPrivateFieldGet(this, _$button).getBoundingClientRect();
+
+  const modalRect = _classPrivateFieldGet(this, _$listbox).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, _$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) {
@@ -440,12 +428,4 @@ function _dispatchChangeEvent2($opt) {
       bubbles: true
     }));
   }
-}
-
-function _focusTargetElement2() {
-  const el = _classPrivateFieldGet(this, _$targetElement);
-
-  _classPrivateFieldSet(this, _$targetElement, null);
-
-  el?.focus();
 }

package/dropdown-option/index.js

@@ -6,7 +6,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, isAttrTrue, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}*{pointer-events:none}#wrapper{display:flex;position:relative;box-sizing:border-box;height:40px;padding:6px 12px;width:100%;align-items:center;gap:12px;--sinch-size-icon:24px}#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 templateHTML = '<style>:host{display:block}*{pointer-events:none}#wrapper{display:flex;position:relative;box-sizing:border-box;height:40px;padding:6px 12px;width:100%;align-items:center;gap:12px;--sinch-size-icon:24px}#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:12px;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;
 

package/icon/add-alert/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchIconElement, TSinchIconReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-icon-add-alert': TSinchIconReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-icon-add-alert': TSinchIconElement;
+    }
+}