@nectary/components 4.12.0 → 4.12.1

package/select-menu-option/index.js

@@ -1,11 +1,10 @@
-import "../icon/index.js";
-import "../text/index.js";
-import { isAttrEqual, updateBooleanAttribute, isAttrTrue, updateExplicitBooleanAttribute, updateAttribute, getAttribute, getBooleanAttribute } from "../utils/dom.js";
-import { defineCustomElement, NectaryElement } from "../utils/element.js";
-const templateHTML = '<style>\n  :host {\n    display: block;\n  }\n\n  #wrapper {\n    display: flex;\n    position: relative;\n    box-sizing: border-box;\n    min-height: 40px;\n    padding: 8px 16px;\n    align-items: center;\n    gap: 10px;\n    user-select: none;\n    cursor: pointer;\n    background-color:\n      var(\n        --sinch-comp-select-menu-color-default-background-initial\n      );\n\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-select-menu-color-default-option-initial\n      );\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-select-menu-color-default-icon-initial\n      );\n    --sinch-global-size-icon: var(--sinch-comp-select-menu-size-icon);\n  }\n\n  #content {\n    flex: 1;\n    min-width: 0;\n\n    --sinch-comp-text-font: var(--sinch-comp-select-menu-font-option);\n  }\n\n  #icon-check {\n    display: none;\n    margin-right: -6px;\n  }\n\n  :host([data-checked]) #icon-check {\n    display: block;\n  }\n\n  :host([data-selected]) > #wrapper {\n    background-color:\n      var(\n        --sinch-comp-select-menu-color-default-background-selected\n      );\n  }\n\n  :host(:hover) > #wrapper {\n    background-color:\n      var(\n        --sinch-comp-select-menu-color-default-background-hover\n      );\n  }\n\n  :host([disabled]) > #wrapper {\n    cursor: initial;\n    pointer-events: none;\n    background-color:\n      var(\n        --sinch-comp-select-menu-color-disabled-background-initial\n      );\n\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-select-menu-color-disabled-option-initial\n      );\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-select-menu-color-disabled-icon-initial\n      );\n  }\n\n  ::slotted([slot="icon"]) {\n    margin-left: -6px;\n  }\n\n  ::slotted([slot="content"]) {\n    pointer-events: none;\n    flex: 1;\n  }\n</style>\n\n<div id="wrapper">\n  <slot name="icon"></slot>\n  <slot name="content"></slot>\n  <sinch-text id="content" type="m" ellipsis></sinch-text>\n  <sinch-icon icons-version="2" name="fa-check" id="icon-check"></sinch-icon>\n</div>\n';
-const template = document.createElement("template");
+import '../icon';
+import '../text';
+import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrEqual, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;min-height:40px;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;background-color:var(--sinch-comp-select-menu-color-default-background-initial);--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-option-initial);--sinch-global-color-icon:var(--sinch-comp-select-menu-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-select-menu-size-icon)}#content{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-menu-font-option)}#icon-check{display:none;margin-right:-6px}:host([data-checked]) #icon-check{display:block}:host([data-selected])>#wrapper{background-color:var(--sinch-comp-select-menu-color-default-background-selected)}:host(:hover)>#wrapper{background-color:var(--sinch-comp-select-menu-color-default-background-hover)}:host([disabled])>#wrapper{cursor:initial;pointer-events:none;background-color:var(--sinch-comp-select-menu-color-disabled-background-initial);--sinch-global-color-text:var(--sinch-comp-select-menu-color-disabled-option-initial);--sinch-global-color-icon:var(--sinch-comp-select-menu-color-disabled-icon-initial)}::slotted([slot=icon]){margin-left:-6px}::slotted([slot=content]){pointer-events:none;flex:1}</style><div id="wrapper"><slot name="icon"></slot><slot name="content"></slot><sinch-text id="content" type="m" ellipsis></sinch-text><sinch-icon icons-version="2" name="fa-check" id="icon-check"></sinch-icon></div>';
+const template = document.createElement('template');
 template.innerHTML = templateHTML;
