@nectary/components 0.38.0 → 0.40.0

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

@@ -1,14 +1,23 @@
 import type { TSinchElementReact } from '../types';
 export declare type TSinchActionMenuOptionElement = HTMLElement & {
+    /** Display text */
     text: string;
+    /** Disabled state */
     disabled: boolean;
+    /** Click event */
     addEventListener(type: '-click', listener: (e: CustomEvent<void>) => void): void;
+    /** Display text */
     setAttribute(name: 'text', value: string): void;
+    /** Disabled state */
     setAttribute(name: 'disabled', value: ''): void;
 };
 export declare type TSinchActionMenuOptionReact = TSinchElementReact<TSinchActionMenuOptionElement> & {
+    /** Display text */
     text: string;
+    /** Disabled state */
     disabled?: boolean;
+    /** Label that is used for a11y */
     'aria-label': string;
+    /** Click event handler */
     'on-click'?: (e: CustomEvent<void>) => void;
 };

package/action-menu-option/utils.d.ts

@@ -0,0 +1,2 @@
+import type { TSinchActionMenuOptionElement } from './types';
+export declare const isSinchActionMenuOption: (el: EventTarget | null) => el is TSinchActionMenuOptionElement;

package/action-menu-option/utils.js

@@ -0,0 +1,3 @@
+export const isSinchActionMenuOption = el => {
+  return el instanceof Element && el.tagName === 'SINCH-ACTION-MENU-OPTION';
+};

package/alert/index.js

@@ -1,12 +1,3 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$text;
-
-function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
-
-function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
-
 import '../icons/report-problem';
 import '../icons/report';
 import '../icons/info';
@@ -16,19 +7,14 @@ const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-dire
 import { assertType, typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-alert', (_$text = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-alert', class extends NectaryElement {
+  #$text;
+
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$text, {
-      writable: true,
-      value: void 0
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#text'));
+    this.#$text = shadowRoot.querySelector('#text');
   }
 
   connectedCallback() {
@@ -65,10 +51,10 @@ defineCustomElement('sinch-alert', (_$text = new WeakMap(), class extends Nectar
 
       case 'text':
         {
-          _classPrivateFieldGet(this, _$text).textContent = newVal;
+          this.#$text.textContent = newVal;
           break;
         }
     }
   }
 
-}));
+});

package/avatar/index.js

@@ -1,41 +1,22 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$text, _$image;
-
-function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
-
-function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
-
 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;font:var(--sinch-font-title-s);line-height:38px;color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-700);text-align:center;border-radius:50%;border:1px solid var(--sinch-color-snow-100);box-sizing:border-box;text-transform:uppercase;--sinch-avatar-badge-size:16px;--sinch-avatar-badge-font:700 12px/14px "Gilroy","Arial","sans-serif"}:host([background=blue]) #wrapper{background-color:var(--sinch-color-stormy-500);color:var(--sinch-color-snow-100)}:host([background=yellow]) #wrapper{background-color:var(--sinch-color-honey-500)}:host([size="l"]) #wrapper{width:56px;height:56px;font:var(--sinch-font-title-m);line-height:54px;--sinch-avatar-badge-size:20px;--sinch-avatar-badge-font:700 12px/18px "Gilroy","Arial","sans-serif"}:host([size="s"]) #wrapper{width:24px;height:24px;font:var(--sinch-font-extra-small-text);line-height:22px;--sinch-avatar-badge-size:11px;--sinch-avatar-badge-font:500 8px/9px "Gilroy","Arial","sans-serif"}#text{display:block;width:100%;height:100%;box-sizing:border-box}#image{display:none;width:100%;height:100%;object-fit:contain;position:absolute;left:0;top:0;border-radius:50%}:host([src]:not([src=""])) #image{display:block}::slotted(sinch-avatar-badge){position:absolute;top:-2px;left:calc(100% - 15px)}:host([size="l"]) ::slotted(sinch-avatar-badge){left:calc(100% - 19px)}:host([size="s"]) ::slotted(sinch-avatar-badge){left:calc(100% - 9px)}::slotted(sinch-avatar-status){position:absolute;bottom:-2px;right:-2px}:host([size="l"]) ::slotted(sinch-avatar-status){bottom:2px;right:2px}</style><div id="wrapper"><span id="text"></span><img id="image" alt=""/><slot name="badge"></slot><slot name="status"></slot></div>';
