@nectary/components 2.1.5 → 2.2.0

package/action-menu/index.js

@@ -36,6 +36,7 @@ defineCustomElement('sinch-action-menu', class extends NectaryElement {
   }
   disconnectedCallback() {
     this.#controller.abort();
+    this.#controller = null;
   }
   static get observedAttributes() {
     return ['rows'];

package/action-menu-option/index.js

@@ -27,6 +27,7 @@ defineCustomElement('sinch-action-menu-option', class ActionMenuOption extends N
   }
   disconnectedCallback() {
     this.#controller.abort();
+    this.#controller = null;
   }
   static get observedAttributes() {
     return ['text', 'disabled', 'data-selected'];

package/avatar/index.js

@@ -74,7 +74,7 @@ defineCustomElement('sinch-avatar', class extends NectaryElement {
     }
   }
   #updateColor() {
-    if (!this.isConnected) {
+    if (!this.isDomConnected) {
       return;
     }
     const colorName = this.color;

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;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-danger-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-danger-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);user-select:none;--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-danger-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-danger-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;
@@ -53,6 +53,7 @@ defineCustomElement('sinch-button', class extends NectaryElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.#controller.abort();
+    this.#controller = null;
   }
   static get observedAttributes() {
     return ['text', 'disabled', 'size', 'data-size'];
@@ -110,7 +111,7 @@ defineCustomElement('sinch-button', class extends NectaryElement {
     return true;
   }
   #onSizeUpdate() {
-    if (!this.isConnected) {
+    if (!this.isDomConnected) {
       return;
     }
     const size = getAttribute(this, 'data-size', DEFAULT_SIZE);

package/card/index.js

@@ -42,9 +42,10 @@ defineCustomElement('sinch-card', class extends NectaryElement {
     }
   }
   disconnectedCallback() {
-    super.disconnectedCallback();
     this.#disableDragging();
+    super.disconnectedCallback();
     this.#controller.abort();
+    this.#controller = null;
   }
   static get observedAttributes() {
     return ['text', 'label', 'caption', 'draggable'];
@@ -107,7 +108,7 @@ defineCustomElement('sinch-card', class extends NectaryElement {
     setClass(this.#$illustrationSlotWrapper, 'active', this.#$illustrationSlot.assignedElements().length > 0);
   };
   #enableDraggable() {
-    if (this.isConnected && !this.#isDraggingSubscribed) {
+    if (this.isDomConnected && !this.#isDraggingSubscribed) {
       this.addEventListener('dragstart', this.#onDragStart);
       this.#$cardBody.addEventListener('mousedown', this.#onDraggableMouseDown);
       this.#isDraggingSubscribed = true;

package/chip/index.js

@@ -50,6 +50,7 @@ defineCustomElement('sinch-chip', class extends NectaryElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.#controller.abort();
+    this.#controller = null;
   }
   static get observedAttributes() {
     return ['text', 'color', 'small'];
@@ -95,7 +96,7 @@ defineCustomElement('sinch-chip', class extends NectaryElement {
     updateBooleanAttribute(this, 'small', isSmall);
   }
   #updateColor() {
-    if (!this.isConnected) {
+    if (!this.isDomConnected) {
       return;
     }
     const colorName = this.color;

package/color-menu/index.js

@@ -51,7 +51,7 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
     switch (name) {
       case 'value':
         {
-          if (this.isConnected) {
+          if (this.isDomConnected) {
             this.#onValueChange();
           }
           break;
@@ -63,7 +63,7 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
         }
       case 'cols':
         {
-          if (this.isConnected) {
+          if (this.isDomConnected) {
             this.#updateColumns();
           }
           break;

package/color-swatch/index.js

@@ -38,7 +38,7 @@ defineCustomElement('sinch-color-swatch', class extends NectaryElement {
     }
   }
   #updateColor() {
-    if (!this.isConnected) {
+    if (!this.isDomConnected) {
       return;
     }
     const colorName = this.name;

package/date-picker/index.js

@@ -3,7 +3,7 @@ import '../icon';
 import '../text';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, getRect, getTargetAttribute, isAttrTrue, NectaryElement, packCsv, setClass, unpackCsv, updateAttribute, updateBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0}#content{width:fit-content;box-sizing:border-box;padding:16px;display:flex;flex-direction:column;gap:8px}#month{display:flex;flex-direction:column;row-gap:8px}.week{display:flex;flex-direction:row;column-gap:8px}.week.empty{display:none}.day{all:initial;font:var(--sinch-comp-date-picker-font-day);width:24px;height:24px;line-height:22px;color:var(--sinch-comp-date-picker-day-color-default-text-initial);background-color:var(--sinch-comp-date-picker-day-color-default-background-initial);border:1px solid var(--sinch-comp-date-picker-day-color-default-border-initial);border-radius:var(--sinch-comp-date-picker-day-shape-radius);text-align:center;box-sizing:border-box;user-select:none;cursor:pointer}.day:focus-visible{outline:1px solid var(--sinch-comp-date-picker-day-color-default-outline-focus);outline-offset:1px}.day:disabled{cursor:initial;color:var(--sinch-comp-date-picker-day-color-disabled-text-initial)}.day:enabled:hover{background-color:var(--sinch-comp-date-picker-day-color-default-background-hover)}.day:enabled.range{background-color:var(--sinch-comp-date-picker-day-color-default-range-background)}.day:enabled.selected{color:var(--sinch-comp-date-picker-day-color-checked-text-initial);background-color:var(--sinch-comp-date-picker-day-color-checked-background-initial);border-color:var(--sinch-comp-date-picker-day-color-checked-border-initial)}.day.today{font:var(--sinch-comp-date-picker-font-today);color:var(--sinch-comp-date-picker-today-color-default-text-initial);background-color:var(--sinch-comp-date-picker-today-color-default-background-initial);border-color:var(--sinch-comp-date-picker-today-color-default-border-initial)}.day.today:hover{background-color:var(--sinch-comp-date-picker-today-color-default-background-hover)}.day.today:disabled{color:var(--sinch-comp-date-picker-today-color-disabled-text-initial);border-color:var(--sinch-comp-date-picker-today-color-disabled-border-initial)}.day.today.selected{color:var(--sinch-comp-date-picker-today-color-checked-text-initial);background-color:var(--sinch-comp-date-picker-today-color-checked-background-initial);border-color:var(--sinch-comp-date-picker-today-color-checked-border-initial)}#week-day-names{display:flex;flex-direction:row;gap:8px;height:24px}.week-day-name{font:var(--sinch-comp-date-picker-font-weekday);color:var(--sinch-comp-date-picker-weekday-color-default-text-initial);text-align:center;width:24px;height:24px;line-height:24px;user-select:none;text-transform:uppercase}#content-header{display:flex;flex-direction:row;height:32px;align-items:center}#date{flex:1;text-align:center;text-transform:capitalize;--sinch-com-text-font:var(--sinch-comp-date-picker-font-header);--sinch-global-color-text:var(--sinch-comp-date-picker-header-color-default-text-initial)}#prev-year{margin-left:-4px}#next-year{margin-right:-4px}</style><div id="content"><div id="content-header"><sinch-icon-button id="prev-year" size="s"><sinch-icon id="icon-prev-year" slot="icon" name="keyboard_double_arrow_left"></sinch-icon></sinch-icon-button><sinch-icon-button id="prev-month" size="s"><sinch-icon id="icon-prev-month" slot="icon" name="keyboard_arrow_left"></sinch-icon></sinch-icon-button><sinch-text id="date" type="m" emphasized aria-live="polite"></sinch-text><sinch-icon-button id="next-month" size="s"><sinch-icon id="icon-next-month" slot="icon" name="keyboard_arrow_right"></sinch-icon></sinch-icon-button><sinch-icon-button id="next-year" size="s"><sinch-icon id="icon-next-year" slot="icon" name="keyboard_double_arrow_right"></sinch-icon></sinch-icon-button></div><div id="week-day-names"><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div></div><div id="month"><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div></div></div>';
-import { areDatesEqual, canGoNextMonth, canGoNextYear, canGoPrevMonth, canGoPrevYear, clampMaxDate, clampMinDate, cloneDate, dateToIso, decMonth, decYear, getCalendarMonth, getDayNames, getMonthNames, incMonth, incYear, isDateBetween, isoToDate, isValidDate, sortDates, today } from './utils';
+import { areDatesEqual, canGoNextMonth, canGoNextYear, canGoPrevMonth, canGoPrevYear, clampMaxDate, clampMinDate, cloneDate, dateToIso, decMonth, decYear, getCalendarMonth, getDayNames, getMonthNames, incMonth, incYear, isDateBetween, isDateOnScreen, isoToDate, isValidDate, sortDates, today } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-date-picker', class extends NectaryElement {
@@ -59,8 +59,9 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
     this.addEventListener('-change', this.#onChangeReactHandler, options);
   }
   disconnectedCallback() {
-    this.#controller.abort();
     this.#unsubscribeRangeHover();
+    this.#controller.abort();
+    this.#controller = null;
   }
   static get observedAttributes() {
     return ['value', 'min', 'max', 'locale', 'range', 'prev-year-aria-label', 'next-year-aria-label', 'prev-month-aria-label', 'next-month-aria-label'];
@@ -284,11 +285,12 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
         const date1 = isoToDate(isoDates[0]);
         const date2 = isoToDate(isoDates[1]);
         if (isValidDate(date1) && isValidDate(date2)) {
-          this.#date1 = date1;
-          this.#date2 = date2;
-          if (this.#uiDate === null) {
-            this.#uiDate = cloneDate(this.#date2);
+          [this.#date1, this.#date2] = sortDates([date1, date2]);
+          if (this.#uiDate === null || !isDateOnScreen(this.#uiDate, date1) && !isDateOnScreen(this.#uiDate, date2)) {
+            this.#uiDate = cloneDate(this.#date1);
           }
+        } else {
+          this.#uiDate = null;
         }
       } else if (isoDates.length === 1) {
         const date1 = isoToDate(isoDates[0]);
@@ -301,6 +303,8 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
       if (isValidDate(valueDate)) {
         this.#date1 = valueDate;
         this.#uiDate = cloneDate(this.#date1);
+      } else {
+        this.#uiDate = null;
       }
     }
     if (this.#uiDate === null) {
@@ -332,9 +336,7 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
         const $day = $week[di];
         const week = month[wi];
         const day = week?.[di];
-        $day.classList.remove('selected');
-        $day.classList.remove('range');
-        $day.classList.remove('today');
+        $day.classList.remove('selected', 'range', 'today');
         if (day == null) {
           $day.textContent = '';
           $day.removeAttribute('data-date');

package/date-picker/utils.d.ts

@@ -24,4 +24,5 @@ export declare const isDateBetween: (date: Date, min: Date | null, max: Date | n
 export declare const areDatesEqual: (a: Date, b: Date | null) => boolean;
 export declare const cloneDate: (date: Date) => Date;
 export declare const sortDates: (dateTuple: [Date, Date]) => [Date, Date];
+export declare const isDateOnScreen: (uiDate: Date | null, date: Date | null) => boolean;
 export {};

package/date-picker/utils.js

@@ -131,4 +131,12 @@ export const sortDates = dateTuple => {
     return [dateTuple[1], dateTuple[0]];
   }
   return dateTuple;
+};
+export const isDateOnScreen = (uiDate, date) => {
+  if (uiDate === null || date === null) {
+    return false;
+  }
+  const firstDateOfMonth = new Date(Date.UTC(uiDate.getUTCFullYear(), uiDate.getUTCMonth(), 1));
+  const lastDateOfMonth = new Date(Date.UTC(uiDate.getUTCFullYear(), uiDate.getUTCMonth() + 1, 0));
+  return isDateBetween(date, firstDateOfMonth, lastDateOfMonth);
 };

package/dialog/index.js

@@ -42,9 +42,10 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
     }
   }
   disconnectedCallback() {
+    this.#onCollapse();
     super.disconnectedCallback();
     this.#controller.abort();
-    this.#onCollapse();
+    this.#controller = null;
   }
   static get observedAttributes() {
     return ['caption', 'open', 'close-aria-label'];
@@ -115,7 +116,7 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
     }));
   }
   #onExpand() {
-    if (!this.isConnected || this.#isOpen()) {
+    if (!this.isDomConnected || this.#isOpen()) {
       return;
     }
     this.#$dialog.showModal();

package/emoji/index.js

@@ -35,7 +35,7 @@ defineCustomElement('sinch-emoji', class extends NectaryElement {
     return getAttribute(this, 'char', '');
   }
   #updateChar() {
-    if (!this.isConnected) {
+    if (!this.isDomConnected) {
       return;
     }
     this.#$img.src = getEmojiUrl(this, this.char);

package/emoji-picker/index.js

@@ -82,8 +82,9 @@ defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
     this.#updateEmojis();
   }
   disconnectedCallback() {
-    this.#controller.abort();
     this.#searchDebounce.cancel();
+    this.#controller.abort();
+    this.#controller = null;
   }
   get skinToneButtonRect() {
     return getRect(this.#$skinButton);

package/field/index.js

@@ -36,6 +36,7 @@ defineCustomElement('sinch-field', class extends NectaryElement {
   }
   disconnectedCallback() {
     this.#controller.abort();
+    this.#controller = null;
   }
   static get observedAttributes() {
     return ['label', 'optionaltext', 'additionaltext', 'invalidtext', 'disabled'];

package/flag/index.js

@@ -35,7 +35,7 @@ defineCustomElement('sinch-flag', class extends NectaryElement {
     return getAttribute(this, 'code', '');
   }
   #updateCode() {
-    if (!this.isConnected) {
+    if (!this.isDomConnected) {
       return;
     }
     this.#$img.src = getFlagUrl(this, this.code);

package/help-tooltip/index.js

@@ -26,6 +26,7 @@ defineCustomElement('sinch-help-tooltip', class extends NectaryElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.#controller.abort();
+    this.#controller = null;
   }
   static get observedAttributes() {
     return ['text', 'width', 'orientation'];

package/icon-button/index.js

@@ -1,7 +1,7 @@
 import '../tooltip';
 import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, subscribeContext, updateAttribute, updateBooleanAttribute, updateLiteralAttribute, Context, getAttribute } from '../utils';
 import { DEFAULT_SIZE, sizeExValues } from '../utils/size';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#button{display:block;position:relative;width:var(--sinch-local-size);height:var(--sinch-local-size);cursor:pointer;contain:size;--sinch-global-color-icon:var(--sinch-local-color-icon)}:host([disabled]) #button{cursor:initial}:host([data-size="l"]) #button{--sinch-local-size:var(--sinch-comp-icon-button-size-container-l);--sinch-global-size-icon:var(--sinch-comp-icon-button-size-icon-l);--sinch-local-shape-radius:var(--sinch-comp-icon-button-shape-radius-size-l)}#button,:host([data-size="m"]) #button{--sinch-local-size:var(--sinch-comp-icon-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-icon-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-icon-button-shape-radius-size-m)}:host([data-size="s"]) #button{--sinch-local-size:var(--sinch-comp-icon-button-size-container-s);--sinch-global-size-icon:var(--sinch-comp-icon-button-size-icon-s);--sinch-local-shape-radius:var(--sinch-comp-icon-button-shape-radius-size-s)}:host([data-size=xs]) #button{--sinch-local-size:var(--sinch-comp-icon-button-size-container-xs);--sinch-global-size-icon:var(--sinch-comp-icon-button-size-icon-xs);--sinch-local-shape-radius:var(--sinch-comp-icon-button-shape-radius-size-xs)}:host([type=primary]) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-icon-button-color-primary-default-border-initial);--sinch-local-color-icon:var(--sinch-comp-icon-button-color-primary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-primary-initial);--sinch-local-color-outline:var(--sinch-comp-icon-button-color-primary-default-outline-focus)}:host([type=secondary]) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-icon-button-color-secondary-default-border-initial);--sinch-local-color-icon:var(--sinch-comp-icon-button-color-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-secondary-initial);--sinch-local-color-outline:var(--sinch-comp-icon-button-color-secondary-default-outline-focus)}#button,:host([type=tertiary]) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-tertiary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-icon-button-color-tertiary-default-border-initial);--sinch-local-color-icon:var(--sinch-comp-icon-button-color-tertiary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-tertiary-initial);--sinch-local-color-outline:var(--sinch-comp-icon-button-color-tertiary-default-outline-focus)}:host([type=primary][disabled]) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-icon-button-color-primary-disabled-border-initial);--sinch-local-color-icon:var(--sinch-comp-icon-button-color-primary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-primary-disabled)}:host([type=secondary][disabled]) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-icon-button-color-secondary-disabled-border-initial);--sinch-local-color-icon:var(--sinch-comp-icon-button-color-secondary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-secondary-disabled)}:host([disabled]) #button,:host([type=tertiary][disabled]) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-tertiary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-icon-button-color-tertiary-disabled-border-initial);--sinch-local-color-icon:var(--sinch-comp-icon-button-color-tertiary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-tertiary-disabled)}:host([type=primary]:focus) #button{--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-primary-focus)}:host([type=secondary]:focus) #button{--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-secondary-focus)}:host(:focus),:host([type=tertiary]:focus) #button{--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-tertiary-focus)}:host([type=primary]:not([disabled]):hover) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-primary-hover)}:host([type=secondary]:not([disabled]):hover) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-secondary-hover)}:host(:not([disabled]):hover) #button,:host([type=tertiary]:not([disabled]):active) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-tertiary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-tertiary-hover)}:host([type=primary]:not([disabled]):active) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-primary-active)}:host([type=secondary]:not([disabled]):active) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-secondary-active)}:host(:not([disabled]):active) #button,:host([type=tertiary]:not([disabled]):active) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-tertiary-default-background-active);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-tertiary-active)}#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(:focus-visible) #button::after{content:"";position:absolute;inset:-3px;border:2px solid var(--sinch-local-color-outline);border-radius:calc(var(--sinch-local-shape-radius) + 3px);pointer-events:none}#content{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%}</style><sinch-tooltip id="tooltip"><div id="button"><div id="content" inert><slot name="icon"></slot></div></div></sinch-tooltip>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#button{display:block;position:relative;width:var(--sinch-local-size);height:var(--sinch-local-size);cursor:pointer;user-select:none;contain:size;--sinch-global-color-icon:var(--sinch-local-color-icon)}:host([disabled]) #button{cursor:initial}:host([data-size="l"]) #button{--sinch-local-size:var(--sinch-comp-icon-button-size-container-l);--sinch-global-size-icon:var(--sinch-comp-icon-button-size-icon-l);--sinch-local-shape-radius:var(--sinch-comp-icon-button-shape-radius-size-l)}#button,:host([data-size="m"]) #button{--sinch-local-size:var(--sinch-comp-icon-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-icon-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-icon-button-shape-radius-size-m)}:host([data-size="s"]) #button{--sinch-local-size:var(--sinch-comp-icon-button-size-container-s);--sinch-global-size-icon:var(--sinch-comp-icon-button-size-icon-s);--sinch-local-shape-radius:var(--sinch-comp-icon-button-shape-radius-size-s)}:host([data-size=xs]) #button{--sinch-local-size:var(--sinch-comp-icon-button-size-container-xs);--sinch-global-size-icon:var(--sinch-comp-icon-button-size-icon-xs);--sinch-local-shape-radius:var(--sinch-comp-icon-button-shape-radius-size-xs)}:host([type=primary]) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-icon-button-color-primary-default-border-initial);--sinch-local-color-icon:var(--sinch-comp-icon-button-color-primary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-primary-initial);--sinch-local-color-outline:var(--sinch-comp-icon-button-color-primary-default-outline-focus)}:host([type=secondary]) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-icon-button-color-secondary-default-border-initial);--sinch-local-color-icon:var(--sinch-comp-icon-button-color-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-secondary-initial);--sinch-local-color-outline:var(--sinch-comp-icon-button-color-secondary-default-outline-focus)}#button,:host([type=tertiary]) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-tertiary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-icon-button-color-tertiary-default-border-initial);--sinch-local-color-icon:var(--sinch-comp-icon-button-color-tertiary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-tertiary-initial);--sinch-local-color-outline:var(--sinch-comp-icon-button-color-tertiary-default-outline-focus)}:host([type=primary][disabled]) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-icon-button-color-primary-disabled-border-initial);--sinch-local-color-icon:var(--sinch-comp-icon-button-color-primary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-primary-disabled)}:host([type=secondary][disabled]) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-icon-button-color-secondary-disabled-border-initial);--sinch-local-color-icon:var(--sinch-comp-icon-button-color-secondary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-secondary-disabled)}:host([disabled]) #button,:host([type=tertiary][disabled]) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-tertiary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-icon-button-color-tertiary-disabled-border-initial);--sinch-local-color-icon:var(--sinch-comp-icon-button-color-tertiary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-tertiary-disabled)}:host([type=primary]:focus) #button{--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-primary-focus)}:host([type=secondary]:focus) #button{--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-secondary-focus)}:host(:focus),:host([type=tertiary]:focus) #button{--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-tertiary-focus)}:host([type=primary]:not([disabled]):hover) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-primary-hover)}:host([type=secondary]:not([disabled]):hover) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-secondary-hover)}:host(:not([disabled]):hover) #button,:host([type=tertiary]:not([disabled]):active) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-tertiary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-tertiary-hover)}:host([type=primary]:not([disabled]):active) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-primary-active)}:host([type=secondary]:not([disabled]):active) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-secondary-active)}:host(:not([disabled]):active) #button,:host([type=tertiary]:not([disabled]):active) #button{--sinch-local-color-background:var(--sinch-comp-icon-button-color-tertiary-default-background-active);--sinch-local-shadow:var(--sinch-comp-icon-button-shadow-tertiary-active)}#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(:focus-visible) #button::after{content:"";position:absolute;inset:-3px;border:2px solid var(--sinch-local-color-outline);border-radius:calc(var(--sinch-local-shape-radius) + 3px);pointer-events:none}#content{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%}</style><sinch-tooltip id="tooltip"><div id="button"><div id="content" inert><slot name="icon"></slot></div></div></sinch-tooltip>';
 import { typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -44,6 +44,7 @@ defineCustomElement('sinch-icon-button', class extends NectaryElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.#controller.abort();
+    this.#controller = null;
   }
   static get observedAttributes() {
     return ['size', 'disabled', 'aria-label', 'data-size'];
@@ -101,7 +102,7 @@ defineCustomElement('sinch-icon-button', class extends NectaryElement {
     return true;
   }
   #onSizeUpdate() {
-    if (!this.isConnected) {
+    if (!this.isDomConnected) {
       return;
     }
     const size = getAttribute(this, 'data-size', DEFAULT_SIZE);