-class SelectMenuOption extends NectaryElement {
+export class SelectMenuOption extends NectaryElement {
   #$contentSlot;
   #$content;
   constructor() {
@@ -13,69 +12,62 @@ class SelectMenuOption extends NectaryElement {
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$contentSlot = shadowRoot.querySelector('slot[name="content"]');
-    this.#$content = shadowRoot.querySelector("#content");
+    this.#$content = shadowRoot.querySelector('#content');
   }
   connectedCallback() {
-    this.setAttribute("role", "option");
-    this.#$contentSlot.addEventListener(
-      "slotchange",
-      this.#onContentSlotChange
-    );
+    this.setAttribute('role', 'option');
+    this.#$contentSlot.addEventListener('slotchange', this.#onContentSlotChange);
     this.#onContentSlotChange();
   }
   static get observedAttributes() {
-    return ["text", "data-checked", "disabled"];
+    return ['text', 'data-checked', 'disabled'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (isAttrEqual(oldVal, newVal)) {
       return;
     }
     switch (name) {
-      case "text": {
-        this.#$content.textContent = newVal;
-        break;
-      }
-      case "data-checked": {
-        updateExplicitBooleanAttribute(
-          this,
-          "aria-selected",
-          isAttrTrue(newVal)
-        );
-        break;
-      }
-      case "disabled": {
-        updateBooleanAttribute(this, "disabled", isAttrTrue(newVal));
-        break;
-      }
+      case 'text':
+        {
+          this.#$content.textContent = newVal;
+          break;
+        }
+      case 'data-checked':
+        {
+          updateExplicitBooleanAttribute(this, 'aria-selected', isAttrTrue(newVal));
+          break;
+        }
+      case 'disabled':
+        {
+          updateBooleanAttribute(this, 'disabled', isAttrTrue(newVal));
+          break;
+        }
     }
   }
   set value(value) {
-    updateAttribute(this, "value", value);
+    updateAttribute(this, 'value', value);
   }
   get value() {
-    return getAttribute(this, "value", "");
+    return getAttribute(this, 'value', '');
   }
   set text(value) {
-    updateAttribute(this, "text", value);
+    updateAttribute(this, 'text', value);
   }
   get text() {
-    return getAttribute(this, "text", "");
+    return getAttribute(this, 'text', '');
   }
   set disabled(isDisabled) {
-    updateBooleanAttribute(this, "disabled", isDisabled);
+    updateBooleanAttribute(this, 'disabled', isDisabled);
   }
   get disabled() {
-    return getBooleanAttribute(this, "disabled");
+    return getBooleanAttribute(this, 'disabled');
   }
   matchesSearch(searchValue) {
     return this.text.toLowerCase().includes(searchValue.toLowerCase());
   }
   #onContentSlotChange = () => {
     const elements = this.#$contentSlot.assignedElements();
-    this.#$content.style.display = elements.length > 0 ? "none" : "";
+    this.#$content.style.display = elements.length > 0 ? 'none' : '';
   };
 }
-defineCustomElement("sinch-select-menu-option", SelectMenuOption);
-export {
-  SelectMenuOption
-};
+defineCustomElement('sinch-select-menu-option', SelectMenuOption);

package/select-menu-option/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TSinchSelectMenuOptionProps = {
     /** Value */
     value: string;
@@ -34,23 +34,3 @@ export type TSinchSelectMenuOption = {
 };
 export type TSinchSelectMenuOptionElement = NectaryComponentVanillaByType<TSinchSelectMenuOption>;
 export type TSinchSelectMenuOptionReact = NectaryComponentReactByType<TSinchSelectMenuOption>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-select-menu-option': TSinchSelectMenuOption;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-select-menu-option': NectaryComponentVanilla<'sinch-select-menu-option'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-select-menu-option': NectaryComponentReact<'sinch-select-menu-option'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-select-menu-option': NectaryComponentReact<'sinch-select-menu-option'>;
-        }
-    }
-}

package/select-menu-option/types.js

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

package/select-menu-option/utils.js

@@ -1,4 +1 @@
-const isSelectMenuOption = (el) => el.localName === "sinch-select-menu-option";
-export {
-  isSelectMenuOption
-};
+export const isSelectMenuOption = el => el.localName === 'sinch-select-menu-option';

