@nectary/components 0.34.0 → 0.35.0

package/pagination/index.js

@@ -1,7 +1,7 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$left, _$right, _$buttons, _$wrapper, _onValueChange, _onButtonClick, _clamp, _dispatchChangeEvent;
+var _$left, _$right, _$buttons, _$wrapper, _onValueChange, _onButtonClick, _clamp, _dispatchChangeEvent, _onChangeReactHandler;
 
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 
@@ -13,8 +13,8 @@ function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(
 
 import '../icons/keyboard-arrow-left';
 import '../icons/keyboard-arrow-right';
-import { defineCustomElement, updateAttribute, getIntegerAttribute, setClass, NectaryElement, getRect } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;justify-content:center;gap:8px;width:100%;box-sizing:border-box}button{all:initial;width:28px;height:28px;box-sizing:border-box;cursor:pointer;text-align:center;contain:strict;--sinch-color-icon:var(--sinch-color-stormy-500)}button:disabled{--sinch-color-icon:var(--sinch-color-stormy-100);cursor:initial}button>*{pointer-events:none}.page{border-radius:50%;font:var(--sinch-font-body);color:var(--sinch-color-stormy-500)}.page.dots>span{display:none}.page.dots::after{content:"..."}.page.active{font:var(--sinch-font-emphasized-body);background-color:var(--sinch-color-snow-600);pointer-events:none;cursor:initial}.page.hidden{display:none}</style><div id="wrapper"><button id="left"><sinch-icon-keyboard-arrow-left></sinch-icon-keyboard-arrow-left></button> <button class="page"><span>1</span></button> <button class="page active"><span>2</span></button> <button class="page"><span>3</span></button> <button class="page"><span>4</span></button> <button class="page"><span>5</span></button> <button class="page dots"><span>6</span></button> <button class="page"><span>20</span></button> <button id="right"><sinch-icon-keyboard-arrow-right></sinch-icon-keyboard-arrow-right></button></div>';
+import { defineCustomElement, updateAttribute, getIntegerAttribute, setClass, NectaryElement, getRect, getReactEventHandler } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;justify-content:center;gap:8px;width:100%;box-sizing:border-box}button{all:initial;width:28px;height:28px;box-sizing:border-box;cursor:pointer;text-align:center;contain:strict;--sinch-color-icon:var(--sinch-color-stormy-500)}button:disabled{--sinch-color-icon:var(--sinch-color-stormy-100);cursor:initial}button>*{pointer-events:none}.page{border-radius:50%;font:var(--sinch-font-body);color:var(--sinch-color-stormy-500)}.page.dots>span{display:none}.page.dots::after{content:"..."}.page.active{font:var(--sinch-font-emphasized-body);background-color:var(--sinch-color-snow-600);pointer-events:none;cursor:initial}.page.hidden{display:none}</style><div id="wrapper"><button id="left"><sinch-icon-keyboard-arrow-left></sinch-icon-keyboard-arrow-left></button><button class="page"><span>1</span></button><button class="page active"><span>2</span></button><button class="page"><span>3</span></button><button class="page"><span>4</span></button><button class="page"><span>5</span></button><button class="page dots"><span>6</span></button><button class="page"><span>20</span></button><button id="right"><sinch-icon-keyboard-arrow-right></sinch-icon-keyboard-arrow-right></button></div>';
 const NUM_BUTTONS = 7;
 const MIDDLE_BTN_INDEX = Math.floor(NUM_BUTTONS / 2);
 const FIRST_BTN_INDEX = 0;