+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 template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-avatar', (_$text = new WeakMap(), _$image = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-avatar', class extends NectaryElement {
+  #$text;
+  #$image;
+
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$text, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$image, {
-      writable: true,
-      value: void 0
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#text'));
-
-    _classPrivateFieldSet(this, _$image, shadowRoot.querySelector('#image'));
+    this.#$text = shadowRoot.querySelector('#text');
+    this.#$image = shadowRoot.querySelector('#image');
   }
 
   get src() {
-    return getAttribute(this, 'src', null);
+    return getAttribute(this, 'src');
   }
 
   set src(value) {
@@ -74,17 +55,17 @@ defineCustomElement('sinch-avatar', (_$text = new WeakMap(), _$image = new WeakM
     switch (name) {
       case 'alt':
         {
-          _classPrivateFieldGet(this, _$text).textContent = newVal;
-          _classPrivateFieldGet(this, _$image).alt = newVal ?? '';
+          this.#$text.textContent = newVal;
+          this.#$image.alt = newVal ?? '';
           break;
         }
 
       case 'src':
         {
-          _classPrivateFieldGet(this, _$image).src = newVal ?? '';
+          this.#$image.src = newVal ?? '';
           break;
         }
     }
   }
 
-}));
+});

package/avatar-badge/index.js

@@ -1,29 +1,15 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$text;
-
-function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
-
-function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
-
 import { defineCustomElement, getAttribute, NectaryElement, setClass, updateAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#text{width:var(--sinch-avatar-badge-size);height:var(--sinch-avatar-badge-size);border:1px solid var(--sinch-color-snow-100);border-radius:calc(var(--sinch-avatar-badge-size)/ 2);text-align:center;box-sizing:border-box;color:var(--sinch-color-snow-100);font:var(--sinch-avatar-badge-font);background-color:var(--sinch-color-raspberry-500)}#text.long{width:fit-content;padding:0 calc(var(--sinch-avatar-badge-size)/ 4)}</style><div id="text"></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{width:fit-content;background-color:var(--sinch-color-snow-100);border-radius:calc(var(--sinch-avatar-badge-size)/ 2);padding:1px;box-sizing:border-box}#text{width:calc(var(--sinch-avatar-badge-size) - 2px);height:calc(var(--sinch-avatar-badge-size) - 2px);font:var(--sinch-avatar-badge-font);color:var(--sinch-color-snow-100);text-align:center;background-color:var(--sinch-color-raspberry-500);border-radius:calc(var(--sinch-avatar-badge-size)/ 2 - 1px)}#text.long{width:fit-content;padding:0 calc(var(--sinch-avatar-badge-size)/ 4)}</style><div id="wrapper"><div id="text"></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-avatar-badge', (_$text = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-avatar-badge', class extends NectaryElement {
+  #$text;
+
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$text, {
-      writable: true,
-      value: void 0
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#text'));
+    this.#$text = shadowRoot.querySelector('#text');
   }
 
   get text() {
@@ -42,11 +28,11 @@ defineCustomElement('sinch-avatar-badge', (_$text = new WeakMap(), class extends
     switch (name) {
       case 'text':
         {
-          _classPrivateFieldGet(this, _$text).textContent = newVal;
-          setClass(_classPrivateFieldGet(this, _$text), 'long', newVal !== null && newVal.length > 1);
+          this.#$text.textContent = newVal;
+          setClass(this.#$text, 'long', newVal !== null && newVal.length > 1);
           break;
         }
     }
   }
 
-}));
+});

