@nectary/components 0.34.0 → 0.36.0

package/input/index.js

@@ -1,19 +1,18 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$input, _$label, _$optionalText, _$additionalText, _$invalidText, _$iconSlot, _$iconWrapper, _$rightSlot, _$rightWrapper, _cursorPos, _isPendingDk, _onCompositionStart, _onSelectionChange, _onInput, _onIconSlotChange, _onRightSlotChange;
+var _$input, _$label, _$optionalText, _$additionalText, _$invalidText, _$iconSlot, _$iconWrapper, _$rightSlot, _$rightWrapper, _cursorPos, _isPendingDk, _onCompositionStart, _onSelectionChange, _onInput, _onIconSlotChange, _onRightSlotChange, _onInputFocus, _onInputBlur, _onChangeReactHandler, _onFocusReactHandler, _onBlurReactHandler;
 
 function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
 
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 
-import '../stop-events';
-import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{width:100%;box-sizing:border-box}#input-wrapper{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;border-radius:var(--sinch-shape-radius-s);width:100%;height:48px;background-color:var(--sinch-color-snow-100)}#input{all:initial;flex:1;min-width:0;height:48px;padding:0 12px 0 44px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto)}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#border{position:absolute;border:1px solid var(--sinch-color-stormy-200);border-radius:var(--sinch-shape-radius-s);left:0;right:0;top:0;bottom:0;pointer-events:none}:host([invalidtext]:not([invalidtext=""]):not([disabled])) #border{border-color:var(--sinch-color-text-invalid)}#input:disabled{color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:disabled+#border{border-color:var(--sinch-color-snow-500)}#input:focus+#border{border-color:var(--sinch-color-stormy-600)}#input[type=password]{font-size:1.5em;letter-spacing:.1em}#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}#icon{position:absolute;left:12px;top:12px;pointer-events:none;--sinch-icon-size:24px}#icon.empty{display:none}#icon.empty~#input{padding-left:12px}#right{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;padding-right:8px}#right.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="input"></label><slot name="tooltip"></slot><span id="optional"></span></div><div id="input-wrapper"><div id="icon"><slot name="icon"></slot></div><input id="input" type="text"/><div id="border"></div><div id="right"><sinch-stop-events events="input,change,focusin,focusout"><slot name="right"></slot></sinch-stop-events></div></div><div id="bottom"><div id="invalid"></div><div id="additional"></div></div></div>';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{width:100%;box-sizing:border-box}#input-wrapper{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;border-radius:var(--sinch-shape-radius-s);width:100%;height:48px;background-color:var(--sinch-color-snow-100)}#input{all:initial;flex:1;min-width:0;height:48px;padding:0 12px 0 44px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto)}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#border{position:absolute;border:1px solid var(--sinch-color-stormy-200);border-radius:var(--sinch-shape-radius-s);left:0;right:0;top:0;bottom:0;pointer-events:none}:host([invalidtext]:not([invalidtext=""]):not([disabled])) #border{border-color:var(--sinch-color-text-invalid)}#input:disabled{color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:disabled+#border{border-color:var(--sinch-color-snow-500)}#input:focus+#border{border-color:var(--sinch-color-stormy-600)}#input[type=password]{font-size:1.5em;letter-spacing:.1em}#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}#icon{position:absolute;left:12px;top:12px;pointer-events:none;--sinch-icon-size:24px}#icon.empty{display:none}#icon.empty~#input{padding-left:12px}#right{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;padding-right:8px}#right.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="input"></label><slot name="tooltip"></slot><span id="optional"></span></div><div id="input-wrapper"><div id="icon"><slot name="icon"></slot></div><input id="input" type="text"/><div id="border"></div><div id="right"><slot name="right"></slot></div></div><div id="bottom"><div id="invalid"></div><div id="additional"></div></div></div>';
 import { inputTypes } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _$iconSlot = new WeakMap(), _$iconWrapper = new WeakMap(), _$rightSlot = new WeakMap(), _$rightWrapper = new WeakMap(), _cursorPos = new WeakMap(), _isPendingDk = new WeakMap(), _onCompositionStart = new WeakMap(), _onSelectionChange = new WeakMap(), _onInput = new WeakMap(), _onIconSlotChange = new WeakMap(), _onRightSlotChange = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _$iconSlot = new WeakMap(), _$iconWrapper = new WeakMap(), _$rightSlot = new WeakMap(), _$rightWrapper = new WeakMap(), _cursorPos = new WeakMap(), _isPendingDk = new WeakMap(), _onCompositionStart = new WeakMap(), _onSelectionChange = new WeakMap(), _onInput = new WeakMap(), _onIconSlotChange = new WeakMap(), _onRightSlotChange = new WeakMap(), _onInputFocus = new WeakMap(), _onInputBlur = new WeakMap(), _onChangeReactHandler = new WeakMap(), _onFocusReactHandler = new WeakMap(), _onBlurReactHandler = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -118,6 +117,9 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
             detail: nextValue,
             bubbles: true
           }));
