@nectary/components 4.12.0 → 4.12.1

package/title/index.js

@@ -1,62 +1,61 @@
-import { isAttrEqual, updateBooleanAttribute, isAttrTrue, updateAttribute, getAttribute, updateLiteralAttribute, getLiteralAttribute, getBooleanAttribute } from "../utils/dom.js";
-import { defineCustomElement, NectaryElement } from "../utils/element.js";
-import { typeValues } from "./utils.js";
-const templateHTML = '<style>\n:host {\n  display: block;\n\n  --sinch-comp-title-font: var(--sinch-sys-font-desktop-title-m);\n}\n\n:host([type="xl"]) {\n  --sinch-comp-title-font: var(--sinch-sys-font-desktop-title-xl);\n}\n\n:host([type="l"]) {\n  --sinch-comp-title-font: var(--sinch-sys-font-desktop-title-l);\n}\n\n:host([type="m"]) {\n  --sinch-comp-title-font: var(--sinch-sys-font-desktop-title-m);\n}\n\n:host([type="s"]) {\n  --sinch-comp-title-font: var(--sinch-sys-font-desktop-title-s);\n}\n\n:host([type="xs"]) {\n  --sinch-comp-title-font: var(--sinch-sys-font-desktop-title-xs);\n}\n\n#text {\n  letter-spacing: -2%;\n  color: var(--sinch-global-color-text, var(--sinch-sys-color-text-default));\n  font: var(--sinch-comp-title-font);\n}\n\n:host([ellipsis]) #text {\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n</style>\n\n<span id="text"></span>\n';
-const template = document.createElement("template");
+import { defineCustomElement, getAttribute, updateAttribute, updateLiteralAttribute, getLiteralAttribute, NectaryElement, updateBooleanAttribute, getBooleanAttribute, isAttrTrue, isAttrEqual } from '../utils';
+const templateHTML = '<style>:host{display:block;--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-m)}:host([type=xl]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-xl)}:host([type="l"]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-l)}:host([type="m"]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-m)}:host([type="s"]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-s)}:host([type=xs]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-xs)}#text{letter-spacing:-2%;color:var(--sinch-global-color-text,var(--sinch-sys-color-text-default));font:var(--sinch-comp-title-font)}:host([ellipsis]) #text{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}</style><span id="text"></span>';
+import { typeValues } from './utils';
+const template = document.createElement('template');
 template.innerHTML = templateHTML;
-class Title extends NectaryElement {
+export class Title extends NectaryElement {
   #$text;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$text = shadowRoot.querySelector("#text");
+    this.#$text = shadowRoot.querySelector('#text');
   }
   connectedCallback() {
-    this.setAttribute("role", "heading");
+    this.setAttribute('role', 'heading');
   }
   static get observedAttributes() {
-    return ["text", "level", "ellipsis"];
+    return ['text', 'level', 'ellipsis'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
-      case "text": {
-        this.#$text.textContent = newVal;
-        break;
-      }
-      case "level": {
-        updateAttribute(this, "aria-level", newVal);
-        break;
-      }
-      case "ellipsis": {
-        if (isAttrEqual(oldVal, newVal)) {
+      case 'text':
+        {
+          this.#$text.textContent = newVal;
+          break;
+        }
+      case 'level':
+        {
+          updateAttribute(this, 'aria-level', newVal);
+          break;
+        }
+      case 'ellipsis':
+        {
+          if (isAttrEqual(oldVal, newVal)) {
+            break;
+          }
+          updateBooleanAttribute(this, 'ellipsis', isAttrTrue(newVal));
           break;
         }
-        updateBooleanAttribute(this, "ellipsis", isAttrTrue(newVal));
-        break;
-      }
     }
   }
   get text() {
-    return getAttribute(this, "text", "");
+    return getAttribute(this, 'text', '');
   }
   set text(value) {
-    updateAttribute(this, "text", value);
+    updateAttribute(this, 'text', value);
   }
   set type(value) {
-    updateLiteralAttribute(this, typeValues, "type", value);
+    updateLiteralAttribute(this, typeValues, 'type', value);
   }
   get type() {
-    return getLiteralAttribute(this, typeValues, "type");
+    return getLiteralAttribute(this, typeValues, 'type');
   }
   set ellipsis(isEllipsis) {
-    updateBooleanAttribute(this, "ellipsis", isEllipsis);
+    updateBooleanAttribute(this, 'ellipsis', isEllipsis);
   }
   get ellipsis() {
-    return getBooleanAttribute(this, "ellipsis");
+    return getBooleanAttribute(this, 'ellipsis');
   }
 }
-defineCustomElement("sinch-title", Title);
-export {
-  Title
-};
+defineCustomElement('sinch-title', Title);

package/title/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TSinchTitleType = 'xl' | 'l' | 'm' | 's' | 'xs';
 export type TSinchTitleLevel = '1' | '2' | '3' | '4' | '5' | '6';
 export type TSinchTitleProps = {
@@ -27,23 +27,3 @@ export type TSinchTitle = {
 };
 export type TSinchTitleElement = NectaryComponentVanillaByType<TSinchTitle>;
 export type TSinchTitleReact = NectaryComponentReactByType<TSinchTitle>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-title': TSinchTitle;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-title': NectaryComponentVanilla<'sinch-title'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-title': NectaryComponentReact<'sinch-title'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-title': NectaryComponentReact<'sinch-title'>;
-        }
-    }
-}

