@nectary/components 0.34.0 → 0.36.0

package/segment-collapse/index.js

@@ -1,8 +1,7 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$button;
+var _$button, _onClick, _onChangeReactHandler;
 
 function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
 
@@ -11,11 +10,11 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 import '../icons/expand-less';
 import '../icons/expand-more';
 import '../icon-button';
-import { defineCustomElement, getBooleanAttribute, isAttrTrue, NectaryElement, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
+import { defineCustomElement, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block;--sinch-size-icon:32px}#up{display:block}#down{display:none}:host([value]:not([value=false])) #up{display:none}:host([value]:not([value=false])) #down{display:block}</style><sinch-icon-button id="button" small><sinch-icon-expand-less id="up" slot="icon"></sinch-icon-expand-less><sinch-icon-expand-more id="down" slot="icon"></sinch-icon-expand-more></sinch-icon-button>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-segment-collapse', (_$button = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-segment-collapse', (_$button = new WeakMap(), _onClick = new WeakMap(), _onChangeReactHandler = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -24,12 +23,25 @@ defineCustomElement('sinch-segment-collapse', (_$button = new WeakMap(), class e
       value: void 0
     });
 
-    _defineProperty(this, 'onClick', e => {
-      e.stopPropagation();
-      this.dispatchEvent(new CustomEvent('change', {
-        detail: !this.value,
-        bubbles: true
-      }));
+    _classPrivateFieldInitSpec(this, _onClick, {
+      writable: true,
+      value: () => {
+        const detail = !this.value;
+        this.dispatchEvent(new CustomEvent('change', {
+          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();
@@ -41,11 +53,15 @@ defineCustomElement('sinch-segment-collapse', (_$button = new WeakMap(), class e
   connectedCallback() {
     this.setAttribute('role', 'checkbox');
 
-    _classPrivateFieldGet(this, _$button).addEventListener('click', this.onClick);
+    _classPrivateFieldGet(this, _$button).addEventListener('click', _classPrivateFieldGet(this, _onClick));
+
+    this.addEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$button).removeEventListener('click', this.onClick);
+    _classPrivateFieldGet(this, _$button).removeEventListener('click', _classPrivateFieldGet(this, _onClick));
+
+    this.removeEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
   }
 
   static get observedAttributes() {

package/segment-collapse/types.d.ts

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

package/segmented-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, _dispatchChangeEvent;
+var _$slot, _onSlotChange, _onOptionChange, _onValueChange, _onChangeReactHandler;
 
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 
@@ -11,16 +11,14 @@ 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;width:100%;box-sizing:border-box}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-segmented-control', (_$slot = new WeakMap(), _$sh = new WeakMap(), _onSlotChange = new WeakMap(), _onOptionChange = new WeakMap(), _onValueChange = new WeakSet(), _dispatchChangeEvent = new WeakSet(), class extends NectaryElement {
+defineCustomElement('sinch-segmented-control', (_$slot = new WeakMap(), _onSlotChange = new WeakMap(), _onOptionChange = new WeakMap(), _onValueChange = new WeakSet(), _onChangeReactHandler = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
-    _classPrivateMethodInitSpec(this, _dispatchChangeEvent);
-
     _classPrivateMethodInitSpec(this, _onValueChange);
 
     _classPrivateFieldInitSpec(this, _$slot, {
@@ -28,11 +26,6 @@ defineCustomElement('sinch-segmented-control', (_$slot = new WeakMap(), _$sh = n
       value: void 0
     });
 
-    _classPrivateFieldInitSpec(this, _$sh, {
-      writable: true,
-      value: void 0
-    });
-
     _classPrivateFieldInitSpec(this, _onSlotChange, {
       writable: true,
       value: () => {
@@ -44,31 +37,46 @@ defineCustomElement('sinch-segmented-control', (_$slot = new WeakMap(), _$sh = n
       writable: true,
       value: e => {
         e.stopPropagation();
+        const detail = e.detail;
+        this.dispatchEvent(new CustomEvent('change', {
+          detail,
+          bubbles: true
+        }));
+        this.dispatchEvent(new CustomEvent('-change', {
+          detail
+        }));
+      }
+    });
 
-        _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, e.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'));
   }
 
   connectedCallback() {
     this.setAttribute('role', 'tablist');
 
-    _classPrivateFieldGet(this, _$sh).addEventListener('change', _classPrivateFieldGet(this, _onOptionChange));
+    _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, _$sh).removeEventListener('change', _classPrivateFieldGet(this, _onOptionChange));
+    _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() {
@@ -88,6 +96,10 @@ defineCustomElement('sinch-segmented-control', (_$slot = new WeakMap(), _$sh = n
   }
 
   attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+
     switch (name) {
       case 'value':
         {
@@ -103,13 +115,6 @@ defineCustomElement('sinch-segmented-control', (_$slot = new WeakMap(), _$sh = n
 function _onValueChange2(value) {
   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);
   }
-}
-
-function _dispatchChangeEvent2(value) {
-  this.dispatchEvent(new CustomEvent('change', {
-    detail: value,
-    bubbles: true
-  }));
 }

package/segmented-control/types.d.ts

@@ -2,11 +2,12 @@ import type { TSinchElementReact } from '../types';
 import type { SyntheticEvent } from 'react';
 export declare type TSinchSegmentedControlElement = 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 TSinchSegmentedControlReact = TSinchElementReact<TSinchSegmentedControlElement> & {
     value: string;
     'aria-label': string;
-    onChange: (event: SyntheticEvent<TSinchSegmentedControlElement, CustomEvent<string>>) => void;
+    onChange?: (event: SyntheticEvent<TSinchSegmentedControlElement, CustomEvent<string>>) => void;
+    'on-change'?: (e: CustomEvent<string>) => void;
 };

package/segmented-control-option/index.js

@@ -1,17 +1,17 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$button, _$label, _onClick;
+var _$button, _$label, _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{display:flex;position:relative;flex-direction:row;align-items:center;gap:12px;width:100%;height:32px;padding:0 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:16px}#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}#content{font:var(--sinch-font-title-s);flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}: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:0;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:-3px;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)}</style><div id="wrapper"><slot name="icon"></slot><label for="button" id="content"></label> <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{display:flex;position:relative;flex-direction:row;align-items:center;gap:12px;width:100%;height:32px;padding:0 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:16px}#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}#content{font:var(--sinch-font-title-s);flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}: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:0;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:-3px;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)}</style><div id="wrapper"><slot name="icon"></slot><label for="button" id="content"></label><button id="button"></button></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-segmented-control-option', (_$button = new WeakMap(), _$label = new WeakMap(), _onClick = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-segmented-control-option', (_$button = new WeakMap(), _$label = new WeakMap(), _onButtonClick = new WeakMap(), _onButtonFocus = new WeakMap(), _onButtonBlur = new WeakMap(), _onFocusReactHandler = new WeakMap(), _onBlurReactHandler = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -25,17 +25,45 @@ defineCustomElement('sinch-segmented-control-option', (_$button = new WeakMap(),
       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));
 
@@ -47,15 +75,29 @@ defineCustomElement('sinch-segmented-control-option', (_$button = new WeakMap(),
   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', 'text', 'value'];
+    return ['data-checked', 'disabled', 'text'];
   }
 
   set value(value) {
@@ -82,7 +124,11 @@ defineCustomElement('sinch-segmented-control-option', (_$button = new WeakMap(),
     return getAttribute(this, 'text', '');
   }
 
-  attributeChangedCallback(name, _, newVal) {
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+
     switch (name) {
       case 'text':
         {
@@ -90,7 +136,7 @@ defineCustomElement('sinch-segmented-control-option', (_$button = new WeakMap(),
           break;
         }
 
-      case 'checked':
+      case 'data-checked':
         {
           updateExplicitBooleanAttribute(this, 'aria-selected', isAttrTrue(newVal));
           break;

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;
 };