@nectary/components 0.41.0 → 0.42.0

package/avatar/index.js

@@ -1,56 +1,61 @@
 import { defineCustomElement, getAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:40px;height:40px;background-color:var(--sinch-color-snow-100);border-radius:50%;--sinch-avatar-badge-size:16px;--sinch-avatar-badge-font:700 12px/14px "Gilroy","Arial","sans-serif"}#circle{position:relative;width:calc(100% - 2px);height:calc(100% - 2px);left:1px;top:1px;border-radius:50%;-webkit-mask:linear-gradient(#fff,#000);mask:linear-gradient(#fff,#000)}#text{display:block;width:100%;height:100%;font:var(--sinch-font-title-s);line-height:38px;text-transform:uppercase;text-align:center;background-color:var(--sinch-color-snow-700);color:var(--sinch-color-text-default)}:host([background=blue]) #text{background-color:var(--sinch-color-stormy-500);color:var(--sinch-color-snow-100)}:host([background=yellow]) #text{background-color:var(--sinch-color-honey-500)}:host([size="l"]) #wrapper{width:56px;height:56px;--sinch-avatar-badge-size:20px;--sinch-avatar-badge-font:700 12px/18px "Gilroy","Arial","sans-serif"}:host([size="l"]) #text{font:var(--sinch-font-title-m);line-height:54px}:host([size="s"]) #wrapper{width:24px;height:24px;--sinch-avatar-badge-size:11px;--sinch-avatar-badge-font:500 8px/9px "Gilroy","Arial","sans-serif"}:host([size="s"]) #text{font:var(--sinch-font-extra-small-text);line-height:22px}#image{display:none;position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain}:host([src]:not([src=""])) #image{display:block}::slotted(sinch-avatar-badge){position:absolute;top:-1px;left:calc(100% - 16px)}:host([size="l"]) ::slotted(sinch-avatar-badge){left:calc(100% - 20px)}:host([size="s"]) ::slotted(sinch-avatar-badge){left:calc(100% - 10px)}::slotted(sinch-avatar-status){position:absolute;bottom:-1px;right:-1px}:host([size="l"]) ::slotted(sinch-avatar-status){bottom:3px;right:3px}</style><div id="wrapper"><div id="circle"><span id="text"></span><img id="image" alt=""/></div><slot name="badge"></slot><slot name="status"></slot></div>';
-import { backgroundValues, sizeValues } from './utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:40px;height:40px;background-color:var(--sinch-color-snow-100);border-radius:50%;--sinch-avatar-badge-size:16px;--sinch-avatar-badge-font:700 12px/14px "Gilroy","Arial","sans-serif"}#circle{position:relative;width:calc(100% - 2px);height:calc(100% - 2px);left:1px;top:1px;border-radius:50%;-webkit-mask:linear-gradient(#fff,#000);mask:linear-gradient(#fff,#000);background-color:var(--sinch-avatar-color-default-bg);color:var(--sinch-avatar-color-default-fg)}#text{display:block;width:100%;height:100%;font:var(--sinch-font-title-s);line-height:38px;text-transform:uppercase;text-align:center}:host([size="l"]) #wrapper{width:56px;height:56px;--sinch-avatar-badge-size:20px;--sinch-avatar-badge-font:700 12px/18px "Gilroy","Arial","sans-serif"}:host([size="l"]) #text{font:var(--sinch-font-title-m);line-height:54px}:host([size="s"]) #wrapper{width:24px;height:24px;--sinch-avatar-badge-size:11px;--sinch-avatar-badge-font:500 8px/9px "Gilroy","Arial","sans-serif"}:host([size="s"]) #text{font:var(--sinch-font-extra-small-text);line-height:22px}#image{display:none;position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain}:host([src]:not([src=""])) #image{display:block}#status-wrapper{position:absolute;left:calc(85% - 5px);top:calc(85% - 5px);width:10px;height:10px;padding:1px;box-sizing:border-box;border-radius:50%;background-color:var(--sinch-color-snow-100);display:none;pointer-events:none}#status{width:8px;height:8px;border-radius:50%}:host([status=away]) #status-wrapper,:host([status=busy]) #status-wrapper,:host([status=offline]) #status-wrapper,:host([status=online]) #status-wrapper{display:block}:host([status=online]) #status{background-color:var(--sinch-avatar-status-color-online)}:host([status=away]) #status{background-color:var(--sinch-avatar-status-color-away)}:host([status=busy]) #status{background-color:var(--sinch-avatar-status-color-busy)}:host([status=offline]) #status{background-color:var(--sinch-avatar-status-color-offline)}</style><div id="wrapper"><div id="circle"><span id="text"></span><img id="image" alt=""/></div><div id="status-wrapper"><div id="status"></div></div></div>';
+import { assertAvatarColor, assertSize, assertStatus, getAvatarColorBg, getAvatarColorFg, sizeValues, statusValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-avatar', class extends NectaryElement {
+  #$circle;
   #$text;
   #$image;
-
+  #isConnected = false;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$circle = shadowRoot.querySelector('#circle');
     this.#$text = shadowRoot.querySelector('#text');
     this.#$image = shadowRoot.querySelector('#image');
   }