@@ -23,7 +23,7 @@ const DOTS_LEFT_INDEX = 1;
 const DOTS_RIGHT_INDEX = LAST_BTN_INDEX - 1;
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-pagination', (_$left = new WeakMap(), _$right = new WeakMap(), _$buttons = new WeakMap(), _$wrapper = new WeakMap(), _onValueChange = new WeakSet(), _onButtonClick = new WeakMap(), _clamp = new WeakSet(), _dispatchChangeEvent = new WeakSet(), class extends NectaryElement {
+defineCustomElement('sinch-pagination', (_$left = new WeakMap(), _$right = new WeakMap(), _$buttons = new WeakMap(), _$wrapper = new WeakMap(), _onValueChange = new WeakSet(), _onButtonClick = new WeakMap(), _clamp = new WeakSet(), _dispatchChangeEvent = new WeakSet(), _onChangeReactHandler = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -92,6 +92,13 @@ defineCustomElement('sinch-pagination', (_$left = new WeakMap(), _$right = new W
       }
     });
 
+    _classPrivateFieldInitSpec(this, _onChangeReactHandler, {
+      writable: true,
+      value: e => {
+        getReactEventHandler(this, 'on-change')?.(e);
+      }
+    });
+
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
 
@@ -108,10 +115,14 @@ defineCustomElement('sinch-pagination', (_$left = new WeakMap(), _$right = new W
     _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this);
 
     _classPrivateFieldGet(this, _$wrapper).addEventListener('click', _classPrivateFieldGet(this, _onButtonClick));
+
+    this.addEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
   }
 
   disconnectedCallback() {
     _classPrivateFieldGet(this, _$wrapper).removeEventListener('click', _classPrivateFieldGet(this, _onButtonClick));
+
+    this.removeEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
   }
 
   static get observedAttributes() {
@@ -217,14 +228,19 @@ function _onValueChange2() {
   _classPrivateFieldGet(this, _$right).disabled = isValueBad || value === max - 1;
 }
 
-function _clamp2(value, max) {
-  return Math.max(0, Math.min(max - 1, value));
+function _clamp2(value) {
+  const max = getIntegerAttribute(this, 'max', 0);
+  return Math.max(0, Math.min(max - 1, value)) + 1;
 }
 
 function _dispatchChangeEvent2(value) {
-  const max = getIntegerAttribute(this, 'max', 0);
+  const detail = _classPrivateMethodGet(this, _clamp, _clamp2).call(this, value);
+
   this.dispatchEvent(new CustomEvent('change', {
-    detail: _classPrivateMethodGet(this, _clamp, _clamp2).call(this, value, max) + 1,
+    detail,
     bubbles: true
   }));
+  this.dispatchEvent(new CustomEvent('-change', {
+    detail
+  }));
 }

package/pagination/types.d.ts

@@ -7,11 +7,13 @@ export declare type TSinchPaginationElement = HTMLElement & {
     readonly nextButtonRect: TRect;
     nthButtonRect(index: number): TRect | null;
     addEventListener(type: 'change', listener: (e: CustomEvent<number>) => void): void;
+    addEventListener(type: '-change', listener: (e: CustomEvent<number>) => void): void;
     setAttribute(name: 'value', value: string): void;
     setAttribute(name: 'max', value: string): void;
 };
 export declare type TSinchPaginationReact = TSinchElementReact<TSinchPaginationElement> & {
     value: number;
     max: number;
-    onChange: (event: SyntheticEvent<TSinchPaginationElement, CustomEvent<number>>) => void;
+    onChange?: (event: SyntheticEvent<TSinchPaginationElement, CustomEvent<number>>) => void;
+    'on-change': (e: CustomEvent<number>) => void;
 };

package/popover/index.js

@@ -159,8 +159,9 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
 
     _classPrivateFieldInitSpec(this, _onCloseReactHandler, {
       writable: true,
-      value: () => {
+      value: e => {
         getReactEventHandler(this, 'onClose')?.();
+        getReactEventHandler(this, 'on-close')?.(e);
       }
     });
 
@@ -201,7 +202,7 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
 
     _classPrivateFieldGet(this, _$dialog).addEventListener('mousedown', _classPrivateFieldGet(this, _onBackdropMouseDown));
 
-    this.addEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
+    this.addEventListener('-close', _classPrivateFieldGet(this, _onCloseReactHandler));
 
     _classPrivateFieldSet(this, _isConnected, true);
 
@@ -217,7 +218,7 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
 
     _classPrivateFieldGet(this, _$dialog).removeEventListener('mousedown', _classPrivateFieldGet(this, _onBackdropMouseDown));
 
-    this.removeEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
+    this.removeEventListener('-close', _classPrivateFieldGet(this, _onCloseReactHandler));
 
     _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
 
@@ -356,7 +357,5 @@ function _isOpen2() {
 }
 
 function _dispatchCloseEvent2() {
-  this.dispatchEvent(new CustomEvent('close', {
-    bubbles: true
-  }));
+  this.dispatchEvent(new CustomEvent('-close'));
 }

package/popover/types.d.ts

@@ -1,5 +1,4 @@
 import type { TRect, TSinchElementReact } from '../types';
-import type { SyntheticEvent } from 'react';
 export declare type TSinchPopoverOrientation = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'bottom' | 'top';
 export declare type TSinchPopoverElement = HTMLElement & {
     /** Open/close state */
@@ -10,7 +9,7 @@ export declare type TSinchPopoverElement = HTMLElement & {
     modal: boolean;
     readonly popoverRect: TRect;
     /** Close event */
-    addEventListener(type: 'close', listener: (e: CustomEvent<void>) => void): void;
+    addEventListener(type: '-close', listener: (e: CustomEvent<void>) => void): void;
     /** Open/close state */
     setAttribute(name: 'open', value: ''): void;
     /** Orientation, where it *points to* from origin */
@@ -28,5 +27,7 @@ export declare type TSinchPopoverReact = TSinchElementReact<TSinchPopoverElement
     /** Label that is used for a11y */
     'aria-label': string;
     /** Close event handler */
-    onClose?: (event: SyntheticEvent<TSinchPopoverElement, CustomEvent<void>>) => void;
+    onClose?: () => void;
+    /** Close event handler */
+    'on-close'?: (e: CustomEvent<void>) => void;
 };

package/radio/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, _findSelectedOption;
+var _$slot, _onOptionKeyDown, _onSlotChange, _onOptionChange, _onValueChange, _dispatchChangeEvent, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _getEnabledRadioElements, _findSelectedOption, _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, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;gap:8px;box-sizing:border-box;width:100%}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-radio', (_$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(), _findSelectedOption = new WeakSet(), class extends NectaryElement {
+defineCustomElement('sinch-radio', (_$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(), _findSelectedOption = new WeakSet(), _onChangeReactHandler = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -95,18 +95,39 @@ defineCustomElement('sinch-radio', (_$slot = new WeakMap(), _onOptionKeyDown = n
       }
     });
 
+    _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', 'radiogroup');
+
+    _classPrivateFieldGet(this, _$slot).addEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
+
+    _classPrivateFieldGet(this, _$slot).addEventListener('keydown', _classPrivateFieldGet(this, _onOptionKeyDown));
+
+    _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, _$slot).removeEventListener('keydown', _classPrivateFieldGet(this, _onOptionKeyDown));
+
+    _classPrivateFieldGet(this, _$slot).removeEventListener('option-change', _classPrivateFieldGet(this, _onOptionChange));
+
+    this.removeEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
   }
 
   static get observedAttributes() {
@@ -126,6 +147,10 @@ defineCustomElement('sinch-radio', (_$slot = new WeakMap(), _onOptionKeyDown = n
   }
 
   attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+
     switch (name) {
       case 'value':
         {
@@ -150,6 +175,9 @@ function _dispatchChangeEvent2(value) {
     detail: value,
     bubbles: true
   }));
+  this.dispatchEvent(new CustomEvent('-change', {
+    detail: value
+  }));
 }
 
 function _getFirstOption2() {

package/radio/types.d.ts

@@ -3,10 +3,12 @@ import type { SyntheticEvent } from 'react';
 export declare type TSinchRadioElement = HTMLElement & {
     value: string;
     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 TSinchRadioReact = TSinchElementReact<TSinchRadioElement> & {
     value: string;
     'aria-label': string;
-    onChange: (event: SyntheticEvent<TSinchRadioElement, CustomEvent<boolean>>) => void;
+    onChange?: (event: SyntheticEvent<TSinchRadioElement, CustomEvent<boolean>>) => void;
+    'on-change'?: (e: CustomEvent<string>) => void;
 };

package/radio-option/index.js

@@ -30,7 +30,7 @@ defineCustomElement('sinch-radio-option', (_$input = new WeakMap(), _$label = ne
       value: e => {
         e.stopPropagation();
         _classPrivateFieldGet(this, _$input).checked = false;
-        this.dispatchEvent(new CustomEvent('change', {
+        this.dispatchEvent(new CustomEvent('option-change', {
           bubbles: true,
           detail: this.value
         }));

package/search/types.d.ts

@@ -9,7 +9,6 @@ export declare type TSinchSearchElement = HTMLElement & {
     selectionEnd: HTMLInputElement['selectionEnd'];
     selectionDirection: HTMLInputElement['selectionDirection'];
     readonly dropdownRect: TRect;
-    addEventListener(type: 'change', listener: (e: CustomEvent<string>) => void): void;
     setAttribute(name: 'value', value: string): void;
     setAttribute(name: 'label', value: string): void;
     setAttribute(name: 'placeholder', value: string): void;

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;