+          this.dispatchEvent(new CustomEvent('-change', {
+            detail: nextValue
+          }));
         }
       }
     });
@@ -136,6 +138,41 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
       }
     });
 
+    _classPrivateFieldInitSpec(this, _onInputFocus, {
+      writable: true,
+      value: () => {
+        this.dispatchEvent(new CustomEvent('-focus'));
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onInputBlur, {
+      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));
 
@@ -169,10 +206,18 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
 
     _classPrivateFieldGet(this, _$input).addEventListener('keydown', _classPrivateFieldGet(this, _onSelectionChange));
 
+    _classPrivateFieldGet(this, _$input).addEventListener('focus', _classPrivateFieldGet(this, _onInputFocus));
+
+    _classPrivateFieldGet(this, _$input).addEventListener('blur', _classPrivateFieldGet(this, _onInputBlur));
+
     _classPrivateFieldGet(this, _$iconSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onIconSlotChange));
 
     _classPrivateFieldGet(this, _$rightSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onRightSlotChange));
 
+    this.addEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+    this.addEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
+    this.addEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
+
     _classPrivateFieldGet(this, _onIconSlotChange).call(this);
 
     _classPrivateFieldGet(this, _onRightSlotChange).call(this);
@@ -187,9 +232,17 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
 
     _classPrivateFieldGet(this, _$input).removeEventListener('keydown', _classPrivateFieldGet(this, _onSelectionChange));
 
+    _classPrivateFieldGet(this, _$input).removeEventListener('focus', _classPrivateFieldGet(this, _onInputFocus));
+
+    _classPrivateFieldGet(this, _$input).removeEventListener('blur', _classPrivateFieldGet(this, _onInputBlur));
+
     _classPrivateFieldGet(this, _$iconSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onIconSlotChange));
 
     _classPrivateFieldGet(this, _$rightSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onRightSlotChange));
+
+    this.removeEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+    this.removeEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
+    this.removeEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
   }
 
   static get observedAttributes() {

package/input/types.d.ts

@@ -22,7 +22,9 @@ export declare type TSinchInputElement = HTMLElement & {
     selectionEnd: number | null;
     selectionDirection: 'forward' | 'backward' | 'none' | null;
     /** 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;
     /** Text field type, `text` by default */
     setAttribute(name: 'type', value: TSinchInputType): void;
     /** Value */
@@ -59,6 +61,10 @@ export declare type TSinchInputReact = TSinchElementReact<TSinchInputElement> &
     invalidText?: string;
     /** Disabled */
     disabled?: boolean;
+    /** @deprecated Change value handler */
+    onChange?: (e: SyntheticEvent<TSinchInputElement, CustomEvent<string>>) => void;
     /** Change value handler */
-    onChange: (e: SyntheticEvent<TSinchInputElement, CustomEvent<string>>) => void;
+    'on-change'?: (e: CustomEvent<string>) => void;
+    'on-focus'?: (e: CustomEvent<void>) => void;
+    'on-blur'?: (e: CustomEvent<void>) => void;
 };

package/link/index.js

@@ -1,18 +1,18 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$anchor, _$text;
+var _$anchor, _$text, _onAnchorClick, _onAnchorFocus, _onAnchorBlur, _onFocusReactHandler, _onBlurReactHandler, _onClickReactHandler;
 
 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 '../icons/open-in-new';
-import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, isAttrTrue } from '../utils';
+import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, isAttrTrue, getReactEventHandler } from '../utils';
 const templateHTML = '<style>:host{display:inline;outline:0}a{font:var(--sinch-font-body);font-size:inherit;line-height:inherit;color:var(--sinch-color-text-link);fill:var(--sinch-color-text-link);--sinch-size-icon:1em}#icon{display:none;margin-left:.2em;vertical-align:-.25em}a:hover{color:var(--sinch-color-tropical-600);fill:var(--sinch-color-tropical-600)}:host([disabled]:not([disabled=false])) a{color:var(--sinch-color-tropical-200);pointer-events:none;cursor:initial;fill:var(--sinch-color-tropical-200)}:host([external]:not([external=false])) #icon{display:inline-block}</style><a><span id="content"></span><sinch-icon-open-in-new id="icon"></sinch-icon-open-in-new></a>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-link', (_$anchor = new WeakMap(), _$text = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-link', (_$anchor = new WeakMap(), _$text = new WeakMap(), _onAnchorClick = new WeakMap(), _onAnchorFocus = new WeakMap(), _onAnchorBlur = new WeakMap(), _onFocusReactHandler = new WeakMap(), _onBlurReactHandler = new WeakMap(), _onClickReactHandler = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -26,6 +26,52 @@ defineCustomElement('sinch-link', (_$anchor = new WeakMap(), _$text = new WeakMa
       value: void 0
     });
 