-
+  connectedCallback() {
+    this.#isConnected = true;
+    this.#updateColor();
+  }
+  disconnectedCallback() {
+    this.#isConnected = false;
+  }
   get src() {
     return getAttribute(this, 'src');
   }
-
   set src(value) {
     updateAttribute(this, 'src', value);
   }
-
   get alt() {
     return getAttribute(this, 'alt', '');
   }
-
   set alt(value) {
     updateAttribute(this, 'alt', value);
   }
-
-  get background() {
-    return getLiteralAttribute(this, backgroundValues, 'background', 'grey');
+  get color() {
+    return getAttribute(this, 'color');
   }
-
-  set background(value) {
-    updateLiteralAttribute(this, backgroundValues, 'background', value);
+  set color(value) {
+    updateAttribute(this, 'color', value);
   }
-
   get size() {
     return getLiteralAttribute(this, sizeValues, 'size', 'm');
   }
-
   set size(value) {
     updateLiteralAttribute(this, sizeValues, 'size', value);
   }
-
+  get status() {
+    return getLiteralAttribute(this, statusValues, 'status', null);
+  }
+  set status(value) {
+    updateLiteralAttribute(this, statusValues, 'status', value);
+  }
   static get observedAttributes() {
-    return ['alt', 'src'];
+    return ['alt', 'src', 'status', 'size', 'color'];
   }
-
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case 'alt':
@@ -59,13 +64,45 @@ defineCustomElement('sinch-avatar', class extends NectaryElement {
           this.#$image.alt = newVal ?? '';
           break;
         }
-
       case 'src':
         {
           this.#$image.src = newVal ?? '';
           break;
         }
+      case 'size':
+        {
+          if (newVal !== null) {
+            assertSize(newVal);
+          }
+          break;
+        }
+      case 'status':
+        {
+          if (newVal !== null) {
+            assertStatus(newVal);
+          }
+          break;
+        }
+      case 'color':
+        {
+          this.#updateColor();
+        }
+    }
+  }
+  #updateColor() {
+    if (!this.#isConnected) {
+      return;
+    }
+    const colorName = this.color;
+    if (colorName !== null && colorName.length > 0) {
+      assertAvatarColor(this, colorName);
+      const bg = getAvatarColorBg(colorName);
+      const fg = getAvatarColorFg(colorName);
+      this.#$circle.style.setProperty('background-color', bg);
+      this.#$circle.style.setProperty('color', fg);
+    } else {
+      this.#$circle.style.removeProperty('background-color');
+      this.#$circle.style.removeProperty('color');
     }
   }
-
 });

package/avatar/types.d.ts

@@ -1,19 +1,37 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchAvatarBackground = 'grey' | 'yellow' | 'blue';
 export declare type TSinchAvatarSize = 'l' | 'm' | 's';
+export declare type TSinchAvatarStatus = 'online' | 'busy' | 'away' | 'offline';
 export declare type TSinchAvatarElement = HTMLElement & {
-    alt: string;
+    /** Image source */
     src: string | null;
-    background: TSinchAvatarBackground;
+    /** Alt text */
+    alt: string;
+    /** Background color */
+    color: string | null;
+    /** Status */
+    status: TSinchAvatarStatus | null;
+    /** Size, `m` by default */
     size: TSinchAvatarSize;
-    setAttribute(name: 'alt', value: string): void;
+    /** Image source */
     setAttribute(name: 'src', value: string): void;
-    setAttribute(name: 'background', value: TSinchAvatarBackground): void;
+    /** Alt text */
+    setAttribute(name: 'alt', value: string): void;
+    /** Background color */
+    setAttribute(name: 'color', value: string): void;
+    /** Size, `m` by default */
     setAttribute(name: 'size', value: TSinchAvatarSize): void;
+    /** Status */
+    setAttribute(name: 'status', value: TSinchAvatarStatus): void;
 };
 export declare type TSinchAvatarReact = TSinchElementReact<TSinchAvatarElement> & {
-    alt: string;
+    /** Image source */
     src?: string;
-    background?: TSinchAvatarBackground;
+    /** Alt text */
+    alt: string;
+    /** Background color */
+    color?: string;
+    /** Size, `m` by default */
     size?: TSinchAvatarSize;
+    /** Status */
+    status?: TSinchAvatarStatus;
 };

