@nectary/components 2.2.1 → 2.2.2

package/color-swatch/index.js

@@ -16,19 +16,13 @@ defineCustomElement('sinch-color-swatch', class extends NectaryElement {
     super.connectedCallback();
     this.#updateColor();
   }
-  get name() {
-    return getAttribute(this, 'name');
-  }
-  set name(value) {
-    updateAttribute(this, 'name', value);
+  disconnectedCallback() {
+    super.disconnectedCallback();
   }
   static get observedAttributes() {
     return ['name'];
   }
-  attributeChangedCallback(name, oldValue, newVal) {
-    if (oldValue === newVal) {
-      return;
-    }
+  attributeChangedCallback(name) {
     switch (name) {
       case 'name':
         {
@@ -37,6 +31,12 @@ defineCustomElement('sinch-color-swatch', class extends NectaryElement {
         }
     }
   }
+  get name() {
+    return getAttribute(this, 'name');
+  }
+  set name(value) {
+    updateAttribute(this, 'name', value);
+  }
   #updateColor() {
     if (!this.isDomConnected) {
       return;

package/date-picker/index.js

@@ -67,9 +67,6 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
     return ['value', 'min', 'max', 'locale', 'range', 'prev-year-aria-label', 'next-year-aria-label', 'prev-month-aria-label', 'next-month-aria-label'];
   }
   attributeChangedCallback(name, prevValue, newVal) {
-    if (newVal === prevValue) {
-      return;
-    }
     switch (name) {
       case 'value':
         {

package/dialog/index.js

@@ -2,7 +2,7 @@ import '../icon-button';
 import '../icon';
 import '../stop-events';
 import '../title';
-import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute, getReactEventHandler, NectaryElement, updateBooleanAttribute, setClass, isTargetEqual } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute, getReactEventHandler, NectaryElement, updateBooleanAttribute, setClass, isTargetEqual, isAttrEqual } from '../utils';
 const templateHTML = '<style>:host{display:contents;--sinch-comp-dialog-max-width:512px;--sinch-comp-dialog-max-height:50vh}#dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px 0;max-width:var(--sinch-comp-dialog-max-width);max-height:unset;border-radius:var(--sinch-comp-dialog-shape-radius);box-sizing:border-box;contain:content;background-color:var(--sinch-comp-dialog-color-default-background-initial);border:none;box-shadow:var(--sinch-comp-dialog-shadow);outline:0}#dialog:not([open]){display:none}dialog::backdrop{background-color:#000;opacity:.55}#header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;margin-bottom:12px;padding:0 24px}#caption{--sinch-global-color-text:var(--sinch-comp-dialog-color-default-title-initial);--sinch-comp-title-font:var(--sinch-comp-dialog-font-title)}#content{min-height:0;overflow:auto;max-height:var(--sinch-comp-dialog-max-height);padding:4px 24px}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:20px;padding:0 24px}#action.empty{display:none}#close{position:relative;left:4px;top:-4px;--sinch-global-color-icon:var(--sinch-comp-dialog-color-default-icon-initial)}</style><dialog id="dialog"><div id="header"><sinch-title id="caption" type="m" level="3" ellipsis></sinch-title><sinch-icon-button id="close" size="s"><sinch-icon id="icon-close" slot="icon" name="close"></sinch-icon></sinch-icon-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="action"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
 import { disableScroll, enableScroll } from './utils';
 const template = document.createElement('template');
@@ -26,31 +26,34 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    this.setAttribute('role', 'dialog');
     this.#controller = new AbortController();
     const options = {
       signal: this.#controller.signal
     };
+    this.role = 'dialog';
     this.#$closeButton.addEventListener('click', this.#onCloseClick, options);
     this.#$dialog.addEventListener('mousedown', this.#onBackdropMouseDown, options);
     this.#$dialog.addEventListener('cancel', this.#onCancel, options);
     this.#$actionSlot.addEventListener('slotchange', this.#onActionSlotChange, options);
     this.addEventListener('-close', this.#onCloseReactHandler, options);
     this.#onActionSlotChange();
-    if (getBooleanAttribute(this, 'open')) {
+    if (this.open) {
       this.#onExpand();
     }
   }
   disconnectedCallback() {
-    this.#onCollapse();
     super.disconnectedCallback();
+    this.#onCollapse();
     this.#controller.abort();
     this.#controller = null;
   }
   static get observedAttributes() {
     return ['caption', 'open', 'close-aria-label'];
   }
-  attributeChangedCallback(name, _, newVal) {
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (isAttrEqual(oldVal, newVal)) {
+      return;
+    }
     switch (name) {
       case 'caption':
         {
@@ -83,6 +86,12 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
   get caption() {
     return getAttribute(this, 'caption', '');
   }
+  set open(isOpen) {
+    updateBooleanAttribute(this, 'open', isOpen);
+  }
+  get open() {
+    return getBooleanAttribute(this, 'open');
+  }
   get dialogRect() {
     return getRect(this.#$dialog);
   }
@@ -116,22 +125,19 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
     }));
   }
   #onExpand() {
-    if (!this.isDomConnected || this.#isOpen()) {
+    if (!this.isDomConnected || this.#$dialog.open || !this.open) {
       return;
     }
     this.#$dialog.showModal();
     disableScroll();
   }
   #onCollapse() {
-    if (!this.#isOpen()) {
+    if (!this.#$dialog.open) {
       return;
     }
     this.#$dialog.close?.();
     enableScroll();
   }
-  #isOpen() {
-    return getBooleanAttribute(this.#$dialog, 'open');
-  }
   #onActionSlotChange = () => {
     setClass(this.#$actionWrapper, 'empty', this.#$actionSlot.assignedElements().length === 0);
   };

package/dialog/types.d.ts

@@ -1,6 +1,8 @@
 import type { TRect, TSinchElementReact } from '../types';
 export type TSinchDialogCloseDetail = 'close' | 'escape' | 'backdrop';
 export type TSinchDialogElement = HTMLElement & {
+    /** Open/close state */
+    open: boolean;
     /** Dialog caption */
     caption: string;
     readonly dialogRect: TRect;

package/emoji/index.js

@@ -15,6 +15,9 @@ defineCustomElement('sinch-emoji', class extends NectaryElement {
     super.connectedCallback();
     this.#updateChar();
   }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
   static get observedAttributes() {
     return ['char'];
   }

package/field/index.js

@@ -1,4 +1,4 @@
-import { defineCustomElement, getAttribute, getBooleanAttribute, getFirstSlotElement, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getFirstSlotElement, isAttrEqual, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
 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;
@@ -42,9 +42,6 @@ defineCustomElement('sinch-field', class extends NectaryElement {
     return ['label', 'optionaltext', 'additionaltext', 'invalidtext', 'disabled'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
-    if (oldVal === newVal) {
-      return;
-    }
     switch (name) {
       case 'label':
         {
@@ -68,6 +65,9 @@ defineCustomElement('sinch-field', class extends NectaryElement {
         }
       case 'disabled':
         {
+          if (isAttrEqual(oldVal, newVal)) {
+            break;
+          }
           updateBooleanAttribute(this, name, isAttrTrue(newVal));
           break;
         }

package/file-drop/index.js

@@ -1,6 +1,6 @@
 import '../text';
 import '../file-picker';
-import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getReactEventHandler, isAttrEqual, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block}#wrapper{position:relative;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-content:center;gap:8px;height:148px;min-width:148px;box-sizing:border-box;padding:16px;border-radius:var(--sinch-comp-file-drop-shape-radius);background-color:var(--sinch-comp-file-drop-color-default-background-initial)}#wrapper::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border:1px dashed var(--sinch-comp-file-drop-color-default-border-initial);border-radius:var(--sinch-comp-file-drop-shape-radius);pointer-events:none}#placeholder{align-self:center;text-align:center;--sinch-global-color-text:var(--sinch-comp-file-drop-color-default-placeholder-initial);--sinch-comp-text-font:var(--sinch-comp-file-drop-font-placeholder)}:host([invalid]) #wrapper{background-color:var(--sinch-comp-file-drop-color-invalid-background-initial)}:host([invalid]) #wrapper::after{border-color:var(--sinch-comp-file-drop-color-invalid-border-initial);border-width:1px}#wrapper.drop::after{pointer-events:all}#wrapper.drop.valid{background-color:var(--sinch-comp-file-drop-color-default-background-active)}#wrapper.drop.valid::after{border-color:var(--sinch-comp-file-drop-color-default-border-active);border-width:2px}#wrapper.drop.valid>#placeholder{--sinch-global-color-text:var(--sinch-comp-file-drop-color-default-placeholder-active)}:host([disabled])>#wrapper>#placeholder{--sinch-global-color-text:var(--sinch-comp-file-drop-color-disabled-placeholder-initial)}:host([disabled])>#wrapper{background-color:var(--sinch-comp-file-drop-color-disabled-background-initial)}:host([disabled])>#wrapper::after{border-color:var(--sinch-comp-file-drop-color-disabled-border-initial);border-width:1px}</style><div id="wrapper"><sinch-text id="placeholder" type="m" aria-hidden="true"></sinch-text><sinch-file-picker id="file-picker"><slot></slot></sinch-file-picker></div>';
 import { areFilesAccepted, doFilesSatisfySize } from './utils';
 const template = document.createElement('template');
@@ -9,6 +9,7 @@ defineCustomElement('sinch-file-drop', class extends NectaryElement {
   #$filePicker;
   #$dropArea;
   #$placeholder;
+  #controller = null;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -18,30 +19,31 @@ defineCustomElement('sinch-file-drop', class extends NectaryElement {
     this.#$filePicker = shadowRoot.querySelector('#file-picker');
   }
   connectedCallback() {
-    this.addEventListener('-change', this.#onChangeReactHandler);
-    this.addEventListener('-invalid', this.#onInvalidReactHandler);
-    this.addEventListener('dragenter', this.#onDragEnter);
-    this.addEventListener('dragleave', this.#onDragLeave);
-    this.addEventListener('dragover', this.#onDragOver);
-    this.addEventListener('drop', this.#onDrop);
-    this.#$filePicker.addEventListener('-change', this.#onFilePickerChange);
-    this.#$filePicker.addEventListener('-invalid', this.#onFilePickerInvalid);
+    this.#controller = new AbortController();
+    const {
+      signal
+    } = this.#controller;
+    const options = {
+      signal
+    };
+    this.addEventListener('-change', this.#onChangeReactHandler, options);
+    this.addEventListener('-invalid', this.#onInvalidReactHandler, options);
+    this.addEventListener('dragenter', this.#onDragEnter, options);
+    this.addEventListener('dragleave', this.#onDragLeave, options);
+    this.addEventListener('dragover', this.#onDragOver, options);
+    this.addEventListener('drop', this.#onDrop, options);
+    this.#$filePicker.addEventListener('-change', this.#onFilePickerChange, options);
+    this.#$filePicker.addEventListener('-invalid', this.#onFilePickerInvalid, options);
   }
   disconnectedCallback() {
-    this.removeEventListener('-change', this.#onChangeReactHandler);
-    this.removeEventListener('-invalid', this.#onInvalidReactHandler);
-    this.removeEventListener('dragenter', this.#onDragEnter);
-    this.removeEventListener('dragleave', this.#onDragLeave);
-    this.removeEventListener('dragover', this.#onDragOver);
-    this.removeEventListener('drop', this.#onDrop);
-    this.#$filePicker.removeEventListener('-change', this.#onFilePickerChange);
-    this.#$filePicker.removeEventListener('-invalid', this.#onFilePickerInvalid);
+    this.#controller.abort();
+    this.#controller = null;
   }
   static get observedAttributes() {
     return ['accept', 'multiple', 'placeholder', 'disabled', 'invalid', 'size'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
-    if (newVal === oldVal) {
+    if (isAttrEqual(oldVal, newVal)) {
       return;
     }
     switch (name) {
@@ -62,8 +64,8 @@ defineCustomElement('sinch-file-drop', class extends NectaryElement {
         }
       case 'disabled':
         {
-          updateBooleanAttribute(this, 'disabled', isAttrTrue(newVal));
           this.#setDragEffect(false);
+          updateBooleanAttribute(this, 'disabled', isAttrTrue(newVal));
           break;
         }
       case 'invalid':

package/file-picker/index.js

@@ -1,4 +1,4 @@
-import { defineCustomElement, getAttribute, getBooleanAttribute, getFirstSlotElement, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getFirstSlotElement, getIntegerAttribute, getReactEventHandler, isAttrEqual, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{display:inline-block}::slotted(*){display:block}</style><slot></slot>';
 import { doFilesSatisfySize } from './utils';
 const template = document.createElement('template');
@@ -35,6 +35,23 @@ defineCustomElement('sinch-file-picker', class extends NectaryElement {
   static get observedAttributes() {
     return ['accept', 'multiple'];
   }
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case 'multiple':
+        {
+          if (isAttrEqual(oldVal, newVal)) {
+            return;
+          }
+          updateBooleanAttribute(this.#$input, 'multiple', isAttrTrue(newVal));
+          break;
+        }
+      case 'accept':
+        {
+          updateAttribute(this.#$input, 'accept', newVal);
+          break;
+        }
+    }
+  }
   set multiple(isMultiple) {
     updateBooleanAttribute(this, 'multiple', isMultiple);
   }
@@ -53,23 +70,6 @@ defineCustomElement('sinch-file-picker', class extends NectaryElement {
   set size(value) {
     updateAttribute(this, 'size', value);
   }
-  attributeChangedCallback(name, oldVal, newVal) {
-    if (newVal === oldVal) {
-      return;
-    }
-    switch (name) {
-      case 'multiple':
-        {
-          updateBooleanAttribute(this.#$input, 'multiple', isAttrTrue(newVal));
-          break;
-        }
-      case 'accept':
-        {
-          updateAttribute(this.#$input, 'accept', newVal);
-          break;
-        }
-    }
-  }
   #onTargetSlotChange = () => {
     this.#$target?.removeEventListener('-click', this.#onTargetClick);
     this.#$target = getFirstSlotElement(this.#$targetSlot, true);

package/file-status/index.js

@@ -9,6 +9,7 @@ template.innerHTML = templateHTML;
 defineCustomElement('sinch-file-status', class extends NectaryElement {
   #$filename;
   #$contentSlot;
+  #controller = null;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -18,12 +19,17 @@ defineCustomElement('sinch-file-status', class extends NectaryElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    this.#$contentSlot.addEventListener('slotchange', this.#onContentSlotChange);
+    this.#controller = new AbortController();
+    const options = {
+      signal: this.#controller.signal
+    };
+    this.#$contentSlot.addEventListener('slotchange', this.#onContentSlotChange, options);
     this.#onContentSlotChange();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.#$contentSlot.removeEventListener('slotchange', this.#onContentSlotChange);
+    this.#controller.abort();
+    this.#controller = null;
   }
   get type() {
     return getLiteralAttribute(this, typeValues, 'type');
@@ -41,9 +47,6 @@ defineCustomElement('sinch-file-status', class extends NectaryElement {
     return ['filename'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
-    if (oldVal === newVal) {
-      return;
-    }
     switch (name) {
       case 'filename':
         {

package/flag/index.js

@@ -15,6 +15,9 @@ defineCustomElement('sinch-flag', class extends NectaryElement {
     super.connectedCallback();
     this.#updateCode();
   }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
   static get observedAttributes() {
     return ['code'];
   }

package/help-tooltip/index.d.ts

@@ -1,4 +1,5 @@
 import '../tooltip';
+import '../icon';
 import type { TSinchHelpTooltipElement, TSinchHelpTooltipReact } from './types';
 declare global {
     namespace JSX {

package/help-tooltip/index.js

@@ -1,6 +1,7 @@
 import '../tooltip';
+import '../icon';
 import { defineCustomElement, getAttribute, getIntegerAttribute, getReactEventHandler, NectaryElement, updateAttribute, updateIntegerAttribute } from '../utils';
-const templateHTML = '<style>:host{display:contents;--sinch-comp-help-tooltip-color-icon:var(--sinch-sys-color-text-default)}#icon{height:18px;fill:var(--sinch-comp-help-tooltip-color-icon)}</style><sinch-tooltip type="fast"><svg id="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Zm-1-4h2v2h-2v-2Zm1.61-9.96c-2.06-.3-3.88.97-4.43 2.79-.18.58.26 1.17.87 1.17h.2c.41 0 .74-.29.88-.67.32-.89 1.27-1.5 2.3-1.28.95.2 1.65 1.13 1.57 2.1-.1 1.34-1.62 1.63-2.45 2.88 0 .01-.01.01-.01.02-.01.02-.02.03-.03.05-.09.15-.18.32-.25.5-.01.03-.03.05-.04.08-.01.02-.01.04-.02.07-.12.34-.2.75-.2 1.25h2c0-.42.11-.77.28-1.07.02-.03.03-.06.05-.09.08-.14.18-.27.28-.39.01-.01.02-.03.03-.04.1-.12.21-.23.33-.34.96-.91 2.26-1.65 1.99-3.56-.24-1.74-1.61-3.21-3.35-3.47Z"/></svg></sinch-tooltip>';
+const templateHTML = '<style>:host{display:contents}#icon{--sinch-global-size-icon:18px}</style><sinch-tooltip type="fast"><sinch-icon id="icon" name="help"></sinch-icon></sinch-tooltip>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-help-tooltip', class extends NectaryElement {

package/horizontal-stepper/index.js

@@ -23,10 +23,7 @@ defineCustomElement('sinch-horizontal-stepper', class extends NectaryElement {
   static get observedAttributes() {
     return ['index'];
   }
-  attributeChangedCallback(name, oldVal, newVal) {
-    if (oldVal === newVal) {
-      return;
-    }
+  attributeChangedCallback(name) {
     switch (name) {
       case 'index':
         {

package/horizontal-stepper-item/index.js

@@ -22,9 +22,6 @@ defineCustomElement('sinch-horizontal-stepper-item', class extends NectaryElemen
     return ['label', 'description', 'data-index'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
-    if (oldVal === newVal) {
-      return;
-    }
     switch (name) {
       case 'label':
         {

package/icon-button/index.js

@@ -1,5 +1,5 @@
 import '../tooltip';
-import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, subscribeContext, updateAttribute, updateBooleanAttribute, updateLiteralAttribute, Context, getAttribute } from '../utils';
+import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, subscribeContext, updateAttribute, updateBooleanAttribute, updateLiteralAttribute, Context, getAttribute, isAttrEqual } 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;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';
@@ -50,14 +50,13 @@ defineCustomElement('sinch-icon-button', class extends NectaryElement {
     return ['size', 'disabled', 'aria-label', 'data-size'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
-    if (oldVal === newVal) {
-      return;
-    }
     switch (name) {
       case 'disabled':
         {
-          const isDisabled = isAttrTrue(newVal);
-          updateBooleanAttribute(this, 'disabled', isDisabled);
+          if (isAttrEqual(oldVal, newVal)) {
+            return;
+          }
+          updateBooleanAttribute(this, 'disabled', isAttrTrue(newVal));
           break;
         }
       case 'aria-label':

package/input/index.js

@@ -1,4 +1,4 @@
-import { Context, defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, isElementFocused, NectaryElement, setClass, subscribeContext, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute } from '../utils';
+import { Context, defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrEqual, isAttrTrue, isElementFocused, NectaryElement, setClass, subscribeContext, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute } from '../utils';
 import { DEFAULT_SIZE, sizeValues } from '../utils/size';
 const templateHTML = '<style>:host{all:initial;display:inline-block;vertical-align:middle}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;border-radius:var(--sinch-local-shape-radius);width:100%;height:var(--sinch-local-size);background-color:var(--sinch-comp-input-color-default-background-initial);--sinch-local-size:var(--sinch-comp-input-size-container-m);--sinch-global-size-icon:var(--sinch-comp-input-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-input-shape-radius-size-m)}:host([data-size="l"])>#wrapper{--sinch-local-size:var(--sinch-comp-input-size-container-l);--sinch-global-size-icon:var(--sinch-comp-input-size-icon-l);--sinch-local-shape-radius:var(--sinch-comp-input-shape-radius-size-l)}:host([data-size="m"])>#wrapper{--sinch-local-size:var(--sinch-comp-input-size-container-m);--sinch-global-size-icon:var(--sinch-comp-input-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-input-shape-radius-size-m)}:host([data-size="s"])>#wrapper{--sinch-local-size:var(--sinch-comp-input-size-container-s);--sinch-global-size-icon:var(--sinch-comp-input-size-icon-s);--sinch-local-shape-radius:var(--sinch-comp-input-shape-radius-size-s)}#input-wrapper{position:relative;flex:1;flex-basis:0;min-width:0;align-self:stretch}#input{all:initial;width:100%;height:100%;padding:0 12px;box-sizing:border-box;font:var(--sinch-comp-input-font-input);color:var(--sinch-comp-input-color-default-text-initial)}#input::placeholder{font:var(--sinch-comp-input-font-placeholder);color:var(--sinch-comp-input-color-default-text-placeholder);opacity:1}#input:disabled{color:var(--sinch-comp-input-color-disabled-text-initial);-webkit-text-fill-color:var(--sinch-comp-input-color-disabled-text-initial)}#input-mask{display:none;position:absolute;inset:0;padding:0 12px;pointer-events:none;color:var(--sinch-comp-input-color-default-text-placeholder);white-space:pre;height:fit-content;margin:auto 0;overflow:hidden}#border{position:absolute;border:1px solid var(--sinch-comp-input-color-default-border-initial);border-radius:var(--sinch-local-shape-radius);inset:0;pointer-events:none}:host([disabled]) #border{border-color:var(--sinch-comp-input-color-disabled-border-initial)}#input-wrapper:focus-within+#border{border-color:var(--sinch-comp-input-color-default-border-focus);border-width:2px}#input-mask,:host([mask]) #input{font:var(--sinch-sys-font-body-monospace-m)}:host([mask]) #input-mask{display:block}:host([invalid]:not([disabled])) #input-wrapper:not(:focus-within)+#border{border-color:var(--sinch-comp-input-color-invalid-border-initial)}#input[type=password]{font-size:1.5em;letter-spacing:.1em}#icon-wrapper{position:relative;height:100%}#icon{position:absolute;display:flex;align-items:center;left:12px;top:0;bottom:0;pointer-events:none;--sinch-global-color-icon:var(--sinch-comp-input-color-default-icon-initial)}:host([disabled]) #icon{--sinch-global-color-icon:var(--sinch-comp-input-color-disabled-icon-initial)}#icon-wrapper.empty{display:none}#icon-wrapper.empty~#input-wrapper>#input,#icon-wrapper.empty~#input-wrapper>#input-mask{padding-left:12px}#icon-wrapper:not(.empty)~#input-wrapper>#input,#icon-wrapper:not(.empty)~#input-wrapper>#input-mask{padding-left:calc(var(--sinch-global-size-icon) + 20px)}#right{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;padding-right:4px}#right.empty{display:none}#left{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;padding-left:4px}#left.empty{display:none}</style><div id="wrapper"><div id="left"><slot name="left"></slot></div><div id="icon-wrapper"><div id="icon"><slot name="icon"></slot></div></div><div id="input-wrapper"><div id="input-mask"></div><input id="input" type="text"/></div><div id="border"></div><div id="right"><slot name="right"></slot></div></div>';
 import { deleteContentBackward, deleteContentForward, getMaskSymbols, inputTypes, insertText, beginMaskedComposition, endMaskedComposition, splitValueAndMask, getMergedValueSliced, insertFromPaste } from './utils';
@@ -42,7 +42,7 @@ defineCustomElement('sinch-input', class extends NectaryElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    this.setAttribute('role', 'textbox');
+    this.role = 'textbox';
     if (this.#controller === null) {
       this.#controller = new AbortController();
     }
@@ -82,9 +82,6 @@ defineCustomElement('sinch-input', class extends NectaryElement {
     return ['type', 'value', 'placeholder', 'mask', 'invalid', 'disabled', 'size', 'autocomplete', 'data-size', 'aria-label'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
-    if (oldVal === newVal) {
-      return;
-    }
     switch (name) {
       case 'type':
         {
@@ -134,6 +131,9 @@ defineCustomElement('sinch-input', class extends NectaryElement {
         }
       case 'invalid':
         {
+          if (isAttrEqual(oldVal, newVal)) {
+            return;
+          }
           const isInvalid = isAttrTrue(newVal);
           updateExplicitBooleanAttribute(this, 'aria-invalid', isInvalid);
           updateBooleanAttribute(this, name, isInvalid);
@@ -141,6 +141,9 @@ defineCustomElement('sinch-input', class extends NectaryElement {
         }
       case 'disabled':
         {
+          if (isAttrEqual(oldVal, newVal)) {
+            return;
+          }
           const isDisabled = isAttrTrue(newVal);
           this.#$input.disabled = isDisabled;
           updateBooleanAttribute(this, name, isDisabled);

package/link/index.js

@@ -1,5 +1,5 @@
 import '../icon';
-import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, isAttrTrue, getReactEventHandler } from '../utils';
+import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, isAttrTrue, getReactEventHandler, isAttrEqual } from '../utils';
 const templateHTML = '<style>:host{display:inline}a{font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap;--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-initial)}a:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover);--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-hover)}a:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host([standalone]){display:block}:host([standalone]) a{display:block;font:var(--sinch-comp-link-standalone-font-initial);font-size:inherit;line-height:inherit;text-decoration:none;width:fit-content}#external-icon,#standalone-icon{display:none;height:1em}#standalone-icon-prefix{display:none}:host([external]:not([standalone])) #external-icon{display:inline-block;margin-right:.2em;vertical-align:-.2em;--sinch-global-size-icon:1em}:host([standalone][external]) #external-icon{display:inline-block;vertical-align:-.4em;margin-right:-.4em;--sinch-global-size-icon:1.5em}:host([standalone]) #standalone-icon-prefix{display:inline}:host([standalone]:not([external])) #standalone-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([disabled]) a{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled);--sinch-global-color-icon:var(--sinch-comp-link-color-disabled-icon-initial)}#content{white-space:var(--sinch-global-text-white-space,normal)}</style><a referrerpolicy="no-referer" aria-hidden="true"><sinch-icon id="external-icon" name="open_in_new"></sinch-icon><span id="content"></span><span id="standalone-icon-prefix">&nbsp;</span><sinch-icon id="standalone-icon" name="arrow_forward"></sinch-icon></a>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -34,7 +34,7 @@ defineCustomElement('sinch-link', class extends NectaryElement {
     return ['text', 'href', 'external', 'standalone', 'disabled'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
-    if (oldVal === newVal) {
+    if (isAttrEqual(oldVal, newVal)) {
       return;
     }
     switch (name) {

package/package.json

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

package/pagination/index.js

@@ -1,6 +1,6 @@
 import '../icon';
 import { defineCustomElement, updateAttribute, getIntegerAttribute, setClass, NectaryElement, getRect, getReactEventHandler, isTargetEqual, getTargetIndexInParent } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;justify-content:center;gap:8px;width:100%;height:var(--sinch-local-size);--sinch-local-size:24px}button{all:initial;position:relative;display:flex;justify-content:center;align-items:center;width:var(--sinch-local-size);height:var(--sinch-local-size);cursor:pointer;border-radius:var(--sinch-comp-pagination-shape-radius);--sinch-global-color-icon:var(--sinch-comp-pagination-color-default-icon-default)}button:focus-visible::before{content:"";position:absolute;inset:-4px;border:2px solid var(--sinch-comp-pagination-color-default-outline-focus);border-radius:calc(var(--sinch-comp-pagination-shape-radius) + 4px);pointer-events:none}button:disabled{--sinch-global-color-icon:var(--sinch-comp-pagination-color-disabled-icon-initial);cursor:initial}button:enabled:hover{background-color:var(--sinch-comp-pagination-color-default-background-hover)}button>*{display:block;overflow:hidden;pointer-events:none}.page{font:var(--sinch-comp-pagination-font-default-page-number);color:var(--sinch-comp-pagination-color-default-text-initial);background-color:var(--sinch-comp-pagination-color-default-background-initial)}.page.dots>span{display:none}.page.dots::after{content:"..."}.page.active{font:var(--sinch-comp-pagination-font-checked-page-number);background-color:var(--sinch-comp-pagination-color-checked-background-initial);pointer-events:none;cursor:initial}.page.active:hover{background-color:var(--sinch-comp-pagination-color-checked-background-hover)}.page.hidden{display:none}#left,#right{--sinch-icon-size:24px}</style><div id="wrapper"><button id="left"><sinch-icon id="icon-left" name="keyboard_arrow_left"></sinch-icon></button><button class="page"><span>1</span></button><button class="page active"><span>2</span></button><button class="page"><span>3</span></button><button class="page"><span>4</span></button><button class="page"><span>5</span></button><button class="page dots"><span>6</span></button><button class="page"><span>20</span></button><button id="right"><sinch-icon id="icon-right" name="keyboard_arrow_right"></sinch-icon></button></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;justify-content:center;gap:8px;width:100%;height:var(--sinch-local-size);--sinch-local-size:24px}button{all:initial;position:relative;display:flex;justify-content:center;align-items:center;min-width:var(--sinch-local-size);height:var(--sinch-local-size);cursor:pointer;border-radius:var(--sinch-comp-pagination-shape-radius);user-select:none;--sinch-global-color-icon:var(--sinch-comp-pagination-color-default-icon-default)}button:focus-visible::before{content:"";position:absolute;inset:-3px;border:2px solid var(--sinch-comp-pagination-color-default-outline-focus);border-radius:calc(var(--sinch-comp-pagination-shape-radius) + 3px);pointer-events:none}button:disabled{--sinch-global-color-icon:var(--sinch-comp-pagination-color-disabled-icon-initial);cursor:initial}button:enabled:hover{background-color:var(--sinch-comp-pagination-color-default-background-hover)}button>*{display:block;overflow:hidden;pointer-events:none}.page{font:var(--sinch-comp-pagination-font-default-page-number);color:var(--sinch-comp-pagination-color-default-text-initial);background-color:var(--sinch-comp-pagination-color-default-background-initial);padding:0 4px;box-sizing:border-box}.page.dots>span{display:none}.page.dots::after{content:"..."}.page.active{font:var(--sinch-comp-pagination-font-checked-page-number);background-color:var(--sinch-comp-pagination-color-checked-background-initial);pointer-events:none;cursor:initial}.page.active:hover{background-color:var(--sinch-comp-pagination-color-checked-background-hover)}.page.hidden{display:none}#left,#right{--sinch-icon-size:24px}</style><div id="wrapper"><button id="left"><sinch-icon id="icon-left" name="keyboard_arrow_left"></sinch-icon></button><button class="page"><span>1</span></button><button class="page active"><span>2</span></button><button class="page"><span>3</span></button><button class="page"><span>4</span></button><button class="page"><span>5</span></button><button class="page dots"><span>6</span></button><button class="page"><span>20</span></button><button id="right"><sinch-icon id="icon-right" name="keyboard_arrow_right"></sinch-icon></button></div>';
 const NUM_BUTTONS = 7;
 const MIDDLE_BTN_INDEX = Math.floor(NUM_BUTTONS / 2);
 const FIRST_BTN_INDEX = 0;
@@ -35,13 +35,9 @@ defineCustomElement('sinch-pagination', class extends NectaryElement {
   static get observedAttributes() {
     return ['max', 'value'];
   }
-  attributeChangedCallback(name, _) {
+  attributeChangedCallback(name) {
     switch (name) {
       case 'value':
-        {
-          this.#onValueChange();
-          break;
-        }
       case 'max':
         {
           this.#onValueChange();

package/pop/index.js

@@ -1,4 +1,4 @@
-import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute, NectaryElement, throttleAnimationFrame, isElementFocused, updateIntegerAttribute, getIntegerAttribute, getFirstFocusableElement, getFirstSlotElement, Context, subscribeContext, isTargetEqual } from '../utils';
+import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute, NectaryElement, throttleAnimationFrame, isElementFocused, updateIntegerAttribute, getIntegerAttribute, getFirstFocusableElement, getFirstSlotElement, Context, subscribeContext, isTargetEqual, isAttrEqual } from '../utils';
 const templateHTML = '<style>:host{display:contents;position:relative}dialog{position:fixed;left:0;top:0;margin:0;outline:0;padding:0;border:none;box-sizing:border-box;max-width:unset;max-height:unset;z-index:1;background:0 0;overflow:visible}dialog:not([open]){display:none}dialog::backdrop{background-color:transparent}#content{position:relative;z-index:1}#target-open{display:flex;flex-direction:column;position:absolute;left:0;top:0}#focus{display:none;position:absolute;width:0;height:0}</style><slot id="target" name="target" aria-haspopup="dialog" aria-expanded="false"></slot><div id="focus"></div><dialog id="dialog"><div id="target-open"><slot name="target-open"></slot></div><div id="content"><slot name="content"></slot></div></dialog>';
 import { disableOverscroll, enableOverscroll, orientationValues } from './utils';
 const template = document.createElement('template');
@@ -101,13 +101,14 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
     return getRect(this.#$dialog);
   }
   attributeChangedCallback(name, oldVal, newVal) {
-    if (oldVal === newVal) {
+    if (isAttrEqual(oldVal, newVal)) {
       return;
     }
     switch (name) {
       case 'open':
         {
-          if (isAttrTrue(newVal)) {
+          const shouldOpen = isAttrTrue(newVal);
+          if (shouldOpen) {
             requestAnimationFrame(() => {
               if (this.isDomConnected && getBooleanAttribute(this, 'open')) {
                 this.#onExpand();
@@ -116,7 +117,7 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
           } else {
             this.#onCollapse();
           }
-          updateBooleanAttribute(this, 'open', isAttrTrue(newVal));
+          updateBooleanAttribute(this, 'open', shouldOpen);
           break;
         }
       case 'orientation':

package/popover/index.js

@@ -1,5 +1,5 @@
 import '../pop';
-import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, updateLiteralAttribute, updateBooleanAttribute, NectaryElement, updateAttribute, getReactEventHandler, isAttrTrue, setClass, rectOverlap, subscribeContext } from '../utils';
+import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, updateLiteralAttribute, updateBooleanAttribute, NectaryElement, updateAttribute, getReactEventHandler, isAttrTrue, setClass, rectOverlap, subscribeContext, isAttrEqual } from '../utils';
 const templateHTML = '<style>:host{display:contents}#content-wrapper{position:relative;padding-top:4px}:host([tip]) #content-wrapper{padding-top:12px;filter:drop-shadow(var(--sinch-comp-popover-shadow))}:host([orientation^=top]) #content-wrapper{padding-top:0;padding-bottom:4px}:host([orientation^=top][tip]) #content-wrapper{padding-top:0;padding-bottom:12px}#content{background-color:var(--sinch-comp-popover-color-default-background-initial);border:1px solid var(--sinch-comp-popover-color-default-border-initial);border-radius:var(--sinch-comp-popover-shape-radius);box-shadow:var(--sinch-comp-popover-shadow);overflow:hidden}:host([tip]) #content{box-shadow:none}#tip{position:absolute;left:50%;top:13px;transform:translateX(-50%) rotate(180deg);transform-origin:top center;fill:var(--sinch-comp-popover-color-default-background-initial);stroke:var(--sinch-comp-popover-color-default-border-initial);stroke-linecap:square;pointer-events:none;display:none}:host([orientation^=top]) #tip{transform:translateX(-50%) rotate(0);top:calc(100% - 13px)}:host([tip]) #tip:not(.hidden){display:block}</style><sinch-pop id="pop" inset="4"><slot name="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><slot name="content"></slot></div><svg id="tip" width="16" height="9" aria-hidden="true"><path d="m0 0 8 8 8 -8"/></svg></div></sinch-pop>';
 import { getPopOrientation, orientationValues } from './utils';
 const TIP_SIZE = 16;
@@ -40,7 +40,7 @@ defineCustomElement('sinch-popover', class extends NectaryElement {
     return ['orientation', 'open', 'modal', 'tip'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
-    if (oldVal === newVal) {
+    if (isAttrEqual(oldVal, newVal)) {
       return;
     }
     switch (name) {