package/title/types.js

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

package/title/utils.js

@@ -1,21 +1,17 @@
-const typeValues = ["xl", "l", "m", "s", "xs"];
-const getTitleLevelFromType = (type) => {
+export const typeValues = ['xl', 'l', 'm', 's', 'xs'];
+export const getTitleLevelFromType = type => {
   switch (type) {
-    case "xl":
-      return "1";
-    case "l":
-      return "2";
-    case "m":
-      return "3";
-    case "s":
-      return "4";
-    case "xs":
-      return "5";
+    case 'xl':
+      return '1';
+    case 'l':
+      return '2';
+    case 'm':
+      return '3';
+    case 's':
+      return '4';
+    case 'xs':
+      return '5';
     default:
-      return "";
+      return '';
   }
-};
-export {
-  getTitleLevelFromType,
-  typeValues
-};
+};

package/toast/index.d.ts

@@ -1,8 +1,8 @@
 import '../icon';
 import '../rich-text';
 import { NectaryElement } from '../utils';
-import type { TSinchToastType } from './types';
-export * from './types';
+import type { TSinchToastType, TSinchToast } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export declare class Toast extends NectaryElement {
     #private;
     constructor();
@@ -17,3 +17,23 @@ export declare class Toast extends NectaryElement {
     get persistent(): boolean;
     set persistent(isPersistent: boolean);
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-toast': TSinchToast;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-toast': NectaryComponentVanilla<'sinch-toast'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-toast': NectaryComponentReact<'sinch-toast'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-toast': NectaryComponentReact<'sinch-toast'>;
+        }
+    }
+}

package/toast/index.js