package/avatar/utils.d.ts

@@ -1,3 +1,11 @@
-import type { TSinchAvatarBackground, TSinchAvatarSize } from './types';
-export declare const backgroundValues: readonly TSinchAvatarBackground[];
+import type { TSinchAvatarSize, TSinchAvatarStatus } from './types';
 export declare const sizeValues: readonly TSinchAvatarSize[];
+export declare const statusValues: readonly TSinchAvatarStatus[];
+declare type TAssertSize = (value: string | null) => asserts value is TSinchAvatarSize;
+export declare const assertSize: TAssertSize;
+declare type TAssertStatus = (value: string | null) => asserts value is TSinchAvatarStatus;
+export declare const assertStatus: TAssertStatus;
+export declare const getAvatarColorBg: (id: string) => string;
+export declare const getAvatarColorFg: (id: string) => string;
+export declare const assertAvatarColor: (root: Element, id: string | null) => void;
+export {};

package/avatar/utils.js

@@ -1,2 +1,23 @@
-export const backgroundValues = ['grey', 'yellow', 'blue'];
-export const sizeValues = ['l', 'm', 's'];
+export const sizeValues = ['l', 'm', 's'];
+export const statusValues = ['online', 'busy', 'away', 'offline'];
+export const assertSize = value => {
+  if (value === null || !sizeValues.includes(value)) {
+    throw new Error(`sinch-avatar: invalid size attribute: ${value}`);
+  }
+};
+export const assertStatus = value => {
+  if (value === null || !statusValues.includes(value)) {
+    throw new Error(`sinch-avatar: invalid status attribute: ${value}`);
+  }
+};
+export const getAvatarColorBg = id => {
+  return `var(--sinch-avatar-color-${id}-bg)`;
+};
+export const getAvatarColorFg = id => {
+  return `var(--sinch-avatar-color-${id}-fg)`;
+};
+export const assertAvatarColor = (root, id) => {
+  if (id === null || window.getComputedStyle(root).getPropertyValue(`--sinch-avatar-color-${id}-bg`).length === 0) {
+    throw new Error(`Invalid sinch-avatar color name: ${id}`);
+  }
+};

package/badge/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchBadgeElement, TSinchBadgeReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-badge': TSinchBadgeReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-badge': TSinchBadgeElement;
+    }
+}

package/badge/index.js