package/skeleton/index.d.ts

@@ -1,5 +1,6 @@
 import { NectaryElement } from '../utils';
-export * from './types';
+import type { TSinchSkeleton } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export declare class Skeleton extends NectaryElement {
     #private;
     constructor();
@@ -8,3 +9,23 @@ export declare class Skeleton extends NectaryElement {
     static get observedAttributes(): string[];
     attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-skeleton': TSinchSkeleton;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-skeleton': NectaryComponentVanilla<'sinch-skeleton'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-skeleton': NectaryComponentReact<'sinch-skeleton'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-skeleton': NectaryComponentReact<'sinch-skeleton'>;
+        }
+    }
+}

package/skeleton/index.js

@@ -1,12 +1,10 @@
-import { shouldReduceMotion, isAttrTrue, getCssVar, attrValueToInteger } from "../utils/dom.js";
-import { defineCustomElement, NectaryElement } from "../utils/element.js";
-import { getUid } from "../utils/uid.js";
-const templateHTML = '<style>\n  :host {\n    display: block;\n  }\n\n  #wrapper {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    height: 100%;\n    box-sizing: border-box;\n    overflow: hidden;\n  }\n\n  :host([card]:not([card="false"])) > #wrapper {\n    padding: 16px;\n    background-color: var(--sinch-sys-color-surface-primary-default);\n    border-radius: var(--sinch-sys-shape-radius-l);\n    border: 1px solid var(--sinch-sys-color-border-subtle);\n  }\n\n  #shimmer {\n    position: absolute;\n    inset: 0;\n    background-image:\n      linear-gradient(\n        90deg,\n        transparent 0,\n        var(--sinch-sys-color-surface-tertiary-default) 100px,\n        transparent 200px\n      );\n    clip-path: url("#clip");\n  }\n\n  #svg {\n    display: block;\n    width: 0;\n    height: 0;\n  }\n</style>\n\n<svg id="svg">\n  <defs>\n    <clipPath id="clip"></clipPath>\n  </defs>\n</svg>\n<div id="wrapper">\n  <slot></slot>\n  <div id="shimmer"></div>\n</div>\n';
-const template = document.createElement("template");
+import { attrValueToInteger, defineCustomElement, getCssVar, getUid, isAttrTrue, NectaryElement, shouldReduceMotion } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{position:relative;display:flex;flex-direction:column;gap:16px;height:100%;box-sizing:border-box;overflow:hidden}:host([card]:not([card=false]))>#wrapper{padding:16px;background-color:var(--sinch-sys-color-surface-primary-default);border-radius:var(--sinch-sys-shape-radius-l);border:1px solid var(--sinch-sys-color-border-subtle)}#shimmer{position:absolute;inset:0;background-image:linear-gradient(90deg,transparent 0,var(--sinch-sys-color-surface-tertiary-default) 100px,transparent 200px);clip-path:url("#clip")}#svg{display:block;width:0;height:0}</style><svg id="svg"><defs><clipPath id="clip"></clipPath></defs></svg><div id="wrapper"><slot></slot><div id="shimmer"></div></div>';
+const template = document.createElement('template');
 template.innerHTML = templateHTML;
-const ANIMATION_DURATION = 2e3;
+const ANIMATION_DURATION = 2000;
 const BORDER_WIDTH = 1;