@@ -1,66 +1,66 @@
-import "../icon/index.js";
-import "../rich-text/index.js";
-import { updateAttribute, getLiteralAttribute, updateLiteralAttribute, getAttribute, getBooleanAttribute, updateBooleanAttribute } from "../utils/dom.js";
-import { defineCustomElement, NectaryElement } from "../utils/element.js";
-import { getReactEventHandler } from "../utils/get-react-event-handler.js";
-import { typeValues } from "./utils.js";
-const templateHTML = '<style>\n  :host {\n    display: block;\n  }\n\n  #wrapper {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n    width: 328px;\n    max-width: 90vw;\n    padding: 16px;\n    box-sizing: border-box;\n    border-radius: var(--sinch-comp-toast-shape-radius);\n    box-shadow: var(--sinch-comp-toast-shadow);\n  }\n\n  :host([type="success"]) #wrapper {\n    background-color: var(--sinch-comp-toast-color-success-default-background);\n  }\n\n  :host([type="warn"]) #wrapper {\n    background-color: var(--sinch-comp-toast-color-warning-default-background);\n  }\n\n  :host([type="error"]) #wrapper {\n    background-color: var(--sinch-comp-toast-color-error-default-background);\n  }\n\n  :host([type="info"]) #wrapper {\n    background-color: var(--sinch-comp-toast-color-info-default-background);\n  }\n\n  #text {\n    padding: 4px 0 4px 4px;\n    flex: 1;\n    min-width: 0;\n    word-wrap: break-word;\n\n    --sinch-comp-text-font: var(--sinch-comp-toast-font-body);\n  }\n\n  :host([type="success"]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-toast-color-success-default-text\n      );\n  }\n\n  :host([type="warn"]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-toast-color-warning-default-text\n      );\n  }\n\n  :host([type="error"]) #text {\n    --sinch-global-color-text: var(--sinch-comp-toast-color-error-default-text);\n  }\n\n  :host([type="info"]) #text {\n    --sinch-global-color-text: var(--sinch-comp-toast-color-info-default-text);\n  }\n\n  #icon {\n    align-self: flex-start;\n    margin: 4px 0;\n  }\n\n  #icon-info,\n  #icon-success,\n  #icon-warn,\n  #icon-error {\n    display: none;\n  }\n\n  #icon-success {\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-toast-color-success-default-icon\n      );\n  }\n\n  #icon-warn {\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-toast-color-warning-default-icon\n      );\n  }\n\n  #icon-error {\n    --sinch-global-color-icon: var(--sinch-comp-toast-color-error-default-icon);\n  }\n\n  #icon-info {\n    --sinch-global-color-icon: var(--sinch-comp-toast-color-info-default-icon);\n  }\n\n  :host([type="success"]) #icon-success,\n  :host([type="warn"]) #icon-warn,\n  :host([type="error"]) #icon-error,\n  :host([type="info"]) #icon-info {\n    display: block;\n  }\n</style>\n\n<div id="wrapper">\n  <sinch-icon icons-version="2" name="circle-info" id="icon-info"></sinch-icon>\n  <sinch-icon icons-version="2" name="circle-check" id="icon-success"></sinch-icon>\n  <sinch-icon icons-version="2" name="triangle-exclamation"\n    id="icon-warn"\n  ></sinch-icon>\n  <sinch-icon icons-version="2" name="octagon-exclamation"\n    id="icon-error"\n  ></sinch-icon>\n  <sinch-rich-text id="text" size="m"></sinch-rich-text>\n  <slot name="action"></slot>\n  <slot name="close"></slot>\n</div>\n';
-const TIMEOUT = 5e3;
-const template = document.createElement("template");
+import '../icon';
+import '../rich-text';
+import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, getReactEventHandler, getBooleanAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:center;gap:8px;width:328px;max-width:90vw;padding:16px;box-sizing:border-box;border-radius:var(--sinch-comp-toast-shape-radius);box-shadow:var(--sinch-comp-toast-shadow)}:host([type=success]) #wrapper{background-color:var(--sinch-comp-toast-color-success-default-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-toast-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-toast-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-toast-color-info-default-background)}#text{padding:4px 0 4px 4px;flex:1;min-width:0;word-wrap:break-word;--sinch-comp-text-font:var(--sinch-comp-toast-font-body)}:host([type=success]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-success-default-text)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-info-default-text)}#icon{align-self:flex-start;margin:4px 0}#icon-error,#icon-info,#icon-success,#icon-warn{display:none}#icon-success{--sinch-global-color-icon:var(--sinch-comp-toast-color-success-default-icon)}#icon-warn{--sinch-global-color-icon:var(--sinch-comp-toast-color-warning-default-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-toast-color-error-default-icon)}#icon-info{--sinch-global-color-icon:var(--sinch-comp-toast-color-info-default-icon)}:host([type=error]) #icon-error,:host([type=info]) #icon-info,:host([type=success]) #icon-success,:host([type=warn]) #icon-warn{display:block}</style><div id="wrapper"><sinch-icon icons-version="2" name="circle-info" id="icon-info"></sinch-icon><sinch-icon icons-version="2" name="circle-check" id="icon-success"></sinch-icon><sinch-icon icons-version="2" name="triangle-exclamation" id="icon-warn"></sinch-icon><sinch-icon icons-version="2" name="octagon-exclamation" id="icon-error"></sinch-icon><sinch-rich-text id="text" size="m"></sinch-rich-text><slot name="action"></slot><slot name="close"></slot></div>';
+import { typeValues } from './utils';
+const TIMEOUT = 5000;
+const template = document.createElement('template');
 template.innerHTML = templateHTML;
