@nectary/components 0.34.0 → 0.35.0

package/segmented-control-option/types.d.ts

@@ -3,6 +3,8 @@ export declare type TSinchSegmentedControlOptionElement = HTMLElement & {
     value: string;
     disabled: boolean;
     text: string;
+    addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
+    addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
     setAttribute(name: 'value', value: string): void;
     setAttribute(name: 'text', value: string): void;
     setAttribute(name: 'disabled', value: ''): void;
@@ -12,4 +14,6 @@ export declare type TSinchSegmentedControlOptionReact = TSinchElementReact<TSinc
     text: string;
     disabled?: boolean;
     'aria-label': string;
+    'on-focus'?: (e: CustomEvent<void>) => void;
+    'on-blur'?: (e: CustomEvent<void>) => void;
 };

package/segmented-icon-control/index.js

@@ -1,7 +1,7 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$slot, _$sh, _onSlotChange, _onOptionChange, _onValueChange;
+var _$slot, _onSlotChange, _onOptionChange, _onValueChange, _onChangeReactHandler;
 
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 
@@ -11,11 +11,11 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 
 function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
 
-import { defineCustomElement, getAttribute, getBooleanAttribute, getCsvSet, getFirstCsvValue, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getCsvSet, getFirstCsvValue, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:row}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-segmented-icon-control', (_$slot = new WeakMap(), _$sh = new WeakMap(), _onSlotChange = new WeakMap(), _onOptionChange = new WeakMap(), _onValueChange = new WeakSet(), class extends NectaryElement {
+defineCustomElement('sinch-segmented-icon-control', (_$slot = new WeakMap(), _onSlotChange = new WeakMap(), _onOptionChange = new WeakMap(), _onValueChange = new WeakSet(), _onChangeReactHandler = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -26,11 +26,6 @@ defineCustomElement('sinch-segmented-icon-control', (_$slot = new WeakMap(), _$s
       value: void 0
     });
 
-    _classPrivateFieldInitSpec(this, _$sh, {
-      writable: true,
-      value: void 0
-    });
-
     _classPrivateFieldInitSpec(this, _onSlotChange, {
       writable: true,
       value: () => {
@@ -44,19 +39,27 @@ defineCustomElement('sinch-segmented-icon-control', (_$slot = new WeakMap(), _$s
         e.stopPropagation();
         const $elem = e.target;
         const value = e.detail;
-        const result = this.multiple ? updateCsv(this.value, value, !getBooleanAttribute($elem, 'checked')) : value;
+        const detail = this.multiple ? updateCsv(this.value, value, !getBooleanAttribute($elem, 'data-checked')) : value;
         this.dispatchEvent(new CustomEvent('change', {
-          detail: result,
+          detail,
           bubbles: true
         }));
+        this.dispatchEvent(new CustomEvent('-change', {
+          detail
+        }));
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onChangeReactHandler, {
+      writable: true,
+      value: e => {
+        getReactEventHandler(this, 'on-change')?.(e);
       }
     });
 
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
 
-    _classPrivateFieldSet(this, _$sh, shadowRoot);
-
     _classPrivateFieldSet(this, _$slot, shadowRoot.querySelector('slot'));
   }
 
@@ -65,13 +68,17 @@ defineCustomElement('sinch-segmented-icon-control', (_$slot = new WeakMap(), _$s
 
     _classPrivateFieldGet(this, _$slot).addEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
 
-    _classPrivateFieldGet(this, _$sh).addEventListener('change', _classPrivateFieldGet(this, _onOptionChange));
+    _classPrivateFieldGet(this, _$slot).addEventListener('option-change', _classPrivateFieldGet(this, _onOptionChange));
+
+    this.addEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
   }
 
   disconnectedCallback() {
     _classPrivateFieldGet(this, _$slot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
 
-    _classPrivateFieldGet(this, _$sh).removeEventListener('change', _classPrivateFieldGet(this, _onOptionChange));
+    _classPrivateFieldGet(this, _$slot).removeEventListener('option-change', _classPrivateFieldGet(this, _onOptionChange));
+
+    this.removeEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
   }
 
   static get observedAttributes() {
@@ -99,6 +106,10 @@ defineCustomElement('sinch-segmented-icon-control', (_$slot = new WeakMap(), _$s
   }
 
   attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+
     switch (name) {
       case 'value':
         {
@@ -117,14 +128,14 @@ function _onValueChange2(csv) {
 
     for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
       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 _classPrivateFieldGet(this, _$slot).assignedElements()) {
       const isChecked = !getBooleanAttribute($option, 'disabled') && value === getAttribute($option, 'value', '');
-      updateBooleanAttribute($option, 'checked', isChecked);
+      updateBooleanAttribute($option, 'data-checked', isChecked);
     }
   }
 }

package/segmented-icon-control/types.d.ts

@@ -3,11 +3,14 @@ import type { SyntheticEvent } from 'react';
 export declare type TSinchSegmentedIconControlElement = HTMLElement & {
     value: string;
     multiple: boolean;
-    addEventListener(type: 'change', listener: (e: CustomEvent<string>) => void): void;
+    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
+    setAttribute(name: 'value', value: string): void;
+    setAttribute(name: 'multiple', value: ''): void;
 };
 export declare type TSinchSegmentedIconControlReact = TSinchElementReact<TSinchSegmentedIconControlElement> & {
     value: string;
     multiple?: boolean;
     'aria-label': string;
-    onChange: (event: SyntheticEvent<TSinchSegmentedIconControlElement, CustomEvent<string>>) => void;
+    onChange?: (event: SyntheticEvent<TSinchSegmentedIconControlElement, CustomEvent<string>>) => void;
+    'on-change'?: (e: CustomEvent<string>) => void;
 };

package/segmented-icon-control-option/index.js

@@ -1,17 +1,17 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$button, _onClick;
+var _$button, _onButtonClick, _onButtonFocus, _onButtonBlur, _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{display:block;outline:0}#wrapper{position:relative;width:56px;height:32px;padding:3px 16px;box-sizing:border-box;border:1px solid var(--sinch-color-snow-600);border-left-width:0;border-right-width:0;color:var(--sinch-color-stormy-500);background-color:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:24px}#wrapper:hover{background-color:var(--sinch-color-snow-500)}:host(:first-child) #wrapper{border-left-width:1px;border-top-left-radius:4px;border-bottom-left-radius:4px}:host(:last-child) #wrapper{border-right-width:1px;border-top-right-radius:4px;border-bottom-right-radius:4px}:host([checked]:not([checked=false])) #wrapper{border-color:var(--sinch-color-stormy-500)}:host([checked]:not([checked=false]):not(:first-child)) #wrapper::before{content:"";width:1px;background-color:var(--sinch-color-stormy-500);position:absolute;left:-1px;top:-1px;bottom:-1px}:host([checked]:not([checked=false]):not(:last-child)) #wrapper::after{content:"";width:1px;background-color:var(--sinch-color-stormy-500);position:absolute;right:0;top:-1px;bottom:-1px}#button{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer;z-index:1}#button:disabled{cursor:unset}#button:focus::before{content:"";position:absolute;left:-4px;right:-3px;top:-4px;bottom:-4px;border-style:solid;border-color:var(--sinch-color-aqua-400);border-width:0}#button:focus-visible::before{border-width:2px}:host(:first-child) #button:focus::before{left:-4px;border-top-left-radius:6px;border-bottom-left-radius:6px}:host(:last-child) #button:focus::before{right:-4px;border-top-right-radius:6px;border-bottom-right-radius:6px}@supports not selector(:focus-visible){#button:focus::before{border-width:2px}}:host([disabled]:not([disabled=false])) #wrapper{background-color:var(--sinch-color-snow-100);color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}::slotted(*){display:block}</style><div id="wrapper"><slot name="icon"></slot><button id="button"></button></div>';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;width:56px;height:32px;padding:3px 16px;box-sizing:border-box;border:1px solid var(--sinch-color-snow-600);border-left-width:0;border-right-width:0;color:var(--sinch-color-stormy-500);background-color:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:24px}#wrapper:hover{background-color:var(--sinch-color-snow-500)}:host(:first-child) #wrapper{border-left-width:1px;border-top-left-radius:4px;border-bottom-left-radius:4px}:host(:last-child) #wrapper{border-right-width:1px;border-top-right-radius:4px;border-bottom-right-radius:4px}:host([data-checked]) #wrapper{border-color:var(--sinch-color-stormy-500)}:host([data-checked]:not(:first-child)) #wrapper::before{content:"";width:1px;background-color:var(--sinch-color-stormy-500);position:absolute;left:-1px;top:-1px;bottom:-1px}:host([data-checked]:not(:last-child)) #wrapper::after{content:"";width:1px;background-color:var(--sinch-color-stormy-500);position:absolute;right:0;top:-1px;bottom:-1px}#button{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer;z-index:1}#button:disabled{cursor:unset}#button:focus::before{content:"";position:absolute;left:-4px;right:-3px;top:-4px;bottom:-4px;border-style:solid;border-color:var(--sinch-color-aqua-400);border-width:0}#button:focus-visible::before{border-width:2px}:host(:first-child) #button:focus::before{left:-4px;border-top-left-radius:6px;border-bottom-left-radius:6px}:host(:last-child) #button:focus::before{right:-4px;border-top-right-radius:6px;border-bottom-right-radius:6px}@supports not selector(:focus-visible){#button:focus::before{border-width:2px}}:host([disabled]:not([disabled=false])) #wrapper{background-color:var(--sinch-color-snow-100);color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}::slotted(*){display:block}</style><div id="wrapper"><slot name="icon"></slot><button id="button"></button></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-segmented-icon-control-option', (_$button = new WeakMap(), _onClick = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-segmented-icon-control-option', (_$button = new WeakMap(), _onButtonClick = new WeakMap(), _onButtonFocus = new WeakMap(), _onButtonBlur = new WeakMap(), _onFocusReactHandler = new WeakMap(), _onBlurReactHandler = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -20,17 +20,45 @@ defineCustomElement('sinch-segmented-icon-control-option', (_$button = new WeakM
       value: void 0
     });
 
-    _classPrivateFieldInitSpec(this, _onClick, {
+    _classPrivateFieldInitSpec(this, _onButtonClick, {
       writable: true,
       value: e => {
         e.stopPropagation();
-        this.dispatchEvent(new CustomEvent('change', {
-          bubbles: true,
-          detail: this.value
+        this.dispatchEvent(new CustomEvent('option-change', {
+          detail: this.value,
+          bubbles: true
         }));
       }
     });
 
+    _classPrivateFieldInitSpec(this, _onButtonFocus, {
+      writable: true,
+      value: () => {
+        this.dispatchEvent(new CustomEvent('-focus'));
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onButtonBlur, {
+      writable: true,
+      value: () => {
+        this.dispatchEvent(new CustomEvent('-blur'));
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onFocusReactHandler, {
+      writable: true,
+      value: () => {
+        getReactEventHandler(this, 'on-focus')?.();
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onBlurReactHandler, {
+      writable: true,
+      value: () => {
+        getReactEventHandler(this, 'on-blur')?.();
+      }
+    });
+
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
 
@@ -40,15 +68,29 @@ defineCustomElement('sinch-segmented-icon-control-option', (_$button = new WeakM
   connectedCallback() {
     this.setAttribute('role', 'tab');
 
-    _classPrivateFieldGet(this, _$button).addEventListener('click', _classPrivateFieldGet(this, _onClick));
+    _classPrivateFieldGet(this, _$button).addEventListener('click', _classPrivateFieldGet(this, _onButtonClick));
+
+    _classPrivateFieldGet(this, _$button).addEventListener('focus', _classPrivateFieldGet(this, _onButtonFocus));
+
+    _classPrivateFieldGet(this, _$button).addEventListener('blur', _classPrivateFieldGet(this, _onButtonBlur));
+
+    this.addEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
+    this.addEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$button).removeEventListener('click', _classPrivateFieldGet(this, _onClick));
+    _classPrivateFieldGet(this, _$button).removeEventListener('click', _classPrivateFieldGet(this, _onButtonClick));
+
+    _classPrivateFieldGet(this, _$button).removeEventListener('focus', _classPrivateFieldGet(this, _onButtonFocus));
+
+    _classPrivateFieldGet(this, _$button).removeEventListener('blur', _classPrivateFieldGet(this, _onButtonBlur));
+
+    this.removeEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
+    this.removeEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
   }
 
   static get observedAttributes() {
-    return ['checked', 'disabled', 'value'];
+    return ['data-checked', 'disabled'];
   }
 
   set value(value) {
@@ -69,7 +111,7 @@ defineCustomElement('sinch-segmented-icon-control-option', (_$button = new WeakM
 
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
-      case 'checked':
+      case 'data-checked':
         {
           updateExplicitBooleanAttribute(this, 'aria-selected', isAttrTrue(newVal));
           break;

package/segmented-icon-control-option/types.d.ts

@@ -2,6 +2,8 @@ import type { TSinchElementReact } from '../types';
 export declare type TSinchSegmentedIconControlOptionElement = HTMLElement & {
     value: string;
     disabled: boolean;
+    addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
+    addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
     setAttribute(name: 'value', value: string): void;
     setAttribute(name: 'disabled', value: ''): void;
 };
@@ -9,4 +11,6 @@ export declare type TSinchSegmentedIconControlOptionReact = TSinchElementReact<T
     value: string;
     disabled?: boolean;
     'aria-label': string;
+    'on-focus'?: (e: CustomEvent<void>) => void;
+    'on-blur'?: (e: CustomEvent<void>) => void;
 };

package/select/index.js

@@ -1,7 +1,7 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$button, _$buttonContent, _$label, _$optionalText, _$additionalText, _$invalidText, _$dropdown, _$optionSlot, _$sh, _createElement, _updateButtonContent, _onValueChange, _getOptionWithValue, _onLabelClick, _onDropdownClick, _onDropdownClose;
+var _$button, _$buttonContent, _$label, _$optionalText, _$additionalText, _$invalidText, _$dropdown, _$optionSlot, _$sh, _createElement, _updateButtonContent, _onValueChange, _getOptionWithValue, _onLabelClick, _onDropdownClick, _onDropdownClose, _onButtonFocus, _onButtonBlur, _onChangeReactHandler, _onFocusReactHandler, _onBlurReactHandler;
 
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 
@@ -12,11 +12,11 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
 
 import '../dropdown';
-import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateIntegerAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{position:relative}sinch-dropdown{display:block}#button{all:initial;display:flex;align-items:center;gap:8px;border:1px solid var(--sinch-color-stormy-200);border-radius:var(--sinch-shape-radius-s);box-sizing:border-box;width:100%;height:48px;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);cursor:pointer}#button:focus{border-color:var(--sinch-color-stormy-600)}#dropdown-icon{fill:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button[data-unselected]{color:var(--sinch-color-text-muted)}#button:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100);cursor:initial}#button:disabled #dropdown-icon{fill:var(--sinch-color-stormy-100)}:host([invalidtext]:not([invalidtext=""])) #button:not(:disabled){border-color:var(--sinch-color-text-invalid)}#content{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid);line-height:20px;margin-top:2px}#invalid:empty{display:none}::slotted(sinch-help-tooltip){align-self:center;margin:0 8px}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])){--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><div id="top"><label id="label" for="button"></label><slot name="tooltip"></slot><span id="optional"></span></div><sinch-dropdown id="dropdown" modal orientation="bottom"><button slot="target" id="button"><span id="content"></span> <svg id="dropdown-icon" width="12" height="8" aria-hidden="true"><path d="M1.41.59 6 5.17 10.59.59 12 2 6 8 0 2 1.41.59Z"/></svg></button><slot name="option" slot="option"></slot></sinch-dropdown><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateIntegerAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{position:relative}sinch-dropdown{display:block}#button{all:initial;display:flex;align-items:center;gap:8px;border:1px solid var(--sinch-color-stormy-200);border-radius:var(--sinch-shape-radius-s);box-sizing:border-box;width:100%;height:48px;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);cursor:pointer}#button:focus{border-color:var(--sinch-color-stormy-600)}#dropdown-icon{fill:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button[data-unselected]{color:var(--sinch-color-text-muted)}#button:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100);cursor:initial}#button:disabled #dropdown-icon{fill:var(--sinch-color-stormy-100)}:host([invalidtext]:not([invalidtext=""])) #button:not(:disabled){border-color:var(--sinch-color-text-invalid)}#content{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid);line-height:20px;margin-top:2px}#invalid:empty{display:none}::slotted(sinch-help-tooltip){align-self:center;margin:0 8px}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])){--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><div id="top"><label id="label" for="button"></label><slot name="tooltip"></slot><span id="optional"></span></div><sinch-dropdown id="dropdown" modal orientation="bottom"><button slot="target" id="button"><span id="content"></span><svg id="dropdown-icon" width="12" height="8" aria-hidden="true"><path d="M1.41.59 6 5.17 10.59.59 12 2 6 8 0 2 1.41.59Z"/></svg></button><slot name="option" slot="option"></slot></sinch-dropdown><div id="bottom"><span id="invalid"></span><span id="additional"></span></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _$dropdown = new WeakMap(), _$optionSlot = new WeakMap(), _$sh = new WeakMap(), _createElement = new WeakSet(), _updateButtonContent = new WeakSet(), _onValueChange = new WeakMap(), _getOptionWithValue = new WeakSet(), _onLabelClick = new WeakMap(), _onDropdownClick = new WeakMap(), _onDropdownClose = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _$dropdown = new WeakMap(), _$optionSlot = new WeakMap(), _$sh = new WeakMap(), _createElement = new WeakSet(), _updateButtonContent = new WeakSet(), _onValueChange = new WeakMap(), _getOptionWithValue = new WeakSet(), _onLabelClick = new WeakMap(), _onDropdownClick = new WeakMap(), _onDropdownClose = new WeakMap(), _onButtonFocus = new WeakMap(), _onButtonBlur = new WeakMap(), _onChangeReactHandler = new WeakMap(), _onFocusReactHandler = new WeakMap(), _onBlurReactHandler = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -74,11 +74,15 @@ defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent =
     _classPrivateFieldInitSpec(this, _onValueChange, {
       writable: true,
       value: e => {
+        const detail = e.detail;
         _classPrivateFieldGet(this, _$dropdown).open = false;
         this.dispatchEvent(new CustomEvent('change', {
-          detail: e.detail,
+          detail,
           bubbles: true
         }));
+        this.dispatchEvent(new CustomEvent('-change', {
+          detail
+        }));
       }
     });
 
@@ -103,6 +107,41 @@ defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent =
       }
     });
 
+    _classPrivateFieldInitSpec(this, _onButtonFocus, {
+      writable: true,
+      value: () => {
+        this.dispatchEvent(new CustomEvent('-focus'));
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onButtonBlur, {
+      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: () => {
+        getReactEventHandler(this, 'on-focus')?.();
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onBlurReactHandler, {
+      writable: true,
+      value: () => {
+        getReactEventHandler(this, 'on-blur')?.();
+      }
+    });
+
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
 
@@ -129,23 +168,39 @@ defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent =
     this.setAttribute('role', 'listbox');
     this.setAttribute('aria-haspopup', 'listbox');
 
-    _classPrivateFieldGet(this, _$dropdown).addEventListener('change', _classPrivateFieldGet(this, _onValueChange));
+    _classPrivateFieldGet(this, _$dropdown).addEventListener('-change', _classPrivateFieldGet(this, _onValueChange));
 
-    _classPrivateFieldGet(this, _$dropdown).addEventListener('close', _classPrivateFieldGet(this, _onDropdownClose));
+    _classPrivateFieldGet(this, _$dropdown).addEventListener('-close', _classPrivateFieldGet(this, _onDropdownClose));
 
     _classPrivateFieldGet(this, _$button).addEventListener('click', _classPrivateFieldGet(this, _onDropdownClick));
 
+    _classPrivateFieldGet(this, _$button).addEventListener('focus', _classPrivateFieldGet(this, _onButtonFocus));
+
+    _classPrivateFieldGet(this, _$button).addEventListener('blur', _classPrivateFieldGet(this, _onButtonBlur));
+
     _classPrivateFieldGet(this, _$label).addEventListener('click', _classPrivateFieldGet(this, _onLabelClick));
+
+    this.addEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+    this.addEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
+    this.addEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$dropdown).removeEventListener('change', _classPrivateFieldGet(this, _onValueChange));
+    _classPrivateFieldGet(this, _$dropdown).removeEventListener('-change', _classPrivateFieldGet(this, _onValueChange));
 
-    _classPrivateFieldGet(this, _$dropdown).removeEventListener('close', _classPrivateFieldGet(this, _onDropdownClose));
+    _classPrivateFieldGet(this, _$dropdown).removeEventListener('-close', _classPrivateFieldGet(this, _onDropdownClose));
 
     _classPrivateFieldGet(this, _$button).removeEventListener('click', _classPrivateFieldGet(this, _onDropdownClick));
 
+    _classPrivateFieldGet(this, _$button).removeEventListener('focus', _classPrivateFieldGet(this, _onButtonFocus));
+
+    _classPrivateFieldGet(this, _$button).removeEventListener('blur', _classPrivateFieldGet(this, _onButtonBlur));
+
     _classPrivateFieldGet(this, _$label).removeEventListener('click', _classPrivateFieldGet(this, _onLabelClick));
+
+    this.removeEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+    this.removeEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
+    this.removeEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
   }
 
   static get observedAttributes() {
@@ -225,6 +280,10 @@ defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent =
   }
 
   attributeChangedCallback(name, oldVal, newVal) {
+    if (newVal === oldVal) {
+      return;
+    }
+
     switch (name) {
       case 'value':
         {

package/select/types.d.ts

@@ -19,7 +19,9 @@ export declare type TSinchSelectElement = HTMLElement & {
     maxVisibleItems: number | null;
     readonly dropdownRect: TRect;
     /** Change value event */
-    addEventListener(type: 'change', listener: (e: CustomEvent<string>) => void): void;
+    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
+    addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
+    addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
     /** Value that matches one of the options `value` */
     setAttribute(name: 'value', value: string): void;
     /** Label */
@@ -57,5 +59,9 @@ export declare type TSinchSelectReact = TSinchElementReact<TSinchSelectElement>
     /** Number of visible at the same time options in the list */
     maxVisibleItems?: number;
     /** Change value handler */
-    onChange: (e: SyntheticEvent<TSinchSelectElement, CustomEvent<string>>) => void;
+    onChange?: (e: SyntheticEvent<TSinchSelectElement, CustomEvent<string>>) => void;
+    /** Change value handler */
+    'on-change'?: (e: CustomEvent<string>) => void;
+    'on-focus'?: (e: CustomEvent<void>) => void;
+    'on-blur'?: (e: CustomEvent<void>) => void;
 };

package/tabs/index.js

@@ -1,7 +1,7 @@
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$slot, _onOptionKeyDown, _onSlotChange, _onOptionChange, _onValueChange, _dispatchChangeEvent, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _getEnabledRadioElements;
+var _$slot, _onOptionKeyDown, _onSlotChange, _onOptionChange, _onValueChange, _dispatchChangeEvent, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _getEnabledRadioElements, _onChangeReactHandler;
 
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 
@@ -11,7 +11,7 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 
 function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
 
-import { defineCustomElement, getAttribute, getBooleanAttribute, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:row;height:44px;width:100%;box-sizing:border-box}</style><div id="wrapper"><slot></slot></div>';
 
 const findSelectedOption = elements => {
@@ -20,7 +20,7 @@ const findSelectedOption = elements => {
 
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-tabs', (_$slot = new WeakMap(), _onOptionKeyDown = new WeakMap(), _onSlotChange = new WeakMap(), _onOptionChange = new WeakMap(), _onValueChange = new WeakSet(), _dispatchChangeEvent = new WeakSet(), _getFirstOption = new WeakSet(), _getLastOption = new WeakSet(), _getNextOption = new WeakSet(), _getPrevOption = new WeakSet(), _getEnabledRadioElements = new WeakSet(), class extends NectaryElement {
+defineCustomElement('sinch-tabs', (_$slot = new WeakMap(), _onOptionKeyDown = new WeakMap(), _onSlotChange = new WeakMap(), _onOptionChange = new WeakMap(), _onValueChange = new WeakSet(), _dispatchChangeEvent = new WeakSet(), _getFirstOption = new WeakSet(), _getLastOption = new WeakSet(), _getNextOption = new WeakSet(), _getPrevOption = new WeakSet(), _getEnabledRadioElements = new WeakSet(), _onChangeReactHandler = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -98,18 +98,39 @@ defineCustomElement('sinch-tabs', (_$slot = new WeakMap(), _onOptionKeyDown = ne
       }
     });
 
+    _classPrivateFieldInitSpec(this, _onChangeReactHandler, {
+      writable: true,
+      value: e => {
+        getReactEventHandler(this, 'on-change')?.(e);
+      }
+    });
+
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    shadowRoot.addEventListener('keydown', _classPrivateFieldGet(this, _onOptionKeyDown));
-    shadowRoot.addEventListener('change', _classPrivateFieldGet(this, _onOptionChange));
 
     _classPrivateFieldSet(this, _$slot, shadowRoot.querySelector('slot'));
-
-    _classPrivateFieldGet(this, _$slot).addEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
   }
 
   connectedCallback() {
     this.setAttribute('role', 'tablist');
+
+    _classPrivateFieldGet(this, _$slot).addEventListener('keydown', _classPrivateFieldGet(this, _onOptionKeyDown));
+
+    _classPrivateFieldGet(this, _$slot).addEventListener('option-change', _classPrivateFieldGet(this, _onOptionChange));
+
+    _classPrivateFieldGet(this, _$slot).addEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
+
+    this.addEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$slot).removeEventListener('keydown', _classPrivateFieldGet(this, _onOptionKeyDown));
+
+    _classPrivateFieldGet(this, _$slot).removeEventListener('option-change', _classPrivateFieldGet(this, _onOptionChange));
+
+    _classPrivateFieldGet(this, _$slot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
+
+    this.removeEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
   }
 
   static get observedAttributes() {
@@ -153,6 +174,9 @@ function _dispatchChangeEvent2(value) {
     detail: value,
     bubbles: true
   }));
+  this.dispatchEvent(new CustomEvent('-change', {
+    detail: value
+  }));
 }
 
 function _getFirstOption2() {

package/tabs/types.d.ts

@@ -2,11 +2,12 @@ import type { TSinchElementReact } from '../types';
 import type { SyntheticEvent } from 'react';
 export declare type TSinchTabsElement = HTMLElement & {
     value: string;
-    addEventListener(type: 'change', listener: (e: CustomEvent<string>) => void): void;
+    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
     setAttribute(name: 'value', value: string): void;
 };
 export declare type TSinchTabsReact = TSinchElementReact<TSinchTabsElement> & {
     value: string;
     'aria-label': string;
-    onChange: (event: SyntheticEvent<TSinchTabsElement, CustomEvent<string>>) => void;
+    onChange?: (event: SyntheticEvent<TSinchTabsElement, CustomEvent<string>>) => void;
+    'on-change'?: (e: CustomEvent<string>) => void;
 };

package/tabs-option/index.js

@@ -8,7 +8,7 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 
 import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}:host()>*{pointer-events:none}#wrapper{display:flex;flex-direction:row;align-items:center;gap:12px;position:relative;width:100%;height:42px;padding:8px 20px;box-sizing:border-box;box-shadow:0 1px 0 0 var(--sinch-color-stormy-100);color:var(--sinch-color-stormy-500);background-color:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:16px}#content{font:var(--sinch-font-title-s);flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([checked]:not([checked=false])) #wrapper{box-shadow:0 2px 0 0 var(--sinch-color-stormy-500)}#button{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer}#button:disabled{cursor:unset}:host([disabled]:not([disabled=false])) #wrapper{color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><slot name="icon"></slot><label for="input" id="content"></label> <button id="button" type="radio"/></div>';
+const templateHTML = '<style>:host{display:block;outline:0}:host()>*{pointer-events:none}#wrapper{display:flex;flex-direction:row;align-items:center;gap:12px;position:relative;width:100%;height:42px;padding:8px 20px;box-sizing:border-box;box-shadow:0 1px 0 0 var(--sinch-color-stormy-100);color:var(--sinch-color-stormy-500);background-color:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:16px}#content{font:var(--sinch-font-title-s);flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([checked]:not([checked=false])) #wrapper{box-shadow:0 2px 0 0 var(--sinch-color-stormy-500)}#button{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer}#button:disabled{cursor:unset}:host([disabled]:not([disabled=false])) #wrapper{color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><slot name="icon"></slot><label for="input" id="content"></label><button id="button" type="radio"/></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-tabs-option', (_$button = new WeakMap(), _$label = new WeakMap(), _onClick = new WeakMap(), class extends NectaryElement {
@@ -29,7 +29,7 @@ defineCustomElement('sinch-tabs-option', (_$button = new WeakMap(), _$label = ne
       writable: true,
       value: e => {
         e.stopPropagation();
-        this.dispatchEvent(new CustomEvent('change', {
+        this.dispatchEvent(new CustomEvent('option-change', {
           bubbles: true,
           detail: this.value
         }));