@nectary/components 0.31.0 → 0.33.0

package/input/index.js

@@ -1,18 +1,18 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$input, _$label, _$optionalText, _$additionalText, _$invalidText, _selectionStart, _selectionEnd, _isPendingDk, _onCompositionStart, _onInput;
+var _$input, _$label, _$optionalText, _$additionalText, _$invalidText, _$iconSlot, _$iconWrapper, _$rightSlot, _$rightWrapper, _cursorPos, _isPendingDk, _onCompositionStart, _onSelectionChange, _onInput, _onIconSlotChange, _onRightSlotChange, _onEventFilter;
 
 function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
 
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 
-import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{width:100%;box-sizing:border-box}#input-wrapper{display:flex;flex-direction:row;align-items:center;gap:4px;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:var(--sinch-shape-radius-s);width:100%;height:48px;margin:2px 0;padding:0 8px;background-color:var(--sinch-color-snow-100)}#input{all:initial;flex:1;min-width:0;height:48px;padding:0 4px;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:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:focus{border-color:var(--sinch-color-stormy-600)}#input[type=password]{font-size:1.5em;letter-spacing:.1em}:host([invalidtext]:not([invalidtext=""]):not([disabled])) #input-wrapper{border-color:var(--sinch-color-text-invalid)}#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)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><slot name="tooltip"></slot><span id="optional"></span></div><div id="input-wrapper"><input id="input" type="text"/><slot name="right"></slot></div><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{width:100%;box-sizing:border-box}#input-wrapper{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;border-radius:var(--sinch-shape-radius-s);width:100%;height:48px;background-color:var(--sinch-color-snow-100)}#input{all:initial;flex:1;min-width:0;height:48px;padding:0 12px 0 44px;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)}#border{position:absolute;border:1px solid var(--sinch-color-stormy-200);border-radius:var(--sinch-shape-radius-s);left:0;right:0;top:0;bottom:0;pointer-events:none}:host([invalidtext]:not([invalidtext=""]):not([disabled])) #border{border-color:var(--sinch-color-text-invalid)}#input:disabled{color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:disabled+#border{border-color:var(--sinch-color-snow-500)}#input:focus+#border{border-color:var(--sinch-color-stormy-600)}#input[type=password]{font-size:1.5em;letter-spacing:.1em}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px}#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);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid);line-height:20px;margin-top:2px}#invalid:empty{display:none}#icon{position:absolute;left:12px;top:12px;pointer-events:none;--sinch-icon-size:24px}#icon.empty{display:none}#icon.empty~#input{padding-left:12px}#right{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;padding-right:8px}#right.empty{display:none}::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)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><slot name="tooltip"></slot><span id="optional"></span></div><div id="input-wrapper"><div id="icon"><slot name="icon"></slot></div><input id="input" type="text"/><div id="border"></div><div id="right"><slot name="right"></slot></div></div><div id="bottom"><div id="invalid"></div><div id="additional"></div></div></div>';
 import { inputTypes } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _selectionStart = new WeakMap(), _selectionEnd = new WeakMap(), _isPendingDk = new WeakMap(), _onCompositionStart = new WeakMap(), _onInput = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _$iconSlot = new WeakMap(), _$iconWrapper = new WeakMap(), _$rightSlot = new WeakMap(), _$rightWrapper = new WeakMap(), _cursorPos = new WeakMap(), _isPendingDk = new WeakMap(), _onCompositionStart = new WeakMap(), _onSelectionChange = new WeakMap(), _onInput = new WeakMap(), _onIconSlotChange = new WeakMap(), _onRightSlotChange = new WeakMap(), _onEventFilter = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -41,12 +41,27 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
       value: void 0
     });
 