-class Toast extends NectaryElement {
+export class Toast extends NectaryElement {
   #$text;
   #tid = null;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$text = shadowRoot.querySelector("#text");
+    this.#$text = shadowRoot.querySelector('#text');
   }
   connectedCallback() {
     super.connectedCallback();
-    this.setAttribute("aria-atomic", "true");
-    this.setAttribute("aria-live", "polite");
-    this.addEventListener("-timeout", this.#onTimeoutReactHandler);
+    this.setAttribute('aria-atomic', 'true');
+    this.setAttribute('aria-live', 'polite');
+    this.addEventListener('-timeout', this.#onTimeoutReactHandler);
     this.#updateTimeout();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.removeEventListener("-timeout", this.#onTimeoutReactHandler);
+    this.removeEventListener('-timeout', this.#onTimeoutReactHandler);
     this.#clearTimeout();
   }
   static get observedAttributes() {
-    return ["text", "persistent"];
+    return ['text', 'persistent'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
-      case "text": {
-        updateAttribute(this.#$text, name, newVal);
-        break;
-      }
-      case "persistent": {
-        this.#updateTimeout();
-        break;
-      }
+      case 'text':
+        {
+          updateAttribute(this.#$text, name, newVal);
+          break;
+        }
+      case 'persistent':
+        {
+          this.#updateTimeout();
+          break;
+        }
     }
   }
   get type() {
-    return getLiteralAttribute(this, typeValues, "type");
+    return getLiteralAttribute(this, typeValues, 'type');
   }
   set type(value) {
-    updateLiteralAttribute(this, typeValues, "type", value);
+    updateLiteralAttribute(this, typeValues, 'type', value);
   }
   get text() {
-    return getAttribute(this, "text", "");
+    return getAttribute(this, 'text', '');
   }
   set text(value) {
-    updateAttribute(this, "text", value);
+    updateAttribute(this, 'text', value);
   }
   get persistent() {
-    return getBooleanAttribute(this, "persistent");
+    return getBooleanAttribute(this, 'persistent');
   }
   set persistent(isPersistent) {
-    updateBooleanAttribute(this, "persistent", isPersistent);
+    updateBooleanAttribute(this, 'persistent', isPersistent);
   }
   #updateTimeout() {
     if (this.persistent) {
@@ -72,7 +72,7 @@ class Toast extends NectaryElement {
     }
   }
   #onTimeout = () => {
-    this.dispatchEvent(new CustomEvent("-timeout"));
+    this.dispatchEvent(new CustomEvent('-timeout'));
   };
   #clearTimeout() {
     if (this.#tid !== null) {
@@ -80,11 +80,8 @@ class Toast extends NectaryElement {
       this.#tid = null;
     }
   }
-  #onTimeoutReactHandler = (e) => {
-    getReactEventHandler(this, "on-timeout")?.(e);
+  #onTimeoutReactHandler = e => {
+    getReactEventHandler(this, 'on-timeout')?.(e);
   };
 }
-defineCustomElement("sinch-toast", Toast);
-export {
-  Toast
-};
+defineCustomElement('sinch-toast', Toast);

package/toast/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TSinchToastType = 'info' | 'warn' | 'error' | 'success';
 export type TSinchToastProps = {
     /** Type */
@@ -38,23 +38,3 @@ export type TSinchToast = {
 };
 export type TSinchToastElement = NectaryComponentVanillaByType<TSinchToast>;
 export type TSinchToastReact = NectaryComponentReactByType<TSinchToast>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-toast': TSinchToast;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-toast': NectaryComponentVanilla<'sinch-toast'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-toast': NectaryComponentReact<'sinch-toast'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-toast': NectaryComponentReact<'sinch-toast'>;
-        }
-    }
-}

package/toast/types.js

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

package/toast/utils.js

@@ -1,4 +1 @@
-const typeValues = ["info", "success", "warn", "error"];
-export {
-  typeValues
-};
+export const typeValues = ['info', 'success', 'warn', 'error'];

package/toast-manager/index.d.ts

@@ -1,9 +1,8 @@
 import '../title';
 import '../text';
 import { NectaryElement } from '../utils';
-import type { TSinchToastManagerOrigin } from './types';
-import type { TRect } from '../types';
-export * from './types';
+import type { TSinchToastManagerOrigin, TSinchToastManager } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla, TRect } from '../types';
 export declare class ToastManager extends NectaryElement {
     #private;
     constructor();
@@ -15,3 +14,23 @@ export declare class ToastManager extends NectaryElement {
     nthActionRect(nth: number): TRect | null;
     nthCloseRect(nth: number): TRect | null;
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-toast-manager': TSinchToastManager;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-toast-manager': NectaryComponentVanilla<'sinch-toast-manager'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-toast-manager': NectaryComponentReact<'sinch-toast-manager'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-toast-manager': NectaryComponentReact<'sinch-toast-manager'>;
+        }
+    }
+}