@@ -0,0 +1,140 @@
+import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getRect, NectaryElement, setClass, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline-flex;flex-direction:column;position:relative}#badge-wrapper{position:absolute;left:0;top:0;width:fit-content;border-radius:11px;padding:1px;pointer-events:none;background-color:var(--sinch-color-snow-100)}#badge{box-sizing:border-box;color:var(--sinch-badge-color-default-fg);background-color:var(--sinch-badge-color-default-bg);width:20px;height:20px;border-radius:10px}#badge.long{width:fit-content;padding:0 5px}#text{display:block;width:100%;height:100%;text-align:center;font-family:var(--sinch-font-mono-family);font-weight:400;font-size:14px;line-height:20px;text-rendering:optimizelegibility}:host([size="m"]) #badge-wrapper{left:calc(100% - 8px);top:-8px}:host([size="m"]) #badge{width:14px;height:14px}:host([size="m"]) #badge.long{width:fit-content;padding:0 3px}:host([size="m"]) #text{font-size:12px;line-height:14px}:host([size="s"]) #badge{width:8px;height:8px;padding:0}:host([size="s"]) #text{display:none}:host([hidden]:not([hidden=false])) #badge-wrapper{display:none}</style><slot id="slot"></slot><div id="badge-wrapper"><div id="badge"><span id="text"></span></div></div>';
+import { assertBadgeColor, assertMode, assertSize, getBadgeColorBg, getBadgeColorFg, modeValues, sizeValues } from './utils';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-badge', class extends NectaryElement {
+  #$badgeWrapper;
+  #$badge;
+  #$text;
+  #isConnected = false;
+  #observer;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$badgeWrapper = shadowRoot.querySelector('#badge-wrapper');
+    this.#$badge = shadowRoot.querySelector('#badge');
+    this.#$text = shadowRoot.querySelector('#text');
+    this.#observer = new ResizeObserver(this.#onResize);
+  }
+  connectedCallback() {
+    this.#isConnected = true;
+    this.#updateColor();
+    this.#observer.observe(this);
+  }
+  disconnectedCallback() {
+    this.#observer.unobserve(this);
+    this.#isConnected = false;
+  }
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+  get size() {
+    return getLiteralAttribute(this, sizeValues, 'size', 'm');
+  }
+  set size(value) {
+    updateLiteralAttribute(this, sizeValues, 'size', value);
+  }
+  get mode() {
+    return getLiteralAttribute(this, modeValues, 'mode', 'square');
+  }
+  set mode(value) {
+    updateLiteralAttribute(this, modeValues, 'mode', value);
+  }
+  get color() {
+    return getAttribute(this, 'color');
+  }
+  set color(value) {
+    updateAttribute(this, 'color', value);
+  }
+  get hidden() {
+    return getBooleanAttribute(this, 'hidden');
+  }
+  set hidden(isHidden) {
+    updateBooleanAttribute(this, 'hidden', isHidden);
+  }
+  get badgeRect() {
+    if (this.hidden) {
+      const selfRect = getRect(this);
+      return {
+        x: selfRect.x + selfRect.width,
+        y: selfRect.y,
+        width: 0,
+        height: 0
+      };
+    }
+    return getRect(this.#$badgeWrapper);
+  }
+  static get observedAttributes() {
+    return ['text', 'size', 'mode', 'color', 'hidden'];
+  }
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'text':
+        {
+          this.#$text.textContent = newVal;
+          setClass(this.#$badge, 'long', newVal !== null && newVal.length > 1);
+          break;
+        }
+      case 'size':
+        {
+          assertSize(newVal);
+          this.#updatePosition();
+          break;
+        }
+      case 'mode':
+        {
+          assertMode(newVal);
+          this.#updatePosition();
+          break;
+        }
+      case 'color':
+        {
+          this.#updateColor();
+          break;
+        }
+      case 'hidden':
+        {
+          this.#updatePosition();
+          break;
+        }
+    }
+  }
+  #updateColor() {
+    if (!this.#isConnected) {
+      return;
+    }
+    const colorName = this.color;
+    if (colorName !== null && colorName.length > 0) {
+      assertBadgeColor(this, colorName);
+      const bg = getBadgeColorBg(colorName);
+      const fg = getBadgeColorFg(colorName);
+      this.#$badge.style.setProperty('background-color', bg);
+      this.#$badge.style.setProperty('color', fg);
+    } else {
+      this.#$badge.style.removeProperty('background-color');
+      this.#$badge.style.removeProperty('color');
+    }
+  }
+  #updatePosition() {
+    if (this.hidden) {
+      return;
+    }
+    const mode = this.mode;
+    const targetRect = this.getBoundingClientRect();
+    const badgeRect = this.#$badgeWrapper.getBoundingClientRect();
+    const offsetMultX = mode === 'circle' ? 0.85 : 1;
+    const offsetMultY = mode === 'circle' ? 0.15 : 0;
+    const posX = Math.round(targetRect.width * offsetMultX - badgeRect.height / 2);
+    const posY = Math.round(targetRect.height * offsetMultY - badgeRect.height / 2);
+    this.#$badgeWrapper.style.setProperty('left', `${posX}px`);
+    this.#$badgeWrapper.style.setProperty('top', `${posY}px`);
+  }
+  #onResize = () => {
+    this.#updatePosition();
+  };
+});

package/badge/types.d.ts

