@nectary/components 0.33.0 → 0.35.0

package/checkbox/index.js

@@ -1,17 +1,17 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$input, _$label, _onCheckboxInput;
+var _$input, _$label, _onCheckboxInput, _onCheckboxFocus, _onCheckboxBlur, _onChangeReactHandler, _onFocusReactHandler, _onBlurReactHandler;
 
 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, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{--sinch-color-checkbox-circle:var(--sinch-color-transparent);--sinch-color-checkbox-background:var(--sinch-color-snow-100);--sinch-color-checkbox-border:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-checked:var(--sinch-color-transparent);--sinch-color-checkbox-background-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-hover:var(--sinch-color-snow-500);--sinch-color-checkbox-background-hover:var(--sinch-color-snow-100);--sinch-color-checkbox-border-hover:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-hover-checked:var(--sinch-color-tropical-100);--sinch-color-checkbox-background-hover-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-hover-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-focus:var(--sinch-color-snow-800);--sinch-color-checkbox-background-focus:var(--sinch-color-snow-100);--sinch-color-checkbox-border-focus:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-focus-checked:var(--sinch-color-tropical-200);--sinch-color-checkbox-background-focus-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-focus-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-active:var(--sinch-color-stormy-100);--sinch-color-checkbox-background-active:var(--sinch-color-snow-100);--sinch-color-checkbox-border-active:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-active-checked:var(--sinch-color-tropical-300);--sinch-color-checkbox-background-active-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-active-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-disabled:var(--sinch-color-transparent);--sinch-color-checkbox-background-disabled:var(--sinch-color-snow-100);--sinch-color-checkbox-border-disabled:var(--sinch-color-stormy-100);--sinch-color-checkbox-circle-disabled-checked:var(--sinch-color-transparent);--sinch-color-checkbox-background-disabled-checked:var(--sinch-color-stormy-100);--sinch-color-checkbox-border-disabled-checked:var(--sinch-color-stormy-100);--sinch-color-checkbox-text:var(--sinch-color-text-default);--sinch-color-checkbox-text-disabled:var(--sinch-color-stormy-200);display:inline-block;vertical-align:middle;outline:0}:host([invalid]:not([invalid=false])){--sinch-color-checkbox-border:var(--sinch-color-raspberry-500);--sinch-color-checkbox-background-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-hover:var(--sinch-color-raspberry-500);--sinch-color-checkbox-circle-hover-checked:var(--sinch-color-raspberry-100);--sinch-color-checkbox-background-hover-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-hover-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-focus:var(--sinch-color-raspberry-500);--sinch-color-checkbox-circle-focus-checked:var(--sinch-color-raspberry-200);--sinch-color-checkbox-background-focus-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-focus-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-active:var(--sinch-color-raspberry-500);--sinch-color-checkbox-circle-active-checked:var(--sinch-color-raspberry-300);--sinch-color-checkbox-background-active-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-active-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-disabled:var(--sinch-color-raspberry-200);--sinch-color-checkbox-background-disabled-checked:var(--sinch-color-raspberry-200);--sinch-color-checkbox-border-disabled-checked:var(--sinch-color-raspberry-200);--sinch-color-checkbox-text:var(--sinch-color-text-invalid);--sinch-color-checkbox-text-disabled:var(--sinch-color-raspberry-200)}#wrapper{display:flex;flex-direction:row;box-sizing:border-box;width:100%;height:32px}#checkbox{all:initial;display:block;width:32px;height:32px;cursor:pointer}#checkbox:disabled{cursor:initial}#icon-container{position:relative;width:32px;height:32px}#checkbox::before{content:"";position:absolute;top:0;left:0;width:32px;height:32px;border-radius:16px;pointer-events:none;background-color:var(--sinch-color-checkbox-circle);transition:background-color .1s linear}#checkbox::after{content:"";position:absolute;top:7px;left:7px;width:18px;height:18px;border-radius:var(--sinch-shape-radius-xs);pointer-events:none;background-color:var(--sinch-color-checkbox-background);border:2px solid var(--sinch-color-checkbox-border);transition:background-color .1s linear;box-sizing:border-box}#icon-checkmark{position:absolute;left:9px;top:10px;transition:opacity .1s linear;opacity:0;pointer-events:none}#icon-indeterminate{position:absolute;left:10px;top:15px;transition:opacity .1s linear;opacity:0;pointer-events:none}@media (prefers-reduced-motion){#checkbox::after,#checkbox::before,#icon-checkmark,#icon-indeterminate{transition:none}}#label{display:none;flex:1;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:6px;font:var(--sinch-font-body);color:var(--sinch-color-checkbox-text)}:host([text]:not([text=""])) #label{display:block}:host([disabled]:not([disabled=false])) #label{color:var(--sinch-color-checkbox-text-disabled)}:host(:is(:not([indeterminate]),[indeterminate=false])) #checkbox:checked~#icon-checkmark{opacity:1}:host([indeterminate]:not([indeterminate=false])) #checkbox:checked~#icon-indeterminate{opacity:1}#checkbox:checked::before{background-color:var(--sinch-color-checkbox-circle-checked)}#checkbox:checked::after{background-color:var(--sinch-color-checkbox-background-checked);border-color:var(--sinch-color-checkbox-border-checked)}#checkbox:focus::before{background-color:var(--sinch-color-checkbox-circle-focus)}#checkbox:focus::after{background-color:var(--sinch-color-checkbox-background-focus);border-color:var(--sinch-color-checkbox-border-focus)}#checkbox:hover::before{background-color:var(--sinch-color-checkbox-circle-hover)}#checkbox:hover::after{background-color:var(--sinch-color-checkbox-background-hover);border-color:var(--sinch-color-checkbox-border-hover)}#checkbox:active::before{background-color:var(--sinch-color-checkbox-circle-active)}#checkbox:active::after{background-color:var(--sinch-color-checkbox-background-active);border-color:var(--sinch-color-checkbox-border-active)}#checkbox:disabled::before{background-color:var(--sinch-color-checkbox-circle-disabled)}#checkbox:disabled::after{background-color:var(--sinch-color-checkbox-background-disabled);border-color:var(--sinch-color-checkbox-border-disabled)}#checkbox:focus:checked::before{background-color:var(--sinch-color-checkbox-circle-focus-checked)}#checkbox:focus:checked::after{background-color:var(--sinch-color-checkbox-background-focus-checked);border-color:var(--sinch-color-checkbox-border-focus-checked)}#checkbox:hover:checked::before{background-color:var(--sinch-color-checkbox-circle-hover-checked)}#checkbox:hover:checked::after{background-color:var(--sinch-color-checkbox-background-hover-checked);border-color:var(--sinch-color-checkbox-border-hover-checked)}#checkbox:active:checked::before{background-color:var(--sinch-color-checkbox-circle-active-checked)}#checkbox:active:checked::after{background-color:var(--sinch-color-checkbox-background-active-checked);border-color:var(--sinch-color-checkbox-border-active-checked)}#checkbox:disabled:checked::before{background-color:var(--sinch-color-checkbox-circle-disabled-checked)}#checkbox:disabled:checked::after{background-color:var(--sinch-color-checkbox-background-disabled-checked);border-color:var(--sinch-color-checkbox-border-disabled-checked)}</style><div id="wrapper"><div id="icon-container"><input id="checkbox" type="checkbox"/> <svg id="icon-checkmark" width="14" height="11" aria-hidden="true"><path d="M14 1.99999L12.59 0.579987L4.98995 8.17L1.49997 4.5L0.0799694 5.91L4.98995 11L14 1.99999Z" fill="white"/></svg> <svg id="icon-indeterminate" width="12" height="2" aria-hidden="true"><line y1="1" x2="12" y2="1" stroke="white" stroke-width="2"/></svg></div><label for="checkbox" id="label"></label></div>';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{--sinch-color-checkbox-circle:var(--sinch-color-transparent);--sinch-color-checkbox-background:var(--sinch-color-snow-100);--sinch-color-checkbox-border:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-checked:var(--sinch-color-transparent);--sinch-color-checkbox-background-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-hover:var(--sinch-color-snow-500);--sinch-color-checkbox-background-hover:var(--sinch-color-snow-100);--sinch-color-checkbox-border-hover:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-hover-checked:var(--sinch-color-tropical-100);--sinch-color-checkbox-background-hover-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-hover-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-focus:var(--sinch-color-snow-800);--sinch-color-checkbox-background-focus:var(--sinch-color-snow-100);--sinch-color-checkbox-border-focus:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-focus-checked:var(--sinch-color-tropical-200);--sinch-color-checkbox-background-focus-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-focus-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-active:var(--sinch-color-stormy-100);--sinch-color-checkbox-background-active:var(--sinch-color-snow-100);--sinch-color-checkbox-border-active:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-active-checked:var(--sinch-color-tropical-300);--sinch-color-checkbox-background-active-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-active-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-disabled:var(--sinch-color-transparent);--sinch-color-checkbox-background-disabled:var(--sinch-color-snow-100);--sinch-color-checkbox-border-disabled:var(--sinch-color-stormy-100);--sinch-color-checkbox-circle-disabled-checked:var(--sinch-color-transparent);--sinch-color-checkbox-background-disabled-checked:var(--sinch-color-stormy-100);--sinch-color-checkbox-border-disabled-checked:var(--sinch-color-stormy-100);--sinch-color-checkbox-text:var(--sinch-color-text-default);--sinch-color-checkbox-text-disabled:var(--sinch-color-stormy-200);display:inline-block;vertical-align:middle;outline:0}:host([invalid]:not([invalid=false])){--sinch-color-checkbox-border:var(--sinch-color-raspberry-500);--sinch-color-checkbox-background-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-hover:var(--sinch-color-raspberry-500);--sinch-color-checkbox-circle-hover-checked:var(--sinch-color-raspberry-100);--sinch-color-checkbox-background-hover-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-hover-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-focus:var(--sinch-color-raspberry-500);--sinch-color-checkbox-circle-focus-checked:var(--sinch-color-raspberry-200);--sinch-color-checkbox-background-focus-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-focus-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-active:var(--sinch-color-raspberry-500);--sinch-color-checkbox-circle-active-checked:var(--sinch-color-raspberry-300);--sinch-color-checkbox-background-active-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-active-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-disabled:var(--sinch-color-raspberry-200);--sinch-color-checkbox-background-disabled-checked:var(--sinch-color-raspberry-200);--sinch-color-checkbox-border-disabled-checked:var(--sinch-color-raspberry-200);--sinch-color-checkbox-text:var(--sinch-color-text-invalid);--sinch-color-checkbox-text-disabled:var(--sinch-color-raspberry-200)}#wrapper{display:flex;flex-direction:row;box-sizing:border-box;width:100%;height:32px}#checkbox{all:initial;display:block;width:32px;height:32px;cursor:pointer}#checkbox:disabled{cursor:initial}#icon-container{position:relative;width:32px;height:32px}#checkbox::before{content:"";position:absolute;top:0;left:0;width:32px;height:32px;border-radius:16px;pointer-events:none;background-color:var(--sinch-color-checkbox-circle);transition:background-color .1s linear}#checkbox::after{content:"";position:absolute;top:7px;left:7px;width:18px;height:18px;border-radius:var(--sinch-shape-radius-xs);pointer-events:none;background-color:var(--sinch-color-checkbox-background);border:2px solid var(--sinch-color-checkbox-border);transition:background-color .1s linear;box-sizing:border-box}#icon-checkmark{position:absolute;left:9px;top:10px;transition:opacity .1s linear;opacity:0;pointer-events:none}#icon-indeterminate{position:absolute;left:10px;top:15px;transition:opacity .1s linear;opacity:0;pointer-events:none}@media (prefers-reduced-motion){#checkbox::after,#checkbox::before,#icon-checkmark,#icon-indeterminate{transition:none}}#label{display:none;flex:1;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:6px;font:var(--sinch-font-body);color:var(--sinch-color-checkbox-text)}:host([text]:not([text=""])) #label{display:block}:host([disabled]:not([disabled=false])) #label{color:var(--sinch-color-checkbox-text-disabled)}:host(:is(:not([indeterminate]),[indeterminate=false])) #checkbox:checked~#icon-checkmark{opacity:1}:host([indeterminate]:not([indeterminate=false])) #checkbox:checked~#icon-indeterminate{opacity:1}#checkbox:checked::before{background-color:var(--sinch-color-checkbox-circle-checked)}#checkbox:checked::after{background-color:var(--sinch-color-checkbox-background-checked);border-color:var(--sinch-color-checkbox-border-checked)}#checkbox:focus::before{background-color:var(--sinch-color-checkbox-circle-focus)}#checkbox:focus::after{background-color:var(--sinch-color-checkbox-background-focus);border-color:var(--sinch-color-checkbox-border-focus)}#checkbox:hover::before{background-color:var(--sinch-color-checkbox-circle-hover)}#checkbox:hover::after{background-color:var(--sinch-color-checkbox-background-hover);border-color:var(--sinch-color-checkbox-border-hover)}#checkbox:active::before{background-color:var(--sinch-color-checkbox-circle-active)}#checkbox:active::after{background-color:var(--sinch-color-checkbox-background-active);border-color:var(--sinch-color-checkbox-border-active)}#checkbox:disabled::before{background-color:var(--sinch-color-checkbox-circle-disabled)}#checkbox:disabled::after{background-color:var(--sinch-color-checkbox-background-disabled);border-color:var(--sinch-color-checkbox-border-disabled)}#checkbox:focus:checked::before{background-color:var(--sinch-color-checkbox-circle-focus-checked)}#checkbox:focus:checked::after{background-color:var(--sinch-color-checkbox-background-focus-checked);border-color:var(--sinch-color-checkbox-border-focus-checked)}#checkbox:hover:checked::before{background-color:var(--sinch-color-checkbox-circle-hover-checked)}#checkbox:hover:checked::after{background-color:var(--sinch-color-checkbox-background-hover-checked);border-color:var(--sinch-color-checkbox-border-hover-checked)}#checkbox:active:checked::before{background-color:var(--sinch-color-checkbox-circle-active-checked)}#checkbox:active:checked::after{background-color:var(--sinch-color-checkbox-background-active-checked);border-color:var(--sinch-color-checkbox-border-active-checked)}#checkbox:disabled:checked::before{background-color:var(--sinch-color-checkbox-circle-disabled-checked)}#checkbox:disabled:checked::after{background-color:var(--sinch-color-checkbox-background-disabled-checked);border-color:var(--sinch-color-checkbox-border-disabled-checked)}</style><div id="wrapper"><div id="icon-container"><input id="checkbox" type="checkbox"/><svg id="icon-checkmark" width="14" height="11" aria-hidden="true"><path d="M14 1.99999L12.59 0.579987L4.98995 8.17L1.49997 4.5L0.0799694 5.91L4.98995 11L14 1.99999Z" fill="white"/></svg><svg id="icon-indeterminate" width="12" height="2" aria-hidden="true"><line y1="1" x2="12" y2="1" stroke="white" stroke-width="2"/></svg></div><label for="checkbox" id="label"></label></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-checkbox', (_$input = new WeakMap(), _$label = new WeakMap(), _onCheckboxInput = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-checkbox', (_$input = new WeakMap(), _$label = new WeakMap(), _onCheckboxInput = new WeakMap(), _onCheckboxFocus = new WeakMap(), _onCheckboxBlur = new WeakMap(), _onChangeReactHandler = new WeakMap(), _onFocusReactHandler = new WeakMap(), _onBlurReactHandler = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -37,6 +37,44 @@ defineCustomElement('sinch-checkbox', (_$input = new WeakMap(), _$label = new We
           detail: isChecked,
           bubbles: true
         }));