package/toast-manager/index.js

@@ -1,96 +1,85 @@
-import "../title/index.js";
-import "../text/index.js";
-import { shouldReduceMotion, getLiteralAttribute, updateLiteralAttribute, cloneNode } from "../utils/dom.js";
-import { defineCustomElement, NectaryElement } from "../utils/element.js";
-import { getRect } from "../utils/rect.js";
-import { originValues } from "./utils.js";
-const templateHTML = '<style>\n:host {\n  display: block;\n}\n\n#items {\n  display: block;\n  width: 0;\n  height: 0;\n  visibility: hidden;\n  overflow: hidden;\n}\n\n#list {\n  display: flex;\n  flex-direction: column;\n  position: fixed;\n  z-index: 1;\n  bottom: 0;\n  right: 16px;\n}\n\n:host([origin="top-right"]) #list {\n  flex-direction: column-reverse;\n  bottom: unset;\n  top: 16px;\n}\n\n.item-wrapper {\n  height: 0;\n  opacity: 0;\n  position: relative;\n}\n\n.item-wrapper[data-deleting]::after {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n}\n</style>\n\n<slot id="items"></slot>\n<div id="list"></div>\n';
+import '../title';
+import '../text';
+import { cloneNode, defineCustomElement, getLiteralAttribute, getRect, NectaryElement, shouldReduceMotion, updateLiteralAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block}#items{display:block;width:0;height:0;visibility:hidden;overflow:hidden}#list{display:flex;flex-direction:column;position:fixed;z-index:1;bottom:0;right:16px}:host([origin=top-right]) #list{flex-direction:column-reverse;bottom:unset;top:16px}.item-wrapper{height:0;opacity:0;position:relative}.item-wrapper[data-deleting]::after{content:"";position:absolute;top:0;left:0;bottom:0;right:0}</style><slot id="items"></slot><div id="list"></div>';
+import { originValues } from './utils';
 const DURATION_ADD = 250;
 const DURATION_REMOVE = 250;
 const ITEMS_GAP = 16;
-const template = document.createElement("template");
+const template = document.createElement('template');
 template.innerHTML = templateHTML;
