@nectary/components 0.32.0 → 0.34.0

package/action-menu/index.js

@@ -1,7 +1,7 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$optionSlot, _$listbox, _$popover, _onListboxKeyDown, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _selectOption, _getOptionElements, _findSelectedOption, _getEnabledOptionElements, _onOpen, _onClose, _onReactClose;
+var _$optionSlot, _$listbox, _$popover, _onListboxKeyDown, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _selectOption, _getOptionElements, _findSelectedOption, _getEnabledOptionElements, _onClose, _onReactClose;
 
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 
@@ -14,16 +14,14 @@ function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(
 import { orientationValues } from '../popover/utils';
 import '../popover';
 import { attrValueToPixels, defineCustomElement, getBooleanAttribute, getIntegerAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateIntegerAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}sinch-popover{width:100%}</style><sinch-popover><slot name="target" slot="target"></slot><div id="listbox" slot="content"><slot name="option"></slot></div></sinch-popover>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{width:100%;--sinch-popover-shape-radius:var(--sinch-shape-radius-s)}#listbox{overflow-y:auto}</style><sinch-popover id="wrapper"><slot name="target" slot="target"></slot><div id="listbox" slot="content"><slot name="option"></slot></div></sinch-popover>';
 const ITEM_HEIGHT = 40;
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-action-menu', (_$optionSlot = new WeakMap(), _$listbox = new WeakMap(), _$popover = new WeakMap(), _onListboxKeyDown = new WeakMap(), _getFirstOption = new WeakSet(), _getLastOption = new WeakSet(), _getNextOption = new WeakSet(), _getPrevOption = new WeakSet(), _selectOption = new WeakSet(), _getOptionElements = new WeakSet(), _findSelectedOption = new WeakSet(), _getEnabledOptionElements = new WeakSet(), _onOpen = new WeakSet(), _onClose = new WeakMap(), _onReactClose = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-action-menu', (_$optionSlot = new WeakMap(), _$listbox = new WeakMap(), _$popover = new WeakMap(), _onListboxKeyDown = new WeakMap(), _getFirstOption = new WeakSet(), _getLastOption = new WeakSet(), _getNextOption = new WeakSet(), _getPrevOption = new WeakSet(), _selectOption = new WeakSet(), _getOptionElements = new WeakSet(), _findSelectedOption = new WeakSet(), _getEnabledOptionElements = new WeakSet(), _onClose = new WeakMap(), _onReactClose = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
-    _classPrivateMethodInitSpec(this, _onOpen);
-
     _classPrivateMethodInitSpec(this, _getEnabledOptionElements);
 
     _classPrivateMethodInitSpec(this, _findSelectedOption);
@@ -59,8 +57,19 @@ defineCustomElement('sinch-action-menu', (_$optionSlot = new WeakMap(), _$listbo
       writable: true,
       value: e => {
         switch (e.code) {
+          case 'Enter':
+            {
+              const $opt = _classPrivateMethodGet(this, _findSelectedOption, _findSelectedOption2).call(this, _classPrivateMethodGet(this, _getEnabledOptionElements, _getEnabledOptionElements2).call(this));
+
+              if ($opt !== null) {
+                e.preventDefault();
+                $opt.click();
+              }
+
+              break;
+            }
+
           case 'ArrowUp':
-          case 'ArrowLeft':
             {
               e.preventDefault();
 
@@ -70,7 +79,6 @@ defineCustomElement('sinch-action-menu', (_$optionSlot = new WeakMap(), _$listbo
             }
 
           case 'ArrowDown':
-          case 'ArrowRight':
             {
               e.preventDefault();
 
@@ -118,7 +126,7 @@ defineCustomElement('sinch-action-menu', (_$optionSlot = new WeakMap(), _$listbo
   }
 
   static get observedAttributes() {
-    return ['open', 'orientation', 'maxvisibleitems'];
+    return ['open', 'orientation', 'maxvisibleitems', 'modal'];
   }
 
   get nodeName() {
@@ -149,6 +157,14 @@ defineCustomElement('sinch-action-menu', (_$optionSlot = new WeakMap(), _$listbo
     return getBooleanAttribute(this, 'open');
   }
 
+  set modal(isModal) {
+    updateBooleanAttribute(this, 'modal', isModal);
+  }
+
+  get modal() {
+    return getBooleanAttribute(this, 'modal');
+  }
+
   get dropdownRect() {
     return _classPrivateFieldGet(this, _$popover).popoverRect;
   }
@@ -160,8 +176,6 @@ defineCustomElement('sinch-action-menu', (_$optionSlot = new WeakMap(), _$listbo
           updateAttribute(_classPrivateFieldGet(this, _$popover), 'open', newVal);
 
           if (isAttrTrue(newVal)) {
-            _classPrivateMethodGet(this, _onOpen, _onOpen2).call(this);
-
             _classPrivateFieldGet(this, _$popover).addEventListener('keydown', _classPrivateFieldGet(this, _onListboxKeyDown));
 
             _classPrivateFieldGet(this, _$popover).addEventListener('close', _classPrivateFieldGet(this, _onClose));
@@ -169,6 +183,8 @@ defineCustomElement('sinch-action-menu', (_$optionSlot = new WeakMap(), _$listbo
             _classPrivateFieldGet(this, _$popover).removeEventListener('keydown', _classPrivateFieldGet(this, _onListboxKeyDown));
 
             _classPrivateFieldGet(this, _$popover).removeEventListener('close', _classPrivateFieldGet(this, _onClose));
+
+            _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, null);
           }
 
           break;
@@ -193,6 +209,12 @@ defineCustomElement('sinch-action-menu', (_$optionSlot = new WeakMap(), _$listbo
 
           break;
         }
+
+      case 'modal':
+        {
+          updateBooleanAttribute(_classPrivateFieldGet(this, _$popover), 'modal', isAttrTrue(newVal));
+          break;
+        }
     }
   }
 
@@ -235,12 +257,16 @@ function _getPrevOption2() {
 }
 
 function _selectOption2($option) {
+  const hasMaxVisibleItems = this.hasAttribute('maxvisibleitems');
+
   for (const $op of _classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).call(this)) {
     const isSelected = $op === $option;
-    updateBooleanAttribute($op, 'selected', isSelected);
+    updateBooleanAttribute($op, 'data-selected', isSelected);
 
-    if (isSelected) {
-      $op.focus();
+    if (isSelected && hasMaxVisibleItems) {
+      $op.scrollIntoView?.({
+        block: 'nearest'
+      });
     }
   }
 }
@@ -257,7 +283,7 @@ function _getOptionElements2() {
 
 function _findSelectedOption2(elements) {
   for (const el of elements) {
-    if (getBooleanAttribute(el, 'selected')) {
+    if (getBooleanAttribute(el, 'data-selected')) {
       return el;
     }
   }
@@ -267,8 +293,4 @@ function _findSelectedOption2(elements) {
 
 function _getEnabledOptionElements2() {
   return _classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).call(this).filter(opt => opt.disabled !== true);
-}
-
-function _onOpen2() {
-  _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, _classPrivateMethodGet(this, _getFirstOption, _getFirstOption2).call(this));
 }

package/action-menu/types.d.ts

@@ -5,16 +5,19 @@ export declare type TSinchActionMenuElement = HTMLElement & {
     open: boolean;
     orientation: TSinchPopoverOrientation;
     maxVisibleItems: number | null;
+    modal: boolean;
     readonly dropdownRect: TRect;
     addEventListener(type: 'close', listener: (e: CustomEvent<void>) => void): void;
     setAttribute(name: 'open', value: ''): void;
     setAttribute(name: 'orientation', value: TSinchPopoverOrientation): void;
     setAttribute(name: 'maxvisibleitems', value: string): void;
+    setAttribute(name: 'modal', value: boolean): void;
 };
 export declare type TSinchActionMenuReact = TSinchElementReact<TSinchActionMenuElement> & {
     open: boolean;
     orientation?: TSinchPopoverOrientation;
     maxVisibleItems?: number;
+    modal?: boolean;
     'aria-label': string;
     onClose: (event: SyntheticEvent<TSinchActionMenuElement, CustomEvent<void>>) => void;
 };

package/action-menu-option/index.js

@@ -1,21 +1,21 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$button, _$content;
+var _$wrapper, _$content, _onMouseDown;
 
 function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
 
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 
 import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{all:initial;display:flex;position:relative;box-sizing:border-box;height:40px;width:100%;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;font:inherit;color:inherit;--sinch-size-icon:24px}#content{flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#wrapper:focus,:host(:hover)>#wrapper{background-color:var(--sinch-color-snow-500)}:host([disabled]:not([disabled=false]))>#wrapper{color:var(--sinch-color-stormy-100);cursor:initial;--sinch-color-icon:var(--sinch-color-stormy-100)}::slotted(*){margin-left:-6px}</style><button id="wrapper"><slot name="icon"></slot><span id="content"></span></button>';
+const templateHTML = '<style>:host{display:block}#wrapper{all:initial;display:flex;position:relative;box-sizing:border-box;height:40px;width:100%;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;font:inherit;color:inherit;--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([disabled]:not([disabled=false]))>#wrapper{color:var(--sinch-color-stormy-100);cursor:initial;pointer-events:none;--sinch-color-icon:var(--sinch-color-stormy-100)}::slotted(*){margin-left:-6px}</style><div id="wrapper"><slot name="icon"></slot><span id="content"></span></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-action-menu-option', (_$button = new WeakMap(), _$content = new WeakMap(), class ActionMenuOption extends NectaryElement {
+defineCustomElement('sinch-action-menu-option', (_$wrapper = new WeakMap(), _$content = new WeakMap(), _onMouseDown = new WeakMap(), class ActionMenuOption extends NectaryElement {
   constructor() {
     super();
 
-    _classPrivateFieldInitSpec(this, _$button, {
+    _classPrivateFieldInitSpec(this, _$wrapper, {
       writable: true,
       value: void 0
     });
@@ -25,16 +25,31 @@ defineCustomElement('sinch-action-menu-option', (_$button = new WeakMap(), _$con
       value: void 0
     });
 
+    _classPrivateFieldInitSpec(this, _onMouseDown, {
+      writable: true,
+      value: e => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.click();
+      }
+    });
+
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
 
-    _classPrivateFieldSet(this, _$button, shadowRoot.querySelector('#wrapper'));
+    _classPrivateFieldSet(this, _$wrapper, shadowRoot.querySelector('#wrapper'));
 
     _classPrivateFieldSet(this, _$content, shadowRoot.querySelector('#content'));
   }
 
   connectedCallback() {
     this.setAttribute('role', 'option');
+
+    _classPrivateFieldGet(this, _$wrapper).addEventListener('mousedown', _classPrivateFieldGet(this, _onMouseDown));
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$wrapper).removeEventListener('mousedown', _classPrivateFieldGet(this, _onMouseDown));
   }
 
   static get observedAttributes() {
@@ -55,7 +70,8 @@ defineCustomElement('sinch-action-menu-option', (_$button = new WeakMap(), _$con
 
       case 'disabled':
         {
-          _classPrivateFieldGet(this, _$button).disabled = isAttrTrue(newVal);
+          updateBooleanAttribute(this, 'disabled', isAttrTrue(newVal));
+          break;
         }
     }
   }
@@ -76,12 +92,4 @@ defineCustomElement('sinch-action-menu-option', (_$button = new WeakMap(), _$con
     return getBooleanAttribute(this, 'disabled');
   }
 
-  focus() {
-    _classPrivateFieldGet(this, _$button).focus();
-  }
-
-  blur() {
-    _classPrivateFieldGet(this, _$button).blur();
-  }
-
 }));

package/dialog/index.d.ts

@@ -1,5 +1,6 @@
 import '../icon-button';
 import '../icons/close';
+import '../stop-events';
 import type { TSinchDialogElement, TSinchDialogReact } from './types';
 declare global {
     namespace JSX {

package/dialog/index.js

@@ -14,8 +14,9 @@ function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(
 import dialogPolyfill from 'dialog-polyfill';
 import '../icon-button';
 import '../icons/close';
-import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute, getReactEventHandler, NectaryElement } from '../utils';
-const templateHTML = '<style>dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px;max-width:var(--sinch-dialog-max-width,512px);max-height:unset;border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;contain:content;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);border:none;box-shadow:var(--sinch-elevation-level-3)}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-items:flex-start;margin-bottom:16px}#caption{font:var(--sinch-font-title-m);color:var(--sinch-color-text-default);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}#content-wrapper{min-height:0;overflow:auto;max-height:var(--sinch-dialog-max-height,50vh)}#buttons{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:24px}sinch-icon-button{transform:translate(4px,-4px)}</style><dialog><div id="header"><span id="caption"></span><sinch-icon-button id="close" small tabindex="0"><sinch-icon-close slot="icon"></sinch-icon-close></sinch-icon-button></div><div id="content-wrapper"><slot name="content"></slot></div><div id="buttons"><slot name="buttons"></slot></div></dialog>';
+import '../stop-events';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute, getReactEventHandler, NectaryElement, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px;max-width:var(--sinch-dialog-max-width,512px);max-height:unset;border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;contain:content;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);border:none;box-shadow:var(--sinch-elevation-level-3)}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-items:flex-start;margin-bottom:16px}#caption{font:var(--sinch-font-title-m);color:var(--sinch-color-text-default);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}#content{min-height:0;overflow:auto;max-height:var(--sinch-dialog-max-height,50vh)}#buttons{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:24px}sinch-icon-button{transform:translate(4px,-4px)}</style><dialog><div id="header"><span id="caption"></span><sinch-icon-button id="close" small tabindex="0"><sinch-icon-close slot="icon"></sinch-icon-close></sinch-icon-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="buttons"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = new WeakMap(), _$caption = new WeakMap(), _isConnected = new WeakMap(), _prevOverflowValue = new WeakMap(), _onCancel = new WeakMap(), _onCloseClick = new WeakMap(), _onBackdropClick = new WeakMap(), _onCloseReactHandler = new WeakMap(), _dispatchCloseEvent = new WeakSet(), _setOpen = new WeakSet(), class extends NectaryElement {
@@ -62,9 +63,7 @@ defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = n
 
     _classPrivateFieldInitSpec(this, _onCloseClick, {
       writable: true,
-      value: e => {
-        e.stopPropagation();
-
+      value: () => {
         _classPrivateMethodGet(this, _dispatchCloseEvent, _dispatchCloseEvent2).call(this);
       }
     });
@@ -80,8 +79,6 @@ defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = n
         const isInside = e.x >= rect.x && e.x < rect.x + rect.width && e.y >= rect.y && e.y < rect.y + rect.height;
 
         if (!isInside) {
-          e.stopPropagation();
-
           _classPrivateMethodGet(this, _dispatchCloseEvent, _dispatchCloseEvent2).call(this);
         }
       }
@@ -106,8 +103,38 @@ defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = n
     dialogPolyfill.registerDialog(_classPrivateFieldGet(this, _$dialog));
   }
 
+  connectedCallback() {
+    this.setAttribute('role', 'dialog');
+
+    _classPrivateFieldGet(this, _$closeButton).addEventListener('click', _classPrivateFieldGet(this, _onCloseClick));
+
+    _classPrivateFieldGet(this, _$dialog).addEventListener('mousedown', _classPrivateFieldGet(this, _onBackdropClick));
+
+    _classPrivateFieldGet(this, _$dialog).addEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
+
+    this.addEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
+
+    _classPrivateFieldSet(this, _isConnected, true);
+
+    _classPrivateMethodGet(this, _setOpen, _setOpen2).call(this, getBooleanAttribute(this, 'open'));
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$closeButton).removeEventListener('click', _classPrivateFieldGet(this, _onCloseClick));
+
+    _classPrivateFieldGet(this, _$dialog).removeEventListener('mousedown', _classPrivateFieldGet(this, _onBackdropClick));
+
+    _classPrivateFieldGet(this, _$dialog).removeEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
+
+    this.removeEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
+
+    _classPrivateMethodGet(this, _setOpen, _setOpen2).call(this, false);
+
+    _classPrivateFieldSet(this, _isConnected, false);
+  }
+
   static get observedAttributes() {
-    return ['caption', 'open'];
+    return ['caption', 'open', 'close-aria-label'];
   }
 
   attributeChangedCallback(name, _, newVal) {
@@ -120,10 +147,17 @@ defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = n
 
       case 'open':
         {
-          if (_classPrivateFieldGet(this, _isConnected)) {
-            _classPrivateMethodGet(this, _setOpen, _setOpen2).call(this, isAttrTrue(newVal));
-          }
+          const shouldOpen = isAttrTrue(newVal);
+
+          _classPrivateMethodGet(this, _setOpen, _setOpen2).call(this, shouldOpen);
 
+          updateBooleanAttribute(this, 'open', shouldOpen);
+          break;
+        }
+
+      case 'close-aria-label':
+        {
+          updateAttribute(_classPrivateFieldGet(this, _$closeButton), 'aria-label', newVal);
           break;
         }
     }
@@ -137,36 +171,6 @@ defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = n
     return getAttribute(this, 'caption', '');
   }
 
-  connectedCallback() {
-    this.setAttribute('role', 'dialog');
-
-    _classPrivateFieldGet(this, _$closeButton).addEventListener('click', _classPrivateFieldGet(this, _onCloseClick));
-
-    this.addEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
-
-    _classPrivateFieldGet(this, _$dialog).addEventListener('mousedown', _classPrivateFieldGet(this, _onBackdropClick));
-
-    _classPrivateFieldGet(this, _$dialog).addEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
-
-    _classPrivateFieldSet(this, _isConnected, true);
-
-    if (getBooleanAttribute(this, 'open')) {
-      _classPrivateMethodGet(this, _setOpen, _setOpen2).call(this, true);
-    }
-  }
-
-  disconnectedCallback() {
-    _classPrivateFieldGet(this, _$closeButton).removeEventListener('click', _classPrivateFieldGet(this, _onCloseClick));
-
-    this.removeEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
-
-    _classPrivateFieldGet(this, _$dialog).removeEventListener('mousedown', _classPrivateFieldGet(this, _onBackdropClick));
-
-    _classPrivateFieldGet(this, _$dialog).removeEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
-
-    _classPrivateFieldSet(this, _isConnected, false);
-  }
-
   get dialogRect() {
     return getRect(_classPrivateFieldGet(this, _$dialog));
   }
@@ -183,14 +187,14 @@ function _dispatchCloseEvent2() {
   }));
 }
 
-function _setOpen2(isOpen) {
-  if (isOpen) {
-    if (!getBooleanAttribute(_classPrivateFieldGet(this, _$dialog), 'open')) {
-      _classPrivateFieldGet(this, _$dialog).showModal();
-
+function _setOpen2(shouldOpen) {
+  if (shouldOpen) {
+    if (_classPrivateFieldGet(this, _isConnected) && !getBooleanAttribute(_classPrivateFieldGet(this, _$dialog), 'open')) {
       _classPrivateFieldSet(this, _prevOverflowValue, document.body.style.overflow);
 
       document.body.style.overflow = 'hidden';
+
+      _classPrivateFieldGet(this, _$dialog).showModal();
     }
   } else {
     _classPrivateFieldGet(this, _$dialog).close?.();

package/dialog/types.d.ts

@@ -6,10 +6,12 @@ export declare type TSinchDialogElement = HTMLElement & {
     readonly closeButtonRect: TRect;
     addEventListener(type: 'close', listener: (e: CustomEvent<void>) => void): void;
     setAttribute(name: 'caption', value: string): void;
+    setAttribute(name: 'close-aria-label', value: string): void;
 };
 export declare type TSinchDialogReact = TSinchElementReact<TSinchDialogElement> & {
     open: boolean;
     caption: string;
     'aria-label': string;
+    'close-aria-label': string;
     onClose: (event: SyntheticEvent<TSinchDialogElement, CustomEvent<void>>) => void;
 };

package/dropdown/index.js

@@ -14,7 +14,7 @@ function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(
 import { orientationValues } from '../popover/utils';
 import '../popover';
 import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, getCsvSet, getFirstCsvValue, getIntegerAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateIntegerAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}sinch-popover{width:100%}</style><sinch-popover><slot name="target" slot="target"></slot><div id="listbox" slot="content"><slot name="option"></slot></div></sinch-popover>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{width:100%;--sinch-popover-shape-radius:var(--sinch-shape-radius-s)}#listbox{overflow-y:auto}</style><sinch-popover id="wrapper" modal><slot name="target" slot="target"></slot><div id="listbox" slot="content"><slot name="option"></slot></div></sinch-popover>';
 const ITEM_HEIGHT = 40;
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -81,9 +81,13 @@ defineCustomElement('sinch-dropdown', (_$optionSlot = new WeakMap(), _$listbox =
           case 'Space':
           case 'Enter':
             {
-              e.preventDefault();
+              const $option = _classPrivateMethodGet(this, _findSelectedOption, _findSelectedOption2).call(this, _classPrivateMethodGet(this, _getEnabledOptionElements, _getEnabledOptionElements2).call(this));
+
+              if ($option !== null) {
+                e.preventDefault();
 
-              _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, _classPrivateMethodGet(this, _findSelectedOption, _findSelectedOption2).call(this, _classPrivateMethodGet(this, _getEnabledOptionElements, _getEnabledOptionElements2).call(this)));
+                _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, $option);
+              }
 
               break;
             }
@@ -323,11 +327,13 @@ function _getPrevOption2() {
 }
 
 function _selectOption2($option) {
+  const hasMaxVisibleItems = this.hasAttribute('maxvisibleitems');
+
   for (const $op of _classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).call(this)) {
     const isSelected = $op === $option;
     updateBooleanAttribute($op, 'data-selected', isSelected);
 
-    if (isSelected && this.maxVisibleItems !== null) {
+    if (isSelected && hasMaxVisibleItems) {
       $op.scrollIntoView?.({
         block: 'nearest'
       });
@@ -389,13 +395,5 @@ function _dispatchChangeEvent2($opt) {
 function _onOpen2() {
   const $opt = _classPrivateMethodGet(this, _getOptionWithValue, _getOptionWithValue2).call(this, getFirstCsvValue(this.value));
 
-  if ($opt !== null) {
-    _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, $opt);
-
-    $opt.scrollIntoView?.({
-      block: 'nearest'
-    });
-  } else {
-    _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, _classPrivateMethodGet(this, _getFirstOption, _getFirstOption2).call(this));
-  }
+  _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, $opt ?? _classPrivateMethodGet(this, _getFirstOption, _getFirstOption2).call(this));
 }

package/horizontal-stepper/index.d.ts

@@ -0,0 +1,13 @@
+import '../icons/check';
+import '../icons/error-outline';
+import type { TSinchHorizontalStepperElement, TSinchHorizontalStepperReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-horizontal-stepper': TSinchHorizontalStepperReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-horizontal-stepper': TSinchHorizontalStepperElement;
+    }
+}

package/horizontal-stepper/index.js

@@ -0,0 +1,104 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$itemsSlot, _$progressBar, _updateItems;
+
+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 '../icons/check';
+import '../icons/error-outline';
+import { clampNumber, defineCustomElement, getAttribute, getIntegerAttribute, NectaryElement, updateAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;display:flex;flex-direction:row;gap:28px;width:fit-content}#progress{position:absolute;height:1px;background-color:var(--sinch-color-snow-700);left:72px;right:72px;top:16px;transform:translateY(-50%)}#bar{position:absolute;height:1px;background-color:var(--sinch-color-stormy-400);left:0;top:0}</style><div id="wrapper"><div id="progress"><div id="bar"></div></div><slot></slot></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-horizontal-stepper', (_$itemsSlot = new WeakMap(), _$progressBar = new WeakMap(), _updateItems = new WeakMap(), class extends NectaryElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$itemsSlot, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$progressBar, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _updateItems, {
+      writable: true,
+      value: () => {
+        const $items = _classPrivateFieldGet(this, _$itemsSlot).assignedElements();
+
+        const activeIndex = clampNumber(getIntegerAttribute(this, 'index', 0), 0, $items.length + 1);
+
+        for (let i = 0; i < $items.length; i++) {
+          const $el = $items[i];
+          const itemIndex = i + 1;
+          $el.setAttribute('data-index', String(itemIndex));
+
+          if (itemIndex === activeIndex) {
+            $el.setAttribute('data-progress', 'active');
+          } else if (itemIndex < activeIndex) {
+            $el.setAttribute('data-progress', 'done');
+          } else {
+            $el.removeAttribute('data-progress');
+          }
+        }
+
+        const valueIndex = clampNumber(activeIndex - 1, 0, $items.length - 1);
+        _classPrivateFieldGet(this, _$progressBar).style.width = `${Math.floor(valueIndex / Math.max(1, $items.length - 1) * 100)}%`;
+        this.setAttribute('aria-valuemax', String($items.length));
+        this.setAttribute('aria-valuenow', String(valueIndex + 1));
+      }
+    });
+
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$itemsSlot, shadowRoot.querySelector('slot'));
+
+    _classPrivateFieldSet(this, _$progressBar, shadowRoot.querySelector('#bar'));
+  }
+
+  connectedCallback() {
+    this.setAttribute('role', 'progressbar');
+    this.setAttribute('aria-valuemin', '0');
+
+    _classPrivateFieldGet(this, _$itemsSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _updateItems));
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$itemsSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _updateItems));
+  }
+
+  static get observedAttributes() {
+    return ['index'];
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+
+    switch (name) {
+      case 'index':
+        {
+          _classPrivateFieldGet(this, _updateItems).call(this);
+
+          break;
+        }
+    }
+  }
+
+  set index(value) {
+    updateAttribute(this, 'index', value);
+  }
+
+  get index() {
+    return getAttribute(this, 'index', '1');
+  }
+
+}));

package/horizontal-stepper/types.d.ts

@@ -0,0 +1,9 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchHorizontalStepperElement = HTMLElement & {
+    index: string;
+    setAttribute(name: 'index', value: string): void;
+};
+export declare type TSinchHorizontalStepperReact = TSinchElementReact<TSinchHorizontalStepperElement> & {
+    index: string;
+    'aria-label': string;
+};

package/horizontal-stepper/types.js

@@ -0,0 +1 @@
+export {};

package/horizontal-stepper-item/index.d.ts

@@ -0,0 +1,13 @@
+import '../icons/check';
+import '../icons/exclamation';
+import type { TSinchHorizontalStepperItemElement, TSinchHorizontalStepperItemReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-horizontal-stepper-item': TSinchHorizontalStepperItemReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-horizontal-stepper-item': TSinchHorizontalStepperItemElement;
+    }
+}