+    _classPrivateFieldInitSpec(this, _onAnchorClick, {
+      writable: true,
+      value: e => {
+        if (this.preventDefault) {
+          e.preventDefault();
+        }
+
+        this.dispatchEvent(new CustomEvent('-click'));
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onAnchorFocus, {
+      writable: true,
+      value: () => {
+        this.dispatchEvent(new CustomEvent('-focus'));
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onAnchorBlur, {
+      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')?.();
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onClickReactHandler, {
+      writable: true,
+      value: e => {
+        getReactEventHandler(this, 'on-click')?.(e);
+      }
+    });
+
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
 
@@ -34,6 +80,30 @@ defineCustomElement('sinch-link', (_$anchor = new WeakMap(), _$text = new WeakMa
     _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#content'));
   }
 
+  connectedCallback() {
+    _classPrivateFieldGet(this, _$anchor).addEventListener('click', _classPrivateFieldGet(this, _onAnchorClick));
+
+    _classPrivateFieldGet(this, _$anchor).addEventListener('focus', _classPrivateFieldGet(this, _onAnchorFocus));
+
+    _classPrivateFieldGet(this, _$anchor).addEventListener('blur', _classPrivateFieldGet(this, _onAnchorBlur));
+
+    this.addEventListener('-click', _classPrivateFieldGet(this, _onClickReactHandler));
+    this.addEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
+    this.addEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$anchor).removeEventListener('click', _classPrivateFieldGet(this, _onAnchorClick));
+
+    _classPrivateFieldGet(this, _$anchor).removeEventListener('focus', _classPrivateFieldGet(this, _onAnchorFocus));
+
+    _classPrivateFieldGet(this, _$anchor).removeEventListener('blur', _classPrivateFieldGet(this, _onAnchorBlur));
+
+    this.removeEventListener('-click', _classPrivateFieldGet(this, _onClickReactHandler));
+    this.removeEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
+    this.removeEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
+  }
+
   get text() {
     return getAttribute(this, 'text', '');
   }
@@ -66,6 +136,14 @@ defineCustomElement('sinch-link', (_$anchor = new WeakMap(), _$text = new WeakMa
     return getBooleanAttribute(this, 'external');
   }
 
+  set preventDefault(isPrevented) {
+    updateBooleanAttribute(this, 'preventdefault', isPrevented);
+  }
+
+  get preventDefault() {
+    return getBooleanAttribute(this, 'preventdefault');
+  }
+
   static get observedAttributes() {
     return ['text', 'href', 'external', 'disabled'];
   }

package/link/types.d.ts

@@ -4,14 +4,23 @@ export declare type TSinchLinkElement = HTMLElement & {
     href: string;
     disabled: boolean;
     external: boolean;
+    preventDefault: boolean;
+    addEventListener(type: '-click', listener: (e: CustomEvent<void>) => void): void;
+    addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
+    addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
     setAttribute(name: 'text', value: string): void;
     setAttribute(name: 'href', value: string): void;
     setAttribute(name: 'disabled', value: ''): void;
     setAttribute(name: 'external', value: ''): void;
+    setAttribute(name: 'preventdefault', value: ''): void;
 };
 export declare type TSinchLinkReact = TSinchElementReact<TSinchLinkElement> & {
     text: string;
     href: string;
     disabled?: boolean;
     external?: boolean;
+    preventDefault?: boolean;
+    'on-click'?: (e: CustomEvent<void>) => void;
+    'on-focus'?: (e: CustomEvent<void>) => void;
+    'on-blur'?: (e: CustomEvent<void>) => void;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "0.34.0",
+  "version": "0.36.0",
   "files": [
     "theme.css",
     "**/*/*.js",

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;