@nectary/components 4.12.0 → 4.12.1

package/code-tag/index.js

@@ -1,35 +1,32 @@
-import { getAttribute, updateAttribute } from "../utils/dom.js";
-import { defineCustomElement, NectaryElement } from "../utils/element.js";
-const templateHTML = '<style>\n:host {\n  display: inline;\n}\n\n#content {\n  font: var(--sinch-comp-code-tag-font-text);\n  font-size: inherit;\n  line-height: inherit;\n  color: var(--sinch-comp-code-tag-color-default-text-initial);\n  border: 1px solid var(--sinch-comp-code-tag-color-default-border-initial);\n  background-color: var(--sinch-comp-code-tag-color-default-background-initial);\n  padding: 0 0.25em;\n  border-radius: var(--sinch-comp-code-tag-shape-radius);\n  white-space: var(--sinch-global-text-white-space, normal);\n}\n</style>\n\n<span id="content"></span>\n';
-const template = document.createElement("template");
+import { defineCustomElement, getAttribute, updateAttribute, NectaryElement } from '../utils';
+const templateHTML = '<style>:host{display:inline}#content{font:var(--sinch-comp-code-tag-font-text);font-size:inherit;line-height:inherit;color:var(--sinch-comp-code-tag-color-default-text-initial);border:1px solid var(--sinch-comp-code-tag-color-default-border-initial);background-color:var(--sinch-comp-code-tag-color-default-background-initial);padding:0 .25em;border-radius:var(--sinch-comp-code-tag-shape-radius);white-space:var(--sinch-global-text-white-space,normal)}</style><span id="content"></span>';
+const template = document.createElement('template');
 template.innerHTML = templateHTML;
-class CodeTag extends NectaryElement {
+export class CodeTag extends NectaryElement {
   #$text;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$text = shadowRoot.querySelector("#content");
+    this.#$text = shadowRoot.querySelector('#content');
   }
   static get observedAttributes() {
-    return ["text"];
+    return ['text'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
-      case "text": {
-        this.#$text.textContent = newVal;
-        break;
-      }
+      case 'text':
+        {
+          this.#$text.textContent = newVal;
+          break;
+        }
     }
   }
   get text() {
-    return getAttribute(this, "text", "");
+    return getAttribute(this, 'text', '');
   }
   set text(value) {
-    updateAttribute(this, "text", value);
+    updateAttribute(this, 'text', value);
   }
 }
-defineCustomElement("sinch-code-tag", CodeTag);
-export {
-  CodeTag
-};
+defineCustomElement('sinch-code-tag', CodeTag);

package/code-tag/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TSinchCodeTagProps = {
     /** Text content of hyperlink */
     text: string;
@@ -17,23 +17,3 @@ export type TSinchCodeTag = {
 };
 export type TSinchCodeTagElement = NectaryComponentVanillaByType<TSinchCodeTag>;
 export type TSinchCodeTagReact = NectaryComponentReactByType<TSinchCodeTag>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-code-tag': TSinchCodeTag;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-code-tag': NectaryComponentVanilla<'sinch-code-tag'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-code-tag': NectaryComponentReact<'sinch-code-tag'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-code-tag': NectaryComponentReact<'sinch-code-tag'>;
-        }
-    }
-}

package/code-tag/types.js

@@ -1 +1 @@
-
+export {};

package/color-menu/index.d.ts

@@ -1,6 +1,6 @@
 import { NectaryElement } from '../utils';
-import type { TRect } from '../types';
-export * from './types';
+import type { TSinchColorMenu } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla, TRect } from '../types';
 export declare class ColorMenu extends NectaryElement {
     #private;
     constructor();
@@ -19,3 +19,23 @@ export declare class ColorMenu extends NectaryElement {
     get focusable(): boolean;
     nthItemRect(index: number): TRect | null;
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-color-menu': TSinchColorMenu;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-color-menu': NectaryComponentVanilla<'sinch-color-menu'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-color-menu': NectaryComponentReact<'sinch-color-menu'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-color-menu': NectaryComponentReact<'sinch-color-menu'>;
+        }
+    }
+}