package/avatar-status/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getLiteralAttribute, NectaryElement, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#circle{width:10px;height:10px;border:1px solid var(--sinch-color-snow-100);border-radius:50%;box-sizing:border-box}:host([color=grey]) #circle{background-color:var(--sinch-color-snow-600)}:host([color=yellow]) #circle{background-color:var(--sinch-color-honey-500)}:host([color=red]) #circle{background-color:var(--sinch-color-raspberry-500)}:host([color=green]) #circle{background-color:var(--sinch-color-grass-400)}</style><div id="circle"></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{width:10px;height:10px;padding:1px;box-sizing:border-box;border-radius:50%;background-color:var(--sinch-color-snow-100)}#circle{width:8px;height:8px;border-radius:50%}:host([color=grey]) #circle{background-color:var(--sinch-color-snow-600)}:host([color=yellow]) #circle{background-color:var(--sinch-color-honey-500)}:host([color=red]) #circle{background-color:var(--sinch-color-raspberry-500)}:host([color=green]) #circle{background-color:var(--sinch-color-grass-400)}</style><div id="wrapper"><div id="circle"></div></div>';
 import { assertColor, colorValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/button/index.js

@@ -1,105 +1,37 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$button, _$text, _onButtonClick, _onButtonFocus, _onButtonBlur, _onFocusReactHandler, _onBlurReactHandler, _onClickReactHandler;
-
-function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
-
-function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
-
 import { defineCustomElement, getBooleanAttribute, getAttribute, getLiteralAttribute, isAttrTrue, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, getReactEventHandler } from '../utils';
-const templateHTML = '<style>:host{--sinch-button-color-background:var(--sinch-color-tropical-500);--sinch-button-color-background-hover:var(--sinch-color-tropical-400);--sinch-button-color-background-active:var(--sinch-color-tropical-600);--sinch-button-color-background-disabled:var(--sinch-color-tropical-100);--sinch-button-color-border:var(--sinch-color-transparent);--sinch-button-color-border-disabled:var(--sinch-color-transparent);--sinch-button-color-text:var(--sinch-color-snow-100);--sinch-button-color-text-disabled:var(--sinch-color-snow-100);--sinch-button-shape-radius:var(--sinch-shape-radius-l);display:inline-block;vertical-align:middle;outline:0}#button{--sinch-color-icon:var(--sinch-button-color-text);--sinch-color-spinner-bg:var(--sinch-color-tropical-300);--sinch-color-spinner-fg:var(--sinch-color-snow-100)}#button:disabled{--sinch-color-icon:var(--sinch-button-color-text-disabled);--sinch-color-spinner-bg:var(--sinch-color-snow-100);--sinch-color-spinner-fg:var(--sinch-color-tropical-200)}:host([small]:not([small=false])){--sinch-button-shape-radius:var(--sinch-shape-radius-m)}:host([type=secondary]){--sinch-button-color-background:var(--sinch-color-snow-100);--sinch-button-color-background-hover:var(--sinch-color-tropical-100);--sinch-button-color-background-active:var(--sinch-color-tropical-100);--sinch-button-color-background-disabled:var(--sinch-color-snow-100);--sinch-button-color-border:var(--sinch-color-tropical-500);--sinch-button-color-border-disabled:var(--sinch-color-tropical-200);--sinch-button-color-text:var(--sinch-color-tropical-500);--sinch-button-color-text-disabled:var(--sinch-color-tropical-200)}:host([type=secondary])>#button{--sinch-color-spinner-bg:var(--sinch-color-tropical-500);--sinch-color-spinner-fg:var(--sinch-color-tropical-100)}:host([type=secondary]) #button:enabled:active,:host([type=secondary]) #button:enabled:hover{--sinch-color-spinner-fg:var(--sinch-color-tropical-200)}:host([type=secondary]) #button:disabled{--sinch-color-spinner-bg:var(--sinch-color-tropical-200)}:host([type=cta-primary]){--sinch-button-color-background:var(--sinch-color-honey-500);--sinch-button-color-background-hover:var(--sinch-color-honey-400);--sinch-button-color-background-active:var(--sinch-color-honey-600);--sinch-button-color-background-disabled:var(--sinch-color-honey-200);--sinch-button-color-text:var(--sinch-color-stormy-500);--sinch-button-color-text-disabled:var(--sinch-color-stormy-300)}:host([type=cta-primary])>#button{--sinch-color-spinner-bg:var(--sinch-color-honey-700);--sinch-color-spinner-fg:var(--sinch-color-stormy-500)}:host([type=cta-primary])>#button:disabled{--sinch-color-spinner-bg:var(--sinch-color-honey-100);--sinch-color-spinner-fg:var(--sinch-color-stormy-300)}:host([type=cta-secondary]){--sinch-button-color-background:transparent;--sinch-button-color-background-hover:var(--sinch-color-snow-500);--sinch-button-color-background-active:var(--sinch-color-snow-500);--sinch-button-color-background-disabled:transparent;--sinch-button-color-text:var(--sinch-color-stormy-500);--sinch-button-color-text-disabled:var(--sinch-color-stormy-100);--sinch-button-color-border:var(--sinch-color-stormy-500);--sinch-button-color-border-disabled:var(--sinch-color-stormy-100)}:host([type=cta-secondary])>#button{--sinch-color-spinner-bg:var(--sinch-color-snow-700);--sinch-color-spinner-fg:var(--sinch-color-stormy-500)}:host([type=cta-secondary])>#button:disabled{--sinch-color-spinner-bg:var(--sinch-color-snow-500);--sinch-color-spinner-fg:var(--sinch-color-stormy-100)}:host([type=cta-secondary])>#button::before{mix-blend-mode:multiply}:host([type=destructive]){--sinch-button-color-background:var(--sinch-color-snow-100);--sinch-button-color-background-hover:var(--sinch-color-raspberry-100);--sinch-button-color-background-active:var(--sinch-color-raspberry-100);--sinch-button-color-background-disabled:var(--sinch-color-snow-100);--sinch-button-color-text:var(--sinch-color-raspberry-500);--sinch-button-color-text-disabled:var(--sinch-color-raspberry-200);--sinch-button-color-border:var(--sinch-color-raspberry-500);--sinch-button-color-border-disabled:var(--sinch-color-raspberry-200)}:host([type=destructive])>#button{--sinch-color-spinner-bg:var(--sinch-color-raspberry-100);--sinch-color-spinner-fg:var(--sinch-color-raspberry-500)}:host([type=destructive])>#button:enabled:active,:host([type=destructive])>#button:enabled:hover{--sinch-color-spinner-bg:var(--sinch-color-raspberry-200);--sinch-color-spinner-fg:var(--sinch-color-raspberry-500)}:host([type=destructive])>#button:disabled{--sinch-color-spinner-bg:var(--sinch-color-raspberry-100);--sinch-color-spinner-fg:var(--sinch-color-raspberry-200)}#button{all:initial;display:block;position:relative;width:100%;height:48px;font:var(--sinch-font-title-s);color:var(--sinch-button-color-text);cursor:pointer;--sinch-size-icon:24px}#button::before{content:"";position:absolute;left:0;top:0;bottom:0;right:0;border:1px solid var(--sinch-button-color-border);border-radius:var(--sinch-button-shape-radius);background-color:var(--sinch-button-color-background);box-shadow:var(--sinch-elevation-level-1);pointer-events:none}#button:focus-visible::after{position:absolute;content:"";left:-4px;top:-4px;right:-4px;bottom:-4px;border:2px solid var(--sinch-color-aqua-400);border-radius:calc(var(--sinch-button-shape-radius) + 4px);pointer-events:none}@supports not selector(:focus-visible){#button:focus::after{position:absolute;content:"";left:-4px;top:-4px;right:-4px;bottom:-4px;border:2px solid var(--sinch-color-aqua-400);border-radius:calc(var(--sinch-button-shape-radius) + 4px);pointer-events:none}}#button:enabled:hover::before{background-color:var(--sinch-button-color-background-hover)}#button:enabled:active::before{background-color:var(--sinch-button-color-background-active);border-width:2px;box-shadow:var(--sinch-elevation-level-0)}#button:disabled{color:var(--sinch-button-color-text-disabled);cursor:initial}#button:disabled::before{background-color:var(--sinch-button-color-background-disabled);border-color:var(--sinch-button-color-border-disabled)}:host([type=cta-primary])>#button::before,:host([type=primary])>#button::before{border-width:0}#content{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:100%;padding:0 16px;box-sizing:border-box;pointer-events:none}:host([small]:not([small=false]))>#button{font:var(--sinch-font-title-xs);height:32px;--sinch-size-icon:16px}:host([small]:not([small=false])) #content{padding:0 12px;gap:8px}#text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex-shrink:1;min-width:0}</style><button id="button"><div id="content"><slot name="left-icon"></slot><span id="text"></span><slot name="right-icon"></slot></div></button>';
+const templateHTML = '<style>:host{--sinch-button-color-background:var(--sinch-color-tropical-500);--sinch-button-color-background-hover:var(--sinch-color-tropical-400);--sinch-button-color-background-active:var(--sinch-color-tropical-600);--sinch-button-color-background-disabled:var(--sinch-color-tropical-100);--sinch-button-color-border:var(--sinch-color-transparent);--sinch-button-color-border-disabled:var(--sinch-color-transparent);--sinch-button-color-text:var(--sinch-color-snow-100);--sinch-button-color-text-disabled:var(--sinch-color-snow-100);--sinch-button-shape-radius:var(--sinch-shape-radius-l);display:inline-block;vertical-align:middle;outline:0}#button{--sinch-color-icon:var(--sinch-button-color-text);--sinch-color-spinner-bg:var(--sinch-color-tropical-300);--sinch-color-spinner-fg:var(--sinch-color-snow-100)}#button:disabled{--sinch-color-icon:var(--sinch-button-color-text-disabled);--sinch-color-spinner-bg:var(--sinch-color-snow-100);--sinch-color-spinner-fg:var(--sinch-color-tropical-200)}:host([small]:not([small=false])){--sinch-button-shape-radius:var(--sinch-shape-radius-m)}:host([type=secondary]){--sinch-button-color-background:var(--sinch-color-snow-100);--sinch-button-color-background-hover:var(--sinch-color-tropical-100);--sinch-button-color-background-active:var(--sinch-color-tropical-100);--sinch-button-color-background-disabled:var(--sinch-color-snow-100);--sinch-button-color-border:var(--sinch-color-tropical-500);--sinch-button-color-border-disabled:var(--sinch-color-tropical-200);--sinch-button-color-text:var(--sinch-color-tropical-500);--sinch-button-color-text-disabled:var(--sinch-color-tropical-200)}:host([type=secondary])>#button{--sinch-color-spinner-bg:var(--sinch-color-tropical-500);--sinch-color-spinner-fg:var(--sinch-color-tropical-100)}:host([type=secondary]) #button:enabled:active,:host([type=secondary]) #button:enabled:hover{--sinch-color-spinner-fg:var(--sinch-color-tropical-200)}:host([type=secondary]) #button:disabled{--sinch-color-spinner-bg:var(--sinch-color-tropical-200)}:host([type=cta-primary]){--sinch-button-color-background:var(--sinch-color-honey-500);--sinch-button-color-background-hover:var(--sinch-color-honey-400);--sinch-button-color-background-active:var(--sinch-color-honey-600);--sinch-button-color-background-disabled:var(--sinch-color-honey-200);--sinch-button-color-text:var(--sinch-color-stormy-500);--sinch-button-color-text-disabled:var(--sinch-color-stormy-300)}:host([type=cta-primary])>#button{--sinch-color-spinner-bg:var(--sinch-color-honey-700);--sinch-color-spinner-fg:var(--sinch-color-stormy-500)}:host([type=cta-primary])>#button:disabled{--sinch-color-spinner-bg:var(--sinch-color-honey-100);--sinch-color-spinner-fg:var(--sinch-color-stormy-300)}:host([type=cta-secondary]){--sinch-button-color-background:transparent;--sinch-button-color-background-hover:#F1F3F4;--sinch-button-color-background-active:#E3E6E8;--sinch-button-color-background-disabled:transparent;--sinch-button-color-text:var(--sinch-color-stormy-500);--sinch-button-color-text-disabled:var(--sinch-color-stormy-100);--sinch-button-color-border:var(--sinch-color-stormy-500);--sinch-button-color-border-disabled:var(--sinch-color-stormy-100)}:host([type=cta-secondary])>#button{--sinch-color-spinner-bg:var(--sinch-color-snow-700);--sinch-color-spinner-fg:var(--sinch-color-stormy-500)}:host([type=cta-secondary])>#button:disabled{--sinch-color-spinner-bg:var(--sinch-color-snow-500);--sinch-color-spinner-fg:var(--sinch-color-stormy-100)}:host([type=cta-secondary])>#button::before{mix-blend-mode:multiply}:host([type=destructive]){--sinch-button-color-background:var(--sinch-color-snow-100);--sinch-button-color-background-hover:var(--sinch-color-raspberry-100);--sinch-button-color-background-active:var(--sinch-color-raspberry-100);--sinch-button-color-background-disabled:var(--sinch-color-snow-100);--sinch-button-color-text:var(--sinch-color-raspberry-500);--sinch-button-color-text-disabled:var(--sinch-color-raspberry-200);--sinch-button-color-border:var(--sinch-color-raspberry-500);--sinch-button-color-border-disabled:var(--sinch-color-raspberry-200)}:host([type=destructive])>#button{--sinch-color-spinner-bg:var(--sinch-color-raspberry-100);--sinch-color-spinner-fg:var(--sinch-color-raspberry-500)}:host([type=destructive])>#button:enabled:active,:host([type=destructive])>#button:enabled:hover{--sinch-color-spinner-bg:var(--sinch-color-raspberry-200);--sinch-color-spinner-fg:var(--sinch-color-raspberry-500)}:host([type=destructive])>#button:disabled{--sinch-color-spinner-bg:var(--sinch-color-raspberry-100);--sinch-color-spinner-fg:var(--sinch-color-raspberry-200)}#button{all:initial;display:block;position:relative;width:100%;height:48px;font:var(--sinch-font-title-s);color:var(--sinch-button-color-text);cursor:pointer;--sinch-size-icon:24px}#button::before{content:"";position:absolute;left:0;top:0;bottom:0;right:0;border:1px solid var(--sinch-button-color-border);border-radius:var(--sinch-button-shape-radius);background-color:var(--sinch-button-color-background);box-shadow:var(--sinch-elevation-level-1);pointer-events:none}#button:focus-visible::after{position:absolute;content:"";left:-4px;top:-4px;right:-4px;bottom:-4px;border:2px solid var(--sinch-color-aqua-400);border-radius:calc(var(--sinch-button-shape-radius) + 4px);pointer-events:none}@supports not selector(:focus-visible){#button:focus::after{position:absolute;content:"";left:-4px;top:-4px;right:-4px;bottom:-4px;border:2px solid var(--sinch-color-aqua-400);border-radius:calc(var(--sinch-button-shape-radius) + 4px);pointer-events:none}}#button:enabled:hover::before{background-color:var(--sinch-button-color-background-hover)}#button:enabled:active::before{background-color:var(--sinch-button-color-background-active);border-width:2px;box-shadow:var(--sinch-elevation-level-0)}#button:disabled{color:var(--sinch-button-color-text-disabled);cursor:initial}#button:disabled::before{background-color:var(--sinch-button-color-background-disabled);border-color:var(--sinch-button-color-border-disabled)}:host([type=cta-primary])>#button::before,:host([type=primary])>#button::before{border-width:0}#content{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:100%;padding:0 16px;box-sizing:border-box;pointer-events:none}:host([small]:not([small=false]))>#button{font:var(--sinch-font-title-xs);height:32px;--sinch-size-icon:16px}:host([small]:not([small=false])) #content{padding:0 12px;gap:8px}#text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex-shrink:1;min-width:0}</style><button id="button"><div id="content"><slot name="left-icon"></slot><span id="text"></span><slot name="right-icon"></slot></div></button>';
 import { buttonTypes } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-button', (_$button = new WeakMap(), _$text = new WeakMap(), _onButtonClick = new WeakMap(), _onButtonFocus = new WeakMap(), _onButtonBlur = new WeakMap(), _onFocusReactHandler = new WeakMap(), _onBlurReactHandler = new WeakMap(), _onClickReactHandler = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-button', class extends NectaryElement {
+  #$button;
+  #$text;
+
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$button, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$text, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _onButtonClick, {
-      writable: true,
-      value: () => {
-        this.dispatchEvent(new CustomEvent('-click'));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onButtonFocus, {
-      writable: true,
-      value: () => {
-        this.dispatchEvent(new CustomEvent('-focus'));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onButtonBlur, {
-      writable: true,
-      value: () => {
-        this.dispatchEvent(new CustomEvent('-blur'));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onFocusReactHandler, {
-      writable: true,
-      value: () => {
-        getReactEventHandler(this, 'on-focus')?.();
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onBlurReactHandler, {
-      writable: true,
-      value: () => {
-        getReactEventHandler(this, 'on-blur')?.();
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onClickReactHandler, {
-      writable: true,
-      value: e => {
-        getReactEventHandler(this, 'on-click')?.(e);
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$button, shadowRoot.querySelector('#button'));
-
-    _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#text'));
+    this.#$button = shadowRoot.querySelector('#button');
+    this.#$text = shadowRoot.querySelector('#text');
   }
 
   connectedCallback() {
     this.setAttribute('role', 'button');
-
-    _classPrivateFieldGet(this, _$button).addEventListener('click', _classPrivateFieldGet(this, _onButtonClick));
-
-    _classPrivateFieldGet(this, _$button).addEventListener('focus', _classPrivateFieldGet(this, _onButtonFocus));
-
-    _classPrivateFieldGet(this, _$button).addEventListener('blur', _classPrivateFieldGet(this, _onButtonBlur));
-
-    this.addEventListener('-click', _classPrivateFieldGet(this, _onClickReactHandler));
-    this.addEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
-    this.addEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
+    this.#$button.addEventListener('click', this.#onButtonClick);
+    this.#$button.addEventListener('focus', this.#onButtonFocus);
+    this.#$button.addEventListener('blur', this.#onButtonBlur);
+    this.addEventListener('-click', this.#onClickReactHandler);
+    this.addEventListener('-focus', this.#onFocusReactHandler);
+    this.addEventListener('-blur', this.#onBlurReactHandler);
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$button).removeEventListener('click', _classPrivateFieldGet(this, _onButtonClick));
-
-    _classPrivateFieldGet(this, _$button).removeEventListener('focus', _classPrivateFieldGet(this, _onButtonFocus));
-
-    _classPrivateFieldGet(this, _$button).removeEventListener('blur', _classPrivateFieldGet(this, _onButtonBlur));
-
-    this.removeEventListener('-click', _classPrivateFieldGet(this, _onClickReactHandler));
-    this.removeEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
-    this.removeEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
+    this.#$button.removeEventListener('click', this.#onButtonClick);
+    this.#$button.removeEventListener('focus', this.#onButtonFocus);
+    this.#$button.removeEventListener('blur', this.#onButtonBlur);
+    this.removeEventListener('-click', this.#onClickReactHandler);
+    this.removeEventListener('-focus', this.#onFocusReactHandler);
+    this.removeEventListener('-blur', this.#onBlurReactHandler);
   }
 
   static get observedAttributes() {
@@ -110,14 +42,14 @@ defineCustomElement('sinch-button', (_$button = new WeakMap(), _$text = new Weak
     switch (name) {
       case 'text':
         {
-          _classPrivateFieldGet(this, _$text).textContent = newVal;
+          this.#$text.textContent = newVal;
           break;
         }
 
       case 'disabled':
         {
           const isDisabled = isAttrTrue(newVal);
-          _classPrivateFieldGet(this, _$button).disabled = isDisabled;
+          this.#$button.disabled = isDisabled;
           updateBooleanAttribute(this, 'disabled', isDisabled);
           break;
         }
@@ -157,11 +89,29 @@ defineCustomElement('sinch-button', (_$button = new WeakMap(), _$text = new Weak
   }
 
   focus() {
-    _classPrivateFieldGet(this, _$button).focus();
+    this.#$button.focus();
   }
 
   blur() {
-    _classPrivateFieldGet(this, _$button).blur();
+    this.#$button.blur();
   }
 
-}));
+  #onButtonClick = () => {
+    this.dispatchEvent(new CustomEvent('-click'));
+  };
+  #onButtonFocus = () => {
+    this.dispatchEvent(new CustomEvent('-focus'));
+  };
+  #onButtonBlur = () => {
+    this.dispatchEvent(new CustomEvent('-blur'));
+  };
+  #onFocusReactHandler = () => {
+    getReactEventHandler(this, 'on-focus')?.();
+  };
+  #onBlurReactHandler = () => {
+    getReactEventHandler(this, 'on-blur')?.();
+  };
+  #onClickReactHandler = e => {
+    getReactEventHandler(this, 'on-click')?.(e);
+  };
+});

package/card/index.d.ts

@@ -1,3 +1,5 @@
+import '../title';
+import '../text';
 import type { TSinchCardElement, TSinchCardReact } from './types';
 declare global {
     namespace JSX {

package/card/index.js

@@ -1,92 +1,33 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$text, _$label, _$caption, _$illustrationSlot, _$actionSlot, _$illustrationSlotWrapper, _onIllustrationSlotChange, _updateDisabledAttributeInChildren;
-
-function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
-
-function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
-
+import '../title';
+import '../text';
 import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, setClass, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{border-radius:var(--sinch-shape-radius-l);border:1px solid var(--sinch-color-snow-700);background-color:var(--sinch-color-snow-100);box-shadow:var(--sinch-elevation-level-0);overflow:hidden}:host(:hover) #wrapper{box-shadow:var(--sinch-elevation-level-1)}#card-body{padding:24px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px}#illustration-wrapper{display:none;overflow:hidden;height:240px}#illustration-wrapper.active{display:block}#label{margin:0;font:var(--sinch-font-title-xs);color:var(--sinch-color-stormy-300);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#label:empty{display:none}#header{display:flex;flex-direction:row;align-items:center;gap:8px;--sinch-size-icon:48px}#caption{font:var(--sinch-font-title-m);color:var(--sinch-color-stormy-500);flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#description{margin:0;font:var(--sinch-font-body);color:var(--sinch-color-stormy-500);flex:1;min-height:0;max-height:120px;overflow-y:auto}#description:empty{display:none}:host([disabled]:not([disabled=false])) :is(#illustration-wrapper,#description,#header,#label){opacity:.6}::slotted(sinch-card-button),::slotted(sinch-card-link){margin-top:20px;align-self:flex-start;max-width:100%}</style><div id="wrapper"><div id="illustration-wrapper"><slot name="illustration"></slot></div><div id="card-body"><p id="label"></p><div id="header"><slot name="icon"></slot><span id="caption"></span></div><p id="description"></p><slot name="action"></slot></div></div>';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{border-radius:var(--sinch-shape-radius-l);border:1px solid var(--sinch-color-snow-700);background-color:var(--sinch-color-snow-100);box-shadow:var(--sinch-elevation-level-0);overflow:hidden}:host(:hover) #wrapper{box-shadow:var(--sinch-elevation-level-1)}#card-body{padding:24px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px}#illustration-wrapper{display:none;overflow:hidden;height:240px}#illustration-wrapper.active{display:block}#label{color:var(--sinch-color-stormy-300)}#label:empty{display:none}#header{display:flex;flex-direction:row;align-items:center;gap:8px;--sinch-size-icon:48px}#caption{color:var(--sinch-color-stormy-500);flex:1;min-width:0}#description{color:var(--sinch-color-stormy-500);flex:1;min-height:0;max-height:120px;overflow-y:auto}#description:empty{display:none}:host([disabled]:not([disabled=false])) :is(#illustration-wrapper,#description,#header,#label){opacity:.6}slot[name=action]::slotted(*){margin-top:20px;align-self:flex-start;max-width:100%}</style><div id="wrapper"><div id="illustration-wrapper"><slot name="illustration"></slot></div><div id="card-body"><sinch-text id="label" type="s" emphasized ellipsis></sinch-text><div id="header"><slot name="icon"></slot><sinch-title id="caption" type="m" level="3" ellipsis></sinch-title></div><sinch-text id="description" type="m"></sinch-text><slot name="action"></slot></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-card', (_$text = new WeakMap(), _$label = new WeakMap(), _$caption = new WeakMap(), _$illustrationSlot = new WeakMap(), _$actionSlot = new WeakMap(), _$illustrationSlotWrapper = new WeakMap(), _onIllustrationSlotChange = new WeakMap(), _updateDisabledAttributeInChildren = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-card', class extends NectaryElement {
+  #$text;
+  #$label;
+  #$caption;
+  #$illustrationSlot;
+  #$illustrationSlotWrapper;
+
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$text, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$label, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$caption, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$illustrationSlot, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$actionSlot, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$illustrationSlotWrapper, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _onIllustrationSlotChange, {
-      writable: true,
-      value: () => {
-        setClass(_classPrivateFieldGet(this, _$illustrationSlotWrapper), 'active', _classPrivateFieldGet(this, _$illustrationSlot).assignedElements().length > 0);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _updateDisabledAttributeInChildren, {
-      writable: true,
-      value: () => {
-        for (const $el of _classPrivateFieldGet(this, _$actionSlot).assignedElements()) {
-          updateAttribute($el, 'disabled', this.getAttribute('disabled'));
-        }
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#description'));
-
-    _classPrivateFieldSet(this, _$label, shadowRoot.querySelector('#label'));
-
-    _classPrivateFieldSet(this, _$caption, shadowRoot.querySelector('#caption'));
-
-    _classPrivateFieldSet(this, _$illustrationSlot, shadowRoot.querySelector('slot[name="illustration"]'));
-
-    _classPrivateFieldSet(this, _$actionSlot, shadowRoot.querySelector('slot[name="action"]'));
-
-    _classPrivateFieldSet(this, _$illustrationSlotWrapper, shadowRoot.querySelector('#illustration-wrapper'));
+    this.#$text = shadowRoot.querySelector('#description');
+    this.#$label = shadowRoot.querySelector('#label');
+    this.#$caption = shadowRoot.querySelector('#caption');
+    this.#$illustrationSlot = shadowRoot.querySelector('slot[name="illustration"]');
+    this.#$illustrationSlotWrapper = shadowRoot.querySelector('#illustration-wrapper');
   }
 
   connectedCallback() {
-    _classPrivateFieldGet(this, _$illustrationSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onIllustrationSlotChange));
-
-    _classPrivateFieldGet(this, _$actionSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _updateDisabledAttributeInChildren));
+    this.#$illustrationSlot.addEventListener('slotchange', this.#onIllustrationSlotChange);
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$illustrationSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onIllustrationSlotChange));
-
-    _classPrivateFieldGet(this, _$actionSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _updateDisabledAttributeInChildren));
+    this.#$illustrationSlot.removeEventListener('slotchange', this.#onIllustrationSlotChange);
   }
 
   static get observedAttributes() {
@@ -97,26 +38,19 @@ defineCustomElement('sinch-card', (_$text = new WeakMap(), _$label = new WeakMap
     switch (name) {
       case 'text':
         {
-          _classPrivateFieldGet(this, _$text).textContent = newVal;
+          this.#$text.textContent = newVal;
           break;
         }
 
       case 'label':
         {
-          _classPrivateFieldGet(this, _$label).textContent = newVal;
+          this.#$label.textContent = newVal;
           break;
         }
 
       case 'caption':
         {
-          _classPrivateFieldGet(this, _$caption).textContent = newVal;
-          break;
-        }
-
-      case 'disabled':
-        {
-          _classPrivateFieldGet(this, _updateDisabledAttributeInChildren).call(this);
-
+          updateAttribute(this.#$caption, 'text', newVal);
           break;
         }
     }
@@ -154,4 +88,7 @@ defineCustomElement('sinch-card', (_$text = new WeakMap(), _$label = new WeakMap
     return getBooleanAttribute(this, 'disabled');
   }
 
-}));
+  #onIllustrationSlotChange = () => {
+    setClass(this.#$illustrationSlotWrapper, 'active', this.#$illustrationSlot.assignedElements().length > 0);
+  };
+});