+        this.dispatchEvent(new CustomEvent('-change', {
+          detail: isChecked
+        }));
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onCheckboxFocus, {
+      writable: true,
+      value: () => {
+        this.dispatchEvent(new CustomEvent('-focus'));
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onCheckboxBlur, {
+      writable: true,
+      value: () => {
+        this.dispatchEvent(new CustomEvent('-blur'));
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onChangeReactHandler, {
+      writable: true,
+      value: e => {
+        getReactEventHandler(this, 'on-change')?.(e);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onFocusReactHandler, {
+      writable: true,
+      value: e => {
+        getReactEventHandler(this, 'on-focus')?.(e);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onBlurReactHandler, {
+      writable: true,
+      value: e => {
+        getReactEventHandler(this, 'on-blur')?.(e);
       }
     });
 
@@ -46,12 +84,32 @@ defineCustomElement('sinch-checkbox', (_$input = new WeakMap(), _$label = new We
     _classPrivateFieldSet(this, _$input, shadowRoot.querySelector('input'));
 
     _classPrivateFieldSet(this, _$label, shadowRoot.querySelector('label'));
-
-    _classPrivateFieldGet(this, _$input).addEventListener('input', _classPrivateFieldGet(this, _onCheckboxInput));
   }
 
   connectedCallback() {
     this.setAttribute('role', 'checkbox');
+
+    _classPrivateFieldGet(this, _$input).addEventListener('input', _classPrivateFieldGet(this, _onCheckboxInput));
+
+    _classPrivateFieldGet(this, _$input).addEventListener('focus', _classPrivateFieldGet(this, _onCheckboxFocus));
+
+    _classPrivateFieldGet(this, _$input).addEventListener('blur', _classPrivateFieldGet(this, _onCheckboxBlur));
+
+    this.addEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+    this.addEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
+    this.addEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$input).removeEventListener('input', _classPrivateFieldGet(this, _onCheckboxInput));
+
+    _classPrivateFieldGet(this, _$input).removeEventListener('focus', _classPrivateFieldGet(this, _onCheckboxFocus));
+
+    _classPrivateFieldGet(this, _$input).removeEventListener('blur', _classPrivateFieldGet(this, _onCheckboxBlur));
+
+    this.removeEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+    this.removeEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
+    this.removeEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
   }
 
   static get observedAttributes() {

package/checkbox/types.d.ts

@@ -6,7 +6,9 @@ export declare type TSinchCheckboxElement = HTMLElement & {
     disabled: boolean;
     invalid: boolean;
     text: string | null;
-    addEventListener(type: 'change', listener: (e: CustomEvent<boolean>) => void): void;
+    addEventListener(type: '-change', listener: (e: CustomEvent<boolean>) => void): void;
+    addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
+    addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
     setAttribute(name: 'checked', value: ''): void;
     setAttribute(name: 'indeterminate', value: ''): void;
     setAttribute(name: 'disabled', value: ''): void;
@@ -20,5 +22,9 @@ export declare type TSinchCheckboxReact = TSinchElementReact<TSinchCheckboxEleme
     invalid?: boolean;
     text?: string;
     'aria-label': string;
-    onChange: (event: SyntheticEvent<TSinchCheckboxElement, CustomEvent<boolean>>) => void;
+    /** @deprecated */
+    onChange?: (event: SyntheticEvent<TSinchCheckboxElement, CustomEvent<boolean>>) => void;
+    'on-change'?: (e: CustomEvent<boolean>) => void;
+    'on-focus'?: (e: CustomEvent<void>) => void;
+    'on-blur'?: (e: CustomEvent<void>) => void;
 };

package/date-picker/index.js

@@ -1,7 +1,7 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$month, _$weeks, _$days, _$weekDayNames, _date, _minDate, _maxDate, _$prevMonth, _$nextMonth, _$prevYear, _$nextYear, _$date, _monthNames, _onPrevMonthClick, _onNextMonthClick, _onPrevYearClick, _onNextYearClick, _onDateClick, _render;
+var _$month, _$weeks, _$days, _$weekDayNames, _date, _minDate, _maxDate, _$prevMonth, _$nextMonth, _$prevYear, _$nextYear, _$date, _monthNames, _onPrevMonthClick, _onNextMonthClick, _onPrevYearClick, _onNextYearClick, _onDateClick, _render, _dispatchChangeEvent, _onChangeReactHandler;
 
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 
@@ -19,15 +19,17 @@ import '../icons/keyboard-double-arrow-left';
 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"><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 { defineCustomElement, getAttribute, getReactEventHandler, 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"><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;
-defineCustomElement('sinch-date-picker', (_$month = new WeakMap(), _$weeks = new WeakMap(), _$days = new WeakMap(), _$weekDayNames = new WeakMap(), _date = new WeakMap(), _minDate = new WeakMap(), _maxDate = new WeakMap(), _$prevMonth = new WeakMap(), _$nextMonth = new WeakMap(), _$prevYear = new WeakMap(), _$nextYear = new WeakMap(), _$date = new WeakMap(), _monthNames = new WeakMap(), _onPrevMonthClick = new WeakMap(), _onNextMonthClick = new WeakMap(), _onPrevYearClick = new WeakMap(), _onNextYearClick = new WeakMap(), _onDateClick = new WeakMap(), _render = new WeakSet(), class extends NectaryElement {
+defineCustomElement('sinch-date-picker', (_$month = new WeakMap(), _$weeks = new WeakMap(), _$days = new WeakMap(), _$weekDayNames = new WeakMap(), _date = new WeakMap(), _minDate = new WeakMap(), _maxDate = new WeakMap(), _$prevMonth = new WeakMap(), _$nextMonth = new WeakMap(), _$prevYear = new WeakMap(), _$nextYear = new WeakMap(), _$date = new WeakMap(), _monthNames = new WeakMap(), _onPrevMonthClick = new WeakMap(), _onNextMonthClick = new WeakMap(), _onPrevYearClick = new WeakMap(), _onNextYearClick = new WeakMap(), _onDateClick = new WeakMap(), _render = new WeakSet(), _dispatchChangeEvent = new WeakSet(), _onChangeReactHandler = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
+    _classPrivateMethodInitSpec(this, _dispatchChangeEvent);
+
     _classPrivateMethodInitSpec(this, _render);
 
     _classPrivateFieldInitSpec(this, _$month, {
@@ -97,7 +99,8 @@ defineCustomElement('sinch-date-picker', (_$month = new WeakMap(), _$weeks = new
 
     _classPrivateFieldInitSpec(this, _onPrevMonthClick, {
       writable: true,
-      value: () => {
+      value: e => {
+        e.stopPropagation();
         decMonth(_classPrivateFieldGet(this, _date), _classPrivateFieldGet(this, _minDate));
 
         _classPrivateMethodGet(this, _render, _render2).call(this);
@@ -106,7 +109,8 @@ defineCustomElement('sinch-date-picker', (_$month = new WeakMap(), _$weeks = new
 
     _classPrivateFieldInitSpec(this, _onNextMonthClick, {
       writable: true,
-      value: () => {
+      value: e => {
+        e.stopPropagation();
         incMonth(_classPrivateFieldGet(this, _date), _classPrivateFieldGet(this, _maxDate));
 
         _classPrivateMethodGet(this, _render, _render2).call(this);
@@ -115,7 +119,8 @@ defineCustomElement('sinch-date-picker', (_$month = new WeakMap(), _$weeks = new
 
     _classPrivateFieldInitSpec(this, _onPrevYearClick, {
       writable: true,
-      value: () => {
+      value: e => {
+        e.stopPropagation();
         decYear(_classPrivateFieldGet(this, _date), _classPrivateFieldGet(this, _minDate));
 
         _classPrivateMethodGet(this, _render, _render2).call(this);
@@ -124,7 +129,8 @@ defineCustomElement('sinch-date-picker', (_$month = new WeakMap(), _$weeks = new
 
     _classPrivateFieldInitSpec(this, _onNextYearClick, {
       writable: true,
-      value: () => {
+      value: e => {
+        e.stopPropagation();
         incYear(_classPrivateFieldGet(this, _date), _classPrivateFieldGet(this, _maxDate));
 
         _classPrivateMethodGet(this, _render, _render2).call(this);
@@ -134,16 +140,21 @@ defineCustomElement('sinch-date-picker', (_$month = new WeakMap(), _$weeks = new
     _classPrivateFieldInitSpec(this, _onDateClick, {
       writable: true,
       value: e => {
+        e.stopPropagation();
         const dateIso = e.target.getAttribute('data-date');
 
         if (dateIso === null || dateIso.length === 0) {
           return;
         }
 
-        this.dispatchEvent(new CustomEvent('change', {
-          detail: dateIso,
-          bubbles: true
-        }));
+        _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, dateIso);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onChangeReactHandler, {
+      writable: true,
+      value: e => {
+        getReactEventHandler(this, 'on-change')?.(e);
       }
     });
 
@@ -190,6 +201,8 @@ defineCustomElement('sinch-date-picker', (_$month = new WeakMap(), _$weeks = new
     _classPrivateFieldGet(this, _$nextYear).addEventListener('click', _classPrivateFieldGet(this, _onNextYearClick));
 
     _classPrivateFieldGet(this, _$month).addEventListener('click', _classPrivateFieldGet(this, _onDateClick));
+
+    this.addEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
   }
 
   disconnectedCallback() {
@@ -202,6 +215,8 @@ defineCustomElement('sinch-date-picker', (_$month = new WeakMap(), _$weeks = new
     _classPrivateFieldGet(this, _$nextYear).removeEventListener('click', _classPrivateFieldGet(this, _onNextYearClick));
 
     _classPrivateFieldGet(this, _$month).removeEventListener('click', _classPrivateFieldGet(this, _onDateClick));
+
+    this.removeEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
   }
 
   static get observedAttributes() {
@@ -416,4 +431,14 @@ function _render2() {
     });
     setClass(_classPrivateFieldGet(this, _$weeks)[wi], 'empty', isEmptyWeek);
   });
+}
+
+function _dispatchChangeEvent2(value) {
+  this.dispatchEvent(new CustomEvent('change', {
+    detail: value,
+    bubbles: true
+  }));
+  this.dispatchEvent(new CustomEvent('-change', {
+    detail: value
+  }));
 }

package/date-picker/types.d.ts

@@ -15,7 +15,7 @@ export declare type TSinchDatePickerElement = HTMLElement & {
     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;
+    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 */
@@ -37,5 +37,7 @@ export declare type TSinchDatePickerReact = TSinchElementReact<TSinchDatePickerE
     /** 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;
+    onChange?: (e: SyntheticEvent<TSinchDatePickerElement, CustomEvent<string>>) => void;
+    /** Change value handler, return date in ISO 8601 format */
+    'on-change'?: (e: CustomEvent<string>) => void;
 };

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 '../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-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 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);
         }
       }
@@ -89,8 +86,9 @@ defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = n
 
     _classPrivateFieldInitSpec(this, _onCloseReactHandler, {
       writable: true,
-      value: () => {
+      value: e => {
         getReactEventHandler(this, 'onClose')?.();
+        getReactEventHandler(this, 'on-close')?.(e);
       }
     });
 
@@ -115,7 +113,7 @@ defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = n
 
     _classPrivateFieldGet(this, _$dialog).addEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
 
-    this.addEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
+    this.addEventListener('-close', _classPrivateFieldGet(this, _onCloseReactHandler));
 
     _classPrivateFieldSet(this, _isConnected, true);
 
@@ -129,7 +127,7 @@ defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = n
 
     _classPrivateFieldGet(this, _$dialog).removeEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
 
-    this.removeEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
+    this.removeEventListener('-close', _classPrivateFieldGet(this, _onCloseReactHandler));
 
     _classPrivateMethodGet(this, _setOpen, _setOpen2).call(this, false);
 
@@ -185,9 +183,7 @@ defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = n
 }));
 
 function _dispatchCloseEvent2() {
-  this.dispatchEvent(new CustomEvent('close', {
-    bubbles: true
-  }));
+  this.dispatchEvent(new CustomEvent('-close'));
 }
 
 function _setOpen2(shouldOpen) {

package/dialog/types.d.ts

@@ -1,10 +1,9 @@
 import type { TRect, TSinchElementReact } from '../types';
-import type { SyntheticEvent } from 'react';
 export declare type TSinchDialogElement = HTMLElement & {
     caption: string;
     readonly dialogRect: TRect;
     readonly closeButtonRect: TRect;
-    addEventListener(type: 'close', listener: (e: CustomEvent<void>) => void): void;
+    addEventListener(type: '-close', listener: (e: CustomEvent<void>) => void): void;
     setAttribute(name: 'caption', value: string): void;
     setAttribute(name: 'close-aria-label', value: string): void;
 };
@@ -13,5 +12,6 @@ export declare type TSinchDialogReact = TSinchElementReact<TSinchDialogElement>
     caption: string;
     'aria-label': string;
     'close-aria-label': string;
-    onClose: (event: SyntheticEvent<TSinchDialogElement, CustomEvent<void>>) => void;
+    onClose?: () => void;
+    'on-close'?: (e: CustomEvent<void>) => void;
 };

package/dropdown/index.js

@@ -1,7 +1,7 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$optionSlot, _$listbox, _$popover, _onListboxClick, _onListboxKeyDown, _onOptionSlotChange, _onValueChange, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _selectOption, _getOptionWithValue, _getOptionElements, _findSelectedOption, _getEnabledOptionElements, _dispatchChangeEvent, _onOpen, _onClose, _onReactClose;
+var _$optionSlot, _$listbox, _$popover, _onListboxClick, _onListboxKeyDown, _onOptionSlotChange, _onValueChange, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _selectOption, _getOptionWithValue, _getOptionElements, _findSelectedOption, _getEnabledOptionElements, _dispatchChangeEvent, _onClose, _onCloseReactHandler, _onChangeReactHandler;
 
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 
@@ -18,12 +18,10 @@ const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;ou
 const ITEM_HEIGHT = 40;
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-dropdown', (_$optionSlot = new WeakMap(), _$listbox = new WeakMap(), _$popover = new WeakMap(), _onListboxClick = new WeakMap(), _onListboxKeyDown = new WeakMap(), _onOptionSlotChange = new WeakMap(), _onValueChange = new WeakSet(), _getFirstOption = new WeakSet(), _getLastOption = new WeakSet(), _getNextOption = new WeakSet(), _getPrevOption = new WeakSet(), _selectOption = new WeakSet(), _getOptionWithValue = new WeakSet(), _getOptionElements = new WeakSet(), _findSelectedOption = new WeakSet(), _getEnabledOptionElements = new WeakSet(), _dispatchChangeEvent = new WeakSet(), _onOpen = new WeakSet(), _onClose = new WeakMap(), _onReactClose = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-dropdown', (_$optionSlot = new WeakMap(), _$listbox = new WeakMap(), _$popover = new WeakMap(), _onListboxClick = new WeakMap(), _onListboxKeyDown = new WeakMap(), _onOptionSlotChange = new WeakMap(), _onValueChange = new WeakSet(), _getFirstOption = new WeakSet(), _getLastOption = new WeakSet(), _getNextOption = new WeakSet(), _getPrevOption = new WeakSet(), _selectOption = new WeakSet(), _getOptionWithValue = new WeakSet(), _getOptionElements = new WeakSet(), _findSelectedOption = new WeakSet(), _getEnabledOptionElements = new WeakSet(), _dispatchChangeEvent = new WeakSet(), _onClose = new WeakMap(), _onCloseReactHandler = new WeakMap(), _onChangeReactHandler = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
-    _classPrivateMethodInitSpec(this, _onOpen);
-
     _classPrivateMethodInitSpec(this, _dispatchChangeEvent);
 
     _classPrivateMethodInitSpec(this, _getEnabledOptionElements);
@@ -66,11 +64,13 @@ defineCustomElement('sinch-dropdown', (_$optionSlot = new WeakMap(), _$listbox =
       value: e => {
         const $elem = e.target;
 
-        if (!$elem.disabled) {
-          e.stopPropagation();
-
-          _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, $elem);
+        if (getBooleanAttribute($elem, 'disabled')) {
+          return;
         }
+
+        e.stopPropagation();
+
+        _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, $elem);
       }
     });
 
@@ -125,16 +125,22 @@ defineCustomElement('sinch-dropdown', (_$optionSlot = new WeakMap(), _$listbox =
     _classPrivateFieldInitSpec(this, _onClose, {
       writable: true,
       value: () => {
-        this.dispatchEvent(new CustomEvent('close', {
-          bubbles: true
-        }));
+        this.dispatchEvent(new CustomEvent('-close'));
       }
     });
 
-    _classPrivateFieldInitSpec(this, _onReactClose, {
+    _classPrivateFieldInitSpec(this, _onCloseReactHandler, {
       writable: true,
-      value: () => {
+      value: e => {
         getReactEventHandler(this, 'onClose')?.();
+        getReactEventHandler(this, 'on-close')?.(e);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onChangeReactHandler, {
+      writable: true,
+      value: e => {
+        getReactEventHandler(this, 'on-change')?.(e);
       }
     });
 
@@ -153,17 +159,19 @@ defineCustomElement('sinch-dropdown', (_$optionSlot = new WeakMap(), _$listbox =
 
     _classPrivateFieldGet(this, _$optionSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onOptionSlotChange));
 
-    this.addEventListener('close', _classPrivateFieldGet(this, _onReactClose));
+    this.addEventListener('-close', _classPrivateFieldGet(this, _onCloseReactHandler));
+    this.addEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
   }
 
   disconnectedCallback() {
     _classPrivateFieldGet(this, _$optionSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onOptionSlotChange));
 
-    this.removeEventListener('close', _classPrivateFieldGet(this, _onReactClose));
+    this.removeEventListener('-close', _classPrivateFieldGet(this, _onCloseReactHandler));
+    this.removeEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
   }
 
   static get observedAttributes() {
-    return ['open', 'value', 'orientation', 'maxvisibleitems'];
+    return ['open', 'value', 'orientation', 'maxvisibleitems', 'multiple'];
   }
 
   get nodeName() {
@@ -215,30 +223,41 @@ defineCustomElement('sinch-dropdown', (_$optionSlot = new WeakMap(), _$listbox =
   }
 
   attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+
     switch (name) {
       case 'open':
         {
           updateAttribute(_classPrivateFieldGet(this, _$popover), 'open', newVal);
 
           if (isAttrTrue(newVal)) {
-            _classPrivateMethodGet(this, _onOpen, _onOpen2).call(this);
+            _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, _classPrivateMethodGet(this, _getOptionWithValue, _getOptionWithValue2).call(this, getFirstCsvValue(this.value)) ?? _classPrivateMethodGet(this, _getFirstOption, _getFirstOption2).call(this));
 
             _classPrivateFieldGet(this, _$popover).addEventListener('keydown', _classPrivateFieldGet(this, _onListboxKeyDown));
 
             _classPrivateFieldGet(this, _$listbox).addEventListener('click', _classPrivateFieldGet(this, _onListboxClick));
 
-            _classPrivateFieldGet(this, _$popover).addEventListener('close', _classPrivateFieldGet(this, _onClose));
+            _classPrivateFieldGet(this, _$popover).addEventListener('-close', _classPrivateFieldGet(this, _onClose));
           } else {
             _classPrivateFieldGet(this, _$popover).removeEventListener('keydown', _classPrivateFieldGet(this, _onListboxKeyDown));
 
             _classPrivateFieldGet(this, _$listbox).removeEventListener('click', _classPrivateFieldGet(this, _onListboxClick));
 
-            _classPrivateFieldGet(this, _$popover).removeEventListener('close', _classPrivateFieldGet(this, _onClose));
+            _classPrivateFieldGet(this, _$popover).removeEventListener('-close', _classPrivateFieldGet(this, _onClose));
           }
 
           break;
         }
 
+      case 'multiple':
+        {
+          _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, this.value);
+
+          break;
+        }
+
       case 'orientation':
         {
           updateAttribute(_classPrivateFieldGet(this, _$popover), 'orientation', newVal);
@@ -278,14 +297,14 @@ function _onValueChange2(csv) {
 
     for (const $option of _classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).call(this)) {
       const isChecked = !getBooleanAttribute($option, 'disabled') && values.has(getAttribute($option, 'value', ''));
-      updateBooleanAttribute($option, 'checked', isChecked);
+      updateBooleanAttribute($option, 'data-checked', isChecked);
     }
   } else {
     const value = getFirstCsvValue(csv);
 
     for (const $option of _classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).call(this)) {
       const isChecked = !getBooleanAttribute($option, 'disabled') && value === getAttribute($option, 'value', '');
-      updateBooleanAttribute($option, 'checked', isChecked);
+      updateBooleanAttribute($option, 'data-checked', isChecked);
     }
   }
 }
@@ -385,15 +404,12 @@ function _dispatchChangeEvent2($opt) {
   }
 
   const value = $opt.value;
-  const result = this.multiple ? updateCsv(this.value, value, !$opt.checked) : value;
+  const result = this.multiple ? updateCsv(this.value, value, !getBooleanAttribute($opt, 'data-checked')) : value;
   this.dispatchEvent(new CustomEvent('change', {
     detail: result,
     bubbles: true
   }));
-}
-
-function _onOpen2() {
-  const $opt = _classPrivateMethodGet(this, _getOptionWithValue, _getOptionWithValue2).call(this, getFirstCsvValue(this.value));
-
-  _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, $opt ?? _classPrivateMethodGet(this, _getFirstOption, _getFirstOption2).call(this));
+  this.dispatchEvent(new CustomEvent('-change', {
+    detail: result
+  }));
 }

package/dropdown/types.d.ts

@@ -8,8 +8,8 @@ export declare type TSinchDropdownElement = HTMLElement & {
     value: string;
     maxVisibleItems: number | null;
     readonly dropdownRect: TRect;
-    addEventListener(type: 'change', listener: (e: CustomEvent<string>) => void): void;
-    addEventListener(type: 'close', listener: (e: CustomEvent<void>) => void): void;
+    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
+    addEventListener(type: '-close', listener: (e: CustomEvent<void>) => void): void;
     setAttribute(name: 'open', value: ''): void;
     setAttribute(name: 'multiple', value: ''): void;
     setAttribute(name: 'orientation', value: TSinchPopoverOrientation): void;
@@ -23,6 +23,8 @@ export declare type TSinchDropdownReact = TSinchElementReact<TSinchDropdownEleme
     value: string;
     maxVisibleItems?: number;
     'aria-label': string;
-    onClose: (event: SyntheticEvent<TSinchDropdownElement, CustomEvent<void>>) => void;
-    onChange: (e: SyntheticEvent<TSinchDropdownElement, CustomEvent<string>>) => void;
+    onClose?: () => void;
+    'on-close'?: (e: CustomEvent<void>) => void;
+    onChange?: (e: SyntheticEvent<TSinchDropdownElement, CustomEvent<string>>) => void;
+    'on-change'?: (e: CustomEvent<string>) => void;
 };