-class Skeleton extends NectaryElement {
+export class Skeleton extends NectaryElement {
   #animation = null;
   #shimmer;
   #wrapper;
@@ -20,19 +18,21 @@ class Skeleton extends NectaryElement {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#shimmer = shadowRoot.querySelector("#shimmer");
-    this.#slot = shadowRoot.querySelector("slot");
-    this.#wrapper = shadowRoot.querySelector("#wrapper");
-    this.#clip = shadowRoot.querySelector("#clip");
+    this.#shimmer = shadowRoot.querySelector('#shimmer');
+    this.#slot = shadowRoot.querySelector('slot');
+    this.#wrapper = shadowRoot.querySelector('#wrapper');
+    this.#clip = shadowRoot.querySelector('#clip');
   }
   connectedCallback() {
     const id = getUid();
-    this.#shimmer.style.setProperty("clip-path", `url(#${id})`);
-    this.#clip.setAttribute("id", id);
+    this.#shimmer.style.setProperty('clip-path', `url(#${id})`);
+    this.#clip.setAttribute('id', id);
     this.#controller = new AbortController();
     if (!shouldReduceMotion()) {
-      this.#slot.addEventListener("slotchange", this.#onSlotChange, { signal: this.#controller.signal });
-      this.#observer = new IntersectionObserver((entries) => {
+      this.#slot.addEventListener('slotchange', this.#onSlotChange, {
+        signal: this.#controller.signal
+      });
+      this.#observer = new IntersectionObserver(entries => {
         this.#bb = entries[0].boundingClientRect;
         if (this.#bb.width === 0) {
           return;
@@ -43,7 +43,9 @@ class Skeleton extends NectaryElement {
         }
         this.#observer.disconnect();
         this.#observer = null;
-      }, { threshold: 1 });
+      }, {
+        threshold: 1
+      });
       this.#observer.observe(this.#wrapper);
     }
   }
@@ -56,20 +58,21 @@ class Skeleton extends NectaryElement {
     this.#observer = null;
   }
   static get observedAttributes() {
-    return ["card"];
+    return ['card'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
-      case "card": {
-        this.#borderWidth = isAttrTrue(newVal) ? BORDER_WIDTH : 0;
-        break;
-      }
+      case 'card':
+        {
+          this.#borderWidth = isAttrTrue(newVal) ? BORDER_WIDTH : 0;
+          break;
+        }
     }
   }
   #updateAnimation() {
     const bb = this.#bb;
     const bgWidth = bb.width * 4;
-    this.#shimmer.style.setProperty("background-size", `${bgWidth}px`);
+    this.#shimmer.style.setProperty('background-size', `${bgWidth}px`);
     this.#animation = this.#shimmer.animate({
       backgroundPosition: [`0px`, `${bgWidth}px`]
     }, {
@@ -78,7 +81,7 @@ class Skeleton extends NectaryElement {
     });
   }
   #onSlotChange = () => {
-    this.#clip.innerHTML = "";
+    this.#clip.innerHTML = '';
     if (this.#bb === null) {
       return;
     }
@@ -88,19 +91,19 @@ class Skeleton extends NectaryElement {
   };
   #handleSkeletonItemData(child) {
     const data = child.getBoundingClientRect();
-    const radiusStr = getCssVar(child, "--sinch-local-shape-radius") ?? "0";
-    const radius = attrValueToInteger(radiusStr, { min: 0, defaultValue: 0 });
+    const radiusStr = getCssVar(child, '--sinch-local-shape-radius') ?? '0';
+    const radius = attrValueToInteger(radiusStr, {
+      min: 0,
+      defaultValue: 0
+    });
     const bb = this.#bb;
