@nectary/components 2.1.4 → 2.1.5

package/action-menu/index.js

@@ -10,9 +10,7 @@ defineCustomElement('sinch-action-menu', class extends NectaryElement {
   #controller = null;
   constructor() {
     super();
-    const shadowRoot = this.attachShadow({
-      delegatesFocus: false
-    });
+    const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$optionSlot = shadowRoot.querySelector('slot');
     this.#$listbox = shadowRoot.querySelector('#listbox');

package/button/index.js

@@ -11,9 +11,7 @@ defineCustomElement('sinch-button', class extends NectaryElement {
   #sizeContext;
   constructor() {
     super();
-    const shadowRoot = this.attachShadow({
-      delegatesFocus: false
-    });
+    const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$button = shadowRoot.querySelector('#button');
     this.#$text = shadowRoot.querySelector('#text');

package/checkbox/index.js

@@ -1,33 +1,36 @@
 import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;flex-direction:row;box-sizing:border-box;width:100%;--sinch-local-size:24px;--sinch-local-color-background:var(--sinch-comp-checkbox-color-default-background-initial);--sinch-local-color-background-hover:var(--sinch-comp-checkbox-color-default-background-hover);--sinch-local-color-background-active:var(--sinch-comp-checkbox-color-default-background-active);--sinch-local-color-border:var(--sinch-comp-checkbox-color-default-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-checkbox-color-default-border-hover);--sinch-local-color-border-active:var(--sinch-comp-checkbox-color-default-border-active);--sinch-local-color-text:var(--sinch-comp-checkbox-color-default-text-initial)}:host([invalid])>#wrapper{--sinch-local-color-background:var(--sinch-comp-checkbox-color-invalid-background-initial);--sinch-local-color-background-hover:var(--sinch-comp-checkbox-color-invalid-background-hover);--sinch-local-color-background-active:var(--sinch-comp-checkbox-color-invalid-background-active);--sinch-local-color-border:var(--sinch-comp-checkbox-color-invalid-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-checkbox-color-invalid-border-hover);--sinch-local-color-border-active:var(--sinch-comp-checkbox-color-invalid-border-active);--sinch-local-color-text:var(--sinch-comp-checkbox-color-invalid-text-initial)}:host([checked])>#wrapper{--sinch-local-color-background:var(--sinch-comp-checkbox-color-checked-background-initial);--sinch-local-color-background-hover:var(--sinch-comp-checkbox-color-checked-background-hover);--sinch-local-color-background-active:var(--sinch-comp-checkbox-color-checked-background-active);--sinch-local-color-border:var(--sinch-comp-checkbox-color-checked-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-checkbox-color-checked-border-hover);--sinch-local-color-border-active:var(--sinch-comp-checkbox-color-checked-border-active)}:host([disabled])>#wrapper{--sinch-local-color-background:var(--sinch-comp-checkbox-color-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-checkbox-color-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-checkbox-color-disabled-text-initial)}:host([disabled][checked])>#wrapper{--sinch-local-color-background:var(--sinch-comp-checkbox-color-checked-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-checkbox-color-checked-disabled-border-initial)}#checkbox{all:initial;display:block;width:var(--sinch-local-size);height:var(--sinch-local-size);cursor:pointer}#checkbox:disabled{cursor:initial}#icon-container{position:relative;width:var(--sinch-local-size);height:var(--sinch-local-size);align-self:flex-start}#checkbox::before{content:"";position:absolute;top:0;left:0;width:var(--sinch-local-size);height:var(--sinch-local-size);border:2px solid var(--sinch-comp-checkbox-color-default-outline-focus);border-radius:calc(var(--sinch-comp-checkbox-shape-radius) + 3px);transition:opacity .1s linear;opacity:0;box-sizing:border-box;pointer-events:none}#checkbox:focus-visible::before{opacity:1}#checkbox::after{content:"";position:absolute;width:18px;height:18px;inset:0;margin:auto;background-color:var(--sinch-local-color-background);border:1px solid var(--sinch-local-color-border);border-radius:var(--sinch-comp-checkbox-shape-radius);transition:background-color .1s linear;box-sizing:border-box;pointer-events:none}#checkbox:enabled:hover::after{background-color:var(--sinch-local-color-background-hover);border-color:var(--sinch-local-color-border-hover)}#checkbox:enabled:active::after{background-color:var(--sinch-local-color-background-active);border-color:var(--sinch-local-color-border-active)}#icon-checkmark,#icon-indeterminate{position:absolute;left:4px;top:4px;width:16px;height:16px;transition:opacity .1s linear;opacity:0;pointer-events:none;fill:var(--sinch-sys-color-container-main-default)}@media (prefers-reduced-motion){#checkbox::after,#checkbox::before,#icon-checkmark,#icon-indeterminate{transition:none}}#label{display:none;flex:1;align-self:center;padding-left:7px;font:var(--sinch-comp-checkbox-font-label);color:var(--sinch-local-color-text);cursor:pointer}:host([disabled]) #label{cursor:initial}:host([text]:not([text=""])) #label{display:block}:host(:not([indeterminate])) #checkbox:checked~#icon-checkmark{opacity:1}:host([indeterminate]) #checkbox:checked~#icon-indeterminate{opacity:1}</style><div id="wrapper"><div id="icon-container"><input id="checkbox" type="checkbox"/><svg id="icon-checkmark" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 16.17 5.53 12.7a.996.996 0 1 0-1.41 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71a.996.996 0 1 0-1.41-1.41L9 16.17Z"/></svg><svg id="icon-indeterminate" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 13H6c-.55 0-1-.45-1-1s.45-1 1-1h12c.55 0 1 .45 1 1s-.45 1-1 1Z"/></svg></div><label for="checkbox" id="label"></label></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;flex-direction:row;box-sizing:border-box;width:100%;--sinch-local-size:24px;--sinch-local-color-background:var(--sinch-comp-checkbox-color-default-background-initial);--sinch-local-color-background-hover:var(--sinch-comp-checkbox-color-default-background-hover);--sinch-local-color-background-active:var(--sinch-comp-checkbox-color-default-background-active);--sinch-local-color-border:var(--sinch-comp-checkbox-color-default-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-checkbox-color-default-border-hover);--sinch-local-color-border-active:var(--sinch-comp-checkbox-color-default-border-active);--sinch-local-color-text:var(--sinch-comp-checkbox-color-default-text-initial)}:host([invalid])>#wrapper{--sinch-local-color-background:var(--sinch-comp-checkbox-color-invalid-background-initial);--sinch-local-color-background-hover:var(--sinch-comp-checkbox-color-invalid-background-hover);--sinch-local-color-background-active:var(--sinch-comp-checkbox-color-invalid-background-active);--sinch-local-color-border:var(--sinch-comp-checkbox-color-invalid-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-checkbox-color-invalid-border-hover);--sinch-local-color-border-active:var(--sinch-comp-checkbox-color-invalid-border-active);--sinch-local-color-text:var(--sinch-comp-checkbox-color-invalid-text-initial)}:host([checked])>#wrapper{--sinch-local-color-background:var(--sinch-comp-checkbox-color-checked-background-initial);--sinch-local-color-background-hover:var(--sinch-comp-checkbox-color-checked-background-hover);--sinch-local-color-background-active:var(--sinch-comp-checkbox-color-checked-background-active);--sinch-local-color-border:var(--sinch-comp-checkbox-color-checked-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-checkbox-color-checked-border-hover);--sinch-local-color-border-active:var(--sinch-comp-checkbox-color-checked-border-active)}:host([disabled])>#wrapper{--sinch-local-color-background:var(--sinch-comp-checkbox-color-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-checkbox-color-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-checkbox-color-disabled-text-initial)}:host([disabled][checked])>#wrapper{--sinch-local-color-background:var(--sinch-comp-checkbox-color-checked-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-checkbox-color-checked-disabled-border-initial)}#checkbox{width:var(--sinch-local-size);height:var(--sinch-local-size);cursor:pointer}:host([disabled]) #checkbox{cursor:initial}#icon-container{position:relative;width:var(--sinch-local-size);height:var(--sinch-local-size);align-self:flex-start}#checkbox::before{content:"";position:absolute;top:0;left:0;width:var(--sinch-local-size);height:var(--sinch-local-size);border:2px solid var(--sinch-comp-checkbox-color-default-outline-focus);border-radius:calc(var(--sinch-comp-checkbox-shape-radius) + 3px);transition:opacity .1s linear;opacity:0;box-sizing:border-box;pointer-events:none}:host(:focus-visible) #checkbox::before{opacity:1}#checkbox::after{content:"";position:absolute;width:18px;height:18px;inset:0;margin:auto;background-color:var(--sinch-local-color-background);border:1px solid var(--sinch-local-color-border);border-radius:var(--sinch-comp-checkbox-shape-radius);transition:background-color .1s linear;box-sizing:border-box;pointer-events:none}:host(:hover:not([disabled])) #checkbox::after{background-color:var(--sinch-local-color-background-hover);border-color:var(--sinch-local-color-border-hover)}:host(:active:not([disabled])) #checkbox::after{background-color:var(--sinch-local-color-background-active);border-color:var(--sinch-local-color-border-active)}#icon-checkmark,#icon-indeterminate{position:absolute;left:4px;top:4px;width:16px;height:16px;transition:opacity .1s linear;opacity:0;pointer-events:none;fill:var(--sinch-sys-color-container-main-default)}:host(:not([indeterminate])[checked]) #icon-checkmark{opacity:1}:host([indeterminate][checked]) #icon-indeterminate{opacity:1}@media (prefers-reduced-motion){#checkbox::after,#checkbox::before,#icon-checkmark,#icon-indeterminate{transition:none}}#label{flex:1;align-self:center;padding-left:7px;font:var(--sinch-comp-checkbox-font-label);color:var(--sinch-local-color-text);cursor:pointer}#label:empty{display:none}:host([disabled]) #label{cursor:initial}</style><div id="wrapper"><div id="icon-container"><div id="checkbox"></div><svg id="icon-checkmark" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 16.17 5.53 12.7a.996.996 0 1 0-1.41 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71a.996.996 0 1 0-1.41-1.41L9 16.17Z"/></svg><svg id="icon-indeterminate" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 13H6c-.55 0-1-.45-1-1s.45-1 1-1h12c.55 0 1 .45 1 1s-.45 1-1 1Z"/></svg></div><span id="label"></span></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-checkbox', class extends NectaryElement {
-  #$input;
   #$label;
+  #controller = null;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$input = shadowRoot.querySelector('input');
-    this.#$label = shadowRoot.querySelector('label');
+    this.#$label = shadowRoot.querySelector('#label');
   }
   connectedCallback() {
-    this.setAttribute('role', 'checkbox');
-    this.#$input.addEventListener('input', this.#onCheckboxInput);
-    this.#$input.addEventListener('focus', this.#onCheckboxFocus);
-    this.#$input.addEventListener('blur', this.#onCheckboxBlur);
-    this.addEventListener('-change', this.#onChangeReactHandler);
-    this.addEventListener('-focus', this.#onFocusReactHandler);
-    this.addEventListener('-blur', this.#onBlurReactHandler);
+    this.#controller = new AbortController();
+    const {
+      signal
+    } = this.#controller;
+    const options = {
+      signal
+    };
+    this.role = 'checkbox';
+    this.tabIndex = 0;
+    this.addEventListener('click', this.#onClick, options);
+    this.addEventListener('focus', this.#onFocus, options);
+    this.addEventListener('blur', this.#onBlur, options);
+    this.addEventListener('-change', this.#onChangeReactHandler, options);
+    this.addEventListener('-focus', this.#onFocusReactHandler, options);
+    this.addEventListener('-blur', this.#onBlurReactHandler, options);
   }
   disconnectedCallback() {
-    this.#$input.removeEventListener('input', this.#onCheckboxInput);
-    this.#$input.removeEventListener('focus', this.#onCheckboxFocus);
-    this.#$input.removeEventListener('blur', this.#onCheckboxBlur);
-    this.removeEventListener('-change', this.#onChangeReactHandler);
-    this.removeEventListener('-focus', this.#onFocusReactHandler);
-    this.removeEventListener('-blur', this.#onBlurReactHandler);
+    this.#controller.abort();
+    this.#controller = null;
   }
   static get observedAttributes() {
     return ['checked', 'disabled', 'text', 'invalid', 'indeterminate'];
@@ -45,7 +48,6 @@ defineCustomElement('sinch-checkbox', class extends NectaryElement {
       case 'checked':
         {
           const isChecked = isAttrTrue(newVal);
-          this.#$input.checked = isChecked;
           updateExplicitBooleanAttribute(this, 'aria-checked', isChecked);
           updateBooleanAttribute(this, 'checked', isChecked);
           break;
@@ -53,7 +55,7 @@ defineCustomElement('sinch-checkbox', class extends NectaryElement {
       case 'disabled':
         {
           const isDisabled = isAttrTrue(newVal);
-          this.#$input.disabled = isDisabled;
+          updateExplicitBooleanAttribute(this, 'aria-disabled', isDisabled);
           updateBooleanAttribute(this, 'disabled', isDisabled);
           break;
         }
@@ -98,24 +100,18 @@ defineCustomElement('sinch-checkbox', class extends NectaryElement {
   get focusable() {
     return true;
   }
-  focus() {
-    this.#$input.focus();
-  }
-  blur() {
-    this.#$input.blur();
-  }
-  #onCheckboxInput = e => {
-    e.stopPropagation();
-    const isChecked = this.#$input.checked;
-    this.#$input.checked = this.checked;
+  #onClick = () => {
+    if (this.disabled) {
+      return;
+    }
     this.dispatchEvent(new CustomEvent('-change', {
-      detail: isChecked
+      detail: !this.checked
     }));
   };
-  #onCheckboxFocus = () => {
+  #onFocus = () => {
     this.dispatchEvent(new CustomEvent('-focus'));
   };
-  #onCheckboxBlur = () => {
+  #onBlur = () => {
     this.dispatchEvent(new CustomEvent('-blur'));
   };
   #onChangeReactHandler = e => {

package/chip/index.js

@@ -11,9 +11,7 @@ defineCustomElement('sinch-chip', class extends NectaryElement {
   #controller = null;
   constructor() {
     super();
-    const shadowRoot = this.attachShadow({
-      delegatesFocus: false
-    });
+    const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$button = shadowRoot.querySelector('#button');
     this.#$text = shadowRoot.querySelector('#text');

package/color-menu/index.js

@@ -11,9 +11,7 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
   #controller = null;
   constructor() {
     super();
-    const shadowRoot = this.attachShadow({
-      delegatesFocus: false
-    });
+    const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$listbox = shadowRoot.querySelector('#listbox');
     this.#$optionsSlot = shadowRoot.querySelector('#options');

package/field/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getAttribute, getBooleanAttribute, getFirstSlotElement, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{display:flex;flex-direction:column;width:100%}#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-comp-field-font-label);color:var(--sinch-comp-field-color-default-label-initial)}#optional{flex:1;font:var(--sinch-comp-field-font-optional);color:var(--sinch-comp-field-color-default-optional-initial);text-align:right}#additional{flex:1;text-align:right;font:var(--sinch-comp-field-font-additional);color:var(--sinch-comp-field-color-default-additional-initial);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-comp-field-font-invalid);color:var(--sinch-comp-field-color-invalid-text-initial);line-height:20px;margin-top:2px}#invalid:empty{display:none}#tooltip{align-self:center;margin:0 8px;display:flex}#tooltip.empty{display:none}:host([disabled]) #label{color:var(--sinch-comp-field-color-disabled-label-initial)}:host([disabled]) #additional{color:var(--sinch-comp-field-color-disabled-additional-initial)}:host([disabled]) #optional{color:var(--sinch-comp-field-color-disabled-optional-initial)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><div id="tooltip"><slot name="tooltip"></slot></div><span id="optional"></span></div><slot name="input"></slot><div id="bottom"><div id="invalid"></div><div id="additional"></div></div></div>';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;width:100%}#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-comp-field-font-label);color:var(--sinch-comp-field-color-default-label-initial)}#optional{flex:1;font:var(--sinch-comp-field-font-optional);color:var(--sinch-comp-field-color-default-optional-initial);text-align:right}#additional{flex:1;text-align:right;font:var(--sinch-comp-field-font-additional);color:var(--sinch-comp-field-color-default-additional-initial);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-comp-field-font-invalid);color:var(--sinch-comp-field-color-invalid-text-initial);line-height:20px;margin-top:2px}#invalid:empty{display:none}#tooltip{align-self:center;margin:0 8px;display:flex}#tooltip.empty{display:none}:host([disabled]) #label{color:var(--sinch-comp-field-color-disabled-label-initial)}:host([disabled]) #additional{color:var(--sinch-comp-field-color-disabled-additional-initial)}:host([disabled]) #optional{color:var(--sinch-comp-field-color-disabled-optional-initial)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><div id="tooltip"><slot name="tooltip"></slot></div><span id="optional"></span></div><slot name="input"></slot><div id="bottom"><div id="invalid"></div><div id="additional"></div></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-field', class extends NectaryElement {

package/icon-button/index.js

@@ -12,9 +12,7 @@ defineCustomElement('sinch-icon-button', class extends NectaryElement {
   #sizeContext;
   constructor() {
     super();
-    const shadowRoot = this.attachShadow({
-      delegatesFocus: false
-    });
+    const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$button = shadowRoot.querySelector('#button');
     this.#$tooltip = shadowRoot.querySelector('#tooltip');

package/input/index.js

@@ -19,7 +19,9 @@ defineCustomElement('sinch-input', class extends NectaryElement {
   #sizeContext;
   constructor() {
     super();
-    const shadowRoot = this.attachShadow();
+    const shadowRoot = this.attachShadow({
+      delegatesFocus: true
+    });
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$input = shadowRoot.querySelector('#input');
     this.#$iconSlot = shadowRoot.querySelector('slot[name="icon"]');

package/package.json

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

package/select-button/index.js

@@ -15,9 +15,7 @@ defineCustomElement('sinch-select-button', class extends NectaryElement {
   #sizeContext;
   constructor() {
     super();
-    const shadowRoot = this.attachShadow({
-      delegatesFocus: false
-    });
+    const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$text = shadowRoot.querySelector('#text');
     this.#$placeholder = shadowRoot.querySelector('#placeholder');

package/select-menu/index.js

@@ -18,9 +18,7 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
   #searchDebounce;
   constructor() {
     super();
-    const shadowRoot = this.attachShadow({
-      delegatesFocus: false
-    });
+    const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$optionSlot = shadowRoot.querySelector('slot');
     this.#$listbox = shadowRoot.querySelector('#listbox');

package/tabs-icon-option/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#button{all:initial;position:relative;display:flex;flex-direction:column;padding:12px 16px 0;box-sizing:border-box;cursor:pointer;background-color:var(--sinch-comp-tab-color-default-background-initial);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);height:39px;--sinch-global-color-icon:var(--sinch-comp-tab-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-tab-size-icon)}#button:hover{background-color:var(--sinch-comp-tab-color-default-background-hover)}#button:focus-visible::before{content:"";position:absolute;inset:0;bottom:-3px;border:2px solid var(--sinch-comp-tab-color-default-outline-focus);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);pointer-events:none}#button:disabled{cursor:unset;pointer-events:none;--sinch-global-color-icon:var(--sinch-comp-tab-color-disabled-icon-initial)}:host([data-checked]) #button{--sinch-global-color-icon:var(--sinch-comp-tab-color-checked-icon-initial)}:host([data-checked]) #button::after{content:"";position:absolute;left:4px;right:4px;bottom:-1px;pointer-events:none;border-top:2px solid var(--sinch-comp-tab-color-checked-border-initial)}::slotted(*){display:block}</style><sinch-tooltip id="tooltip"><button id="button"><slot name="icon"></slot></button></sinch-tooltip>';
+const templateHTML = '<style>:host{display:block;outline:0}#button{all:initial;position:relative;display:flex;flex-direction:column;padding:12px 16px 0;box-sizing:border-box;cursor:pointer;background-color:var(--sinch-comp-tab-color-default-background-initial);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);height:39px;--sinch-global-color-icon:var(--sinch-comp-tab-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-tab-size-icon)}#button:hover{background-color:var(--sinch-comp-tab-color-default-background-hover)}#button:focus-visible::after{content:"";position:absolute;inset:0;bottom:-3px;border:2px solid var(--sinch-comp-tab-color-default-outline-focus);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);pointer-events:none}#button:disabled{cursor:unset;pointer-events:none;--sinch-global-color-icon:var(--sinch-comp-tab-color-disabled-icon-initial)}:host([data-checked]) #button{--sinch-global-color-icon:var(--sinch-comp-tab-color-checked-icon-initial)}:host([data-checked]) #button::before{content:"";position:absolute;left:0;right:0;bottom:-1px;pointer-events:none;border-top:2px solid var(--sinch-comp-tab-color-checked-border-initial)}::slotted(*){display:block}</style><sinch-tooltip id="tooltip"><button id="button" tabindex="0"><slot name="icon"></slot></button></sinch-tooltip>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-tabs-icon-option', class extends NectaryElement {
@@ -7,13 +7,15 @@ defineCustomElement('sinch-tabs-icon-option', class extends NectaryElement {
   #$tooltip;
   constructor() {
     super();
-    const shadowRoot = this.attachShadow();
+    const shadowRoot = this.attachShadow({
+      delegatesFocus: true
+    });
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$button = shadowRoot.querySelector('#button');
     this.#$tooltip = shadowRoot.querySelector('#tooltip');
   }
   connectedCallback() {
-    this.setAttribute('role', 'tab');
+    this.role = 'tab';
     this.#$button.addEventListener('click', this.#onClick);
   }
   disconnectedCallback() {

package/tabs-option/index.js

@@ -1,6 +1,6 @@
 import '../text';
 import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}#button{all:initial;position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 16px;box-sizing:border-box;cursor:pointer;background-color:var(--sinch-comp-tab-color-default-background-initial);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);height:39px;--sinch-global-color-text:var(--sinch-comp-tab-color-default-text-initial);--sinch-global-color-icon:var(--sinch-comp-tab-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-tab-size-icon)}#button:hover{background-color:var(--sinch-comp-tab-color-default-background-hover)}#button:focus-visible::before{content:"";position:absolute;inset:0;bottom:-3px;border:2px solid var(--sinch-comp-tab-color-default-outline-focus);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);pointer-events:none}#button:disabled{cursor:unset;pointer-events:none;--sinch-global-color-text:var(--sinch-comp-tab-color-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-tab-color-disabled-icon-initial)}:host([data-checked]) #button{--sinch-global-color-text:var(--sinch-comp-tab-color-checked-text-initial);--sinch-global-color-icon:var(--sinch-comp-tab-color-checked-icon-initial)}:host([data-checked]) #button::after{content:"";position:absolute;left:4px;right:4px;bottom:-1px;pointer-events:none;border-top:2px solid var(--sinch-comp-tab-color-checked-border-initial)}#text{flex-shrink:1;flex-basis:auto;min-width:0;--sinch-comp-text-font:var(--sinch-comp-tab-font-label)}::slotted(*){display:block}</style><button id="button"><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text></button>';
+const templateHTML = '<style>:host{display:block}#button{all:initial;position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 16px;box-sizing:border-box;cursor:pointer;background-color:var(--sinch-comp-tab-color-default-background-initial);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);height:39px;--sinch-global-color-text:var(--sinch-comp-tab-color-default-text-initial);--sinch-global-color-icon:var(--sinch-comp-tab-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-tab-size-icon)}#button:hover{background-color:var(--sinch-comp-tab-color-default-background-hover)}#button:focus-visible::after{content:"";position:absolute;inset:0;bottom:-3px;border:2px solid var(--sinch-comp-tab-color-default-outline-focus);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);pointer-events:none}#button:disabled{cursor:unset;pointer-events:none;--sinch-global-color-text:var(--sinch-comp-tab-color-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-tab-color-disabled-icon-initial)}:host([data-checked]) #button{--sinch-global-color-text:var(--sinch-comp-tab-color-checked-text-initial);--sinch-global-color-icon:var(--sinch-comp-tab-color-checked-icon-initial)}:host([data-checked]) #button::before{content:"";position:absolute;left:0;right:0;bottom:-1px;pointer-events:none;border-top:2px solid var(--sinch-comp-tab-color-checked-border-initial)}#text{flex-shrink:1;flex-basis:auto;min-width:0;--sinch-comp-text-font:var(--sinch-comp-tab-font-label)}::slotted(*){display:block}</style><button id="button" tabindex="0"><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text></button>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-tabs-option', class extends NectaryElement {
@@ -8,13 +8,15 @@ defineCustomElement('sinch-tabs-option', class extends NectaryElement {
   #$text;
   constructor() {
     super();
-    const shadowRoot = this.attachShadow();
+    const shadowRoot = this.attachShadow({
+      delegatesFocus: true
+    });
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$button = shadowRoot.querySelector('#button');
     this.#$text = shadowRoot.querySelector('#text');
   }
   connectedCallback() {
-    this.setAttribute('role', 'tab');
+    this.role = 'tab';
     this.#$button.addEventListener('click', this.#onClick);
   }
   disconnectedCallback() {

package/textarea/index.js

@@ -13,7 +13,9 @@ defineCustomElement('sinch-textarea', class extends NectaryElement {
   #sizeContext;
   constructor() {
     super();
-    const shadowRoot = this.attachShadow();
+    const shadowRoot = this.attachShadow({
+      delegatesFocus: true
+    });
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$input = shadowRoot.querySelector('#input');
     this.#$bottomSlot = shadowRoot.querySelector('slot[name="bottom"]');

package/toggle/index.js

@@ -1,33 +1,36 @@
 import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;width:100%;height:var(--sinch-local-size);--sinch-local-size:24px}:host([small]) #wrapper{--sinch-local-size:22px}#input{all:initial;display:block;position:absolute;left:0;top:2px;width:40px;height:20px;cursor:pointer;pointer-events:initial}#input:disabled{cursor:initial}#input:focus-visible::after{position:absolute;content:"";left:-4px;top:-4px;right:-4px;bottom:-4px;border:2px solid var(--sinch-comp-toggle-color-default-outline-focus);border-radius:18px;pointer-events:none}:host([small]) #input{width:32px;height:16px;top:3px}#knob-container{position:relative;box-sizing:border-box;width:40px;height:20px;border-radius:10px;pointer-events:none;padding:2px;background-color:var(--sinch-comp-toggle-color-default-background-initial);overflow:hidden}:host([small]) #knob-container{width:32px;height:16px;border-radius:8px}#input:checked~#knob-container{background-color:var(--sinch-comp-toggle-color-checked-background-initial)}#input:disabled~#knob-container{background-color:var(--sinch-comp-toggle-color-disabled-background-initial)}#input:checked:disabled~#knob-container{background-color:var(--sinch-comp-toggle-color-checked-disabled-background-initial)}#knob{position:relative;box-sizing:border-box;width:16px;height:16px;border-radius:50%;background-color:var(--sinch-comp-toggle-color-default-knob-background-initial);box-shadow:var(--sinch-comp-toggle-shadow-knob-default);transform:translateX(0);transition:transform .1s ease-in-out;will-change:transform}:host([small]) #knob{width:12px;height:12px}#input:disabled+#knob-container>#knob{box-shadow:var(--sinch-comp-toggle-shadow-knob-disabled)}#input:checked+#knob-container>#knob{transform:translateX(20px)}:host([small]) #input:checked+#knob-container>#knob{transform:translateX(16px)}#knob::after,#knob::before{font:var(--sinch-comp-toggle-font-size-m-inside-text);color:var(--sinch-comp-toggle-color-default-text-inside-initial);text-transform:uppercase;font-size:8px;line-height:16px;display:none;position:absolute;top:0;padding:0 3px}#knob::before{content:"on";right:100%}#knob::after{content:"off";left:100%}:host([labeled]:not([small])) #knob::after,:host([labeled]:not([small])) #knob::before{display:block}@media (prefers-reduced-motion){#knob{transition:none}}#label{flex:1;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:8px;font:var(--sinch-comp-toggle-font-size-m-label);color:var(--sinch-comp-toggle-color-default-label-initial)}#label:empty{display:none}:host([small]) #label{font:var(--sinch-comp-toggle-font-size-s-label)}#input:disabled~#label{color:var(--sinch-comp-toggle-color-disabled-label-initial)}</style><div id="wrapper"><input id="input" type="checkbox"><div id="knob-container"><div id="knob"></div></div><label id="label" for="input"></label></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;width:100%;height:var(--sinch-local-size);--sinch-local-size:24px}:host([small]) #wrapper{--sinch-local-size:22px}#input{all:initial;display:block;position:absolute;left:0;top:2px;width:40px;height:20px;cursor:pointer;pointer-events:initial}:host([disabled]) #input{cursor:initial}:host(:focus-visible) #input::after{position:absolute;content:"";left:-4px;top:-4px;right:-4px;bottom:-4px;border:2px solid var(--sinch-comp-toggle-color-default-outline-focus);border-radius:18px;pointer-events:none}:host([small]) #input{width:32px;height:16px;top:3px}#knob-container{position:relative;box-sizing:border-box;width:40px;height:20px;border-radius:10px;pointer-events:none;padding:2px;background-color:var(--sinch-comp-toggle-color-default-background-initial);overflow:hidden}:host([small]) #knob-container{width:32px;height:16px;border-radius:8px}:host([checked]) #knob-container{background-color:var(--sinch-comp-toggle-color-checked-background-initial)}:host([disabled]) #knob-container{background-color:var(--sinch-comp-toggle-color-disabled-background-initial)}:host([checked][disabled]) #knob-container{background-color:var(--sinch-comp-toggle-color-checked-disabled-background-initial)}#knob{position:relative;box-sizing:border-box;width:16px;height:16px;border-radius:50%;background-color:var(--sinch-comp-toggle-color-default-knob-background-initial);box-shadow:var(--sinch-comp-toggle-shadow-knob-default);transform:translateX(0);transition:transform .1s ease-in-out;will-change:transform}:host([small]) #knob{width:12px;height:12px}:host([disabled]) #knob-container>#knob{box-shadow:var(--sinch-comp-toggle-shadow-knob-disabled)}:host([checked]) #knob-container>#knob{transform:translateX(20px)}:host([small][checked]) #knob-container>#knob{transform:translateX(16px)}#knob::after,#knob::before{font:var(--sinch-comp-toggle-font-size-m-inside-text);color:var(--sinch-comp-toggle-color-default-text-inside-initial);text-transform:uppercase;font-size:8px;line-height:16px;display:none;position:absolute;top:0;padding:0 3px}#knob::before{content:"on";right:100%}#knob::after{content:"off";left:100%}:host([labeled]:not([small])) #knob::after,:host([labeled]:not([small])) #knob::before{display:block}@media (prefers-reduced-motion){#knob{transition:none}}#label{flex:1;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:8px;font:var(--sinch-comp-toggle-font-size-m-label);color:var(--sinch-comp-toggle-color-default-label-initial);cursor:pointer}#label:empty{display:none}:host([small]) #label{font:var(--sinch-comp-toggle-font-size-s-label)}:host([disabled]) #label{color:var(--sinch-comp-toggle-color-disabled-label-initial);cursor:initial}</style><div id="wrapper"><div id="input"></div><div id="knob-container"><div id="knob"></div></div><span id="label"></span></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-toggle', class extends NectaryElement {
-  #$input;
   #$label;
+  #controller = null;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$input = shadowRoot.querySelector('#input');
     this.#$label = shadowRoot.querySelector('#label');
   }
   connectedCallback() {
-    this.setAttribute('role', 'checkbox');
-    this.#$input.addEventListener('input', this.#onInput);
-    this.#$input.addEventListener('focus', this.#onCheckboxFocus);
-    this.#$input.addEventListener('blur', this.#onCheckboxBlur);
-    this.addEventListener('-change', this.#onChangeReactHandler);
-    this.addEventListener('-focus', this.#onFocusReactHandler);
-    this.addEventListener('-blur', this.#onBlurReactHandler);
+    this.#controller = new AbortController();
+    const {
+      signal
+    } = this.#controller;
+    const options = {
+      signal
+    };
+    this.role = 'checkbox';
+    this.tabIndex = 0;
+    this.addEventListener('click', this.#onClick, options);
+    this.addEventListener('focus', this.#onFocus, options);
+    this.addEventListener('blur', this.#onBlur, options);
+    this.addEventListener('-change', this.#onChangeReactHandler, options);
+    this.addEventListener('-focus', this.#onFocusReactHandler, options);
+    this.addEventListener('-blur', this.#onBlurReactHandler, options);
   }
   disconnectedCallback() {
-    this.#$input.removeEventListener('input', this.#onInput);
-    this.#$input.removeEventListener('focus', this.#onCheckboxFocus);
-    this.#$input.removeEventListener('blur', this.#onCheckboxBlur);
-    this.removeEventListener('-change', this.#onChangeReactHandler);
-    this.removeEventListener('-focus', this.#onFocusReactHandler);
-    this.removeEventListener('-blur', this.#onBlurReactHandler);
+    this.#controller.abort();
+    this.#controller = null;
   }
   static get observedAttributes() {
     return ['checked', 'disabled', 'text', 'labeled', 'small'];
@@ -45,14 +48,14 @@ defineCustomElement('sinch-toggle', class extends NectaryElement {
       case 'checked':
         {
           const isChecked = isAttrTrue(newVal);
-          this.#$input.checked = isChecked;
           updateExplicitBooleanAttribute(this, 'aria-checked', isChecked);
+          updateBooleanAttribute(this, name, isChecked);
           break;
         }
       case 'disabled':
         {
           const isDisabled = isAttrTrue(newVal);
-          this.#$input.disabled = isDisabled;
+          updateExplicitBooleanAttribute(this, 'aria-disabled', isDisabled);
           updateBooleanAttribute(this, name, isDisabled);
           break;
         }
@@ -97,24 +100,18 @@ defineCustomElement('sinch-toggle', class extends NectaryElement {
   get focusable() {
     return true;
   }
-  focus() {
-    this.#$input.focus();
-  }
-  blur() {
-    this.#$input.blur();
-  }
-  #onInput = e => {
-    e.stopPropagation();
-    const isChecked = this.#$input.checked;
-    this.#$input.checked = this.checked;
+  #onClick = () => {
+    if (this.disabled) {
+      return;
+    }
     this.dispatchEvent(new CustomEvent('-change', {
-      detail: isChecked
+      detail: !this.checked
     }));
   };
-  #onCheckboxFocus = () => {
+  #onFocus = () => {
     this.dispatchEvent(new CustomEvent('-focus'));
   };
-  #onCheckboxBlur = () => {
+  #onBlur = () => {
     this.dispatchEvent(new CustomEvent('-blur'));
   };
   #onChangeReactHandler = e => {

package/utils/element.js

@@ -26,7 +26,7 @@ export class NectaryElement extends HTMLElement {
   attachShadow(options) {
     return super.attachShadow({
       mode: 'open',
-      delegatesFocus: true,
+      delegatesFocus: false,
       customElements: nectaryRegistry,
       ...options
     });