-class ToastManager extends NectaryElement {
+export class ToastManager extends NectaryElement {
   #$slot;
   #$list;
-  #map = /* @__PURE__ */ new WeakMap();
+  #map = (() => new WeakMap())();
   #shouldReduceMotion;
-  #animations = /* @__PURE__ */ new Set();
+  #animations = (() => new Set())();
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$slot = shadowRoot.querySelector("slot");
-    this.#$list = shadowRoot.querySelector("#list");
+    this.#$slot = shadowRoot.querySelector('slot');
+    this.#$list = shadowRoot.querySelector('#list');
     this.#shouldReduceMotion = shouldReduceMotion();
   }
   connectedCallback() {
-    this.#$slot.addEventListener("slotchange", this.#onSlotChange);
+    this.#$slot.addEventListener('slotchange', this.#onSlotChange);
   }
   disconnectedCallback() {
-    this.#$slot.removeEventListener("slotchange", this.#onSlotChange);
+    this.#$slot.removeEventListener('slotchange', this.#onSlotChange);
     this.#clear();
   }
   get origin() {
-    return getLiteralAttribute(this, originValues, "origin", "bottom-right");
+    return getLiteralAttribute(this, originValues, 'origin', 'bottom-right');
   }
   set origin(value) {
-    updateLiteralAttribute(this, originValues, "origin", value);
+    updateLiteralAttribute(this, originValues, 'origin', value);
   }
   get containerRect() {
     return getRect(this.#$list);
   }
   nthActionRect(nth) {
-    const item = this.#$list.children[nth]?.querySelector("[slot=action]");
+    const item = this.#$list.children[nth]?.querySelector('[slot=action]');
     return item != null ? getRect(item) : null;
   }
   nthCloseRect(nth) {
-    const item = this.#$list.children[nth]?.querySelector("[slot=close]");
+    const item = this.#$list.children[nth]?.querySelector('[slot=close]');
     return item != null ? getRect(item) : null;
   }
   #onAnimateAdd(item, index, height) {
     const duration = this.#shouldReduceMotion ? 0 : DURATION_ADD;
-    const addAnim = item.animate(
-      {
-        height: ["0", `${height + ITEMS_GAP}px`],
-        opacity: [0, 1]
-      },
-      {
-        delay: index * duration,
-        duration,
-        iterations: 1,
-        fill: "forwards"
-      }
-    );
+    const addAnim = item.animate({
+      height: ['0', `${height + ITEMS_GAP}px`],
+      opacity: [0, 1]
+    }, {
+      delay: index * duration,
+      duration,
+      iterations: 1,
+      fill: 'forwards'
+    });
     this.#storeAnimation(addAnim);
   }
   #onAnimateRemove(item, index) {
     const rect = item.getBoundingClientRect();
     const duration = this.#shouldReduceMotion ? 0 : DURATION_REMOVE;
-    const indexInQueue = item.hasAttribute("data-delete-now") ? 0 : index;
-    const heightAnim = item.animate(
-      {
-        height: [`${rect.height}px`, "0"]
-      },
-      {
-        delay: duration + indexInQueue * duration,
-        duration,
-        iterations: 1,
-        fill: "forwards"
-      }
-    );
-    const opacityAnim = item.animate(
-      {
-        opacity: [1, 0]
-      },
-      {
-        delay: indexInQueue * duration,
-        duration,
-        iterations: 1,
-        fill: "forwards"
-      }
-    );
-    item.setAttribute("data-deleting", "");
+    const indexInQueue = item.hasAttribute('data-delete-now') ? 0 : index;
+    const heightAnim = item.animate({
+      height: [`${rect.height}px`, '0']
+    }, {
+      delay: duration + indexInQueue * duration,
+      duration,
+      iterations: 1,
+      fill: 'forwards'
+    });
+    const opacityAnim = item.animate({
+      opacity: [1, 0]
+    }, {
+      delay: indexInQueue * duration,
+      duration,
+      iterations: 1,
+      fill: 'forwards'
+    });
+    item.setAttribute('data-deleting', '');
     this.#storeAnimation(heightAnim, () => item.remove());
     this.#storeAnimation(opacityAnim);
   }