-    const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-    rect.setAttribute("x", (data.x - bb.x - this.#borderWidth).toString());
-    rect.setAttribute("y", (data.y - bb.y - this.#borderWidth).toString());
-    rect.setAttribute("width", data.width.toString());
-    rect.setAttribute("height", data.height.toString());
-    rect.setAttribute("rx", radius.toString());
+    const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    rect.setAttribute('x', (data.x - bb.x - this.#borderWidth).toString());
+    rect.setAttribute('y', (data.y - bb.y - this.#borderWidth).toString());
+    rect.setAttribute('width', data.width.toString());
+    rect.setAttribute('height', data.height.toString());
+    rect.setAttribute('rx', radius.toString());
     this.#clip.appendChild(rect);
   }
 }
-defineCustomElement("sinch-skeleton", Skeleton);
-export {
-  Skeleton
-};
+defineCustomElement('sinch-skeleton', Skeleton);

package/skeleton/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TSinchSkeletonProps = {
     /** Card like container */
     card?: boolean;
@@ -15,23 +15,3 @@ export type TSinchSkeleton = {
 };
 export type TSinchSkeletonElement = NectaryComponentVanillaByType<TSinchSkeleton>;
 export type TSinchSkeletonReact = NectaryComponentReactByType<TSinchSkeleton>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-skeleton': TSinchSkeleton;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-skeleton': NectaryComponentVanilla<'sinch-skeleton'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-skeleton': NectaryComponentReact<'sinch-skeleton'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-skeleton': NectaryComponentReact<'sinch-skeleton'>;
-        }
-    }
-}

package/skeleton/types.js

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

package/skeleton-item/index.d.ts

@@ -1,5 +1,26 @@
 import { NectaryElement } from '../utils';
-export * from './types';
+import type { TSinchSkeletonItem } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export declare class SkeletonItem extends NectaryElement {
     constructor();
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-skeleton-item': TSinchSkeletonItem;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-skeleton-item': NectaryComponentVanilla<'sinch-skeleton-item'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-skeleton-item': NectaryComponentReact<'sinch-skeleton-item'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-skeleton-item': NectaryComponentReact<'sinch-skeleton-item'>;
+        }
+    }
+}

package/skeleton-item/index.js

@@ -1,15 +1,12 @@
-import { defineCustomElement, NectaryElement } from "../utils/element.js";
-const templateHTML = '<style>\n  :host {\n    display: block;\n    height: var(--sinch-sys-size-m);\n\n    --sinch-local-shape-radius: var(--sinch-sys-shape-radius-m);\n  }\n\n  :host([size="xs"]) {\n    height: var(--sinch-sys-size-xs);\n\n    --sinch-local-shape-radius: var(--sinch-sys-shape-radius-xs);\n  }\n\n  :host([size="s"]) {\n    height: var(--sinch-sys-size-s);\n\n    --sinch-local-shape-radius: var(--sinch-sys-shape-radius-s);\n  }\n\n  :host([size="m"]) {\n    height: var(--sinch-sys-size-m);\n\n    --sinch-local-shape-radius: var(--sinch-sys-shape-radius-m);\n  }\n\n  :host([size="l"]) {\n    height: var(--sinch-sys-size-l);\n\n    --sinch-local-shape-radius: var(--sinch-sys-shape-radius-l);\n  }\n\n  #content {\n    height: 100%;\n    background-color: var(--sinch-sys-color-border-subtle);\n    border-radius: var(--sinch-local-shape-radius);\n  }\n</style>\n\n<div id="content"></div>\n';
-const template = document.createElement("template");
+import { defineCustomElement, NectaryElement } from '../utils';
+const templateHTML = '<style>:host{display:block;height:var(--sinch-sys-size-m);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-m)}:host([size=xs]){height:var(--sinch-sys-size-xs);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-xs)}:host([size="s"]){height:var(--sinch-sys-size-s);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-s)}:host([size="m"]){height:var(--sinch-sys-size-m);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-m)}:host([size="l"]){height:var(--sinch-sys-size-l);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-l)}#content{height:100%;background-color:var(--sinch-sys-color-border-subtle);border-radius:var(--sinch-local-shape-radius)}</style><div id="content"></div>';
+const template = document.createElement('template');
 template.innerHTML = templateHTML;
-class SkeletonItem extends NectaryElement {
+export class SkeletonItem extends NectaryElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
   }
 }
-defineCustomElement("sinch-skeleton-item", SkeletonItem);
-export {
-  SkeletonItem
-};
+defineCustomElement('sinch-skeleton-item', SkeletonItem);

package/skeleton-item/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect } from '../types';
 import type { TSinchSizeEx } from '../utils/size';
 export type TSinchSkeletonItemBoundingBox = TRect & {
     radius: number;
@@ -25,23 +25,3 @@ export type TSinchSkeletonItem = {
 };
 export type TSinchSkeletonItemElement = NectaryComponentVanillaByType<TSinchSkeletonItem>;
 export type TSinchSkeletonItemReact = NectaryComponentReactByType<TSinchSkeletonItem>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-skeleton-item': TSinchSkeletonItem;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-skeleton-item': NectaryComponentVanilla<'sinch-skeleton-item'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-skeleton-item': NectaryComponentReact<'sinch-skeleton-item'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-skeleton-item': NectaryComponentReact<'sinch-skeleton-item'>;
-        }
-    }
-}

