@nectary/components 4.12.1 → 5.0.0

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

@@ -1,8 +1,7 @@
 import '../icon';
 import '../text';
 import { NectaryElement } from '../utils';
-import type { TSinchSelectMenuOption } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export * from './types';
 export declare class SelectMenuOption extends NectaryElement {
     #private;
     constructor();
@@ -17,23 +16,3 @@ export declare class SelectMenuOption extends NectaryElement {
     get disabled(): boolean;
     matchesSearch(searchValue: string): boolean;
 }
-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/index.js

@@ -1,10 +1,11 @@
-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');
+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");
 template.innerHTML = templateHTML;
-export class SelectMenuOption extends NectaryElement {
+class SelectMenuOption extends NectaryElement {
   #$contentSlot;
   #$content;
   constructor() {
@@ -12,62 +13,69 @@ export 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);
+defineCustomElement("sinch-select-menu-option", SelectMenuOption);
+export {
+  SelectMenuOption
+};

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

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchSelectMenuOptionProps = {
     /** Value */
     value: string;
@@ -34,3 +34,23 @@ 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 +1,4 @@
-export const isSelectMenuOption = el => el.localName === 'sinch-select-menu-option';
+const isSelectMenuOption = (el) => el.localName === "sinch-select-menu-option";
+export {
+  isSelectMenuOption
+};

package/skeleton/global/index.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/skeleton/global/index.js

@@ -0,0 +1,2 @@
+import { defineCustomElement } from "../../utils/element.js";
+defineCustomElement("sinch-skeleton");

package/skeleton/index.d.ts

@@ -1,6 +1,5 @@
 import { NectaryElement } from '../utils';
-import type { TSinchSkeleton } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export * from './types';
 export declare class Skeleton extends NectaryElement {
     #private;
     constructor();
@@ -9,23 +8,3 @@ 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,10 +1,12 @@
-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');
+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");
 template.innerHTML = templateHTML;
-const ANIMATION_DURATION = 2000;
+const ANIMATION_DURATION = 2e3;
 const BORDER_WIDTH = 1;
-export class Skeleton extends NectaryElement {
+class Skeleton extends NectaryElement {
   #animation = null;
   #shimmer;
   #wrapper;
@@ -18,21 +20,19 @@ export 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,9 +43,7 @@ export class Skeleton extends NectaryElement {
         }
         this.#observer.disconnect();
         this.#observer = null;
-      }, {
-        threshold: 1
-      });
+      }, { threshold: 1 });
       this.#observer.observe(this.#wrapper);
     }
   }
@@ -58,21 +56,20 @@ export 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`]
     }, {
@@ -81,7 +78,7 @@ export class Skeleton extends NectaryElement {
     });
   }
   #onSlotChange = () => {
-    this.#clip.innerHTML = '';
+    this.#clip.innerHTML = "";
     if (this.#bb === null) {
       return;
     }
@@ -91,19 +88,19 @@ export 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);
+defineCustomElement("sinch-skeleton", Skeleton);
+export {
+  Skeleton
+};

package/skeleton/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchSkeletonProps = {
     /** Card like container */
     card?: boolean;
@@ -15,3 +15,23 @@ 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/global/index.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/skeleton-item/global/index.js

@@ -0,0 +1,2 @@
+import { defineCustomElement } from "../../utils/element.js";
+defineCustomElement("sinch-skeleton-item");

package/skeleton-item/index.d.ts

@@ -1,26 +1,5 @@
 import { NectaryElement } from '../utils';
-import type { TSinchSkeletonItem } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export * 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,12 +1,15 @@
-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');
+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");
 template.innerHTML = templateHTML;
-export class SkeletonItem extends NectaryElement {
+class SkeletonItem extends NectaryElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
   }
 }
-defineCustomElement('sinch-skeleton-item', SkeletonItem);
+defineCustomElement("sinch-skeleton-item", SkeletonItem);
+export {
+  SkeletonItem
+};

package/skeleton-item/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 import type { TSinchSizeEx } from '../utils/size';
 export type TSinchSkeletonItemBoundingBox = TRect & {
     radius: number;
@@ -25,3 +25,23 @@ 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/global/index.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/spinner/global/index.js

@@ -0,0 +1,2 @@
+import { defineCustomElement } from "../../utils/element.js";
+defineCustomElement("sinch-spinner");

package/spinner/index.d.ts

@@ -1,7 +1,6 @@
 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();
@@ -12,23 +11,3 @@ 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,9 +1,11 @@
-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');
+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");
 template.innerHTML = templateHTML;
-export class Spinner extends NectaryElement {
+class Spinner extends NectaryElement {
   #controller = null;
   constructor() {
     super();
@@ -12,48 +14,48 @@ export 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')) {
+  #onContextSize = (e) => {
+    if (this.hasAttribute("size") === true) {
       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);
+defineCustomElement("sinch-spinner", Spinner);
+export {
+  Spinner
+};