@@ -99,7 +88,7 @@ class ToastManager extends NectaryElement {
     const listItems = Array.from(this.#$list.children);
     let removeIndex = 0;
     for (const item of listItems) {
-      if (item.hasAttribute("data-deleting")) {
+      if (item.hasAttribute('data-deleting')) {
         ++removeIndex;
         continue;
       }
@@ -122,8 +111,8 @@ class ToastManager extends NectaryElement {
       }
       const cloned = cloneNode(item, true);
       const rect = item.getBoundingClientRect();
-      const wrapper = document.createElement("div");
-      wrapper.className = "item-wrapper";
+      const wrapper = document.createElement('div');
+      wrapper.className = 'item-wrapper';
       wrapper.appendChild(cloned);
       this.#$list.appendChild(wrapper);
       this.#map.set(item, wrapper);
@@ -137,13 +126,13 @@ class ToastManager extends NectaryElement {
     const onAnimEnd = () => {
       this.#animations.delete(anim);
       cb?.();
-      anim.removeEventListener("finish", onAnimEnd);
-      anim.removeEventListener("remove", onAnimEnd);
-      anim.removeEventListener("cancel", onAnimEnd);
+      anim.removeEventListener('finish', onAnimEnd);
+      anim.removeEventListener('remove', onAnimEnd);
+      anim.removeEventListener('cancel', onAnimEnd);
     };
-    anim.addEventListener("finish", onAnimEnd);
-    anim.addEventListener("remove", onAnimEnd);
-    anim.addEventListener("cancel", onAnimEnd);
+    anim.addEventListener('finish', onAnimEnd);
+    anim.addEventListener('remove', onAnimEnd);
+    anim.addEventListener('cancel', onAnimEnd);
     this.#animations.add(anim);
   }
   #clear() {
@@ -158,28 +147,25 @@ class ToastManager extends NectaryElement {
     }
   }
   #subscribeChildren(item) {
-    item.querySelector("[slot=close]")?.addEventListener("-click", this.#onCloneCloseClick);
-    item.querySelector("[slot=action]")?.addEventListener("-click", this.#onCloneActionClick);
+    item.querySelector('[slot=close]')?.addEventListener('-click', this.#onCloneCloseClick);
+    item.querySelector('[slot=action]')?.addEventListener('-click', this.#onCloneActionClick);
   }
   #unsubscribeChildren(item) {
-    item.querySelector("[slot=close]")?.removeEventListener("-click", this.#onCloneCloseClick);
-    item.querySelector("[slot=action]")?.removeEventListener("-click", this.#onCloneActionClick);
+    item.querySelector('[slot=close]')?.removeEventListener('-click', this.#onCloneCloseClick);
+    item.querySelector('[slot=action]')?.removeEventListener('-click', this.#onCloneActionClick);
   }
-  #onCloneCloseClick = (e) => {
+  #onCloneCloseClick = e => {
     const item = e.target.parentElement?.parentElement;
     if (item != null) {
-      item.setAttribute("data-delete-now", "");
-      this.#map.get(item)?.querySelector("[slot=close]")?.dispatchEvent(new CustomEvent("-click"));
+      item.setAttribute('data-delete-now', '');
+      this.#map.get(item)?.querySelector('[slot=close]')?.dispatchEvent(new CustomEvent('-click'));
     }
   };
-  #onCloneActionClick = (e) => {
+  #onCloneActionClick = e => {
     const item = e.target.parentElement?.parentElement;
     if (item != null) {
-      this.#map.get(item)?.querySelector("[slot=action]")?.dispatchEvent(new CustomEvent("-click"));
+      this.#map.get(item)?.querySelector('[slot=action]')?.dispatchEvent(new CustomEvent('-click'));
     }
   };
 }
-defineCustomElement("sinch-toast-manager", ToastManager);
-export {
-  ToastManager
-};
+defineCustomElement('sinch-toast-manager', ToastManager);