@@ -0,0 +1,38 @@
+import type { TRect, TSinchElementReact } from '../types';
+export declare type TSinchBadgeSize = 'l' | 'm' | 's';
+export declare type TSinchBadgeMode = 'square' | 'circle';
+export declare type TSinchBadgeElement = HTMLElement & {
+    /** Text */
+    text: string;
+    /** Size */
+    size: TSinchBadgeSize;
+    /** Mode, `square` by default */
+    mode: TSinchBadgeMode;
+    /** Color */
+    color: string | null;
+    /** Hidden */
+    hidden: boolean;
+    readonly badgeRect: TRect;
+    /** Text */
+    setAttribute(name: 'text', value: string): void;
+    /** Size */
+    setAttribute(name: 'size', value: TSinchBadgeSize): void;
+    /** Mode, `square` by default */
+    setAttribute(name: 'mode', value: TSinchBadgeMode): void;
+    /** Color */
+    setAttribute(name: 'color', value: string): void;
+    /** Hidden */
+    setAttribute(name: 'hidden', value: ''): void;
+};
+export declare type TSinchBadgeReact = TSinchElementReact<TSinchBadgeElement> & {
+    /** Text */
+    text: string;
+    /** Size */
+    size: TSinchBadgeSize;
+    /** Mode, `square` by default */
+    mode?: TSinchBadgeMode;
+    /** Color */
+    color?: string;
+    /** Hidden */
+    hidden?: boolean;
+};

package/badge/utils.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchBadgeMode, TSinchBadgeSize } from './types';
+export declare const sizeValues: readonly TSinchBadgeSize[];
+declare type TAssertSize = (value: string | null) => asserts value is TSinchBadgeSize;
+export declare const assertSize: TAssertSize;
+export declare const modeValues: readonly TSinchBadgeMode[];
+declare type TAssertMode = (value: string | null) => asserts value is TSinchBadgeMode;
+export declare const assertMode: TAssertMode;
+export declare const getBadgeColorBg: (id: string) => string;
+export declare const getBadgeColorFg: (id: string) => string;
+export declare const assertBadgeColor: (root: Element, id: string | null) => void;
+export {};

package/badge/utils.js

@@ -0,0 +1,23 @@
+export const sizeValues = ['l', 'm', 's'];
+export const assertSize = value => {
+  if (value === null || !sizeValues.includes(value)) {
+    throw new Error(`sinch-badge: invalid size attribute: ${value}`);
+  }
+};
+export const modeValues = ['square', 'circle'];
+export const assertMode = value => {
+  if (value === null || !modeValues.includes(value)) {
+    throw new Error(`sinch-badge: invalid mode attribute: ${value}`);
+  }
+};
+export const getBadgeColorBg = id => {
+  return `var(--sinch-badge-color-${id}-bg)`;
+};
+export const getBadgeColorFg = id => {
+  return `var(--sinch-badge-color-${id}-fg)`;
+};
+export const assertBadgeColor = (root, id) => {
+  if (id === null || window.getComputedStyle(root).getPropertyValue(`--sinch-badge-color-${id}-bg`).length === 0) {
+    throw new Error(`Invalid sinch-badge color name: ${id}`);
+  }
+};

package/button/index.js