package/skeleton-item/types.js

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

package/spinner/index.d.ts

@@ -1,6 +1,7 @@
 import { NectaryElement } from '../utils';
+import type { TSinchSpinner } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 import type { TSinchSize } from '../utils/size';
-export * from './types';
 export declare class Spinner extends NectaryElement {
     #private;
     constructor();
@@ -11,3 +12,23 @@ export declare class Spinner extends NectaryElement {
     set size(size: TSinchSize);
     get size(): TSinchSize;
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-spinner': TSinchSpinner;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-spinner': NectaryComponentVanilla<'sinch-spinner'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-spinner': NectaryComponentReact<'sinch-spinner'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-spinner': NectaryComponentReact<'sinch-spinner'>;
+        }
+    }
+}

package/spinner/index.js

@@ -1,11 +1,9 @@
-import { subscribeContext } from "../utils/context.js";
-import { updateAttribute, updateLiteralAttribute, getLiteralAttribute } from "../utils/dom.js";
-import { defineCustomElement, NectaryElement } from "../utils/element.js";
-import { sizeValues, DEFAULT_SIZE } from "../utils/size.js";
-const templateHTML = '<style>\n@keyframes spinner {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n:host {\n  display: block;\n}\n\n:host([data-size="l"]) {\n  width: 50px;\n  height: 50px;\n  contain: strict;\n}\n\n:host([data-size="m"]) {\n  width: 24px;\n  height: 24px;\n  contain: strict;\n}\n\n:host([data-size="s"]) {\n  width: 16px;\n  height: 16px;\n  contain: strict;\n}\n\n#spinner-size-l,\n#spinner-size-m,\n#spinner-size-s {\n  display: none;\n  will-change: transform;\n}\n\n:host([data-size="l"]) > #spinner-size-l {\n  display: block;\n  animation: 1s linear infinite spinner;\n}\n\n:host([data-size="m"]) > #spinner-size-m {\n  display: block;\n  animation: 1s linear infinite spinner;\n}\n\n:host([data-size="s"]) > #spinner-size-s {\n  display: block;\n  animation: 1s linear infinite spinner;\n}\n\n.bg {\n  opacity: 0.3;\n  stroke: var(--sinch-global-color-icon, var(--sinch-sys-color-text-default));\n}\n\n.fg {\n  stroke: var(--sinch-global-color-icon, var(--sinch-sys-color-text-default));\n}\n</style>\n\n<svg id="spinner-size-l" width="50" height="50" fill="none">\n  <circle class="bg" cx="25" cy="25" r="22" stroke-width="6"/>\n  <path class="fg" d="M25 3a22 22 0 0 1 22 22" stroke-width="6" stroke-linecap="round"/>\n</svg>\n<svg id="spinner-size-m" width="24" height="24" fill="none">\n  <circle class="bg" cx="12" cy="12" r="9" stroke-width="4"/>\n  <path class="fg" d="M21 12a9 9 0 0 0-9-9" stroke-width="4" stroke-linecap="round"/>\n</svg>\n<svg id="spinner-size-s" width="16" height="16" fill="none">\n  <circle class="bg" cx="8" cy="8" r="6" stroke-width="2"/>\n  <path class="fg" d="M14 8a6 6 0 0 0-6-6" stroke-width="2" stroke-linecap="round"/>\n</svg>\n';
-const template = document.createElement("template");
+import { defineCustomElement, getLiteralAttribute, NectaryElement, subscribeContext, updateAttribute, updateLiteralAttribute } from '../utils';
+import { DEFAULT_SIZE, sizeValues } from '../utils/size';
+const templateHTML = '<style>@keyframes spinner{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}:host{display:block}:host([data-size="l"]){width:50px;height:50px;contain:strict}:host([data-size="m"]){width:24px;height:24px;contain:strict}:host([data-size="s"]){width:16px;height:16px;contain:strict}#spinner-size-l,#spinner-size-m,#spinner-size-s{display:none;will-change:transform}:host([data-size="l"])>#spinner-size-l{display:block;animation:1s linear infinite spinner}:host([data-size="m"])>#spinner-size-m{display:block;animation:1s linear infinite spinner}:host([data-size="s"])>#spinner-size-s{display:block;animation:1s linear infinite spinner}.bg{opacity:.3;stroke:var(--sinch-global-color-icon,var(--sinch-sys-color-text-default))}.fg{stroke:var(--sinch-global-color-icon,var(--sinch-sys-color-text-default))}</style><svg id="spinner-size-l" width="50" height="50" fill="none"><circle class="bg" cx="25" cy="25" r="22" stroke-width="6"/><path class="fg" d="M25 3a22 22 0 0 1 22 22" stroke-width="6" stroke-linecap="round"/></svg><svg id="spinner-size-m" width="24" height="24" fill="none"><circle class="bg" cx="12" cy="12" r="9" stroke-width="4"/><path class="fg" d="M21 12a9 9 0 0 0-9-9" stroke-width="4" stroke-linecap="round"/></svg><svg id="spinner-size-s" width="16" height="16" fill="none"><circle class="bg" cx="8" cy="8" r="6" stroke-width="2"/><path class="fg" d="M14 8a6 6 0 0 0-6-6" stroke-width="2" stroke-linecap="round"/></svg>';
+const template = document.createElement('template');
 template.innerHTML = templateHTML;
