@nectary/components 2.1.0 → 2.1.2

package/accordion/index.js

@@ -56,10 +56,6 @@ defineCustomElement('sinch-accordion', class extends NectaryElement {
     const $elem = e.target;
     const value = e.detail;
     const result = this.multiple ? updateCsv(this.value, value, !getBooleanAttribute($elem, 'data-checked')) : getBooleanAttribute($elem, 'data-checked') ? '' : value;
-    this.dispatchEvent(new CustomEvent('change', {
-      detail: result,
-      bubbles: true
-    }));
     this.dispatchEvent(new CustomEvent('-change', {
       detail: result
     }));

package/accordion-item/index.js

@@ -2,7 +2,7 @@ import '../icon';
 import '../title';
 import '../text';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0;min-height:48px}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;height:100%;box-sizing:border-box;overflow:hidden;border-bottom:1px solid var(--sinch-comp-accordion-color-default-border-initial)}#button{all:initial;cursor:pointer;display:flex;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:48px;padding:12px 8px;--sinch-global-color-icon:var(--sinch-comp-accordion-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-accordion-size-icon)}#button>*{pointer-events:none}#button:disabled{cursor:initial;--sinch-global-color-icon:var(--sinch-comp-accordion-color-disabled-icon-initial)}#button::before{width:8px;height:8px;border-radius:50%;margin-left:2px;margin-right:8px}:host([status=success]) #button::before{content:"";background-color:var(--sinch-comp-accordion-color-default-status-success)}:host([status=warn]) #button::before{content:"";background-color:var(--sinch-comp-accordion-color-default-status-warning)}:host([status=error]) #button::before{content:"";background-color:var(--sinch-comp-accordion-color-default-status-error)}:host([status=info]) #button::before{content:"";background-color:var(--sinch-comp-accordion-color-default-status-info)}#title{flex:1;min-width:0;--sinch-comp-title-font:var(--sinch-comp-accordion-font-title);--sinch-global-color-text:var(--sinch-comp-accordion-color-default-title-initial)}#button:disabled>#title{--sinch-global-color-text:var(--sinch-comp-accordion-color-disabled-title-initial)}#content{display:none;overflow-y:auto;flex-shrink:1;min-height:0;padding:0 8px 18px}#dropdown-icon{transform:rotate(0)}#button[aria-expanded=true]>#dropdown-icon{transform:rotate(180deg)}#button[aria-expanded=true]+#content{display:block}#optional{--sinch-comp-text-font:var(--sinch-comp-accordion-font-optional-text);--sinch-global-color-text:var(--sinch-comp-accordion-color-default-optional-text-initial)}#button:disabled>#optional{--sinch-global-color-text:var(--sinch-comp-accordion-color-disabled-optional-text-initial)}</style><div id="wrapper"><button id="button" aria-controls="content" aria-expanded="false"><slot name="icon"></slot><sinch-title id="title" level="3" type="m" ellipsis></sinch-title><sinch-text id="optional" type="m"></sinch-text><sinch-icon id="dropdown-icon" name="keyboard_arrow_down"></sinch-icon></button><div id="content" role="region" aria-labelledby="button"><slot name="content"></slot></div></div>';
