@nectary/components 4.12.0 → 4.12.1

package/input/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentVanilla, NectaryComponentReact } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentVanilla } from '../types';
 import type { TSinchSize } from '../utils/size';
 export type TSinchInputType = 'text' | 'password' | 'number';
 export type TSinchInputClipboardEvent = CustomEvent<{
@@ -83,23 +83,3 @@ export type TSinchInput = {
 };
 export type TSinchInputElement = NectaryComponentVanillaByType<TSinchInput>;
 export type TSinchInputReact = NectaryComponentReactByType<TSinchInput>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-input': TSinchInput;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-input': NectaryComponentVanilla<'sinch-input'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-input': NectaryComponentReact<'sinch-input'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-input': NectaryComponentReact<'sinch-input'>;
-        }
-    }
-}

package/input/types.js

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

package/input/utils.js

@@ -1,32 +1,34 @@
-const inputTypes = ["text", "password", "number"];
-const MASK_SYMBOL_LETTER = "A";
-const MASK_SYMBOL_DIGIT = "0";
-const EMPTY_CHAR = " ";
+export const inputTypes = ['text', 'password', 'number'];
+const MASK_SYMBOL_LETTER = 'A';
+const MASK_SYMBOL_DIGIT = '0';
+const EMPTY_CHAR = ' ';
 const MASK_MODE_DIGIT = 0;
 const MASK_MODE_LETTER = 1;
 const MASK_MODE_EXACT = 2;
-const MASK_PLACEHOLDER_DELIMITER = "@@";
-const MASK_PLACEHOLDER = "_";
+const MASK_PLACEHOLDER_DELIMITER = '@@';
+const MASK_PLACEHOLDER = '_';
 const testMaskedValue = (maskSymbol, inputChar) => {
   switch (maskSymbol.mode) {
-    case MASK_MODE_DIGIT: {
-      return /\d/.test(inputChar);
-    }
-    case MASK_MODE_LETTER: {
-      return new RegExp("\\p{Letter}", "u").test(inputChar);
-    }
+    case MASK_MODE_DIGIT:
+      {
+        return /\d/.test(inputChar);
+      }
+    case MASK_MODE_LETTER:
+      {
+        return /\p{Letter}/u.test(inputChar);
+      }
   }
   return false;
 };
