@nectary/components 0.31.0 → 0.33.0

package/accordion-item/types.d.ts

@@ -6,8 +6,6 @@ export declare type TSinchAccordionItemElement = HTMLElement & {
     optionalText: string | null;
     disabled: boolean;
     status: TSinchAccordionStatusType | null;
-    focus(): void;
-    blur(): void;
     setAttribute(name: 'value', value: string): void;
     setAttribute(name: 'label', value: string): void;
     setAttribute(name: 'optionaltext', value: string): void;

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/action-menu-option/types.d.ts

@@ -2,8 +2,6 @@ import type { TSinchElementReact } from '../types';
 export declare type TSinchActionMenuOptionElement = HTMLElement & {
     text: string;
     disabled: boolean;
-    focus(): void;
-    blur(): void;
     setAttribute(name: 'text', value: string): void;
     setAttribute(name: 'disabled', value: ''): void;
 };

package/alert-button/types.d.ts

@@ -1,8 +1,6 @@
 import type { TSinchElementReact } from '../types';
 export declare type TSinchAlertButtonElement = HTMLElement & {
     text: string;
-    focus(): void;
-    blur(): void;
     setAttribute(name: 'text', value: string): void;
 };
 export declare type TSinchAlertButtonReact = TSinchElementReact<TSinchAlertButtonElement> & {

package/alert-close/types.d.ts

@@ -1,6 +1,3 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchAlertCloseElement = HTMLElement & {
-    focus(): void;
-    blur(): void;
-};
+export declare type TSinchAlertCloseElement = HTMLElement;
 export declare type TSinchAlertCloseReact = TSinchElementReact<TSinchAlertCloseElement>;

package/button/types.d.ts

@@ -9,8 +9,6 @@ export declare type TSinchButtonElement = HTMLElement & {
     disabled: boolean;
     /** Small */
     small: boolean;
-    focus(): void;
-    blur(): void;
     /** Type */
     setAttribute(attr: 'type', value: TSinchButtonType): void;
     /** Text content */

package/card-button/types.d.ts

@@ -2,8 +2,6 @@ import type { TSinchElementReact } from '../types';
 export declare type TSinchCardButtonElement = HTMLElement & {
     text: string;
     disabled: boolean;
-    focus(): void;
-    blur(): void;
     setAttribute(name: 'text', value: string): void;
     setAttribute(name: 'disabled', value: ''): void;
 };

package/card-link/types.d.ts

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

package/checkbox/types.d.ts

@@ -6,8 +6,6 @@ export declare type TSinchCheckboxElement = HTMLElement & {
     disabled: boolean;
     invalid: boolean;
     text: string | null;
-    focus(): void;
-    blur(): void;
     addEventListener(type: 'change', listener: (e: CustomEvent<boolean>) => void): void;
     setAttribute(name: 'checked', value: ''): void;
     setAttribute(name: 'indeterminate', value: ''): void;

package/date-picker/index.js

@@ -20,7 +20,7 @@ import '../icons/delete-outline';
 import '../icons/today';
 import '../text';
 import { defineCustomElement, getAttribute, getRect, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#content{width:fit-content;box-sizing:border-box;padding:16px;display:flex;flex-direction:column;gap:8px}#month{display:flex;flex-direction:column;row-gap:8px}.week{display:flex;flex-direction:row;column-gap:8px}.week.empty{display:none}.day{all:initial;font:var(--sinch-font-text-xs);color:var(--sinch-color-text-default);text-align:center;border-radius:var(--sinch-shape-radius-m);width:24px;height:24px;line-height:22px;cursor:pointer;border:1px solid transparent;background-color:transparent;box-sizing:border-box;user-select:none}.day.today{border:1px solid var(--sinch-color-stormy-500)}.day:disabled{cursor:initial;color:var(--sinch-color-snow-700)}.day:focus-visible{outline:1px solid var(--sinch-color-aqua-400);outline-offset:1px}@supports not selector(:focus-visible){.day:focus{outline:1px solid var(--sinch-color-aqua-400);outline-offset:1px}}.day.selected{background-color:var(--sinch-color-stormy-500);color:var(--sinch-color-snow-100)}.day:hover:not(:disabled):not(.selected){background-color:var(--sinch-color-snow-600)}#week-day-names{display:flex;flex-direction:row;gap:8px;height:24px}.week-day-name{font:var(--sinch-font-text-xs);font-weight:var(--sinch-font-weight-emphasized);color:var(--sinch-color-text-default);text-align:center;width:24px;height:24px;line-height:24px;user-select:none;text-transform:uppercase}#content-header{display:flex;flex-direction:row;height:32px;align-items:center}#date{flex:1;text-align:center;text-transform:capitalize}#prev-year{margin-left:-4px}#next-year{margin-right:-4px}</style><div id="content" slot="content"><div id="content-header"><sinch-icon-button small id="prev-year"><sinch-icon-keyboard-double-arrow-left slot="icon"></sinch-icon-keyboard-double-arrow-left></sinch-icon-button><sinch-icon-button small id="prev-month"><sinch-icon-keyboard-arrow-left slot="icon"></sinch-icon-keyboard-arrow-left></sinch-icon-button><sinch-text type="m" emphasized id="date"></sinch-text><sinch-icon-button small id="next-month"><sinch-icon-keyboard-arrow-right slot="icon"></sinch-icon-keyboard-arrow-right></sinch-icon-button><sinch-icon-button small id="next-year"><sinch-icon-keyboard-double-arrow-right slot="icon"></sinch-icon-keyboard-double-arrow-right></sinch-icon-button></div><div id="week-day-names"><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div></div><div id="month"><div class="week"><button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button></div><div class="week"><button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button></div><div class="week"><button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button></div><div class="week"><button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button></div><div class="week"><button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button></div><div class="week"><button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button></div></div></div>';
+const templateHTML = '<style>:host{display:block;outline:0}#content{width:fit-content;box-sizing:border-box;padding:16px;display:flex;flex-direction:column;gap:8px}#month{display:flex;flex-direction:column;row-gap:8px}.week{display:flex;flex-direction:row;column-gap:8px}.week.empty{display:none}.day{all:initial;font:var(--sinch-font-text-xs);color:var(--sinch-color-text-default);text-align:center;border-radius:var(--sinch-shape-radius-m);width:24px;height:24px;line-height:22px;cursor:pointer;border:1px solid transparent;background-color:transparent;box-sizing:border-box;user-select:none}.day.today{border:1px solid var(--sinch-color-stormy-500)}.day:disabled{cursor:initial;color:var(--sinch-color-snow-700)}.day:focus-visible{outline:1px solid var(--sinch-color-aqua-400);outline-offset:1px}@supports not selector(:focus-visible){.day:focus{outline:1px solid var(--sinch-color-aqua-400);outline-offset:1px}}.day.selected{background-color:var(--sinch-color-stormy-500);color:var(--sinch-color-snow-100)}.day:hover:not(:disabled):not(.selected){background-color:var(--sinch-color-snow-600)}#week-day-names{display:flex;flex-direction:row;gap:8px;height:24px}.week-day-name{font:var(--sinch-font-text-xs);font-weight:var(--sinch-font-weight-emphasized);color:var(--sinch-color-text-default);text-align:center;width:24px;height:24px;line-height:24px;user-select:none;text-transform:uppercase}#content-header{display:flex;flex-direction:row;height:32px;align-items:center}#date{flex:1;text-align:center;text-transform:capitalize}#prev-year{margin-left:-4px}#next-year{margin-right:-4px}</style><div id="content"><div id="content-header"><sinch-icon-button small id="prev-year"><sinch-icon-keyboard-double-arrow-left slot="icon"></sinch-icon-keyboard-double-arrow-left></sinch-icon-button><sinch-icon-button small id="prev-month"><sinch-icon-keyboard-arrow-left slot="icon"></sinch-icon-keyboard-arrow-left></sinch-icon-button><sinch-text type="m" emphasized id="date"></sinch-text><sinch-icon-button small id="next-month"><sinch-icon-keyboard-arrow-right slot="icon"></sinch-icon-keyboard-arrow-right></sinch-icon-button><sinch-icon-button small id="next-year"><sinch-icon-keyboard-double-arrow-right slot="icon"></sinch-icon-keyboard-double-arrow-right></sinch-icon-button></div><div id="week-day-names"><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div></div><div id="month"><div class="week"><button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button></div><div class="week"><button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button></div><div class="week"><button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button></div><div class="week"><button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button></div><div class="week"><button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button></div><div class="week"><button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button></div></div></div>';
 import { areDatesEqual, assertDate, assertLocale, assertMinMax, assertValue, canGoNextMonth, canGoNextYear, canGoPrevMonth, canGoPrevYear, clampMaxDate, clampMinDate, dateToIso, decMonth, decYear, getCalendarMonth, getDayNames, getMonthNames, incMonth, incYear, isDateBetween, isoToDate, isValidDate, today } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/date-picker/types.d.ts

@@ -1,26 +1,41 @@
 import type { TRect, TSinchElementReact } from '../types';
 import type { SyntheticEvent } from 'react';
 export declare type TSinchDatePickerElement = HTMLElement & {
+    /** Date value in ISO 8601 format */
     value: string;
+    /** Date min limit in ISO 8601 format */
     min: string;
+    /** Date max limit in ISO 8601 format */
     max: string;
+    /** BCP 47 language tag (e.g. en-US), which changes day and month display names in the calendar */
     locale: string;
     readonly prevYearButtonRect: TRect;
     readonly nextYearButtonRect: TRect;
     readonly prevMonthButtonRect: TRect;
     readonly nextMonthButtonRect: TRect;
     nthButtonRect(index: number): TRect | null;
+    /** Change value handler, return date in ISO 8601 format */
     addEventListener(type: 'change', listener: (e: CustomEvent<string>) => void): void;
+    /** Date value in ISO 8601 format */
     setAttribute(name: 'value', value: string): void;
+    /** Date min limit in ISO 8601 format */
     setAttribute(name: 'min', value: string): void;
+    /** Date max limit in ISO 8601 format */
     setAttribute(name: 'max', value: string): void;
+    /** BCP 47 language tag (e.g. en-US), which changes day and month display names in the calendar */
     setAttribute(name: 'locale', value: string): void;
 };
 export declare type TSinchDatePickerReact = TSinchElementReact<TSinchDatePickerElement> & {
-    locale: string;
+    /** Date value in ISO 8601 format */
     value: string;
+    /** Date min limit in ISO 8601 format */
     min: string;
+    /** Date max limit in ISO 8601 format */
     max: string;
+    /** BCP 47 language tag (e.g. en-US), which changes day and month display names in the calendar */
+    locale: string;
+    /** Label that is used for a11y */
     'aria-label': string;
+    /** Change value handler, return date in ISO 8601 format */
     onChange: (e: SyntheticEvent<TSinchDatePickerElement, CustomEvent<string>>) => void;
 };

package/dialog/index.js

@@ -14,7 +14,7 @@ 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';
+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-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>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -106,8 +106,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 +150,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 +174,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('click', _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('click', _classPrivateFieldGet(this, _onBackdropClick));
-
-    _classPrivateFieldGet(this, _$dialog).removeEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
-
-    _classPrivateFieldSet(this, _isConnected, false);
-  }
-
   get dialogRect() {
     return getRect(_classPrivateFieldGet(this, _$dialog));
   }
@@ -183,14 +190,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/dropdown/types.d.ts

@@ -8,8 +8,6 @@ export declare type TSinchDropdownElement = HTMLElement & {
     value: string;
     maxVisibleItems: number | null;
     readonly dropdownRect: TRect;
-    focus(): void;
-    blur(): void;
     addEventListener(type: 'change', listener: (e: CustomEvent<string>) => void): void;
     addEventListener(type: 'close', listener: (e: CustomEvent<void>) => void): void;
     setAttribute(name: 'open', value: ''): void;

package/icon-button/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, getBooleanAttribute, isAttrTrue, NectaryElement, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}button{all:initial;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:48px;height:48px;border-radius:var(--sinch-shape-radius-s);border:1px solid transparent;background-color:transparent;cursor:pointer;--sinch-size-icon:24px;--sinch-color-icon:var(--sinch-icon-button-color, var(--sinch-color-stormy-500))}button:focus{border-color:var(--sinch-color-stormy-500)}button:hover{background-color:var(--sinch-color-snow-500)}button:active{background-color:var(--sinch-color-snow-600)}button:disabled{background-color:transparent;cursor:initial;--sinch-color-spinner-bg:var(--sinch-color-snow-200);--sinch-color-spinner-fg:var(--sinch-color-stormy-200);--sinch-color-icon:var(--sinch-color-stormy-100)}:host([small]:not([small=false]))>button{width:32px;height:32px}button>*{pointer-events:none}</style><button><slot name="icon"></slot></button>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}button{all:initial;position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:48px;height:48px;border-radius:var(--sinch-shape-radius-s);border:1px solid transparent;background-color:transparent;cursor:pointer;--sinch-size-icon:24px;--sinch-color-icon:var(--sinch-icon-button-color, var(--sinch-color-stormy-500))}button:focus-visible::before{position:absolute;content:"";left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;padding:2px;border:1px solid var(--sinch-color-aqua-400);border-radius:calc(var(--sinch-shape-radius-s) + 2px)}@supports not selector(:focus-visible){button:focus::before{position:absolute;content:"";left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;padding:2px;border:1px solid var(--sinch-color-aqua-400);border-radius:calc(var(--sinch-shape-radius-s) + 2px)}}button:hover{background-color:var(--sinch-color-snow-500)}button:active{background-color:var(--sinch-color-snow-600)}button:disabled{background-color:transparent;cursor:initial;--sinch-color-spinner-bg:var(--sinch-color-snow-200);--sinch-color-spinner-fg:var(--sinch-color-stormy-200);--sinch-color-icon:var(--sinch-color-stormy-100)}:host([small]:not([small=false]))>button{width:32px;height:32px}button>*{pointer-events:none}</style><button><slot name="icon"></slot></button>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-icon-button', (_$button = new WeakMap(), class extends NectaryElement {

package/icon-button/types.d.ts

@@ -2,8 +2,6 @@ import type { TSinchElementReact } from '../types';
 export declare type TSinchIconButtonElement = HTMLElement & {
     disabled: boolean;
     small: boolean;
-    focus(): void;
-    blur(): void;
     setAttribute(name: 'disabled', value: ''): void;
     setAttribute(name: 'small', value: ''): void;
 };