+const templateHTML = '<style>:host{display:block;outline:0;min-height:48px}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;height:100%;box-sizing:border-box;overflow:hidden;border-bottom:1px solid var(--sinch-comp-accordion-color-default-border-initial)}:host(:last-child)>#wrapper{border-bottom:none}#button{all:initial;cursor:pointer;display:flex;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:48px;padding:12px 8px;--sinch-global-color-icon:var(--sinch-comp-accordion-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-accordion-size-icon)}#button>*{pointer-events:none}#button:disabled{cursor:initial;--sinch-global-color-icon:var(--sinch-comp-accordion-color-disabled-icon-initial)}#button::before{width:8px;height:8px;border-radius:50%;margin-left:2px;margin-right:8px}:host([status=success]) #button::before{content:"";background-color:var(--sinch-comp-accordion-color-default-status-success)}:host([status=warn]) #button::before{content:"";background-color:var(--sinch-comp-accordion-color-default-status-warning)}:host([status=error]) #button::before{content:"";background-color:var(--sinch-comp-accordion-color-default-status-error)}:host([status=info]) #button::before{content:"";background-color:var(--sinch-comp-accordion-color-default-status-info)}#title{flex:1;min-width:0;--sinch-comp-title-font:var(--sinch-comp-accordion-font-title);--sinch-global-color-text:var(--sinch-comp-accordion-color-default-title-initial)}#button:disabled>#title{--sinch-global-color-text:var(--sinch-comp-accordion-color-disabled-title-initial)}#content{display:none;overflow-y:auto;flex-shrink:1;min-height:0;padding:0 8px 18px}#dropdown-icon{transform:rotate(0)}#button[aria-expanded=true]>#dropdown-icon{transform:rotate(180deg)}#button[aria-expanded=true]+#content{display:block}#optional{--sinch-comp-text-font:var(--sinch-comp-accordion-font-optional-text);--sinch-global-color-text:var(--sinch-comp-accordion-color-default-optional-text-initial)}#button:disabled>#optional{--sinch-global-color-text:var(--sinch-comp-accordion-color-disabled-optional-text-initial)}</style><div id="wrapper"><button id="button" aria-controls="content" aria-expanded="false"><slot name="icon"></slot><sinch-title id="title" level="3" type="m" ellipsis></sinch-title><sinch-text id="optional" type="m"></sinch-text><sinch-icon id="dropdown-icon" name="keyboard_arrow_down"></sinch-icon></button><div id="content" role="region" aria-labelledby="button"><slot name="content"></slot></div></div>';
 import { statusValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/action-menu/index.js

@@ -92,9 +92,9 @@ defineCustomElement('sinch-action-menu', class extends NectaryElement {
       case 'Enter':
       case 'Space':
         {
+          e.preventDefault();
           const $opt = this.#findSelectedOption();
           if ($opt !== null) {
-            e.preventDefault();
             $opt.click();
           }
           break;

package/action-menu-option/index.js

@@ -1,17 +1,15 @@
 import '../text';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{all:initial;display:flex;position:relative;box-sizing:border-box;height:40px;width:100%;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;background-color:var(--sinch-comp-action-menu-color-default-background-initial);--sinch-global-color-text:var(--sinch-comp-action-menu-color-default-text-initial);--sinch-global-color-icon:var(--sinch-comp-action-menu-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-action-menu-size-icon)}:host([data-selected])>#wrapper{background-color:var(--sinch-comp-action-menu-color-default-background-selected)}:host(:hover)>#wrapper{background-color:var(--sinch-comp-action-menu-color-default-background-hover)}:host([disabled])>#wrapper{cursor:initial;pointer-events:none;background-color:var(--sinch-comp-action-menu-color-disabled-background-initial);--sinch-global-color-text:var(--sinch-comp-action-menu-color-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-action-menu-color-disabled-icon-initial)}#content{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-action-menu-font-option)}::slotted(*){margin-left:-6px}</style><div id="wrapper"><slot name="icon"></slot><sinch-text id="content" type="m" ellipsis></sinch-text></div>';
+const templateHTML = '<style>:host{display:block;cursor:pointer}:host([disabled]){cursor:initial}#wrapper{all:initial;display:flex;position:relative;box-sizing:border-box;height:40px;width:100%;padding:8px 16px;align-items:center;gap:10px;user-select:none;background-color:var(--sinch-comp-action-menu-color-default-background-initial);--sinch-global-color-text:var(--sinch-comp-action-menu-color-default-text-initial);--sinch-global-color-icon:var(--sinch-comp-action-menu-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-action-menu-size-icon)}:host([data-selected])>#wrapper{background-color:var(--sinch-comp-action-menu-color-default-background-selected)}:host(:hover)>#wrapper{background-color:var(--sinch-comp-action-menu-color-default-background-hover)}:host([disabled])>#wrapper{pointer-events:none;background-color:var(--sinch-comp-action-menu-color-disabled-background-initial);--sinch-global-color-text:var(--sinch-comp-action-menu-color-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-action-menu-color-disabled-icon-initial)}#content{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-action-menu-font-option)}::slotted(*){margin-left:-6px}</style><div id="wrapper" inert><slot name="icon"></slot><sinch-text id="content" type="m" ellipsis></sinch-text></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-action-menu-option', class ActionMenuOption extends NectaryElement {
-  #$wrapper;
   #$content;
   #controller = null;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$wrapper = shadowRoot.querySelector('#wrapper');
     this.#$content = shadowRoot.querySelector('#content');
   }
   connectedCallback() {
@@ -20,7 +18,7 @@ defineCustomElement('sinch-action-menu-option', class ActionMenuOption extends N
       signal
     } = this.#controller;
     this.setAttribute('role', 'option');
-    this.#$wrapper.addEventListener('mousedown', this.#onMouseDown, {
+    this.addEventListener('mousedown', this.#onMouseDown, {
       signal
     });
     this.addEventListener('-click', this.#onClickReactHandler, {

package/button/index.js

@@ -1,6 +1,6 @@
 import { defineCustomElement, getBooleanAttribute, getAttribute, isAttrTrue, updateBooleanAttribute, updateAttribute, NectaryElement, getReactEventHandler, getLiteralAttribute, updateLiteralAttribute, Context, subscribeContext } from '../utils';
 import { DEFAULT_SIZE, sizeValues } from '../utils/size';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#button{all:initial;display:block;position:relative;width:100%;height:var(--sinch-local-size);cursor:pointer;--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-m);--sinch-local-font:var(--sinch-comp-button-font-size-m-text);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-m);--sinch-global-color-icon:var(--sinch-local-color-icon)}#button:disabled{cursor:initial}:host([data-size="l"])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-l);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-l);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-l);--sinch-local-font:var(--sinch-comp-button-font-size-l-text)}:host([data-size="m"])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-m);--sinch-local-font:var(--sinch-comp-button-font-size-m-text)}:host([data-size="s"])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-s);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-s);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-s);--sinch-local-font:var(--sinch-comp-button-font-size-s-text)}:host([type=primary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-primary-default-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-primary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-primary-default-icon-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-primary-default-outilne-focus);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-initial)}:host([type=secondary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-secondary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-secondary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-secondary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-initial)}:host([type=tertiary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-tertiary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-tertiary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-tertiary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-tertiary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-tertiary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-tertiary-initial)}:host([type=cta-primary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-primary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-cta-primary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-cta-primary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-cta-primary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-initial)}:host([type=cta-secondary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-secondary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-cta-secondary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-cta-secondary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-cta-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-initial)}:host([type=destructive])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-danger-default-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-danger-default-text-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-danger-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-destructive-initial)}:host([type=primary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-focus)}:host([type=secondary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-focus)}:host([type=tertiary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-tertiary-focus)}:host([type=cta-primary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-focus)}:host([type=cta-secondary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-focus)}:host([type=destructive]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-destructive-focus)}:host([type=primary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-hover)}:host([type=primary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-active)}:host([type=secondary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-hover)}:host([type=secondary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-active)}:host([type=tertiary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-tertiary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-tertiary-hover)}:host([type=tertiary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-tertiary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-tertiary-active)}:host([type=cta-primary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-hover)}:host([type=cta-primary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-active)}:host([type=cta-secondary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-hover)}:host([type=cta-secondary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-active)}:host([type=destructive]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-hover)}:host([type=destructive]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-active)}:host([type=primary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-primary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-primary-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-primary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-disabled)}:host([type=secondary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-secondary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-secondary-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-secondary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-disabled)}:host([type=tertiary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-tertiary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-tertiary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-tertiary-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-tertiary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-tertiary-disabled)}:host([type=cta-primary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-primary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-cta-primary-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-cta-primary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-disabled)}:host([type=cta-secondary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-secondary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-cta-secondary-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-cta-secondary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-disabled)}:host([type=destructive][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-danger-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-danger-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-danger-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-disabled)}#button::before{content:"";position:absolute;inset:0;background-color:var(--sinch-local-color-background);border:1px solid var(--sinch-local-color-border);border-radius:var(--sinch-local-shape-radius);box-shadow:var(--sinch-local-shadow);pointer-events:none}:host(:not([disabled]):active) #button::before{border-width:2px}:host(:focus-visible) #button::after{position:absolute;content:"";inset:-3px;border:2px solid var(--sinch-local-color-outline-focus);border-radius:calc(var(--sinch-local-shape-radius) + 3px);pointer-events:none}#content{position:relative;display:flex;align-items:center;justify-content:center;gap:.75em;width:100%;height:100%;padding:0 1em;box-sizing:border-box;pointer-events:none}#text{font:var(--sinch-local-font);color:var(--sinch-local-color-text);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex-shrink:1;min-width:0}</style><div id="button" inert><div id="content"><slot name="left-icon"></slot><span id="text"></span><slot name="right-icon"></slot></div></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;cursor:pointer}:host([disabled]){cursor:initial}#button{all:initial;display:block;position:relative;width:100%;height:var(--sinch-local-size);--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-m);--sinch-local-font:var(--sinch-comp-button-font-size-m-text);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-m);--sinch-global-color-icon:var(--sinch-local-color-icon)}:host([data-size="l"])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-l);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-l);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-l);--sinch-local-font:var(--sinch-comp-button-font-size-l-text)}:host([data-size="m"])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-m);--sinch-local-font:var(--sinch-comp-button-font-size-m-text)}:host([data-size="s"])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-s);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-s);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-s);--sinch-local-font:var(--sinch-comp-button-font-size-s-text)}:host([type=primary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-primary-default-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-primary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-primary-default-icon-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-primary-default-outilne-focus);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-initial)}:host([type=secondary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-secondary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-secondary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-secondary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-initial)}:host([type=tertiary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-tertiary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-tertiary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-tertiary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-tertiary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-tertiary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-tertiary-initial)}:host([type=cta-primary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-primary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-cta-primary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-cta-primary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-cta-primary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-initial)}:host([type=cta-secondary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-secondary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-cta-secondary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-cta-secondary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-cta-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-initial)}:host([type=destructive])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-danger-default-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-danger-default-text-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-danger-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-destructive-initial)}:host([type=primary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-focus)}:host([type=secondary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-focus)}:host([type=tertiary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-tertiary-focus)}:host([type=cta-primary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-focus)}:host([type=cta-secondary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-focus)}:host([type=destructive]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-destructive-focus)}:host([type=primary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-hover)}:host([type=primary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-active)}:host([type=secondary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-hover)}:host([type=secondary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-active)}:host([type=tertiary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-tertiary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-tertiary-hover)}:host([type=tertiary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-tertiary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-tertiary-active)}:host([type=cta-primary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-hover)}:host([type=cta-primary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-active)}:host([type=cta-secondary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-hover)}:host([type=cta-secondary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-active)}:host([type=destructive]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-hover)}:host([type=destructive]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-active)}:host([type=primary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-primary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-primary-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-primary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-disabled)}:host([type=secondary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-secondary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-secondary-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-secondary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-disabled)}:host([type=tertiary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-tertiary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-tertiary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-tertiary-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-tertiary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-tertiary-disabled)}:host([type=cta-primary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-primary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-cta-primary-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-cta-primary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-disabled)}:host([type=cta-secondary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-secondary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-cta-secondary-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-cta-secondary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-disabled)}:host([type=destructive][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-danger-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-danger-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-danger-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-disabled)}#button::before{content:"";position:absolute;inset:0;background-color:var(--sinch-local-color-background);border:1px solid var(--sinch-local-color-border);border-radius:var(--sinch-local-shape-radius);box-shadow:var(--sinch-local-shadow);pointer-events:none}:host(:not([disabled]):active) #button::before{border-width:2px}:host(:focus-visible) #button::after{position:absolute;content:"";inset:-3px;border:2px solid var(--sinch-local-color-outline-focus);border-radius:calc(var(--sinch-local-shape-radius) + 3px);pointer-events:none}#content{position:relative;display:flex;align-items:center;justify-content:center;gap:.75em;width:100%;height:100%;padding:0 1em;box-sizing:border-box;pointer-events:none}#text{font:var(--sinch-local-font);color:var(--sinch-local-color-text);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex-shrink:1;min-width:0}</style><div id="button" inert><div id="content"><slot name="left-icon"></slot><span id="text"></span><slot name="right-icon"></slot></div></div>';
 import { typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -139,6 +139,7 @@ defineCustomElement('sinch-button', class extends NectaryElement {
       case 'Space':
       case 'Enter':
         {
+          e.preventDefault();
           this.click();
         }
     }

package/checkbox/index.js

@@ -32,7 +32,10 @@ defineCustomElement('sinch-checkbox', class extends NectaryElement {
   static get observedAttributes() {
     return ['checked', 'disabled', 'text', 'invalid', 'indeterminate'];
   }
-  attributeChangedCallback(name, _, newVal) {
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (newVal === oldVal) {
+      return;
+    }
     switch (name) {
       case 'text':
         {
@@ -105,10 +108,6 @@ defineCustomElement('sinch-checkbox', class extends NectaryElement {
     e.stopPropagation();
     const isChecked = this.#$input.checked;
     this.#$input.checked = this.checked;
-    this.dispatchEvent(new CustomEvent('change', {
-      detail: isChecked,
-      bubbles: true
-    }));
     this.dispatchEvent(new CustomEvent('-change', {
       detail: isChecked
     }));

package/chip/index.js

@@ -1,7 +1,7 @@
 import '../text';
 import '../icon';
 import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, getReactEventHandler, isAttrTrue } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#button{all:initial;position:relative;display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:var(--sinch-comp-chip-size-container-m);padding:0 5px 0 9px;border-radius:var(--sinch-comp-chip-shape-radius);background-color:var(--sinch-comp-chip-color-neutral-default-background-initial);box-sizing:border-box;cursor:pointer;--sinch-global-color-text:var(--sinch-comp-chip-color-neutral-default-foreground-initial);--sinch-global-color-icon:var(--sinch-comp-chip-color-neutral-default-foreground-initial);--sinch-global-size-icon:var(--sinch-comp-chip-size-icon-m)}:host(:focus-visible)>#button::after{content:"";position:absolute;inset:-4px;border-radius:calc(var(--sinch-comp-chip-shape-radius) + 4px);border:2px solid var(--sinch-comp-chip-color-outiline-focus);pointer-events:none}#text{flex:1;--sinch-comp-text-font:var(--sinch-comp-chip-font-size-m-label)}:host([small]) #button{height:var(--sinch-comp-chip-size-container-s);padding:0 3px 0 7px;--sinch-global-size-icon:var(--sinch-comp-chip-size-icon-s)}:host([small]) #text{--sinch-comp-text-font:var(--sinch-comp-chip-font-size-s-label)}::slotted(*){margin-left:-4px}</style><div id="button" inert><slot name="icon"></slot><sinch-text id="text" type="xs" ellipsis></sinch-text><sinch-icon id="icon-close" name="cancel"></sinch-icon></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;cursor:pointer}#button{all:initial;position:relative;display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:var(--sinch-comp-chip-size-container-m);padding:0 5px 0 9px;border-radius:var(--sinch-comp-chip-shape-radius);background-color:var(--sinch-comp-chip-color-neutral-default-background-initial);box-sizing:border-box;--sinch-global-color-text:var(--sinch-comp-chip-color-neutral-default-foreground-initial);--sinch-global-color-icon:var(--sinch-comp-chip-color-neutral-default-foreground-initial);--sinch-global-size-icon:var(--sinch-comp-chip-size-icon-m)}:host(:focus-visible)>#button::after{content:"";position:absolute;inset:-4px;border-radius:calc(var(--sinch-comp-chip-shape-radius) + 4px);border:2px solid var(--sinch-comp-chip-color-outiline-focus);pointer-events:none}#text{flex:1;--sinch-comp-text-font:var(--sinch-comp-chip-font-size-m-label)}:host([small]) #button{height:var(--sinch-comp-chip-size-container-s);padding:0 3px 0 7px;--sinch-global-size-icon:var(--sinch-comp-chip-size-icon-s)}:host([small]) #text{--sinch-comp-text-font:var(--sinch-comp-chip-font-size-s-label)}::slotted(*){margin-left:-4px}</style><div id="button" inert><slot name="icon"></slot><sinch-text id="text" type="xs" ellipsis></sinch-text><sinch-icon id="icon-close" name="cancel"></sinch-icon></div>';
 import { getChipColorBg, getChipColorFg } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/color-menu/index.js

@@ -1,4 +1,4 @@
-import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getReactEventHandler, getRect, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateIntegerAttribute, subscribeContext } from '../utils';
+import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getReactEventHandler, getRect, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateIntegerAttribute, subscribeContext, isTargetEqual } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0}#listbox{display:flex;flex-direction:row;flex-wrap:wrap;padding:4px 10px;overflow-y:auto}#listbox.empty{display:none}</style><div id="listbox" role="presentation"><slot id="options"></slot></div>';
 const NUM_COLS_DEFAULT = 5;
 const ITEM_WIDTH = 44;
@@ -132,7 +132,7 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
   };
   #onListboxClick = e => {
     const $elem = e.target;
-    if ($elem === this.#$listbox) {
+    if (isTargetEqual(e, this.#$listbox)) {
       return;
     }
     this.focus();
@@ -156,9 +156,9 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
       case 'Space':
       case 'Enter':
         {
+          e.preventDefault();
           const $option = this.#findSelectedOption();
           if ($option !== null) {
-            e.preventDefault();
             this.#dispatchChangeEvent($option);
           }
           break;

package/date-picker/index.js

@@ -259,10 +259,6 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
         this.#date2 = dateTuple[1];
         this.#unsubscribeRangeHover();
         this.#render();
-        this.dispatchEvent(new CustomEvent('change', {
-          detail: value,
-          bubbles: true
-        }));
         this.dispatchEvent(new CustomEvent('-change', {
           detail: value
         }));
@@ -274,10 +270,6 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
       this.#render();
       return;
     }
-    this.dispatchEvent(new CustomEvent('change', {
-      detail: dateIso,
-      bubbles: true
-    }));
     this.dispatchEvent(new CustomEvent('-change', {
       detail: dateIso
     }));

package/emoji-picker/index.js

@@ -9,7 +9,7 @@ import '../tabs-icon-option';
 import '../emoji';
 import '../text';
 import '../icon';
-import { defineCustomElement, getAttribute, getBooleanAttribute, NectaryElement, updateAttribute, updateBooleanAttribute, getReactEventHandler, getRect, subscribeContext, debounceTimeout, setClass } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, NectaryElement, updateAttribute, updateBooleanAttribute, getReactEventHandler, getRect, debounceTimeout, setClass } from '../utils';
 import dataJson from './data.json';
 const templateHTML = '<style>:host{display:block}#wrapper{width:384px;max-height:504px;display:flex;flex-direction:column;gap:8px;padding:12px 0}#toolbar{display:flex;gap:8px;padding:0 12px}#search{flex:1;min-width:0}#search-clear:not(.active){display:none}#list-wrapper{overflow-y:auto;overflow-x:hidden;width:384px;box-sizing:border-box;scrollbar-gutter:stable}#list{display:flex;flex-wrap:wrap;gap:8px;padding:4px 12px 0;width:384px;box-sizing:border-box}#not-found{display:none;width:100%;height:48px;align-items:center;justify-content:center;pointer-events:none;user-select:none;--sinch-global-color-text:var(--sinch-comp-emoji-picker-color-default-text-not-found);--sinch-comp-text-font:var(--sinch-comp-emoji-picker-font-not-found)}#not-found.active{display:flex}#tabs svg{pointer-events:none;height:var(--sinch-global-size-icon);fill:var(--sinch-global-color-icon)}</style><div id="wrapper"><div id="toolbar"><sinch-input id="search" size="l" aria-label="Search emojis"><sinch-icon id="icon-search" slot="icon" name="search"></sinch-icon><sinch-icon-button id="search-clear" slot="right" aria-label="Clear"><sinch-icon slot="icon" name="close"></sinch-icon></sinch-icon-button></sinch-input><sinch-popover id="skin-popover" orientation="bottom-left" aria-label="Emoji skin tone select"><sinch-icon-button id="skin-button" slot="target" size="l" aria-label="Select emoji skin tones"><sinch-color-swatch id="skin-swatch" slot="icon" name="skintone-default"></sinch-color-swatch></sinch-icon-button><sinch-color-menu id="skin-menu" slot="content" cols="1" value="skintone-default" aria-label="Emoji skin tone menu"><sinch-color-menu-option value="skintone-default"></sinch-color-menu-option><sinch-color-menu-option value="skintone-light"></sinch-color-menu-option><sinch-color-menu-option value="skintone-light-medium"></sinch-color-menu-option><sinch-color-menu-option value="skintone-medium"></sinch-color-menu-option><sinch-color-menu-option value="skintone-medium-dark"></sinch-color-menu-option><sinch-color-menu-option value="skintone-dark"></sinch-color-menu-option></sinch-color-menu></sinch-popover></div><sinch-tabs id="tabs" aria-label="Emoji groups"><sinch-tabs-icon-option id="tab-emotions"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.5 11a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm-7 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"/><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2ZM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8Zm4.41-6.11a.745.745 0 0 0-1.03.24A3.98 3.98 0 0 1 12 16c-1.38 0-2.64-.7-3.38-1.88a.747.747 0 1 0-1.27.79A5.446 5.446 0 0 0 12 17.5c1.9 0 3.63-.97 4.65-2.58.22-.35.11-.81-.24-1.03Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-people"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/><path d="M15.89 8.11C15.5 7.72 14.83 7 13.53 7h-2.54a5.023 5.023 0 0 1-4.92-4.15.998.998 0 0 0-.98-.85c-.61 0-1.09.54-1 1.14A7.037 7.037 0 0 0 9 8.71V21c0 .55.45 1 1 1s1-.45 1-1v-5h2v5c0 .55.45 1 1 1s1-.45 1-1V10.05l3.24 3.24a.996.996 0 1 0 1.41-1.41l-3.76-3.77Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-animals"><svg slot="icon" viewBox="0 0 24 24"><path d="M17 14c-.24-.24-.44-.49-.65-.75C17.51 11.5 19 8.56 19 5c0-1.95-.74-3-2-3-1.54 0-3.96 2.06-5 5.97C10.96 4.06 8.54 2 7 2 5.74 2 5 3.05 5 5c0 3.56 1.49 6.5 2.65 8.25-.21.26-.41.51-.65.75-.25.25-2 1.39-2 3.5C5 19.98 7.02 22 9.5 22c1.5 0 2.5-.5 2.5-.5s1 .5 2.5.5c2.48 0 4.5-2.02 4.5-4.5 0-2.11-1.75-3.25-2-3.5Zm-.12-9.97c.06.17.12.48.12.97 0 2.84-1.11 5.24-2.07 6.78-.38-.26-.83-.48-1.4-.62.24-4.52 2.44-6.83 3.35-7.13ZM7 5c0-.49.06-.8.12-.97.91.3 3.11 2.61 3.36 7.13-.58.14-1.03.35-1.4.62C8.11 10.24 7 7.84 7 5Zm7.5 15c-1 0-1.8-.33-2.22-.56.42-.18.72-.71.72-.94 0-.28-.45-.5-1-.5s-1 .22-1 .5c0 .23.3.76.72.94-.42.23-1.22.56-2.22.56A2.5 2.5 0 0 1 7 17.5c0-.7.43-1.24 1-1.73.44-.36.61-.52 1.3-1.37.76-.95 1.09-1.4 2.7-1.4s1.94.45 2.7 1.4c.69.85.86 1.01 1.3 1.37.57.49 1 1.03 1 1.73a2.5 2.5 0 0 1-2.5 2.5Zm-.5-4c0 .41-.22.75-.5.75s-.5-.34-.5-.75.22-.75.5-.75.5.34.5.75Zm-3 0c0 .41-.22.75-.5.75s-.5-.34-.5-.75.22-.75.5-.75.5.34.5.75Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-food"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19 19H3c-.55 0-1 .45-1 1s.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1Zm1-16H9v2.4l1.81 1.45c.12.09.19.24.19.39v4.26c0 .28-.22.5-.5.5h-4c-.28 0-.5-.22-.5-.5V7.24c0-.15.07-.3.19-.39L8 5.4V3H6c-1.1 0-2 .9-2 2v8c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Zm0 5h-2V5h2v3Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-travel"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m21.99 14.77-1.43-4.11c-.14-.4-.52-.66-.97-.66H12.4c-.46 0-.83.26-.98.66L10 14.77v5.24c0 .55.45.99 1 .99s1-.45 1-1v-1h8v1a1 1 0 0 0 2 .01l-.01-5.24Zm-10.38-1.43.69-2c.05-.2.24-.34.46-.34h6.48c.21 0 .4.14.47.34l.69 2a.5.5 0 0 1-.47.66h-7.85a.5.5 0 0 1-.47-.66Zm.38 3.66c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1Zm8 0c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1Z"/><path d="M14 4.5V9h1V4c0-.55-.45-1-1-1H8c-.55 0-1 .45-1 1v4H3c-.55 0-1 .45-1 1v12h1V9.5c0-.28.22-.5.5-.5h4c.28 0 .5-.22.5-.5v-4c0-.28.22-.5.5-.5h5c.28 0 .5.22.5.5Z"/><path d="M7 11H5v2h2v-2Zm5-6h-2v2h2V5ZM7 15H5v2h2v-2Zm0 4H5v2h2v-2Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-sports"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19.52 2.49C17.18.15 12.9.62 9.97 3.55c-1.6 1.6-2.52 3.87-2.54 5.46-.02 1.58.26 3.89-1.35 5.5l-3.54 3.53c-.39.39-.39 1.02 0 1.42.39.39 1.02.39 1.42 0l3.53-3.54c1.61-1.61 3.92-1.33 5.5-1.35 1.58-.02 3.86-.94 5.46-2.54 2.93-2.92 3.41-7.2 1.07-9.54Zm-9.2 9.19c-1.53-1.53-1.05-4.61 1.06-6.72 2.11-2.11 5.18-2.59 6.72-1.06 1.53 1.53 1.05 4.61-1.06 6.72-2.11 2.11-5.18 2.59-6.72 1.06ZM18 17c.53 0 1.04.21 1.41.59.78.78.78 2.05 0 2.83-.37.37-.88.58-1.41.58-.53 0-1.04-.21-1.41-.59-.78-.78-.78-2.05 0-2.83.37-.37.88-.58 1.41-.58Zm0-2a3.998 3.998 0 0 0-2.83 6.83c.78.78 1.81 1.17 2.83 1.17a3.998 3.998 0 0 0 2.83-6.83A3.998 3.998 0 0 0 18 15Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-objects"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 3c-.46 0-.93.04-1.4.14-2.76.53-4.96 2.76-5.48 5.52-.48 2.61.48 5.01 2.22 6.56.43.38.66.91.66 1.47V19c0 1.1.9 2 2 2h.28a1.98 1.98 0 0 0 3.44 0H14c1.1 0 2-.9 2-2v-2.31c0-.55.22-1.09.64-1.46A6.956 6.956 0 0 0 19 10c0-3.87-3.13-7-7-7Zm.5 11h-1v-2.59L9.67 9.59l.71-.71L12 10.5l1.62-1.62.71.71-1.83 1.83V14Zm1 5c-.01 0-.02-.01-.03-.01V19h-2.94v-.01c-.01 0-.02.01-.03.01-.28 0-.5-.22-.5-.5s.22-.5.5-.5c.01 0 .02.01.03.01V18h2.94v.01c.01 0 .02-.01.03-.01.28 0 .5.22.5.5s-.22.5-.5.5Zm0-2h-3c-.28 0-.5-.22-.5-.5s.22-.5.5-.5h3c.28 0 .5.22.5.5s-.22.5-.5.5Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-symbols"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M10 5H4c-.55 0-1 .45-1 1s.45 1 1 1h2v3c0 .55.45 1 1 1s1-.45 1-1V7h2c.55 0 1-.45 1-1s-.45-1-1-1Zm0-3H4c-.55 0-1 .45-1 1s.45 1 1 1h6c.55 0 1-.45 1-1s-.45-1-1-1Zm10.89 11.11a.996.996 0 0 0-1.41 0l-6.36 6.36a.996.996 0 1 0 1.41 1.41l6.36-6.36a.996.996 0 0 0 0-1.41ZM14.5 16a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm-4-10A2.5 2.5 0 0 0 18 8.5V4h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1v3.51c-.42-.32-.93-.51-1.5-.51a2.5 2.5 0 0 0 0 5Zm-5.05 7.09a.996.996 0 1 0-1.41-1.41l-.71.71-.71-.71.35-.35a2.499 2.499 0 0 0-1.77-4.27 2.499 2.499 0 0 0-1.77 4.27l.35.35-1.06 1.06c-.98.98-.98 2.56 0 3.54.5.48 1.14.72 1.78.72.64 0 1.28-.24 1.77-.73l1.06-1.06.71.71a.996.996 0 1 0 1.41-1.41l-.71-.71.71-.71Zm-4.6-3.89a.5.5 0 0 1 .35-.15.5.5 0 0 1 .35.15c.19.2.19.51 0 .71l-.35.35-.35-.36a.5.5 0 0 1-.15-.35.5.5 0 0 1 .15-.35Zm0 5.65a.5.5 0 0 1-.35.15.5.5 0 0 1-.35-.15.5.5 0 0 1-.15-.35.5.5 0 0 1 .15-.35l1.06-1.06.71.71-1.07 1.05Z"/></svg></sinch-tabs-icon-option></sinch-tabs><div id="list-wrapper"><div id="list"></div><div id="not-found"><sinch-text type="m">No results</sinch-text></div></div></div>';
 const groupLabels = ['Emotions', 'People', 'Animals and nature', 'Food and drinks', 'Travel and places', 'Sports and activities', 'Objects', 'Symbols and flags'];
@@ -63,9 +63,6 @@ defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
     this.#$searchClearButton.addEventListener('-click', this.#onSearchClearClick, {
       signal
     });
-    this.addEventListener('keydown', this.#onListboxKeyDown, {
-      signal
-    });
     this.#$skinButton.addEventListener('-click', this.#onSkinButtonClick, {
       signal
     });
@@ -81,8 +78,6 @@ defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
     this.addEventListener('-change', this.#onChangeReactHandler, {
       signal
     });
-    subscribeContext(this, 'keydown', this.#onContextKeyDown, signal);
-    subscribeContext(this, 'visibility', this.#onContextVisibility, signal);
     this.#updateTabs();
     this.#updateEmojis();
   }
@@ -118,34 +113,6 @@ defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
       detail: value
     }));
   };
-  #onContextKeyDown = e => {
-    this.#handleKeydown(e.detail);
-  };
-  #onContextVisibility = e => {
-    if (e.detail) {} else {}
-  };
-  #onListboxKeyDown = e => {
-    this.#handleKeydown(e);
-  };
-  #handleKeydown(e) {
-    switch (e.code) {
-      case 'Space':
-      case 'Enter':
-        {
-          break;
-        }
-      case 'ArrowUp':
-        {
-          e.preventDefault();
-          break;
-        }
-      case 'ArrowDown':
-        {
-          e.preventDefault();
-          break;
-        }
-    }
-  }
   #onTabsChange = e => {
     const value = e.detail;
     updateAttribute(this.#$tabs, 'value', value);

package/file-picker/index.js

@@ -7,6 +7,7 @@ defineCustomElement('sinch-file-picker', class extends NectaryElement {
   #$input;
   #$targetSlot;
   #$target = null;
+  #controller = null;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -16,18 +17,19 @@ defineCustomElement('sinch-file-picker', class extends NectaryElement {
     this.#$targetSlot = shadowRoot.querySelector('slot');
   }
   connectedCallback() {
-    this.#$targetSlot.addEventListener('slotchange', this.#onTargetSlotChange);
-    this.#$input.addEventListener('change', this.#onInputChange);
-    this.addEventListener('-change', this.#onChangeReactHandler);
-    this.addEventListener('-invalid', this.#onInvalidReactHandler);
+    this.#controller = new AbortController();
+    const options = {
+      signal: this.#controller.signal
+    };
+    this.#$targetSlot.addEventListener('slotchange', this.#onTargetSlotChange, options);
+    this.#$input.addEventListener('change', this.#onInputChange, options);
+    this.addEventListener('-change', this.#onChangeReactHandler, options);
+    this.addEventListener('-invalid', this.#onInvalidReactHandler, options);
     this.#onTargetSlotChange();
   }
   disconnectedCallback() {
-    this.#$targetSlot.removeEventListener('slotchange', this.#onTargetSlotChange);
-    this.#$input.removeEventListener('change', this.#onInputChange);
-    this.removeEventListener('-change', this.#onChangeReactHandler);
-    this.removeEventListener('-invalid', this.#onInvalidReactHandler);
-    this.#$target?.removeEventListener('-click', this.#onTargetClick);
+    this.#controller.abort();
+    this.#controller = null;
     this.#$target = null;
   }
   static get observedAttributes() {

package/icon-button/index.js

@@ -146,6 +146,7 @@ defineCustomElement('sinch-icon-button', class extends NectaryElement {
       case 'Space':
       case 'Enter':
         {
+          e.preventDefault();
           this.click();
         }
     }

package/input/index.js

@@ -242,10 +242,6 @@ defineCustomElement('sinch-input', class extends NectaryElement {
       }
       this.#isPendingDk = false;
       this.#cursorPos = nextCursorPos;
-      this.dispatchEvent(new CustomEvent('change', {
-        detail: nextValue,
-        bubbles: true
-      }));
       this.dispatchEvent(new CustomEvent('-change', {
         detail: nextValue
       }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/pagination/index.js

@@ -120,10 +120,6 @@ defineCustomElement('sinch-pagination', class extends NectaryElement {
   }
   #dispatchChangeEvent(value) {
     const detail = this.#clamp(value);
-    this.dispatchEvent(new CustomEvent('change', {
-      detail,
-      bubbles: true
-    }));
     this.dispatchEvent(new CustomEvent('-change', {
       detail
     }));

package/pagination/types.d.ts

@@ -5,7 +5,6 @@ export type TSinchPaginationElement = HTMLElement & {
     readonly prevButtonRect: TRect;
     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;

package/radio/index.js

@@ -95,10 +95,6 @@ defineCustomElement('sinch-radio', class extends NectaryElement {
     }
   }
   #dispatchChangeEvent(value) {
-    this.dispatchEvent(new CustomEvent('change', {
-      detail: value,
-      bubbles: true
-    }));
     this.dispatchEvent(new CustomEvent('-change', {
       detail: value
     }));

package/radio/types.d.ts

@@ -2,7 +2,6 @@ import type { TSinchElementReact } from '../types';
 export type TSinchRadioElement = HTMLElement & {
     value: string;
     invalid: 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;
     setAttribute(name: 'invalid', value: ''): void;

package/segment-collapse/index.js

@@ -50,10 +50,6 @@ defineCustomElement('sinch-segment-collapse', class extends NectaryElement {
   }
   #onClick = () => {
     const detail = !this.value;
-    this.dispatchEvent(new CustomEvent('change', {
-      detail,
-      bubbles: true
-    }));
     this.dispatchEvent(new CustomEvent('-change', {
       detail
     }));

package/segment-collapse/types.d.ts

@@ -1,7 +1,6 @@
 import type { TSinchElementReact } from '../types';
 export 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;
 };

package/segmented-control/index.js

@@ -48,10 +48,6 @@ defineCustomElement('sinch-segmented-control', class extends NectaryElement {
   #onOptionChange = e => {
     e.stopPropagation();
     const detail = e.detail;
-    this.dispatchEvent(new CustomEvent('change', {
-      detail,
-      bubbles: true
-    }));
     this.dispatchEvent(new CustomEvent('-change', {
       detail
     }));

package/segmented-icon-control/index.js

@@ -56,10 +56,6 @@ defineCustomElement('sinch-segmented-icon-control', class extends NectaryElement
     const $elem = e.target;
     const value = e.detail;
     const detail = this.multiple ? updateCsv(this.value, value, !getBooleanAttribute($elem, 'data-checked')) : value;
-    this.dispatchEvent(new CustomEvent('change', {
-      detail,
-      bubbles: true
-    }));
     this.dispatchEvent(new CustomEvent('-change', {
       detail
     }));

package/select-button/index.js

@@ -2,7 +2,7 @@ import '../text';
 import '../icon';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, setClass, subscribeContext, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute, Context } from '../utils';
 import { DEFAULT_SIZE, sizeValues } from '../utils/size';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:var(--sinch-local-size);padding:0 8px 0 12px;background-color:var(--sinch-comp-select-button-color-default-background-initial);border-radius:var(--sinch-local-shape-radius);cursor:pointer;--sinch-local-size:var(--sinch-comp-select-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-m);--sinch-global-color-icon:var(--sinch-comp-select-button-color-default-icon-initial)}:host([data-size="l"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-l);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-l);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-l)}:host([data-size="m"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-m)}:host([data-size="s"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-s);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-s);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-s)}:host([data-size="l"]) #wrapper{padding:0 12px}:host([data-size="m"]) #wrapper{padding:0 8px 0 12px}:host([data-size="s"]) #wrapper{padding:0 4px 0 12px}:host([disabled]) #wrapper{--sinch-global-color-icon:var(--sinch-comp-select-button-color-disabled-icon-initial);cursor:initial}#text{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-button-font-input);--sinch-global-color-text:var(--sinch-comp-select-button-color-default-text-initial)}#text:empty{display:none}#placeholder{display:none;flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-button-font-placeholder);--sinch-global-color-text:var(--sinch-comp-select-button-color-default-placeholder-initial)}#text:empty+#placeholder{display:block}#border{position:absolute;border:1px solid var(--sinch-comp-select-button-color-default-border-initial);border-radius:var(--sinch-local-shape-radius);inset:0;pointer-events:none}:host(:focus-visible) #border{border-color:var(--sinch-comp-select-button-color-default-border-focus);border-width:2px}:host([invalid]) #border{border-color:var(--sinch-comp-select-button-color-invalid-border-initial)}:host([disabled]) #border{border-color:var(--sinch-comp-select-button-color-disabled-border-initial)}:host([disabled]) #text{--sinch-global-color-text:var(--sinch-comp-select-button-color-disabled-text-initial)}:host([disabled]) #placeholder{--sinch-global-color-text:var(--sinch-comp-select-button-color-disabled-placeholder-initial)}#left{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;margin-left:-4px}#left.empty{display:none}#dropdown-icon{margin-left:-4px}</style><div id="wrapper" inert><div id="border"></div><div id="left"><slot name="left"></slot></div><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text><sinch-text id="placeholder" type="m" ellipsis></sinch-text><sinch-icon id="dropdown-icon" name="keyboard_arrow_down"></sinch-icon></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;cursor:pointer}:host([disabled]){cursor:initial}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:var(--sinch-local-size);padding:0 8px 0 12px;background-color:var(--sinch-comp-select-button-color-default-background-initial);border-radius:var(--sinch-local-shape-radius);--sinch-local-size:var(--sinch-comp-select-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-m);--sinch-global-color-icon:var(--sinch-comp-select-button-color-default-icon-initial)}:host([data-size="l"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-l);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-l);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-l)}:host([data-size="m"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-m)}:host([data-size="s"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-s);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-s);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-s)}:host([data-size="l"]) #wrapper{padding:0 12px}:host([data-size="m"]) #wrapper{padding:0 8px 0 12px}:host([data-size="s"]) #wrapper{padding:0 4px 0 12px}:host([disabled]) #wrapper{--sinch-global-color-icon:var(--sinch-comp-select-button-color-disabled-icon-initial)}#text{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-button-font-input);--sinch-global-color-text:var(--sinch-comp-select-button-color-default-text-initial)}#text:empty{display:none}#placeholder{display:none;flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-button-font-placeholder);--sinch-global-color-text:var(--sinch-comp-select-button-color-default-placeholder-initial)}#text:empty+#placeholder{display:block}#border{position:absolute;border:1px solid var(--sinch-comp-select-button-color-default-border-initial);border-radius:var(--sinch-local-shape-radius);inset:0;pointer-events:none}:host(:focus-visible) #border{border-color:var(--sinch-comp-select-button-color-default-border-focus);border-width:2px}:host([invalid]) #border{border-color:var(--sinch-comp-select-button-color-invalid-border-initial)}:host([disabled]) #border{border-color:var(--sinch-comp-select-button-color-disabled-border-initial)}:host([disabled]) #text{--sinch-global-color-text:var(--sinch-comp-select-button-color-disabled-text-initial)}:host([disabled]) #placeholder{--sinch-global-color-text:var(--sinch-comp-select-button-color-disabled-placeholder-initial)}#left{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;margin-left:-4px}#left.empty{display:none}#dropdown-icon{margin-left:-4px}</style><div id="wrapper" inert><div id="border"></div><div id="left"><slot name="left"></slot></div><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text><sinch-text id="placeholder" type="m" ellipsis></sinch-text><sinch-icon id="dropdown-icon" name="keyboard_arrow_down"></sinch-icon></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-select-button', class extends NectaryElement {
@@ -180,6 +180,7 @@ defineCustomElement('sinch-select-button', class extends NectaryElement {
       case 'Space':
       case 'Enter':
         {
+          e.preventDefault();
           this.click();
         }
     }

package/select-menu/index.js

@@ -2,7 +2,7 @@ import '../input';
 import '../icon-button';
 import '../icon';
 import '../text';
-import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, unpackCsv, getFirstCsvValue, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateExplicitBooleanAttribute, updateIntegerAttribute, debounceTimeout, setClass, subscribeContext, hasClass } from '../utils';
+import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, unpackCsv, getFirstCsvValue, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateExplicitBooleanAttribute, updateIntegerAttribute, debounceTimeout, setClass, subscribeContext, hasClass, isTargetEqual } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0}#listbox{overflow-y:auto}#search{display:none;margin:10px}#search.active{display:block}#search-clear:not(.active){display:none}#not-found{display:flex;align-items:center;justify-content:center;width:100%;height:30px;margin-bottom:10px;pointer-events:none;user-select:none;--sinch-comp-text-font:var(--sinch-comp-select-menu-font-not-found-text);--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-not-found-text-initial)}#not-found:not(.active){display:none}::slotted(.hidden){display:none}</style><sinch-input id="search" size="s" placeholder="Search"><sinch-icon id="icon-search" slot="icon" name="search"></sinch-icon><sinch-icon-button id="search-clear" slot="right"><sinch-icon slot="icon" name="close"></sinch-icon></sinch-icon-button></sinch-input><div id="not-found"><sinch-text type="m">No results</sinch-text></div><div id="listbox" role="presentation"><slot></slot></div>';
 const ITEM_HEIGHT = 40;
 const NUM_ITEMS_SEARCH = 7;
@@ -39,7 +39,6 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
     this.addEventListener('keydown', this.#onListboxKeyDown, options);
     this.addEventListener('focus', this.#onFocus, options);
     this.addEventListener('blur', this.#onListboxBlur, options);
-    this.#$listbox.addEventListener('mousedown', this.#onListboxMousedown, options);
     this.#$listbox.addEventListener('click', this.#onListboxClick, options);
     this.#$search.addEventListener('-change', this.#onSearchChange, options);
     this.#$searchClear.addEventListener('-click', this.#onSearchClearClick, options);
@@ -109,20 +108,15 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
       this.#$search.focus();
     }
   };
-  #onListboxMousedown = e => {
-    const $elem = e.target;
-    if (!getBooleanAttribute($elem, 'disabled')) {
-      this.#dispatchChangeEvent($elem);
-    }
-  };
   #onListboxBlur = () => {
     this.#selectOption(null);
   };
   #onListboxClick = e => {
     const $elem = e.target;
     this.focus();
-    if (!getBooleanAttribute($elem, 'disabled')) {
+    if (!isTargetEqual(e, this.#$listbox) && !getBooleanAttribute($elem, 'disabled')) {
       this.#selectOption($elem);
+      this.#dispatchChangeEvent($elem);
     }
   };
   #onSearchChange = e => {
@@ -167,9 +161,9 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
       case 'Space':
       case 'Enter':
         {
+          e.preventDefault();
           const $option = this.#findSelectedOption();
           if ($option !== null) {
-            e.preventDefault();
             this.#dispatchChangeEvent($option);
           }
           break;

package/skeleton/index.js

@@ -1,4 +1,4 @@
-import { defineCustomElement, getUid, isAttrTrue, NectaryElement, shouldReduceMotion } from '../utils';
+import { attrValueToInteger, defineCustomElement, getCssVar, getUid, isAttrTrue, NectaryElement, shouldReduceMotion } from '../utils';
 const templateHTML = '<style>:host{display:block}#wrapper{position:relative;display:flex;flex-direction:column;gap:16px;height:100%;box-sizing:border-box;overflow:hidden}:host([card]:not([card=false]))>#wrapper{padding:16px;background-color:var(--sinch-sys-color-container-main-default);border-radius:var(--sinch-sys-shape-radius-l);border:1px solid var(--sinch-sys-color-border-light)}#shimmer{position:absolute;inset:0;background-image:linear-gradient(90deg,transparent 0,var(--sinch-sys-color-container-contrast-primary-default) 100px,transparent 200px);clip-path:url("#clip")}#svg{display:block;width:0;height:0}</style><svg id="svg"><defs><clipPath id="clip"></clipPath></defs></svg><div id="wrapper"><slot></slot><div id="shimmer"></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -7,14 +7,20 @@ const BORDER_WIDTH = 1;
 defineCustomElement('sinch-skeleton', class extends NectaryElement {
   #animation = null;
   #shimmer;
+  #wrapper;
+  #slot;
   #controller = null;
   #clip;
   #borderWidth = 0;
+  #bb = null;
+  #observer = null;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#shimmer = shadowRoot.querySelector('#shimmer');
+    this.#slot = shadowRoot.querySelector('slot');
+    this.#wrapper = shadowRoot.querySelector('#wrapper');
     this.#clip = shadowRoot.querySelector('#clip');
   }
   connectedCallback() {
@@ -23,10 +29,24 @@ defineCustomElement('sinch-skeleton', class extends NectaryElement {
     this.#clip.setAttribute('id', id);
     this.#controller = new AbortController();
     if (!shouldReduceMotion()) {
-      this.addEventListener('skeleton-item-data', this.#onSkeletonItemData, {
+      this.#slot.addEventListener('slotchange', this.#onSlotChange, {
         signal: this.#controller.signal
       });
-      this.#updateAnimation();
+      this.#observer = new IntersectionObserver(entries => {
+        this.#bb = entries[0].boundingClientRect;
+        if (this.#bb.width === 0) {
+          return;
+        }
+        this.#updateAnimation();
+        for (const child of this.#slot.assignedElements()) {
+          this.#handleSkeletonItemData(child);
+        }
+        this.#observer.disconnect();
+        this.#observer = null;
+      }, {
+        threshold: 1
+      });
+      this.#observer.observe(this.#wrapper);
     }
   }
   disconnectedCallback() {
@@ -34,6 +54,8 @@ defineCustomElement('sinch-skeleton', class extends NectaryElement {
     this.#animation = null;
     this.#controller.abort();
     this.#controller = null;
+    this.#observer?.disconnect();
+    this.#observer = null;
   }
   static get observedAttributes() {
     return ['card'];
@@ -51,7 +73,7 @@ defineCustomElement('sinch-skeleton', class extends NectaryElement {
     }
   }
   #updateAnimation() {
-    const bb = this.getBoundingClientRect();
+    const bb = this.#bb;
     const bgWidth = bb.width * 4;
     this.#shimmer.style.setProperty('background-size', `${bgWidth}px`);
     this.#animation = this.#shimmer.animate({
@@ -61,15 +83,29 @@ defineCustomElement('sinch-skeleton', class extends NectaryElement {
       iterations: Infinity
     });
   }
-  #onSkeletonItemData = e => {
-    const bb = this.getBoundingClientRect();
-    const data = e.detail;
+  #onSlotChange = () => {
+    this.#clip.innerHTML = '';
+    if (this.#bb === null) {
+      return;
+    }
+    for (const child of this.#slot.assignedElements()) {
+      this.#handleSkeletonItemData(child);
+    }
+  };
+  #handleSkeletonItemData(child) {
+    const data = child.getBoundingClientRect();
+    const radiusStr = getCssVar(child, '--sinch-local-shape-radius') ?? '0';
+    const radius = attrValueToInteger(radiusStr, {
+      min: 0,
+      defaultValue: 0
+    });
+    const bb = this.#bb;
     const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
     rect.setAttribute('x', (data.x - bb.x - this.#borderWidth).toString());
     rect.setAttribute('y', (data.y - bb.y - this.#borderWidth).toString());
     rect.setAttribute('width', data.width.toString());
     rect.setAttribute('height', data.height.toString());
-    rect.setAttribute('rx', data.radius.toString());
+    rect.setAttribute('rx', radius.toString());
     this.#clip.appendChild(rect);
-  };
+  }
 });

package/skeleton-item/index.js

@@ -1,4 +1,4 @@
-import { defineCustomElement, getCssVar, NectaryElement, attrValueToInteger, shouldReduceMotion } from '../utils';
+import { defineCustomElement, NectaryElement } from '../utils';
 const templateHTML = '<style>:host{display:block;height:var(--sinch-sys-size-m);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-m)}:host([size=xs]){height:var(--sinch-sys-size-xs);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-xs)}:host([size="s"]){height:var(--sinch-sys-size-s);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-s)}:host([size="m"]){height:var(--sinch-sys-size-m);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-m)}:host([size="l"]){height:var(--sinch-sys-size-l);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-l)}#content{height:100%;background-color:var(--sinch-sys-color-border-light);border-radius:var(--sinch-local-shape-radius)}</style><div id="content"></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -8,31 +8,4 @@ defineCustomElement('sinch-skeleton-item', class extends NectaryElement {
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
   }
-  connectedCallback() {
-    if (!shouldReduceMotion()) {
-      requestAnimationFrame(() => {
-        const {
-          x,
-          y,
-          width,
-          height
-        } = this.getBoundingClientRect();
-        const radiusStr = getCssVar(this, '--sinch-shape-radius') ?? '0';
-        const radius = attrValueToInteger(radiusStr, {
-          min: 0,
-          defaultValue: 0
-        });
-        this.dispatchEvent(new CustomEvent('skeleton-item-data', {
-          bubbles: true,
-          detail: {
-            x,
-            y,
-            width,
-            height,
-            radius
-          }
-        }));
-      });
-    }
-  }
 });

package/table-row/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getBooleanAttribute, isAttrTrue, NectaryElement, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:table-row;background-color:var(--sinch-comp-table-color-row-default-background-initial)}:host([selected]){background-color:var(--sinch-comp-table-color-row-checked-background-initial)}:host(:hover){background-color:var(--sinch-comp-table-color-row-default-background-hover)}:host([sticky]) ::slotted(sinch-table-head-cell){position:sticky;top:0;z-index:1;background-color:var(--sinch-comp-table-color-row-default-background-sticky)}</style><slot></slot>';
+const templateHTML = '<style>:host{display:table-row;background-color:var(--sinch-comp-table-color-row-default-background-initial)}:host([selected]){background-color:var(--sinch-comp-table-color-row-checked-background-initial)}:host(:hover){background-color:var(--sinch-comp-table-color-row-default-background-hover)}:host([sticky]) ::slotted(sinch-table-head-cell){position:sticky;top:0;z-index:1;background-color:var(--sinch-comp-table-color-row-default-background-sticky)}:host(:last-child) ::slotted(sinch-table-cell){border-bottom:none}</style><slot></slot>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-table-row', class extends NectaryElement {

package/tabs/index.js

@@ -69,10 +69,6 @@ defineCustomElement('sinch-tabs', class extends NectaryElement {
     }
   }
   #dispatchChangeEvent(value) {
-    this.dispatchEvent(new CustomEvent('change', {
-      detail: value,
-      bubbles: true
-    }));
     this.dispatchEvent(new CustomEvent('-change', {
       detail: value
     }));

package/textarea/index.js

@@ -185,10 +185,6 @@ defineCustomElement('sinch-textarea', class extends NectaryElement {
       }
       this.#isPendingDk = false;
       this.#cursorPos = nextCursorPos;
-      this.dispatchEvent(new CustomEvent('change', {
-        detail: nextValue,
-        bubbles: true
-      }));
       this.dispatchEvent(new CustomEvent('-change', {
         detail: nextValue
       }));

package/tile-control/index.js

@@ -79,10 +79,6 @@ defineCustomElement('sinch-tile-control', class extends NectaryElement {
     const $elem = e.target;
     const value = e.detail;
     const detail = this.multiple ? updateCsv(this.value, value, !getBooleanAttribute($elem, 'data-checked')) : value;
-    this.dispatchEvent(new CustomEvent('change', {
-      detail,
-      bubbles: true
-    }));
     this.dispatchEvent(new CustomEvent('-change', {
       detail
     }));

package/time-picker/index.js

@@ -97,7 +97,7 @@ defineCustomElement('sinch-time-picker', class extends NectaryElement {
       signal: this.#controller.signal
     };
     this.#$pickerTouch.addEventListener('click', this.#onPickerClick, options);
-    this.#$ampm.addEventListener('change', this.#onAmPmChange, options);
+    this.#$ampm.addEventListener('-change', this.#onAmPmChange, options);
     this.#$submitButton.addEventListener('click', this.#onSubmitButtonClick, options);
     this.#$needleHour.addEventListener('keydown', this.#onHoursKeydown, options);
     this.#$needleMinute.addEventListener('keydown', this.#onMinutesKeydown, options);
@@ -269,7 +269,6 @@ defineCustomElement('sinch-time-picker', class extends NectaryElement {
     this.#$needleMinute.style.transform = `rotate(${minuteCssDeg}deg)`;
   }
   #onAmPmChange = e => {
-    e.stopPropagation();
     const value = e.detail;
     switch (value) {
       case 'am':
@@ -292,10 +291,6 @@ defineCustomElement('sinch-time-picker', class extends NectaryElement {
   };
   #onSubmitButtonClick = () => {
     const value = stringifyTime(this.#hour, this.#minute);
-    this.dispatchEvent(new CustomEvent('change', {
-      bubbles: true,
-      detail: value
-    }));
     this.dispatchEvent(new CustomEvent('-change', {
       detail: value
     }));

package/toggle/index.js

@@ -107,10 +107,6 @@ defineCustomElement('sinch-toggle', class extends NectaryElement {
     e.stopPropagation();
     const isChecked = this.#$input.checked;
     this.#$input.checked = this.checked;
-    this.dispatchEvent(new CustomEvent('change', {
-      detail: isChecked,
-      bubbles: true
-    }));
     this.dispatchEvent(new CustomEvent('-change', {
       detail: isChecked
     }));

package/toggle/types.d.ts

@@ -5,7 +5,6 @@ export type TSinchToggleElement = HTMLElement & {
     labeled: boolean;
     disabled: boolean;
     text: string | null;
-    addEventListener(type: 'change', listener: (e: CustomEvent<boolean>) => void): void;
     addEventListener(type: '-change', listener: (e: CustomEvent<boolean>) => void): void;
     setAttribute(name: 'checked', value: ''): void;
     setAttribute(name: 'small', value: ''): void;