package/color-menu/index.js

@@ -1,16 +1,11 @@
-import { subscribeContext } from "../utils/context.js";
-import { updateAttribute, getAttribute, updateIntegerAttribute, getIntegerAttribute, attrValueToPixels, updateBooleanAttribute, updateExplicitBooleanAttribute, getBooleanAttribute } from "../utils/dom.js";
-import { defineCustomElement, NectaryElement } from "../utils/element.js";
-import { getRect } from "../utils/rect.js";
-import { getReactEventHandler } from "../utils/get-react-event-handler.js";
-import { getTargetByAttribute } from "../utils/event-target.js";
-const templateHTML = '<style>\n:host {\n  display: block;\n  outline: none;\n}\n\n#listbox {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  padding: 4px 10px;\n  overflow-y: auto;\n}\n\n#listbox.empty {\n  display: none;\n}\n</style>\n\n<div id="listbox" role="presentation">\n  <slot id="options"></slot>\n</div>\n';
+import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getReactEventHandler, getRect, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateIntegerAttribute, subscribeContext, getTargetByAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#listbox{display:flex;flex-direction:row;flex-wrap:wrap;padding:4px 10px;overflow-y:auto}#listbox.empty{display:none}</style><div id="listbox" role="presentation"><slot id="options"></slot></div>';
 const NUM_COLS_DEFAULT = 5;
 const ITEM_WIDTH = 44;
 const ITEM_HEIGHT = 56;
-const template = document.createElement("template");
+const template = document.createElement('template');
 template.innerHTML = templateHTML;