-class Spinner extends NectaryElement {
+export class Spinner extends NectaryElement {
   #controller = null;
   constructor() {
     super();
@@ -14,48 +12,48 @@ class Spinner extends NectaryElement {
   }
   connectedCallback() {
     this.#controller = new AbortController();
-    this.setAttribute("aria-live", "polite");
-    this.setAttribute("aria-busy", "true");
-    subscribeContext(this, "size", this.#onContextSize, this.#controller.signal);
+    this.setAttribute('aria-live', 'polite');
+    this.setAttribute('aria-busy', 'true');
+    subscribeContext(this, 'size', this.#onContextSize, this.#controller.signal);
   }
   disconnectedCallback() {
     this.#controller.abort();
     this.#controller = null;
   }
   static get observedAttributes() {
-    return ["size"];
+    return ['size'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
-      case "size": {
-        updateAttribute(this, "data-size", newVal);
-        break;
-      }
+      case 'size':
+        {
+          updateAttribute(this, 'data-size', newVal);
+          break;
+        }
     }
   }
   set size(size) {
-    updateLiteralAttribute(this, sizeValues, "size", size);
+    updateLiteralAttribute(this, sizeValues, 'size', size);
   }
   get size() {
-    return getLiteralAttribute(this, sizeValues, "size", DEFAULT_SIZE);
+    return getLiteralAttribute(this, sizeValues, 'size', DEFAULT_SIZE);
   }
-  #onContextSize = (e) => {
-    if (this.hasAttribute("size") === true) {
+  #onContextSize = e => {
+    if (this.hasAttribute('size')) {
       return;
     }
     switch (e.detail) {
-      case "l":
-      case "m": {
-        this.setAttribute("data-size", "m");
-        break;
-      }
-      default: {
-        this.setAttribute("data-size", "s");
-      }
+      case 'l':
+      case 'm':
+        {
+          this.setAttribute('data-size', 'm');
+          break;
+        }
+      default:
+        {
+          this.setAttribute('data-size', 's');
+        }
     }
   };
 }
-defineCustomElement("sinch-spinner", Spinner);
-export {
-  Spinner
-};
+defineCustomElement('sinch-spinner', Spinner);

package/spinner/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 import type { TSinchSize } from '../utils/size';
 export type TSinchSpinnerProps = {
     /** Spinner size */
@@ -14,23 +14,3 @@ export type TSinchSpinner = {
 };
 export type TSinchSpinnerElement = NectaryComponentVanillaByType<TSinchSpinner>;
 export type TSinchSpinnerReact = NectaryComponentReactByType<TSinchSpinner>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-spinner': TSinchSpinner;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-spinner': NectaryComponentVanilla<'sinch-spinner'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-spinner': NectaryComponentReact<'sinch-spinner'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-spinner': NectaryComponentReact<'sinch-spinner'>;
-        }
-    }
-}

package/spinner/types.js

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