-    _classPrivateFieldInitSpec(this, _selectionStart, {
+    _classPrivateFieldInitSpec(this, _$iconSlot, {
       writable: true,
-      value: null
+      value: void 0
     });
 
-    _classPrivateFieldInitSpec(this, _selectionEnd, {
+    _classPrivateFieldInitSpec(this, _$iconWrapper, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$rightSlot, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$rightWrapper, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _cursorPos, {
       writable: true,
       value: null
     });
@@ -63,6 +78,13 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
       }
     });
 
+    _classPrivateFieldInitSpec(this, _onSelectionChange, {
+      writable: true,
+      value: () => {
+        _classPrivateFieldSet(this, _cursorPos, _classPrivateFieldGet(this, _$input).selectionEnd);
+      }
+    });
+
     _classPrivateFieldInitSpec(this, _onInput, {
       writable: true,
       value: e => {
@@ -73,29 +95,23 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
         const prevValue = this.value;
 
         if (prevValue !== nextValue) {
-          const nextSelectionStart = _classPrivateFieldGet(this, _$input).selectionStart;
-
-          const nextSelectionEnd = _classPrivateFieldGet(this, _$input).selectionEnd;
-
-          const prevSelectionStart = _classPrivateFieldGet(this, _selectionStart);
-
-          const prevSelectionEnd = _classPrivateFieldGet(this, _selectionEnd);
-
-          const isPrevCursorEnd = prevSelectionStart === prevSelectionEnd && prevSelectionStart === prevValue.length;
+          const nextCursorPos = _classPrivateFieldGet(this, _$input).selectionEnd;
 
           if (!_classPrivateFieldGet(this, _isPendingDk)) {
             _classPrivateFieldGet(this, _$input).value = prevValue;
-          }
 
-          _classPrivateFieldSet(this, _isPendingDk, false);
+            const prevCursorPos = _classPrivateFieldGet(this, _cursorPos);
+
+            const isPrevCursorEnd = prevCursorPos === null || prevCursorPos === prevValue.length;
 
-          if (!isPrevCursorEnd) {
-            _classPrivateFieldGet(this, _$input).setSelectionRange(prevSelectionStart, prevSelectionEnd);
+            if (!isPrevCursorEnd) {
+              _classPrivateFieldGet(this, _$input).setSelectionRange(prevCursorPos, prevCursorPos);
+            }
           }
 
-          _classPrivateFieldSet(this, _selectionStart, nextSelectionStart);
+          _classPrivateFieldSet(this, _isPendingDk, false);
 
-          _classPrivateFieldSet(this, _selectionEnd, nextSelectionEnd);
+          _classPrivateFieldSet(this, _cursorPos, nextCursorPos);
 
           this.dispatchEvent(new CustomEvent('change', {
             detail: nextValue,
@@ -105,6 +121,27 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
       }
     });
 
+    _classPrivateFieldInitSpec(this, _onIconSlotChange, {
+      writable: true,
+      value: () => {
+        setClass(_classPrivateFieldGet(this, _$iconWrapper), 'empty', _classPrivateFieldGet(this, _$iconSlot).assignedElements().length === 0);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onRightSlotChange, {
+      writable: true,
+      value: () => {
+        setClass(_classPrivateFieldGet(this, _$rightWrapper), 'empty', _classPrivateFieldGet(this, _$rightSlot).assignedElements().length === 0);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onEventFilter, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+      }
+    });
+
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
 
@@ -117,6 +154,14 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
     _classPrivateFieldSet(this, _$additionalText, shadowRoot.querySelector('#additional'));
 
     _classPrivateFieldSet(this, _$invalidText, shadowRoot.querySelector('#invalid'));
+
+    _classPrivateFieldSet(this, _$iconSlot, shadowRoot.querySelector('slot[name="icon"]'));
+
+    _classPrivateFieldSet(this, _$iconWrapper, shadowRoot.querySelector('#icon'));
+
+    _classPrivateFieldSet(this, _$rightSlot, shadowRoot.querySelector('slot[name="right"]'));
+
+    _classPrivateFieldSet(this, _$rightWrapper, shadowRoot.querySelector('#right'));
   }
 
   connectedCallback() {
@@ -125,12 +170,48 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
     _classPrivateFieldGet(this, _$input).addEventListener('input', _classPrivateFieldGet(this, _onInput));
 
     _classPrivateFieldGet(this, _$input).addEventListener('compositionstart', _classPrivateFieldGet(this, _onCompositionStart));
+
+    _classPrivateFieldGet(this, _$input).addEventListener('mousedown', _classPrivateFieldGet(this, _onSelectionChange));
+
+    _classPrivateFieldGet(this, _$input).addEventListener('keydown', _classPrivateFieldGet(this, _onSelectionChange));
+
+    _classPrivateFieldGet(this, _$iconSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onIconSlotChange));
+
+    _classPrivateFieldGet(this, _$rightSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onRightSlotChange));
+
+    _classPrivateFieldGet(this, _$rightSlot).addEventListener('input', _classPrivateFieldGet(this, _onEventFilter));
+
+    _classPrivateFieldGet(this, _$rightSlot).addEventListener('change', _classPrivateFieldGet(this, _onEventFilter));
+
+    _classPrivateFieldGet(this, _$rightSlot).addEventListener('focusin', _classPrivateFieldGet(this, _onEventFilter));
+
+    _classPrivateFieldGet(this, _$rightSlot).addEventListener('focusout', _classPrivateFieldGet(this, _onEventFilter));
+
+    _classPrivateFieldGet(this, _onIconSlotChange).call(this);
+
+    _classPrivateFieldGet(this, _onRightSlotChange).call(this);
   }
 
   disconnectedCallback() {
     _classPrivateFieldGet(this, _$input).removeEventListener('input', _classPrivateFieldGet(this, _onInput));
 
     _classPrivateFieldGet(this, _$input).removeEventListener('compositionstart', _classPrivateFieldGet(this, _onCompositionStart));
+
+    _classPrivateFieldGet(this, _$input).removeEventListener('mousedown', _classPrivateFieldGet(this, _onSelectionChange));
+
+    _classPrivateFieldGet(this, _$input).removeEventListener('keydown', _classPrivateFieldGet(this, _onSelectionChange));
+
+    _classPrivateFieldGet(this, _$iconSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onIconSlotChange));
+
+    _classPrivateFieldGet(this, _$rightSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onRightSlotChange));
+
+    _classPrivateFieldGet(this, _$rightSlot).removeEventListener('input', _classPrivateFieldGet(this, _onEventFilter));
+
+    _classPrivateFieldGet(this, _$rightSlot).removeEventListener('change', _classPrivateFieldGet(this, _onEventFilter));
+
+    _classPrivateFieldGet(this, _$rightSlot).removeEventListener('focusin', _classPrivateFieldGet(this, _onEventFilter));
+
+    _classPrivateFieldGet(this, _$rightSlot).removeEventListener('focusout', _classPrivateFieldGet(this, _onEventFilter));
   }
 
   static get observedAttributes() {
@@ -241,12 +322,16 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
         {
           const nextVal = newVal ?? '';
 
-          if (nextVal !== _classPrivateFieldGet(this, _$input).value) {
+          const prevVal = _classPrivateFieldGet(this, _$input).value;
+
+          if (nextVal !== prevVal) {
+            const prevCursorPos = _classPrivateFieldGet(this, _$input).selectionEnd;
+
+            const isPrevCursorEnd = prevCursorPos === prevVal.length;
             _classPrivateFieldGet(this, _$input).value = nextVal;
-            const isNextCursorEnd = _classPrivateFieldGet(this, _selectionStart) === _classPrivateFieldGet(this, _selectionEnd) && (_classPrivateFieldGet(this, _selectionStart) === null || _classPrivateFieldGet(this, _selectionStart) === nextVal.length);
 
-            if (!isNextCursorEnd) {
-              _classPrivateFieldGet(this, _$input).setSelectionRange(_classPrivateFieldGet(this, _selectionStart), _classPrivateFieldGet(this, _selectionEnd));
+            if (!isPrevCursorEnd) {
+              _classPrivateFieldGet(this, _$input).setSelectionRange(_classPrivateFieldGet(this, _cursorPos), _classPrivateFieldGet(this, _cursorPos));
             }
           }
 

package/input/types.d.ts

@@ -21,8 +21,6 @@ export declare type TSinchInputElement = HTMLElement & {
     selectionStart: number | null;
     selectionEnd: number | null;
     selectionDirection: 'forward' | 'backward' | 'none' | null;
-    focus(): void;
-    blur(): void;
     /** Change value event */
     addEventListener(type: 'change', listener: (e: CustomEvent<string>) => void): void;
     /** Text field type, `text` by default */

package/link/index.d.ts

@@ -1,4 +1,4 @@
-import '../icons/cancel';
+import '../icons/open-in-new';
 import type { TSinchLinkElement, TSinchLinkReact } from './types';
 declare global {
     namespace JSX {

package/link/index.js

@@ -7,7 +7,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 '../icons/cancel';
+import '../icons/open-in-new';
 import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, isAttrTrue } from '../utils';
 const templateHTML = '<style>:host{display:inline;outline:0}a{font:var(--sinch-font-body);font-size:inherit;line-height:inherit;color:var(--sinch-color-text-link);fill:var(--sinch-color-text-link);--sinch-size-icon:1em}#icon{display:none;margin-left:.2em;vertical-align:-.25em}a:hover{color:var(--sinch-color-tropical-600);fill:var(--sinch-color-tropical-600)}:host([disabled]:not([disabled=false])) a{color:var(--sinch-color-tropical-200);pointer-events:none;cursor:initial;fill:var(--sinch-color-tropical-200)}:host([external]:not([external=false])) #icon{display:inline-block}</style><a><span id="content"></span><sinch-icon-open-in-new id="icon"></sinch-icon-open-in-new></a>';
 const template = document.createElement('template');

package/package.json

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

package/pagination/types.d.ts

@@ -3,8 +3,6 @@ import type { SyntheticEvent } from 'react';
 export declare type TSinchPaginationElement = HTMLElement & {
     value: number;
     max: number;
-    focus(): void;
-    blur(): void;
     readonly prevButtonRect: TRect;
     readonly nextButtonRect: TRect;
     nthButtonRect(index: number): TRect | null;

package/popover/index.js

@@ -1,7 +1,7 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$target, _$dialog, _isConnected, _resizeThrottle, _prevOverflowValue, _onExpand, _onCollapse, _isOpen, _onResize, _updateOrientation, _onBackdropClick, _onCancel, _onCloseReactHandler, _dispatchCloseEvent;
+var _$target, _$dialog, _isConnected, _resizeThrottle, _prevOverflowValue, _onExpand, _onCollapse, _isOpen, _onResize, _updateOrientation, _updateOrientationModal, _onBackdropClick, _onCancel, _onCloseReactHandler, _onTargetKeydown, _dispatchCloseEvent;
 
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 
@@ -12,13 +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, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute, NectaryElement, getCssVar, throttleAnimationFrame } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative}dialog{position:fixed;top:0;left:0;margin:0;outline:0;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:var(--sinch-elevation-level-2);border:1px solid var(--sinch-color-snow-500);border-radius:var(--sinch-shape-radius-s);contain:content;padding:0;box-sizing:border-box;max-width:unset;max-height:unset}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}#target{display:flex;flex-direction:column}</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>';
+import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute, NectaryElement, throttleAnimationFrame } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative}dialog{position:fixed;top:0;left:0;margin:0;outline:0;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:var(--sinch-elevation-level-2);border:1px solid var(--sinch-color-snow-500);border-radius:var(--sinch-popover-shape-radius,var(--sinch-shape-radius-l));contain:content;padding:0;box-sizing:border-box;max-width:unset;max-height:unset;z-index:1}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}#target{display:flex;flex-direction:column}</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>';
 import { orientationValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 const POPOVER_OFFSET = 4;
-defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new WeakMap(), _isConnected = new WeakMap(), _resizeThrottle = new WeakMap(), _prevOverflowValue = new WeakMap(), _onExpand = new WeakSet(), _onCollapse = new WeakSet(), _isOpen = new WeakSet(), _onResize = new WeakMap(), _updateOrientation = new WeakMap(), _onBackdropClick = new WeakMap(), _onCancel = new WeakMap(), _onCloseReactHandler = new WeakMap(), _dispatchCloseEvent = new WeakSet(), class extends NectaryElement {
+defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new WeakMap(), _isConnected = new WeakMap(), _resizeThrottle = new WeakMap(), _prevOverflowValue = new WeakMap(), _onExpand = new WeakSet(), _onCollapse = new WeakSet(), _isOpen = new WeakSet(), _onResize = new WeakMap(), _updateOrientation = new WeakMap(), _updateOrientationModal = new WeakMap(), _onBackdropClick = new WeakMap(), _onCancel = new WeakMap(), _onCloseReactHandler = new WeakMap(), _onTargetKeydown = new WeakMap(), _dispatchCloseEvent = new WeakSet(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -65,7 +65,7 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
     _classPrivateFieldInitSpec(this, _updateOrientation, {
       writable: true,
       value: () => {
-        _classPrivateFieldGet(this, _$dialog).style.width = 'fit-content';
+        _classPrivateFieldGet(this, _$dialog).style.width = 'max-content';
 
         const targetRect = _classPrivateFieldGet(this, _$target).getBoundingClientRect();
 
@@ -74,11 +74,43 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
         let leftPos = 0;
         let topPos = 0;
         const orient = this.orientation;
-        const shouldExpandWidthToTarget = getCssVar(this, '--sinch-popover-expand-width') !== null;
-        const largestWidth = Math.max(modalRect.width, targetRect.width);
-        const resultWidth = shouldExpandWidthToTarget ? largestWidth : modalRect.width;
+        const shouldExpandWidthToTarget = orient === 'top' || orient === 'bottom';
+        const resultWidth = shouldExpandWidthToTarget ? Math.max(modalRect.width, targetRect.width) : modalRect.width;
 
-        if (orient === 'bottom-right' || orient === 'top-right') {
+        if (orient === 'bottom-left' || orient === 'top-left') {
+          leftPos = targetRect.width - resultWidth;
+        }
+
+        if (orient === 'bottom-left' || orient === 'bottom-right' || orient === 'bottom') {
+          topPos = targetRect.height + POPOVER_OFFSET;
+        }
+
+        if (orient === 'top-left' || orient === 'top-right' || orient === 'top') {
+          topPos = -(modalRect.height + POPOVER_OFFSET);
+        }
+
+        _classPrivateFieldGet(this, _$dialog).style.left = `${leftPos}px`;
+        _classPrivateFieldGet(this, _$dialog).style.top = `${topPos}px`;
+        _classPrivateFieldGet(this, _$dialog).style.width = `${resultWidth}px`;
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _updateOrientationModal, {
+      writable: true,
+      value: () => {
+        _classPrivateFieldGet(this, _$dialog).style.width = 'max-content';
+
+        const targetRect = _classPrivateFieldGet(this, _$target).getBoundingClientRect();
+
+        const modalRect = _classPrivateFieldGet(this, _$dialog).getBoundingClientRect();
+
+        let leftPos = 0;
+        let topPos = 0;
+        const orient = this.orientation;
+        const shouldExpandWidthToTarget = orient === 'top' || orient === 'bottom';
+        const resultWidth = shouldExpandWidthToTarget ? Math.max(modalRect.width, targetRect.width) : modalRect.width;
+
+        if (orient === 'bottom-right' || orient === 'top-right' || orient === 'top' || orient === 'bottom') {
           leftPos = Math.max(POPOVER_OFFSET, Math.min(targetRect.x, window.innerWidth - resultWidth - POPOVER_OFFSET));
         }
 
@@ -86,11 +118,11 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
           leftPos = Math.max(POPOVER_OFFSET, targetRect.right - resultWidth);
         }
 
-        if (orient === 'bottom-left' || orient === 'bottom-right') {
+        if (orient === 'bottom-left' || orient === 'bottom-right' || orient === 'bottom') {
           topPos = Math.max(POPOVER_OFFSET, Math.min(targetRect.bottom + POPOVER_OFFSET, window.innerHeight - modalRect.height - POPOVER_OFFSET));
         }
 
-        if (orient === 'top-left' || orient === 'top-right') {
+        if (orient === 'top-left' || orient === 'top-right' || orient === 'top') {
           topPos = Math.max(POPOVER_OFFSET, targetRect.top - POPOVER_OFFSET - modalRect.height);
         }
 
@@ -134,6 +166,22 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
       }
     });
 
+    _classPrivateFieldInitSpec(this, _onTargetKeydown, {
+      writable: true,
+      value: e => {
+        switch (e.key) {
+          case 'Escape':
+            {
+              e.preventDefault();
+
+              _classPrivateMethodGet(this, _dispatchCloseEvent, _dispatchCloseEvent2).call(this);
+
+              break;
+            }
+        }
+      }
+    });
+
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
 
@@ -143,7 +191,7 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
 
     _classPrivateFieldSet(this, _isConnected, false);
 
-    _classPrivateFieldSet(this, _resizeThrottle, throttleAnimationFrame(_classPrivateFieldGet(this, _updateOrientation)));
+    _classPrivateFieldSet(this, _resizeThrottle, throttleAnimationFrame(_classPrivateFieldGet(this, _updateOrientationModal)));
 
     dialogPolyfill.registerDialog(_classPrivateFieldGet(this, _$dialog));
   }
@@ -153,7 +201,7 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
 
     _classPrivateFieldGet(this, _$dialog).addEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
 
-    _classPrivateFieldGet(this, _$dialog).addEventListener('click', _classPrivateFieldGet(this, _onBackdropClick));
+    _classPrivateFieldGet(this, _$dialog).addEventListener('mousedown', _classPrivateFieldGet(this, _onBackdropClick));
 
     this.addEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
 
@@ -169,15 +217,25 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
   disconnectedCallback() {
     _classPrivateFieldGet(this, _$dialog).removeEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
 
-    _classPrivateFieldGet(this, _$dialog).removeEventListener('click', _classPrivateFieldGet(this, _onBackdropClick));
+    _classPrivateFieldGet(this, _$dialog).removeEventListener('mousedown', _classPrivateFieldGet(this, _onBackdropClick));
 
     this.removeEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
 
+    _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
+
     _classPrivateFieldSet(this, _isConnected, false);
   }
 
   static get observedAttributes() {
-    return ['open', 'orientation'];
+    return ['modal', 'orientation', 'open'];
+  }
+
+  set modal(isModal) {
+    updateBooleanAttribute(this, 'modal', isModal);
+  }
+
+  get modal() {
+    return getBooleanAttribute(this, 'modal');
   }
 
   set open(isOpen) {
@@ -189,7 +247,7 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
   }
 
   get orientation() {
-    return getLiteralAttribute(this, orientationValues, 'orientation', 'bottom-right');
+    return getLiteralAttribute(this, orientationValues, 'orientation', 'bottom');
   }
 
   set orientation(value) {
@@ -201,48 +259,77 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
   }
 
   attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+
     switch (name) {
       case 'open':
         {
-          if (_classPrivateFieldGet(this, _isConnected)) {
-            if (isAttrTrue(newVal)) {
-              _classPrivateMethodGet(this, _onExpand, _onExpand2).call(this);
-            } else {
-              _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
-            }
+          if (isAttrTrue(newVal)) {
+            _classPrivateMethodGet(this, _onExpand, _onExpand2).call(this);
+          } else {
+            _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
           }
 
+          updateBooleanAttribute(this, 'open', isAttrTrue(newVal));
           break;
         }
 
       case 'orientation':
         {
           if (_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
-            _classPrivateFieldGet(this, _updateOrientation).call(this);
+            if (this.modal) {
+              _classPrivateFieldGet(this, _updateOrientationModal).call(this);
+            } else {
+              _classPrivateFieldGet(this, _updateOrientation).call(this);
+            }
           }
 
           break;
         }
+
+      case 'modal':
+        {
+          if (_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
+            _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
+
+            _classPrivateMethodGet(this, _onExpand, _onExpand2).call(this);
+          }
+        }
     }
   }
 
 }));
 
 function _onExpand2() {
-  if (_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
+  if (!_classPrivateFieldGet(this, _isConnected) || _classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
     return;
   }
 
-  _classPrivateFieldGet(this, _$target).setAttribute('aria-expanded', 'true');
+  if (this.modal) {
+    _classPrivateFieldGet(this, _$dialog).style.position = 'fixed';
+
+    _classPrivateFieldGet(this, _$dialog).showModal();
+
+    _classPrivateFieldGet(this, _updateOrientationModal).call(this);
+
+    _classPrivateFieldGet(this, _$target).setAttribute('aria-expanded', 'true');
 
-  _classPrivateFieldGet(this, _$dialog).showModal();
+    _classPrivateFieldSet(this, _prevOverflowValue, document.body.style.overflow);
 
-  _classPrivateFieldGet(this, _updateOrientation).call(this);
+    document.body.style.overflow = 'hidden';
+    window.addEventListener('resize', _classPrivateFieldGet(this, _onResize));
+  } else {
+    this.addEventListener('keydown', _classPrivateFieldGet(this, _onTargetKeydown));
+    _classPrivateFieldGet(this, _$dialog).style.position = 'absolute';
 
-  _classPrivateFieldSet(this, _prevOverflowValue, document.body.style.overflow);
+    _classPrivateFieldGet(this, _$dialog).setAttribute('open', '');
 
-  document.body.style.overflow = 'hidden';
-  window.addEventListener('resize', _classPrivateFieldGet(this, _onResize));
+    _classPrivateFieldGet(this, _updateOrientation).call(this);
+
+    _classPrivateFieldGet(this, _$target).setAttribute('aria-expanded', 'true');
+  }
 }
 
 function _onCollapse2() {
@@ -250,17 +337,24 @@ function _onCollapse2() {
     return;
   }
 
+  if (this.modal) {
+    _classPrivateFieldGet(this, _$dialog).close?.();
+  } else {
+    _classPrivateFieldGet(this, _$dialog).removeAttribute('open');
+  }
+
   _classPrivateFieldGet(this, _$target).setAttribute('aria-expanded', 'false');
 
-  _classPrivateFieldGet(this, _$dialog).close?.();
   document.body.style.overflow = _classPrivateFieldGet(this, _prevOverflowValue);
-  window.removeEventListener('resize', _classPrivateFieldGet(this, _onResize));
 
   _classPrivateFieldGet(this, _resizeThrottle).cancel();
+
+  window.removeEventListener('resize', _classPrivateFieldGet(this, _onResize));
+  this.removeEventListener('keydown', _classPrivateFieldGet(this, _onTargetKeydown));
 }
 
 function _isOpen2() {
-  return _classPrivateFieldGet(this, _isConnected) && getBooleanAttribute(_classPrivateFieldGet(this, _$dialog), 'open');
+  return getBooleanAttribute(_classPrivateFieldGet(this, _$dialog), 'open');
 }
 
 function _dispatchCloseEvent2() {

package/popover/types.d.ts

@@ -1,17 +1,32 @@
 import type { TRect, TSinchElementReact } from '../types';
 import type { SyntheticEvent } from 'react';
-export declare type TSinchPopoverOrientation = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export declare type TSinchPopoverOrientation = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'bottom' | 'top';
 export declare type TSinchPopoverElement = HTMLElement & {
+    /** Open/close state */
     open: boolean;
+    /** Orientation, where it *points to* from origin */
     orientation: TSinchPopoverOrientation;
+    /** Modal/non-modal mode */
+    modal: boolean;
     readonly popoverRect: TRect;
+    /** Close event */
     addEventListener(type: 'close', listener: (e: CustomEvent<void>) => void): void;
+    /** Open/close state */
     setAttribute(name: 'open', value: ''): void;
+    /** Orientation, where it *points to* from origin */
     setAttribute(name: 'orientation', value: TSinchPopoverOrientation): void;
+    /** Modal/non-modal mode */
+    setAttribute(name: 'modal', value: boolean): void;
 };
 export declare type TSinchPopoverReact = TSinchElementReact<TSinchPopoverElement> & {
+    /** Open/close state */
     open: boolean;
+    /** Orientation, where it *points to* from origin */
     orientation?: TSinchPopoverOrientation;
+    /** Modal/non-modal mode */
+    modal?: boolean;
+    /** Label that is used for a11y */
     'aria-label': string;
-    onClose: (event: SyntheticEvent<TSinchPopoverElement, CustomEvent<void>>) => void;
+    /** Close event handler */
+    onClose?: (event: SyntheticEvent<TSinchPopoverElement, CustomEvent<void>>) => void;
 };

package/popover/utils.js

@@ -1 +1 @@
-export const orientationValues = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
+export const orientationValues = ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'bottom', 'top'];

package/radio-option/types.d.ts

@@ -4,8 +4,6 @@ export declare type TSinchRadioOptionElement = HTMLElement & {
     checked: boolean;
     disabled: boolean;
     text: string;
-    focus(): void;
-    blur(): void;
     setAttribute(name: 'value', value: string): void;
     setAttribute(name: 'checked', value: ''): void;
     setAttribute(name: 'disabled', value: ''): void;

package/search/types.d.ts

@@ -9,8 +9,6 @@ export declare type TSinchSearchElement = HTMLElement & {
     selectionEnd: HTMLInputElement['selectionEnd'];
     selectionDirection: HTMLInputElement['selectionDirection'];
     readonly dropdownRect: TRect;
-    focus(): void;
-    blur(): void;
     addEventListener(type: 'change', listener: (e: CustomEvent<string>) => void): void;
     setAttribute(name: 'value', value: string): void;
     setAttribute(name: 'label', value: string): void;