@@ -6,7 +6,6 @@ template.innerHTML = templateHTML;
 defineCustomElement('sinch-button', class extends NectaryElement {
   #$button;
   #$text;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -14,7 +13,6 @@ defineCustomElement('sinch-button', class extends NectaryElement {
     this.#$button = shadowRoot.querySelector('#button');
     this.#$text = shadowRoot.querySelector('#text');
   }
-
   connectedCallback() {
     this.setAttribute('role', 'button');
     this.#$button.addEventListener('click', this.#onButtonClick);
@@ -24,7 +22,6 @@ defineCustomElement('sinch-button', class extends NectaryElement {
     this.addEventListener('-focus', this.#onFocusReactHandler);
     this.addEventListener('-blur', this.#onBlurReactHandler);
   }
-
   disconnectedCallback() {
     this.#$button.removeEventListener('click', this.#onButtonClick);
     this.#$button.removeEventListener('focus', this.#onButtonFocus);
@@ -33,11 +30,9 @@ defineCustomElement('sinch-button', class extends NectaryElement {
     this.removeEventListener('-focus', this.#onFocusReactHandler);
     this.removeEventListener('-blur', this.#onBlurReactHandler);
   }
-
   static get observedAttributes() {
     return ['text', 'disabled'];
   }
-
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case 'text':
@@ -45,7 +40,6 @@ defineCustomElement('sinch-button', class extends NectaryElement {
           this.#$text.textContent = newVal;
           break;
         }
-
       case 'disabled':
         {
           const isDisabled = isAttrTrue(newVal);
@@ -55,51 +49,39 @@ defineCustomElement('sinch-button', class extends NectaryElement {
         }
     }
   }
-
   set type(value) {
     updateLiteralAttribute(this, buttonTypes, 'type', value);
   }
-
   get type() {
     return getLiteralAttribute(this, buttonTypes, 'type', 'primary');
   }
-
   set text(value) {
     updateAttribute(this, 'text', value);
   }
-
   get text() {
     return getAttribute(this, 'text', '');
   }
-
   set disabled(isDisabled) {
     updateBooleanAttribute(this, 'disabled', isDisabled);
   }
-
   get disabled() {
     return getBooleanAttribute(this, 'disabled');
   }
-
   set small(isSmall) {
     updateBooleanAttribute(this, 'small', isSmall);
   }
-
   get small() {
     return getBooleanAttribute(this, 'small');
   }
-
   get focusable() {
     return true;
   }
-
   focus() {
     this.#$button.focus();
   }
-
   blur() {
     this.#$button.blur();
   }
-
   #onButtonClick = () => {
     this.dispatchEvent(new CustomEvent('-click'));
   };

package/card/index.js

@@ -10,7 +10,6 @@ defineCustomElement('sinch-card', class extends NectaryElement {
   #$caption;
   #$illustrationSlot;
   #$illustrationSlotWrapper;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -21,19 +20,15 @@ defineCustomElement('sinch-card', class extends NectaryElement {
     this.#$illustrationSlot = shadowRoot.querySelector('slot[name="illustration"]');
     this.#$illustrationSlotWrapper = shadowRoot.querySelector('#illustration-wrapper');
   }
-
   connectedCallback() {
     this.#$illustrationSlot.addEventListener('slotchange', this.#onIllustrationSlotChange);
   }
-
   disconnectedCallback() {
     this.#$illustrationSlot.removeEventListener('slotchange', this.#onIllustrationSlotChange);
   }
-
   static get observedAttributes() {
     return ['text', 'label', 'caption', 'disabled'];
   }
-
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case 'text':
@@ -41,13 +36,11 @@ defineCustomElement('sinch-card', class extends NectaryElement {
           this.#$text.textContent = newVal;
           break;
         }
-
       case 'label':
         {
           this.#$label.textContent = newVal;
           break;
         }
-
       case 'caption':
         {
           updateAttribute(this.#$caption, 'text', newVal);
@@ -55,39 +48,30 @@ defineCustomElement('sinch-card', class extends NectaryElement {
         }
     }
   }
-
   set text(value) {
     updateAttribute(this, 'text', value);
   }
-
   get text() {
     return getAttribute(this, 'text', '');
   }
-
   set caption(value) {
     updateAttribute(this, 'caption', value);
   }
-
   get caption() {
     return getAttribute(this, 'caption', '');
   }
-
   set label(value) {
     updateAttribute(this, 'label', value);
   }
-
   get label() {
     return getAttribute(this, 'label', '');
   }
-
   set disabled(isDisabled) {
     updateBooleanAttribute(this, 'disabled', isDisabled);
   }
-
   get disabled() {
     return getBooleanAttribute(this, 'disabled');
   }
-
   #onIllustrationSlotChange = () => {
     setClass(this.#$illustrationSlotWrapper, 'active', this.#$illustrationSlot.assignedElements().length > 0);
   };

package/card/types.d.ts

@@ -1,17 +1,29 @@
 import type { TSinchElementReact } from '../types';
 export declare type TSinchCardElement = HTMLElement & {
+    /** Text */
     text: string;
-    label: string;
+    /** Caption */
     caption: string;
+    /** Label */
+    label: string | null;
+    /** Disabled */
     disabled: boolean;
+    /** Text */
     setAttribute(name: 'text', value: string): void;
-    setAttribute(name: 'label', value: string): void;
+    /** Caption */
     setAttribute(name: 'caption', value: string): void;
+    /** Label */
+    setAttribute(name: 'label', value: string): void;
+    /** Disabled */
     setAttribute(name: 'disabled', value: ''): void;
 };
 export declare type TSinchCardReact = TSinchElementReact<TSinchCardElement> & {
+    /** Text */
     text: string;
-    label?: string;
+    /** Caption */
     caption: string;
+    /** Label */
+    label?: string;
+    /** Disabled */
     disabled?: boolean;
 };

package/card-container/index.js

@@ -8,5 +8,4 @@ defineCustomElement('sinch-card-container', class extends NectaryElement {
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
   }
-
 });

package/chat/index.js

@@ -8,5 +8,4 @@ defineCustomElement('sinch-chat', class extends NectaryElement {
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
   }
-
 });