-class ColorMenu extends NectaryElement {
+export class ColorMenu extends NectaryElement {
   #$listbox;
   #$optionsSlot;
   #controller = null;
@@ -18,23 +13,27 @@ class ColorMenu extends NectaryElement {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$listbox = shadowRoot.querySelector("#listbox");
-    this.#$optionsSlot = shadowRoot.querySelector("#options");
+    this.#$listbox = shadowRoot.querySelector('#listbox');
+    this.#$optionsSlot = shadowRoot.querySelector('#options');
   }
   connectedCallback() {
     super.connectedCallback();
     this.#controller = new AbortController();
-    const { signal } = this.#controller;
-    const options = { signal };
-    this.setAttribute("role", "listbox");
+    const {
+      signal
+    } = this.#controller;
+    const options = {
+      signal
+    };
+    this.setAttribute('role', 'listbox');
     this.tabIndex = 0;
-    this.addEventListener("keydown", this.#onListboxKeyDown, options);
-    this.addEventListener("blur", this.#onListboxBlur, options);
-    this.#$listbox.addEventListener("click", this.#onListboxClick, options);
-    this.#$optionsSlot.addEventListener("slotchange", this.#onSlotChange, options);
-    this.addEventListener("-change", this.#onChangeReactHandler, options);
-    subscribeContext(this, "keydown", this.#onContextKeyDown, signal);
-    subscribeContext(this, "visibility", this.#onContextVisibility, signal);
+    this.addEventListener('keydown', this.#onListboxKeyDown, options);
+    this.addEventListener('blur', this.#onListboxBlur, options);
+    this.#$listbox.addEventListener('click', this.#onListboxClick, options);
+    this.#$optionsSlot.addEventListener('slotchange', this.#onSlotChange, options);
+    this.addEventListener('-change', this.#onChangeReactHandler, options);
+    subscribeContext(this, 'keydown', this.#onContextKeyDown, signal);
+    subscribeContext(this, 'visibility', this.#onContextVisibility, signal);
     this.#onSlotChange();
   }
   disconnectedCallback() {
@@ -43,51 +42,54 @@ class ColorMenu extends NectaryElement {
     this.#controller = null;
   }
   static get observedAttributes() {
-    return ["value", "rows", "cols"];
+    return ['value', 'rows', 'cols'];
   }
   attributeChangedCallback(name) {
     switch (name) {
-      case "value": {
-        if (this.isDomConnected) {
-          this.#onValueChange();
+      case 'value':
+        {
+          if (this.isDomConnected) {
+            this.#onValueChange();
+          }
+          break;
         }
-        break;
-      }
-      case "rows": {
-        this.#updateRows();
-        break;
-      }
-      case "cols": {
-        if (this.isDomConnected) {
-          this.#updateColumns();
+      case 'rows':
+        {
+          this.#updateRows();
+          break;
+        }
+      case 'cols':
+        {
+          if (this.isDomConnected) {
+            this.#updateColumns();
+          }
+          break;
         }
-        break;
-      }
     }
   }
   set value(value) {
-    updateAttribute(this, "value", value);
+    updateAttribute(this, 'value', value);
   }
   get value() {
-    return getAttribute(this, "value", "");
+    return getAttribute(this, 'value', '');
   }
   set colors(value) {
-    updateAttribute(this, "colors", value);
+    updateAttribute(this, 'colors', value);
   }
   get colors() {
-    return getAttribute(this, "colors");
+    return getAttribute(this, 'colors');
   }
   set rows(value) {
-    updateIntegerAttribute(this, "rows", value);
+    updateIntegerAttribute(this, 'rows', value);
   }
   get rows() {
-    return getIntegerAttribute(this, "rows", null);
+    return getIntegerAttribute(this, 'rows', null);
   }
   set cols(value) {
-    updateIntegerAttribute(this, "cols", value);
+    updateIntegerAttribute(this, 'cols', value);
   }
   get cols() {
-    return getIntegerAttribute(this, "cols", null);
+    return getIntegerAttribute(this, 'cols', null);
   }
   get focusable() {
     return true;
@@ -104,92 +106,91 @@ class ColorMenu extends NectaryElement {
     this.#onValueChange();
   };
   #updateRows() {
-    const rowsValue = getAttribute(this, "rows");
-    this.#$listbox.style.maxHeight = attrValueToPixels(
-      rowsValue,
-      {
-        min: 2,
-        itemSizeMultiplier: ITEM_HEIGHT
-      }
-    );
+    const rowsValue = getAttribute(this, 'rows');
+    this.#$listbox.style.maxHeight = attrValueToPixels(rowsValue, {
+      min: 2,
+      itemSizeMultiplier: ITEM_HEIGHT
+    });
   }
   #updateColumns() {
-    const colsValue = getAttribute(this, "cols");
+    const colsValue = getAttribute(this, 'cols');
     const numItems = this.#getOptionElements().length;
-    this.#$listbox.style.width = attrValueToPixels(
-      colsValue,
-      {
-        min: 1,
-        max: numItems,
-        defaultValue: Math.min(numItems, NUM_COLS_DEFAULT),
-        itemSizeMultiplier: ITEM_WIDTH
-      }
-    );
+    this.#$listbox.style.width = attrValueToPixels(colsValue, {
+      min: 1,
+      max: numItems,
+      defaultValue: Math.min(numItems, NUM_COLS_DEFAULT),
+      itemSizeMultiplier: ITEM_WIDTH
+    });
   }
   #onListboxBlur = () => {
     this.#selectOption(null);
   };
-  #onListboxClick = (e) => {
-    const target = getTargetByAttribute(e, "value");
+  #onListboxClick = e => {
+    const target = getTargetByAttribute(e, 'value');
     if (target === null) {
       return;
     }
     this.focus();
     this.#dispatchChangeEvent(target);
   };
-  #onContextVisibility = (e) => {
+  #onContextVisibility = e => {
     if (e.detail) {
       this.#selectOption(this.#findCheckedOption());
     } else {
       this.#selectOption(null);
     }
   };
-  #onContextKeyDown = (e) => {
+  #onContextKeyDown = e => {
     this.#handleKeydown(e.detail);
   };
-  #onListboxKeyDown = (e) => {
+  #onListboxKeyDown = e => {
     this.#handleKeydown(e);
   };
   #handleKeydown(e) {
     switch (e.code) {
-      case "Space":
-      case "Enter": {
-        const $option = this.#findSelectedOption();
-        if ($option !== null) {
+      case 'Space':
+      case 'Enter':
+        {
+          const $option = this.#findSelectedOption();
+          if ($option !== null) {
+            e.preventDefault();
+            this.#dispatchChangeEvent($option);
+          }
+          break;
+        }
+      case 'ArrowLeft':
+        {
           e.preventDefault();
-          this.#dispatchChangeEvent($option);
+          this.#selectOption(this.#getPrevOption());
+          break;
+        }
+      case 'ArrowRight':
+        {
+          e.preventDefault();
+          this.#selectOption(this.#getNextOption());
+          break;
+        }
+      case 'ArrowDown':
+        {
+          e.preventDefault();
+          this.#selectOption(this.#getNextRowOption());
+          break;
+        }
+      case 'ArrowUp':
+        {
+          e.preventDefault();
+          this.#selectOption(this.#getPrevRowOption());
+          break;
         }
-        break;
-      }
-      case "ArrowLeft": {
-        e.preventDefault();
-        this.#selectOption(this.#getPrevOption());
-        break;
-      }
-      case "ArrowRight": {
-        e.preventDefault();
-        this.#selectOption(this.#getNextOption());
-        break;
-      }
-      case "ArrowDown": {
-        e.preventDefault();
-        this.#selectOption(this.#getNextRowOption());
-        break;
-      }
-      case "ArrowUp": {
-        e.preventDefault();
-        this.#selectOption(this.#getPrevRowOption());
-        break;
-      }
     }
   }
   #onValueChange() {
     const value = this.value;
     for (const $option of this.#getOptionElements()) {
-      const isChecked = value === getAttribute($option, "value", "");
-      updateBooleanAttribute($option, "data-checked", isChecked);
-      updateBooleanAttribute($option, "data-selected", isChecked);
-      updateExplicitBooleanAttribute($option, "aria-selected", isChecked);
+      const isChecked = value === getAttribute($option, 'value', '');
+      updateBooleanAttribute($option, 'data-checked', isChecked);
+      updateBooleanAttribute($option, 'data-selected', isChecked);
+      updateExplicitBooleanAttribute($option, 'aria-selected', isChecked);
     }
   }
   #getFirstOption() {
@@ -252,12 +253,14 @@ class ColorMenu extends NectaryElement {
     return this.#getFirstOption();
   }
   #selectOption($option) {
-    const hasRows = this.hasAttribute("rows");
+    const hasRows = this.hasAttribute('rows');
     for (const $op of this.#getOptionElements()) {
       const isSelected = $op === $option;
-      updateBooleanAttribute($op, "data-selected", isSelected);
-      if (isSelected && Boolean(hasRows)) {
-        $op.scrollIntoView?.({ block: "nearest" });
+      updateBooleanAttribute($op, 'data-selected', isSelected);
+      if (isSelected && hasRows) {
+        $op.scrollIntoView?.({
+          block: 'nearest'
+        });
       }
     }
   }
@@ -268,7 +271,7 @@ class ColorMenu extends NectaryElement {
     const elements = this.#getOptionElements();
     for (let i = 0; i < elements.length; i++) {
       const el = elements[i];
-      if (getBooleanAttribute(el, "data-selected")) {
+      if (getBooleanAttribute(el, 'data-selected')) {
         return i;
       }
     }
@@ -277,7 +280,7 @@ class ColorMenu extends NectaryElement {
   #findSelectedOption() {
     const elements = this.#getOptionElements();
     for (const el of elements) {
-      if (getBooleanAttribute(el, "data-selected")) {
+      if (getBooleanAttribute(el, 'data-selected')) {
         return el;
       }
     }
@@ -287,23 +290,20 @@ class ColorMenu extends NectaryElement {
     const elements = this.#getOptionElements();
     const value = this.value;
     for (const $el of elements) {
-      if (getAttribute($el, "value") === value) {
+      if (getAttribute($el, 'value') === value) {
         return $el;
       }
     }
     return null;
   }
   #dispatchChangeEvent($opt) {
-    const value = getAttribute($opt, "value", "");
-    this.dispatchEvent(
-      new CustomEvent("-change", { detail: value })
-    );
+    const value = getAttribute($opt, 'value', '');
+    this.dispatchEvent(new CustomEvent('-change', {
+      detail: value
+    }));
   }
-  #onChangeReactHandler = (e) => {
-    getReactEventHandler(this, "on-change")?.(e);
+  #onChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-change')?.(e);
   };
 }
-defineCustomElement("sinch-color-menu", ColorMenu);
-export {
-  ColorMenu
-};
+defineCustomElement('sinch-color-menu', ColorMenu);

package/color-menu/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect } from '../types';
 export type TSinchColorMenuProps = {
     /** Value */
     value: string;
@@ -23,23 +23,3 @@ export type TSinchColorMenu = {
 };
 export type TSinchColorMenuElement = NectaryComponentVanillaByType<TSinchColorMenu>;
 export type TSinchColorMenuReact = NectaryComponentReactByType<TSinchColorMenu>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-color-menu': TSinchColorMenu;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-color-menu': NectaryComponentVanilla<'sinch-color-menu'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-color-menu': NectaryComponentReact<'sinch-color-menu'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-color-menu': NectaryComponentReact<'sinch-color-menu'>;
-        }
-    }
-}

package/color-menu/types.js

@@ -1 +1 @@
-
+export {};

package/color-menu/utils.js

@@ -1,6 +1,6 @@
-const getParentOption = ($element) => {
+export const getParentOption = $element => {
   let $el = $element;
-  while (!$el.hasAttribute("data-value")) {
+  while (!$el.hasAttribute('data-value')) {
     const parent = $el.parentElement;
     if (parent === null) {
       return null;
@@ -8,7 +8,4 @@ const getParentOption = ($element) => {
     $el = parent;
   }
   return $el;
-};
-export {
-  getParentOption
-};
+};

package/color-menu-option/index.d.ts

@@ -1,7 +1,8 @@
 import '../color-swatch';
 import '../tooltip';
 import { NectaryElement } from '../utils';
-export * from './types';
+import type { TSinchColorMenuOption } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export declare class ColorMenuOption extends NectaryElement {
     #private;
     constructor();
@@ -12,3 +13,23 @@ export declare class ColorMenuOption extends NectaryElement {
     set value(value: string);
     get value(): string;
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-color-menu-option': TSinchColorMenuOption;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-color-menu-option': NectaryComponentVanilla<'sinch-color-menu-option'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-color-menu-option': NectaryComponentReact<'sinch-color-menu-option'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-color-menu-option': NectaryComponentReact<'sinch-color-menu-option'>;
+        }
+    }
+}

package/color-menu-option/index.js

@@ -1,12 +1,11 @@
-import "../color-swatch/index.js";
-import "../tooltip/index.js";
-import { getSwatchColorFg } from "../color-swatch/utils.js";
-import { updateAttribute, getAttribute } from "../utils/dom.js";
-import { defineCustomElement, NectaryElement } from "../utils/element.js";
-const templateHTML = '<style>\n:host {\n  display: block;\n  outline: none;\n}\n\n#wrapper {\n  width: 44px;\n  height: 56px;\n  padding: 12px 6px;\n  box-sizing: border-box;\n}\n\n#swatch-wrapper {\n  position: relative;\n  cursor: pointer;\n  width: 32px;\n  height: 32px;\n}\n\n#swatch-wrapper::after {\n  content: "";\n  position: absolute;\n  width: 34px;\n  height: 34px;\n  inset: -3px;\n  border: 2px solid var(--sinch-comp-color-menu-option-color-default-border-initial);\n  border-radius: 50%;\n  pointer-events: none;\n}\n\n:host([data-checked]) #swatch-wrapper::after {\n  border-color: var(--sinch-comp-color-menu-option-color-default-border-selected);\n}\n\n:host([data-selected]) #swatch-wrapper::after {\n  border-color: var(--sinch-comp-color-menu-option-color-default-border-focus);\n}\n\n:host(:hover) #swatch-wrapper::after {\n  border-color: var(--sinch-comp-color-menu-option-color-default-border-hover);\n}\n\n:host(:active) #swatch-wrapper::after {\n  border-color: var(--sinch-comp-color-menu-option-color-default-border-active);\n}\n</style>\n\n<div id="wrapper">\n  <sinch-tooltip id="tooltip">\n    <div id="swatch-wrapper">\n      <sinch-color-swatch id="swatch"></sinch-color-swatch>\n    </div>\n  </sinch-tooltip>\n</div>\n';
-const template = document.createElement("template");
+import '../color-swatch';
+import '../tooltip';
+import { getSwatchColorFg } from '../color-swatch/utils';
+import { defineCustomElement, getAttribute, NectaryElement, updateAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{width:44px;height:56px;padding:12px 6px;box-sizing:border-box}#swatch-wrapper{position:relative;cursor:pointer;width:32px;height:32px}#swatch-wrapper::after{content:"";position:absolute;width:34px;height:34px;inset:-3px;border:2px solid var(--sinch-comp-color-menu-option-color-default-border-initial);border-radius:50%;pointer-events:none}:host([data-checked]) #swatch-wrapper::after{border-color:var(--sinch-comp-color-menu-option-color-default-border-selected)}:host([data-selected]) #swatch-wrapper::after{border-color:var(--sinch-comp-color-menu-option-color-default-border-focus)}:host(:hover) #swatch-wrapper::after{border-color:var(--sinch-comp-color-menu-option-color-default-border-hover)}:host(:active) #swatch-wrapper::after{border-color:var(--sinch-comp-color-menu-option-color-default-border-active)}</style><div id="wrapper"><sinch-tooltip id="tooltip"><div id="swatch-wrapper"><sinch-color-swatch id="swatch"></sinch-color-swatch></div></sinch-tooltip></div>';
+const template = document.createElement('template');
 template.innerHTML = templateHTML;
-class ColorMenuOption extends NectaryElement {
+export class ColorMenuOption extends NectaryElement {
   #$wrapper;
   #$tooltip;
   #$swatch;
@@ -14,40 +13,37 @@ class ColorMenuOption extends NectaryElement {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$wrapper = shadowRoot.querySelector("#wrapper");
-    this.#$tooltip = shadowRoot.querySelector("#tooltip");
-    this.#$swatch = shadowRoot.querySelector("#swatch");
+    this.#$wrapper = shadowRoot.querySelector('#wrapper');
+    this.#$tooltip = shadowRoot.querySelector('#tooltip');
+    this.#$swatch = shadowRoot.querySelector('#swatch');
   }
   connectedCallback() {
-    this.setAttribute("role", "option");
-  }
-  disconnectedCallback() {
+    this.setAttribute('role', 'option');
   }
+  disconnectedCallback() {}
   static get observedAttributes() {
-    return ["value"];
+    return ['value'];
   }
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
-      case "value": {
-        updateAttribute(this.#$tooltip, "text", newVal);
-        updateAttribute(this.#$swatch, "name", newVal);
-        if (newVal !== null) {
-          this.#$wrapper.style.setProperty("--sinch-global-color-icon", getSwatchColorFg(newVal));
-        } else {
-          this.#$wrapper.style.removeProperty("--sinch-global-color-icon");
+      case 'value':
+        {
+          updateAttribute(this.#$tooltip, 'text', newVal);
+          updateAttribute(this.#$swatch, 'name', newVal);
+          if (newVal !== null) {
+            this.#$wrapper.style.setProperty('--sinch-global-color-icon', getSwatchColorFg(newVal));
+          } else {
+            this.#$wrapper.style.removeProperty('--sinch-global-color-icon');
+          }
+          break;
         }
-        break;
-      }
     }
   }
   set value(value) {
-    updateAttribute(this, "value", value);
+    updateAttribute(this, 'value', value);
   }
   get value() {
-    return getAttribute(this, "value", "");
+    return getAttribute(this, 'value', '');
   }
 }
-defineCustomElement("sinch-color-menu-option", ColorMenuOption);
-export {
-  ColorMenuOption
-};
+defineCustomElement('sinch-color-menu-option', ColorMenuOption);