-const isExactMode = (maskSymbol) => maskSymbol.mode === MASK_MODE_EXACT;
-const isEmptyChar = (char) => char === EMPTY_CHAR;
-const getMaskSymbols = (maskValue) => {
+const isExactMode = maskSymbol => maskSymbol.mode === MASK_MODE_EXACT;
+const isEmptyChar = char => char === EMPTY_CHAR;
+export const getMaskSymbols = maskValue => {
   const res = [];
   const [mask, placeholder] = maskValue.split(MASK_PLACEHOLDER_DELIMITER);
   const maskSymbols = [...mask];
   const placeholderChars = placeholder != null ? [...placeholder] : [];
   for (let maskIndex = 0, placeholderIndex = 0; maskIndex < maskSymbols.length; maskIndex++, placeholderIndex++) {
-    if (maskSymbols[maskIndex] === "\\") {
+    if (maskSymbols[maskIndex] === '\\') {
       maskIndex += 1;
       res.push({
         value: maskSymbols[maskIndex],
@@ -61,11 +63,11 @@ const getPlaceholder = (chars, maskSymbols) => {
   for (let i = 0; i < maskSymbols.length; i++) {
     res[i] = i >= chars.length || isEmptyChar(chars[i]) || isExactMode(maskSymbols[i]) ? maskSymbols[i].placeholder : EMPTY_CHAR;
   }
-  return res.join("");
+  return res.join('');
 };
 const isMaskedInputComplete = (chars, maskSymbols) => {
   if (chars.length > maskSymbols.length) {
-    throw new Error("chars.length > maskSymbols.length");
+    throw new Error('chars.length > maskSymbols.length');
   }
   if (chars.length < maskSymbols.length) {
     return false;
@@ -99,15 +101,15 @@ const isCursorAtTheBeginning = (maskSymbols, selectoinStart) => {
 };
 const getMergedValue = (chars, maskSymbols) => {
   if (!isMaskedInputComplete(chars, maskSymbols)) {
-    return "";
+    return '';
   }
   const res = new Array(chars.length);
   for (let i = 0; i < chars.length; i++) {
     res[i] = isExactMode(maskSymbols[i]) ? maskSymbols[i].value : chars[i];
   }
-  return res.join("");
+  return res.join('');
 };
-const findLastNonEmptyCharIndex = (chars) => {
+const findLastNonEmptyCharIndex = chars => {
   for (let i = chars.length - 1; i >= 0; i--) {
     if (!isEmptyChar(chars[i])) {
       return i;
@@ -127,13 +129,13 @@ const compileResult = (chars, maskSymbols, cursorPos) => {
     chars.length = lastEmptyPos;
   }
   return {
-    value: chars.join(""),
+    value: chars.join(''),
     placeholder: getPlaceholder(chars, maskSymbols),
     cursorPos: Math.min(cursorPos, chars.length),
     mergedValue: getMergedValue(chars, maskSymbols)
   };
 };
-const deleteContentBackward = (inputValue, maskSymbols, selectionStart, selectionEnd) => {
+export const deleteContentBackward = (inputValue, maskSymbols, selectionStart, selectionEnd) => {
   if (selectionEnd === 0) {
     return null;
   }
@@ -154,7 +156,7 @@ const deleteContentBackward = (inputValue, maskSymbols, selectionStart, selectio
   }
   return compileResult(chars, maskSymbols, cusrsorPos);
 };
-const deleteContentForward = (inputValue, maskSymbols, selectionStart, selectionEnd) => {
+export const deleteContentForward = (inputValue, maskSymbols, selectionStart, selectionEnd) => {
   if (selectionStart >= maskSymbols.length) {
     return null;
   }
@@ -172,7 +174,7 @@ const deleteContentForward = (inputValue, maskSymbols, selectionStart, selection
   }
   return compileResult(chars, maskSymbols, cursorPos + 1);
 };
-const beginMaskedComposition = (inputValue, maskSymbols, selectionStart) => {
+export const beginMaskedComposition = (inputValue, maskSymbols, selectionStart) => {
   const chars = getCharsFromInputValue(inputValue, maskSymbols);
   const placeholder = new Array(chars.length);
   for (let i = 0; i < maskSymbols.length; i++) {
@@ -181,11 +183,11 @@ const beginMaskedComposition = (inputValue, maskSymbols, selectionStart) => {
   placeholder[selectionStart] = EMPTY_CHAR;
   chars.splice(selectionStart, 1);
   return {
-    value: chars.join(""),
-    placeholder: placeholder.join("")
+    value: chars.join(''),
+    placeholder: placeholder.join('')
   };
 };
-const endMaskedComposition = (inputValue, data, maskSymbols, selectionStart, wasValueInserted) => {
+export const endMaskedComposition = (inputValue, data, maskSymbols, selectionStart, wasValueInserted) => {
   let cursorPos = selectionStart;
   const chars = getCharsFromInputValue(inputValue, maskSymbols);
   const dataChars = [...data];
@@ -203,9 +205,9 @@ const endMaskedComposition = (inputValue, data, maskSymbols, selectionStart, was
     return compileResult(chars, maskSymbols, cursorPos);
   }
   for (let dataPos = 0; dataPos < dataChars.length && cursorPos < maskSymbols.length; ++dataPos, ++cursorPos) {
-    const data2 = dataChars[dataPos];
-    if (isEmptyChar(chars[cursorPos]) && testMaskedValue(maskSymbols[cursorPos], data2)) {
-      chars[cursorPos] = data2;
+    const data = dataChars[dataPos];
+    if (isEmptyChar(chars[cursorPos]) && testMaskedValue(maskSymbols[cursorPos], data)) {
+      chars[cursorPos] = data;
     }
   }
   while (cursorPos < maskSymbols.length && isExactMode(maskSymbols[cursorPos])) {
@@ -213,7 +215,7 @@ const endMaskedComposition = (inputValue, data, maskSymbols, selectionStart, was
   }
   return compileResult(chars, maskSymbols, cursorPos);
 };
-const insertText = (inputValue, data, maskSymbols, selectionStart, selectionEnd) => {
+export const insertText = (inputValue, data, maskSymbols, selectionStart, selectionEnd) => {
   const chars = getCharsFromInputValue(inputValue, maskSymbols);
   let cursorPos = selectionStart;
   clearCharsSelection(chars, selectionStart, selectionEnd);
@@ -234,7 +236,7 @@ const insertText = (inputValue, data, maskSymbols, selectionStart, selectionEnd)
   }
   return compileResult(chars, maskSymbols, cursorPos);
 };
-const insertFromPaste = (inputValue, data, maskSymbols, selectionStart, selectionEnd) => {
+export const insertFromPaste = (inputValue, data, maskSymbols, selectionStart, selectionEnd) => {
   const chars = getCharsFromInputValue(inputValue, maskSymbols);
   let cursorPos = selectionStart;
   clearCharsSelection(chars, selectionStart, selectionEnd);
@@ -249,17 +251,17 @@ const insertFromPaste = (inputValue, data, maskSymbols, selectionStart, selectio
     return compileResult(chars, maskSymbols, cursorPos);
   }
   const dataChars = [...data];
-  for (let dataPos = 0; dataPos < dataChars.length && cursorPos < maskSymbols.length; ) {
-    const data2 = dataChars[dataPos];
+  for (let dataPos = 0; dataPos < dataChars.length && cursorPos < maskSymbols.length;) {
+    const data = dataChars[dataPos];
     const maskSymbol = maskSymbols[cursorPos];
     if (isExactMode(maskSymbol)) {
-      if (maskSymbol.value === data2) {
+      if (maskSymbol.value === data) {
         ++dataPos;
       }
       ++cursorPos;
     } else {
-      if (testMaskedValue(maskSymbol, data2)) {
-        chars[cursorPos] = data2;
+      if (testMaskedValue(maskSymbol, data)) {
+        chars[cursorPos] = data;
         ++cursorPos;
       }
       ++dataPos;
@@ -267,11 +269,11 @@ const insertFromPaste = (inputValue, data, maskSymbols, selectionStart, selectio
   }
   return compileResult(chars, maskSymbols, cursorPos);
 };
-const splitValueAndMask = (inputValue, maskSymbols) => {
-  const chars = getCharsFromInputValue("", maskSymbols);
+export const splitValueAndMask = (inputValue, maskSymbols) => {
+  const chars = getCharsFromInputValue('', maskSymbols);
   const dataChars = getCharsFromInputValue(inputValue, maskSymbols);
   let cursorPos = 0;
-  for (let dataPos = 0; dataPos < dataChars.length && cursorPos < maskSymbols.length; ) {
+  for (let dataPos = 0; dataPos < dataChars.length && cursorPos < maskSymbols.length;) {
     const data = dataChars[dataPos];
     const maskSymbol = maskSymbols[cursorPos];
     if (isExactMode(maskSymbol)) {
@@ -289,24 +291,12 @@ const splitValueAndMask = (inputValue, maskSymbols) => {
   }
   return compileResult(chars, maskSymbols, chars.length);
 };
-const getMergedValueSliced = (inputValue, maskSymbols, selectionStart, selectionEnd) => {
+export const getMergedValueSliced = (inputValue, maskSymbols, selectionStart, selectionEnd) => {
   const chars = getCharsFromInputValue(inputValue, maskSymbols);
   for (let i = selectionStart; i < selectionEnd && i < maskSymbols.length; i++) {
     if (isExactMode(maskSymbols[i])) {
       chars[i] = maskSymbols[i].value;
     }
   }
-  return chars.slice(selectionStart, selectionEnd).join("");
-};
-export {
-  beginMaskedComposition,
-  deleteContentBackward,
-  deleteContentForward,
-  endMaskedComposition,
-  getMaskSymbols,
-  getMergedValueSliced,
-  inputTypes,
-  insertFromPaste,
-  insertText,
-  splitValueAndMask
-};
+  return chars.slice(selectionStart, selectionEnd).join('');
+};

package/link/index.d.ts

@@ -1,6 +1,7 @@
 import '../icon';
 import { NectaryElement } from '../utils';
-export * from './types';
+import type { TSinchLink } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export declare class Link extends NectaryElement {
     #private;
     constructor();
@@ -26,3 +27,23 @@ export declare class Link extends NectaryElement {
     focus(): void;
     blur(): void;
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-link': TSinchLink;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-link': NectaryComponentVanilla<'sinch-link'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-link': NectaryComponentReact<'sinch-link'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-link': NectaryComponentReact<'sinch-link'>;
+        }
+    }
+}

package/link/index.js

@@ -1,122 +1,118 @@
-import "../icon/index.js";
-import { isAttrEqual, updateAttribute, updateBooleanAttribute, isAttrTrue, getAttribute, getBooleanAttribute } from "../utils/dom.js";
-import { defineCustomElement, NectaryElement } from "../utils/element.js";
-import { getReactEventHandler } from "../utils/get-react-event-handler.js";
-const templateHTML = '<style>\n  :host {\n    display: inline;\n  }\n\n  a {\n    font: var(--sinch-comp-link-default-font-initial);\n    font-size: inherit;\n    line-height: inherit;\n    text-decoration: var(--sinch-comp-link-default-text-decoration-initial);\n    color: var(--sinch-comp-link-color-default-text-initial);\n    border-radius: 0.5em;\n    white-space: nowrap;\n\n    --sinch-global-color-icon: var(--sinch-comp-link-color-default-icon-initial);\n  }\n\n  a:hover {\n    text-decoration: var(--sinch-comp-link-default-text-decoration-hover);\n    color: var(--sinch-comp-link-color-default-text-hover);\n\n    --sinch-global-color-icon: var(--sinch-comp-link-color-default-icon-hover);\n  }\n\n  a:focus-visible {\n    outline: 2px solid var(--sinch-comp-link-color-default-outline-focus);\n    outline-offset: 2px;\n  }\n\n  :host([standalone]) {\n    display: block;\n  }\n\n  :host([standalone]) a {\n    display: block;\n    font: var(--sinch-comp-link-standalone-font-initial);\n    font-size: inherit;\n    line-height: inherit;\n    text-decoration: none;\n    width: fit-content;\n  }\n\n  #external-icon,\n  #standalone-icon {\n    display: none;\n    height: 1em;\n  }\n\n  #icon-prefix {\n    display: none;\n    margin-left: -0.25em;\n  }\n\n  :host([external]:not([standalone])) #external-icon {\n    display: inline-block;\n    margin-left: 0.25em;\n    vertical-align: -0.2em;\n\n    --sinch-global-size-icon: 1em;\n  }\n\n  :host([standalone][external]) #external-icon {\n    display: inline-block;\n    vertical-align: -0.4em;\n\n    --sinch-global-size-icon: 1.5em;\n  }\n\n  :host([standalone]) #icon-prefix {\n    display: inline;\n  }\n\n  :host([standalone]:not([external])) #standalone-icon {\n    display: inline-block;\n    vertical-align: -0.4em;\n\n    --sinch-global-size-icon: 1.5em;\n  }\n\n  :host([disabled]) a {\n    color: var(--sinch-comp-link-color-disabled-text-initial);\n    pointer-events: none;\n    cursor: initial;\n    text-decoration: var(--sinch-comp-link-default-text-decoration-disabled);\n\n    --sinch-global-color-icon: var(--sinch-comp-link-color-disabled-icon-initial);\n  }\n\n  #content {\n    white-space: var(--sinch-global-text-white-space, normal);\n  }\n</style>\n\n<a referrerpolicy="no-referer" aria-hidden="true">\n  <span id="content"></span>\n  <span id="icon-prefix">&nbsp;</span>\n  <sinch-icon icons-version="2" name="fa-arrow-up-right" id="external-icon"></sinch-icon>\n  <sinch-icon icons-version="2" name="fa-arrow-right" id="standalone-icon"></sinch-icon>\n</a>\n';
-const template = document.createElement("template");
+import '../icon';
+import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, isAttrTrue, getReactEventHandler, isAttrEqual } from '../utils';
+const templateHTML = '<style>:host{display:inline}a{font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap;--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-initial)}a:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover);--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-hover)}a:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host([standalone]){display:block}:host([standalone]) a{display:block;font:var(--sinch-comp-link-standalone-font-initial);font-size:inherit;line-height:inherit;text-decoration:none;width:fit-content}#external-icon,#standalone-icon{display:none;height:1em}#icon-prefix{display:none;margin-left:-.25em}:host([external]:not([standalone])) #external-icon{display:inline-block;margin-left:.25em;vertical-align:-.2em;--sinch-global-size-icon:1em}:host([standalone][external]) #external-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([standalone]) #icon-prefix{display:inline}:host([standalone]:not([external])) #standalone-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([disabled]) a{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled);--sinch-global-color-icon:var(--sinch-comp-link-color-disabled-icon-initial)}#content{white-space:var(--sinch-global-text-white-space,normal)}</style><a referrerpolicy="no-referer" aria-hidden="true"><span id="content"></span><span id="icon-prefix">&nbsp;</span><sinch-icon icons-version="2" name="fa-arrow-up-right" id="external-icon"></sinch-icon><sinch-icon icons-version="2" name="fa-arrow-right" id="standalone-icon"></sinch-icon></a>';
+const template = document.createElement('template');
 template.innerHTML = templateHTML;
-class Link extends NectaryElement {
+export class Link extends NectaryElement {
   #$anchor;
   #$text;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$anchor = shadowRoot.querySelector("a");
-    this.#$text = shadowRoot.querySelector("#content");
+    this.#$anchor = shadowRoot.querySelector('a');
+    this.#$text = shadowRoot.querySelector('#content');
   }
   connectedCallback() {
-    this.setAttribute("role", "link");
-    this.#$anchor.addEventListener("click", this.#onAnchorClick);
-    this.#$anchor.addEventListener("focus", this.#onAnchorFocus);
-    this.#$anchor.addEventListener("blur", this.#onAnchorBlur);
-    this.addEventListener("-click", this.#onClickReactHandler);
-    this.addEventListener("-focus", this.#onFocusReactHandler);
-    this.addEventListener("-blur", this.#onBlurReactHandler);
+    this.setAttribute('role', 'link');
+    this.#$anchor.addEventListener('click', this.#onAnchorClick);
+    this.#$anchor.addEventListener('focus', this.#onAnchorFocus);
+    this.#$anchor.addEventListener('blur', this.#onAnchorBlur);
+    this.addEventListener('-click', this.#onClickReactHandler);
+    this.addEventListener('-focus', this.#onFocusReactHandler);
+    this.addEventListener('-blur', this.#onBlurReactHandler);
   }
   disconnectedCallback() {
-    this.#$anchor.removeEventListener("click", this.#onAnchorClick);
-    this.#$anchor.removeEventListener("focus", this.#onAnchorFocus);
-    this.#$anchor.removeEventListener("blur", this.#onAnchorBlur);
-    this.removeEventListener("-click", this.#onClickReactHandler);
-    this.removeEventListener("-focus", this.#onFocusReactHandler);
-    this.removeEventListener("-blur", this.#onBlurReactHandler);
+    this.#$anchor.removeEventListener('click', this.#onAnchorClick);
+    this.#$anchor.removeEventListener('focus', this.#onAnchorFocus);
+    this.#$anchor.removeEventListener('blur', this.#onAnchorBlur);
+    this.removeEventListener('-click', this.#onClickReactHandler);
+    this.removeEventListener('-focus', this.#onFocusReactHandler);
+    this.removeEventListener('-blur', this.#onBlurReactHandler);
   }
   static get observedAttributes() {
-    return [
-      "text",
-      "href",
-      "use-history",
-      "external",
-      "standalone",
-      "disabled"
-    ];
+    return ['text', 'href', 'use-history', 'external', 'standalone', 'disabled'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (isAttrEqual(oldVal, newVal)) {
       return;
     }
     switch (name) {
-      case "text": {
-        this.#$text.textContent = newVal;
-        break;
-      }
-      case "href": {
-        updateAttribute(this.#$anchor, "href", newVal);
-        break;
-      }
-      case "use-history": {
-        const shouldUseHistory = isAttrTrue(newVal);
-        if (shouldUseHistory) {
-          updateBooleanAttribute(this, "preventdefault", true);
+      case 'text':
+        {
+          this.#$text.textContent = newVal;
+          break;
+        }
+      case 'href':
+        {
+          updateAttribute(this.#$anchor, 'href', newVal);
+          break;
+        }
+      case 'use-history':
+        {
+          const shouldUseHistory = isAttrTrue(newVal);
+          if (shouldUseHistory) {
+            updateBooleanAttribute(this, 'preventdefault', true);
+          }
+          updateBooleanAttribute(this, name, shouldUseHistory);
+          break;
+        }
+      case 'standalone':
+      case 'disabled':
+        {
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+          break;
+        }
+      case 'external':
+        {
+          const isExternal = isAttrTrue(newVal);
+          updateAttribute(this.#$anchor, 'target', isExternal ? '_blank' : null);
+          updateBooleanAttribute(this, name, isExternal);
+          break;
         }
-        updateBooleanAttribute(this, name, shouldUseHistory);
-        break;
-      }
-      case "standalone":
-      case "disabled": {
-        updateBooleanAttribute(this, name, isAttrTrue(newVal));
-        break;
-      }
-      case "external": {
-        const isExternal = isAttrTrue(newVal);
-        updateAttribute(this.#$anchor, "target", isExternal ? "_blank" : null);
-        updateBooleanAttribute(this, name, isExternal);
-        break;
-      }
     }
   }
   get text() {
-    return getAttribute(this, "text", "");
+    return getAttribute(this, 'text', '');
   }
   set text(value) {
-    updateAttribute(this, "text", value);
+    updateAttribute(this, 'text', value);
   }
   get href() {
-    return getAttribute(this, "href", "");
+    return getAttribute(this, 'href', '');
   }
   set href(value) {
-    updateAttribute(this, "href", value);
+    updateAttribute(this, 'href', value);
   }
-  set "use-history"(value) {
-    updateBooleanAttribute(this, "use-history", value);
+  set 'use-history'(value) {
+    updateBooleanAttribute(this, 'use-history', value);
   }
-  get "use-history"() {
-    return getBooleanAttribute(this, "use-history");
+  get 'use-history'() {
+    return getBooleanAttribute(this, 'use-history');
   }
   set disabled(isDisabled) {
-    updateBooleanAttribute(this, "disabled", isDisabled);
+    updateBooleanAttribute(this, 'disabled', isDisabled);
   }
   get disabled() {
-    return getBooleanAttribute(this, "disabled");
+    return getBooleanAttribute(this, 'disabled');
   }
   set external(isExternal) {
-    updateBooleanAttribute(this, "external", isExternal);
+    updateBooleanAttribute(this, 'external', isExternal);
   }
   get external() {
-    return getBooleanAttribute(this, "external");
+    return getBooleanAttribute(this, 'external');
   }
   set standalone(isstandalone) {
-    updateBooleanAttribute(this, "standalone", isstandalone);
+    updateBooleanAttribute(this, 'standalone', isstandalone);
   }
   get standalone() {
-    return getBooleanAttribute(this, "standalone");
+    return getBooleanAttribute(this, 'standalone');
   }
   set preventDefault(isPrevented) {
-    updateBooleanAttribute(this, "preventdefault", isPrevented);
+    updateBooleanAttribute(this, 'preventdefault', isPrevented);
   }
   get preventDefault() {
-    return getBooleanAttribute(this, "preventdefault");
+    return getBooleanAttribute(this, 'preventdefault');
   }
   get focusable() {
     return true;
@@ -127,34 +123,29 @@ class Link extends NectaryElement {
   blur() {
     this.#$anchor.blur();
   }
-  #onAnchorClick = (e) => {
+  #onAnchorClick = e => {
     if (this.preventDefault) {
       e.preventDefault();
-      if (this["use-history"]) {
-        history.pushState({}, "", this.href);
+      if (this['use-history']) {
+        history.pushState({}, '', this.href);
       }
     }
-    this.dispatchEvent(
-      new CustomEvent("-click")
-    );
+    this.dispatchEvent(new CustomEvent('-click'));
   };
   #onAnchorFocus = () => {
-    this.dispatchEvent(new CustomEvent("-focus"));
+    this.dispatchEvent(new CustomEvent('-focus'));
   };
   #onAnchorBlur = () => {
-    this.dispatchEvent(new CustomEvent("-blur"));
+    this.dispatchEvent(new CustomEvent('-blur'));
   };
   #onFocusReactHandler = () => {
-    getReactEventHandler(this, "on-focus")?.();
+    getReactEventHandler(this, 'on-focus')?.();
   };
   #onBlurReactHandler = () => {
-    getReactEventHandler(this, "on-blur")?.();
+    getReactEventHandler(this, 'on-blur')?.();
   };
-  #onClickReactHandler = (e) => {
-    getReactEventHandler(this, "on-click")?.(e);
+  #onClickReactHandler = e => {
+    getReactEventHandler(this, 'on-click')?.(e);
   };
 }
-defineCustomElement("sinch-link", Link);
-export {
-  Link
-};
+defineCustomElement('sinch-link', Link);

package/link/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TSinchLinkProps = {
     /** Text content of hyperlink */
     text: string;
@@ -49,23 +49,3 @@ export type TSinchLink = {
 };
 export type TSinchLinkElement = NectaryComponentVanillaByType<TSinchLink>;
 export type TSinchLinkReact = NectaryComponentReactByType<TSinchLink>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-link': TSinchLink;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-link': NectaryComponentVanilla<'sinch-link'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-link': NectaryComponentReact<'sinch-link'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-link': NectaryComponentReact<'sinch-link'>;
-        }
-    }
-}

package/link/types.js

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

package/list/index.d.ts

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

package/list/index.js

@@ -1,18 +1,15 @@
-import { defineCustomElement, NectaryElement } from "../utils/element.js";
-const templateHTML = '<style>\n:host {\n  display: block;\n  height: 100%;\n}\n\n#wrapper {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  overflow-y: auto;\n}\n</style>\n\n<div id="wrapper">\n  <slot></slot>\n</div>\n';
-const template = document.createElement("template");
+import { defineCustomElement, NectaryElement } from '../utils';
+const templateHTML = '<style>:host{display:block;height:100%}#wrapper{display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:100%;overflow-y:auto}</style><div id="wrapper"><slot></slot></div>';
+const template = document.createElement('template');
 template.innerHTML = templateHTML;
-class List extends NectaryElement {
+export class List extends NectaryElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
   }
   connectedCallback() {
-    this.setAttribute("role", "list");
+    this.setAttribute('role', 'list');
   }
 }
-defineCustomElement("sinch-list", List);
-export {
-  List
-};
+defineCustomElement('sinch-list', List);

package/list/types.d.ts

@@ -1,23 +1,3 @@
-import type { NectaryComponentReactByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType } from '../types';
 export type TSinchListElement = HTMLElement;
 export type TSinchListReact = NectaryComponentReactByType<TSinchListElement>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-list': {};
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-list': NectaryComponentVanilla<'sinch-list'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-list': NectaryComponentReact<'sinch-list'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-list': NectaryComponentReact<'sinch-list'>;
-        }
-    }
-}

package/list/types.js

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