@nectary/components 4.10.5 → 4.11.0

package/accordion/index.d.ts

@@ -1,5 +1,18 @@
+import { NectaryElement } from '../utils';
 import type { TSinchAccordion } from './types';
 import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
+export declare class Accordion extends NectaryElement {
+    #private;
+    constructor();
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    set value(value: string);
+    get value(): string;
+    set multiple(isMultiple: boolean);
+    get multiple(): boolean;
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-accordion': TSinchAccordion;

package/accordion/index.js

@@ -2,7 +2,7 @@ import { NectaryElement, defineCustomElement, getAttribute, getBooleanAttribute,
 const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:100%}::slotted(sinch-accordion-item){flex-shrink:1}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-accordion', class extends NectaryElement {
+export class Accordion extends NectaryElement {
   #$slot;
   #controller = null;
   constructor() {
@@ -87,4 +87,5 @@ defineCustomElement('sinch-accordion', class extends NectaryElement {
   #onChangeReactHandler = e => {
     getReactEventHandler(this, 'on-change')?.(e);
   };
-});
+}
+defineCustomElement('sinch-accordion', Accordion);

package/accordion-item/index.d.ts

@@ -1,8 +1,30 @@
 import '../icon';
 import '../text';
 import '../title';
-import type { TSinchAccordionItem } from './types';
+import { NectaryElement } from '../utils';
+import type { TSinchAccordionStatusType, TSinchAccordionItem } from './types';
 import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
+export declare class AccordionItem extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set value(value: string);
+    get value(): string;
+    set label(value: string);
+    get label(): string;
+    set disabled(isDisabled: boolean);
+    get disabled(): boolean;
+    get status(): TSinchAccordionStatusType | null;
+    set status(value: TSinchAccordionStatusType | null);
+    set optionalText(value: string | null);
+    get optionalText(): string | null;
+    get focusable(): boolean;
+    focus(): void;
+    blur(): void;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-accordion-item': TSinchAccordionItem;

package/accordion-item/index.js

@@ -6,7 +6,7 @@ const templateHTML = '<style>:host{display:block;outline:0;min-height:48px}#wrap
 import { statusValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-accordion-item', class extends NectaryElement {
+export class AccordionItem extends NectaryElement {
   #$button;
   #$title;
   #$optionalText;
@@ -92,4 +92,5 @@ defineCustomElement('sinch-accordion-item', class extends NectaryElement {
   blur() {
     this.#$button.blur();
   }
-});
+}
+defineCustomElement('sinch-accordion-item', AccordionItem);

package/action-menu/index.d.ts

@@ -1,5 +1,17 @@
+import { NectaryElement } from '../utils';
 import type { TSinchActionMenu } from './types';
 import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
+export declare class ActionMenu extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set rows(value: number | null);
+    get rows(): number | null;
+    get focusable(): boolean;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-action-menu': TSinchActionMenu;

package/action-menu/index.js

@@ -4,7 +4,7 @@ const templateHTML = '<style>:host{display:block;outline:0}#listbox{overflow-y:a
 const ITEM_HEIGHT = 40;
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-action-menu', class extends NectaryElement {
+export class ActionMenu extends NectaryElement {
   #$optionSlot;
   #$listbox;
   #controller = null;
@@ -192,4 +192,5 @@ defineCustomElement('sinch-action-menu', class extends NectaryElement {
   get focusable() {
     return true;
   }
-});
+}
+defineCustomElement('sinch-action-menu', ActionMenu);

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

@@ -1,6 +1,20 @@
 import '../text';
+import { NectaryElement } from '../utils';
 import type { TSinchActionMenuOption } from './types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class ActionMenuOption extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set text(value: string);
+    get text(): string;
+    set disabled(isDisabled: boolean);
+    get disabled(): boolean;
+    click(): void;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-action-menu-option': TSinchActionMenuOption;

package/action-menu-option/index.js

@@ -3,7 +3,7 @@ import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHa
 const templateHTML = '<style>:host{display:block;cursor:pointer}:host([disabled]){cursor:initial}#wrapper{all:initial;display:flex;position:relative;box-sizing:border-box;height:40px;width:100%;padding:8px 16px;align-items:center;gap:10px;user-select:none;background-color:var(--sinch-comp-action-menu-color-default-background-initial);--sinch-global-color-text:var(--sinch-comp-action-menu-color-default-text-initial);--sinch-global-color-icon:var(--sinch-comp-action-menu-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-action-menu-size-icon)}:host([data-selected])>#wrapper{background-color:var(--sinch-comp-action-menu-color-default-background-selected)}:host(:hover)>#wrapper{background-color:var(--sinch-comp-action-menu-color-default-background-hover)}:host([disabled])>#wrapper{pointer-events:none;background-color:var(--sinch-comp-action-menu-color-disabled-background-initial);--sinch-global-color-text:var(--sinch-comp-action-menu-color-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-action-menu-color-disabled-icon-initial)}#content{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-action-menu-font-option)}::slotted(*){margin-left:-6px}</style><div id="wrapper" inert><slot name="icon"></slot><sinch-text id="content" type="m" ellipsis></sinch-text></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-action-menu-option', class ActionMenuOption extends NectaryElement {
+export class ActionMenuOption extends NectaryElement {
   #$content;
   #controller = null;
   constructor() {
@@ -79,4 +79,5 @@ defineCustomElement('sinch-action-menu-option', class ActionMenuOption extends N
   #onClickReactHandler = e => {
     getReactEventHandler(this, 'on-click')?.(e);
   };
-});
+}
+defineCustomElement('sinch-action-menu-option', ActionMenuOption);

package/alert/index.d.ts

@@ -1,8 +1,21 @@
 import '../icon';
 import '../rich-text';
 import '../text';
-import type { TSinchAlert } from './types';
+import { NectaryElement } from '../utils';
+import type { TSinchAlertType, TSinchAlert } from './types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class Alert extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, _: string | null, newVal: string | null): void;
+    get type(): TSinchAlertType;
+    set type(value: TSinchAlertType);
+    get text(): string;
+    set text(value: string);
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-alert': TSinchAlert;

package/alert/index.js

@@ -6,7 +6,7 @@ const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-dire
 import { typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-alert', class extends NectaryElement {
+export class Alert extends NectaryElement {
   #$text;
   constructor() {
     super();
@@ -45,4 +45,5 @@ defineCustomElement('sinch-alert', class extends NectaryElement {
   set text(value) {
     updateAttribute(this, 'text', value);
   }
-});
+}
+defineCustomElement('sinch-alert', Alert);

package/avatar/index.d.ts

@@ -1,5 +1,25 @@
-import type { TSinchAvatar } from './types';
+import { NectaryElement } from '../utils';
+import type { TSinchAvatarStatus, TSinchAvatar } from './types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { TSinchSize } from '../utils/size';
+export declare class Avatar extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, _: string | null, newVal: string | null): void;
+    get src(): string | null;
+    set src(value: string | null);
+    get alt(): string;
+    set alt(value: string);
+    get color(): string | null;
+    set color(value: string | null);
+    get size(): TSinchSize;
+    set size(value: TSinchSize);
+    get status(): TSinchAvatarStatus | null;
+    set status(value: TSinchAvatarStatus | null);
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-avatar': TSinchAvatar;

package/avatar/index.js

@@ -4,7 +4,7 @@ const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;ou
 import { getAvatarColorBg, getAvatarColorFg, statusValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-avatar', class extends NectaryElement {
+export class Avatar extends NectaryElement {
   #$circle;
   #$text;
   #$image;
@@ -91,4 +91,5 @@ defineCustomElement('sinch-avatar', class extends NectaryElement {
       this.#$circle.style.removeProperty('color');
     }
   }
-});
+}
+defineCustomElement('sinch-avatar', Avatar);

package/badge/index.d.ts

@@ -1,5 +1,24 @@
-import type { TSinchBadge } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import { NectaryElement } from '../utils';
+import type { TSinchBadgeMode, TSinchBadge } from './types';
+import type { TRect, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { TSinchSize } from '../utils/size';
+export declare class Badge extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    get text(): string;
+    set text(value: string);
+    get size(): TSinchSize;
+    set size(value: TSinchSize);
+    get mode(): TSinchBadgeMode;
+    set mode(value: TSinchBadgeMode);
+    get hidden(): boolean;
+    set hidden(isHidden: boolean);
+    get badgeRect(): TRect;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-badge': TSinchBadge;

package/badge/index.js

@@ -4,7 +4,7 @@ const templateHTML = '<style>:host{display:inline-flex;flex-direction:column;pos
 import { modeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-badge', class extends NectaryElement {
+export class Badge extends NectaryElement {
   #$badgeWrapper;
   #$badge;
   #$text;
@@ -111,4 +111,5 @@ defineCustomElement('sinch-badge', class extends NectaryElement {
   #onResize = () => {
     this.#updatePosition();
   };
-});
+}
+defineCustomElement('sinch-badge', Badge);

package/button/index.d.ts

@@ -1,5 +1,29 @@
-import type { TSinchButton } from './types';
+import { NectaryElement } from '../utils';
+import type { TSinchButtonType, TSinchButton, TSinchButtonFormType } from './types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { TSinchSizeEx } from '../utils/size';
+export declare class Button extends NectaryElement {
+    #private;
+    static formAssociated: boolean;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set type(value: TSinchButtonType);
+    get type(): TSinchButtonType;
+    set text(value: string);
+    get text(): string;
+    set disabled(isDisabled: boolean);
+    get disabled(): boolean;
+    set toggled(isToggled: boolean);
+    get toggled(): boolean;
+    set size(size: TSinchSizeEx);
+    get size(): TSinchSizeEx;
+    get focusable(): boolean;
+    set formType(value: TSinchButtonFormType);
+    get formType(): TSinchButtonFormType;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-button': TSinchButton;

package/button/index.js

@@ -5,7 +5,7 @@ const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;ou
 import { typeValues, formTypeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-button', class extends NectaryElement {
+export class Button extends NectaryElement {
   #$button;
   #$text;
   #controller = null;
@@ -204,4 +204,5 @@ defineCustomElement('sinch-button', class extends NectaryElement {
   #onClickReactHandler = e => {
     getReactEventHandler(this, 'on-click')?.(e);
   };
-});
+}
+defineCustomElement('sinch-button', Button);

package/button-group/index.d.ts

@@ -1,5 +1,19 @@
+import { NectaryElement } from '../utils';
 import type { TSinchButtonGroup } from './types';
+import type { TSinchButtonType } from '../button/types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { TSinchSizeEx } from '../utils/size';
+export declare class ButtonGroup extends NectaryElement {
+    #private;
+    constructor();
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set type(value: TSinchButtonType);
+    get type(): TSinchButtonType;
+    set size(size: TSinchSizeEx);
+    get size(): TSinchSizeEx;
+    connectedCallback(): void;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-button-group': TSinchButtonGroup;

package/button-group/index.js

@@ -4,7 +4,7 @@ import { DEFAULT_SIZE, sizeExValues } from '../utils/size';
 const templateHTML = '<style>:host{display:block}#wrapper{display:flex;box-sizing:border-box;width:100%;height:100%}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-button-group', class extends NectaryElement {
+export class ButtonGroup extends NectaryElement {
   #$slot;
   constructor() {
     super();
@@ -46,4 +46,5 @@ defineCustomElement('sinch-button-group', class extends NectaryElement {
   connectedCallback() {
     this.setAttribute('role', 'group');
   }
-});
+}
+defineCustomElement('sinch-button-group', ButtonGroup);

package/button-group-item/index.d.ts

@@ -1,5 +1,20 @@
+import { NectaryElement } from '../utils';
 import type { TSinchButtonGroupItem } from './types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class ButtonGroupItem extends NectaryElement {
+    #private;
+    constructor();
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: (keyof NectaryComponentVanilla<'sinch-button'>), oldVal: string | null, newVal: string | null): void;
+    connectedCallback(): void;
+    set text(value: string);
+    get text(): string;
+    set disabled(isDisabled: boolean);
+    get disabled(): boolean;
+    set toggled(isToggled: boolean);
+    get toggled(): boolean;
+    get focusable(): boolean;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-button-group-item': TSinchButtonGroupItem;

package/button-group-item/index.js

@@ -2,7 +2,7 @@ import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHa
 const templateHTML = '<style>:host{display:block;--sinch-local-divider-color:var(--sinch-comp-button-color-secondary-default-text-initial)}#wrapper{display:flex;box-sizing:border-box;width:100%;height:100%;position:relative}:host(:is(:not(:first-of-type))) #wrapper::before{content:"";position:absolute;inset:0;background-color:var(--sinch-local-divider-color);opacity:.3;pointer-events:none;z-index:2;top:10%;bottom:10%;left:-.5px;width:1px}:host([type=primary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-primary-default-text-initial)}:host([type=secondary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-secondary-default-text-initial)}:host([type=subtle-primary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-subtle-primary-default-text-initial)}:host([type=subtle-secondary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-subtle-secondary-default-text-initial)}:host([type=cta-primary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-cta-primary-default-text-initial)}:host([type=cta-secondary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-cta-secondary-default-text-initial)}:host([type=destructive]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-danger-default-text-initial)}#sinch-button-element{display:flex;box-sizing:border-box;width:100%;height:100%;--sinch-button-shape-radius-base:0;--sinch-button-shape-radius-top-right:0;--sinch-button-shape-radius-top-left:0;--sinch-button-shape-radius-bottom-right:0;--sinch-button-shape-radius-bottom-left:0}:host(:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-m);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-m)}:host(:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-m);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-m)}:host([size="l"]:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-l);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-l)}:host([size="l"]:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-l);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-l)}:host([size="m"]:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-m);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-m)}:host([size="m"]:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-m);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-m)}:host([size="s"]:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-s);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-s)}:host([size="s"]:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-s);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-s)}:host([size=xs]:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-xs);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-xs)}:host([size=xs]:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-xs);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-xs)}:host(:is(:not(:first-of-type,:last-of-type))) #sinch-button-element:not(:active){--sinch-button-border-left:none;--sinch-button-border-right:none}:host(:is(:first-of-type)) #sinch-button-element:not(:active){--sinch-button-border-right:none}:host(:is(:last-of-type)) #sinch-button-element:not(:active){--sinch-button-border-left:none}:host(:is([text=""],:not([text]))) :is(#left-icon,#right-icon,#text){display:none}::slotted(*){display:block}</style><div id="wrapper"><sinch-button id="sinch-button-element"><slot id="left-icon" name="left-icon" slot="left-icon"></slot><slot id="icon" name="icon" slot="icon"></slot><slot id="right-icon" name="right-icon" slot="right-icon"></slot></sinch-button></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-button-group-item', class extends NectaryElement {
+export class ButtonGroupItem extends NectaryElement {
   #$sinchButton;
   #controller = null;
   constructor() {
@@ -76,4 +76,5 @@ defineCustomElement('sinch-button-group-item', class extends NectaryElement {
   #onBlurReactHandler = () => {
     getReactEventHandler(this, 'on-blur')?.();
   };
-});
+}
+defineCustomElement('sinch-button-group-item', ButtonGroupItem);

package/card/index.d.ts

@@ -1,7 +1,23 @@
 import '../title';
 import '../text';
+import { NectaryElement } from '../utils';
 import type { TSinchCard } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReact, NectaryComponentVanilla, TRect } from '../types';
+export declare class Card extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set text(value: string);
+    get text(): string;
+    set caption(value: string);
+    get caption(): string;
+    set label(value: string);
+    get label(): string;
+    get dragRect(): TRect | null;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-card': TSinchCard;

package/card/index.js

@@ -4,7 +4,7 @@ import { defineCustomElement, getBooleanAttribute, getAttribute, updateAttribute
 const templateHTML = '<style>:host{display:block;outline:0}#wrapper{border-radius:var(--sinch-comp-card-shape-radius);border:1px solid var(--sinch-comp-card-color-default-border-initial);background-color:var(--sinch-comp-card-color-default-background-initial);box-shadow:var(--sinch-comp-card-shadow-initial);overflow:hidden}:host(:hover) #wrapper{box-shadow:var(--sinch-comp-card-shadow-hover)}#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{--sinch-comp-text-font:var(--sinch-comp-card-font-label);--sinch-global-color-text:var(--sinch-comp-card-color-default-title-initial)}#label:empty{display:none}#header{display:flex;flex-direction:row;align-items:center;gap:8px;--sinch-global-size-icon:var(--sinch-comp-card-size-icon)}#caption{flex:1;min-width:0;--sinch-comp-title-font:var(--sinch-comp-card-font-title);--sinch-global-color-text:var(--sinch-comp-card-color-default-title-initial)}#description{flex:1;min-height:0;max-height:120px;overflow-y:auto;--sinch-comp-text-font:var(--sinch-comp-card-font-description);--sinch-global-color-text:var(--sinch-comp-card-color-default-description-initial)}#description:empty{display:none}slot[name=action]::slotted(*){margin-top:20px;align-self:flex-start;max-width:100%}:host([draggable=true]) #header{cursor:grab}</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', class extends NectaryElement {
+export class Card extends NectaryElement {
   #$text;
   #$label;
   #$caption;
@@ -130,4 +130,5 @@ defineCustomElement('sinch-card', class extends NectaryElement {
       e.stopPropagation();
     }
   };
-});
+}
+defineCustomElement('sinch-card', Card);

package/card-container/index.d.ts

@@ -1,4 +1,8 @@
+import { NectaryElement } from '../utils';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class CardContainer extends NectaryElement {
+    constructor();
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-card-container': {};

package/card-container/index.js

@@ -2,10 +2,11 @@ import { defineCustomElement, NectaryElement } from '../utils';
 const templateHTML = '<style>:host{display:block}#wrapper{height:100%;padding:20px 0;box-sizing:border-box;background-color:var(--sinch-comp-card-color-default-background-initial);border-radius:var(--sinch-comp-card-shape-radius);border:1px solid var(--sinch-comp-card-color-default-border-initial)}#scroll{overflow:auto;height:100%;box-sizing:border-box;padding:4px 24px}</style><div id="wrapper"><div id="scroll"><slot></slot></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-card-container', class extends NectaryElement {
+export class CardContainer extends NectaryElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
   }
-});
+}
+defineCustomElement('sinch-card-container', CardContainer);

package/card-v2/index.d.ts

@@ -1,5 +1,20 @@
+import { NectaryElement } from '../utils';
 import type { TSinchCardV2 } from './types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class CardV2 extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions, isInitial?: boolean): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, _oldVal: string | null, newVal: string | null): void;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get selected(): boolean;
+    set selected(value: boolean);
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-card-v2': TSinchCardV2;

package/card-v2/index.js

@@ -3,7 +3,7 @@ const templateHTML = '<style>:host{display:flex}.empty{display:none!important}#c
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 const CLICK_EVENTS = ['click', '-click'];
-defineCustomElement('sinch-card-v2', class extends NectaryElement {
+export class CardV2 extends NectaryElement {
   #$slots;
   #controller = null;
   #clickEventListeners = (() => new Map())();
@@ -131,4 +131,5 @@ defineCustomElement('sinch-card-v2', class extends NectaryElement {
   set selected(value) {
     updateBooleanAttribute(this, 'selected', value);
   }
-});
+}
+defineCustomElement('sinch-card-v2', CardV2);

package/card-v2-title/index.d.ts

@@ -1,5 +1,19 @@
-import type { TSinchCardTitle } from './types';
+import { NectaryElement } from '../utils';
+import type { TSinchOrientation, TSinchCardTitle } from './types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class CardV2Title extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    get text(): string;
+    set text(value: string);
+    get orientation(): TSinchOrientation;
+    set orientation(value: TSinchOrientation);
+    set ellipsis(isEllipsis: boolean);
+    get ellipsis(): boolean;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-card-v2-title': TSinchCardTitle;

package/card-v2-title/index.js

@@ -2,7 +2,7 @@ import { defineCustomElement, getAttribute, updateAttribute, NectaryElement, upd
 const templateHTML = '<style>:host{display:block}#title{display:flex;align-items:center;flex-direction:row}#title-text{font:var(--sinch-comp-card-v2-font-title);color:var(--sinch-comp-card-v2-color-default-title-initial)}#title-icon{display:flex}:host([orientation=vertical]) #title{align-items:start;flex-direction:column}:host([disabled]:not([disabled=false])) #title-text{color:var(--sinch-comp-card-v2-color-default-title-disabled)}:host([selected]:not([selected=false])[disabled]:not([disabled=false])) #title-text{color:var(--sinch-comp-card-v2-color-selected-title-disabled)}::slotted([slot=icon]){--sinch-global-color-icon:var(--sinch-comp-card-v2-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-card-v2-size-icon);margin-right:8px;margin-bottom:0}:host([orientation=vertical]) ::slotted([slot=icon]){margin-right:0;margin-bottom:8px}:host([selected]:not([selected=false])) ::slotted([slot=icon]){--sinch-global-color-icon:var(--sinch-comp-card-v2-color-selected-icon-initial)}:host([disabled]:not([disabled=false])) ::slotted([slot=icon]){--sinch-global-color-icon:var(--sinch-comp-card-v2-color-default-icon-disabled)}:host([selected]:not([selected=false])[disabled]:not([disabled=false])) ::slotted([slot=icon]){--sinch-global-color-icon:var(--sinch-comp-card-v2-color-selected-icon-disabled)}</style><div id="title"><div id="title-icon"><slot name="icon"></slot></div><sinch-text id="title-text" type="m"></sinch-text></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-card-v2-title', class extends NectaryElement {
+export class CardV2Title extends NectaryElement {
   #$text;
   constructor() {
     super();
@@ -52,4 +52,5 @@ defineCustomElement('sinch-card-v2-title', class extends NectaryElement {
   get ellipsis() {
     return getBooleanAttribute(this, 'ellipsis');
   }
-});
+}
+defineCustomElement('sinch-card-v2-title', CardV2Title);

package/checkbox/index.d.ts

@@ -1,6 +1,34 @@
 import '../rich-text';
+import { NectaryElement } from '../utils';
 import type { TSinchCheckbox } from './types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class Checkbox extends NectaryElement {
+    #private;
+    static formAssociated: boolean;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    formAssociatedCallback(): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string | FormData | null): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set name(value: string);
+    get name(): string;
+    set value(value: string);
+    get value(): string;
+    set checked(isChecked: boolean);
+    get checked(): boolean;
+    set indeterminate(isIndeterminate: boolean);
+    get indeterminate(): boolean;
+    set disabled(isDisabled: boolean);
+    get disabled(): boolean;
+    set invalid(isInvalid: boolean);
+    get invalid(): boolean;
+    set text(value: string | null);
+    get text(): string | null;
+    get focusable(): boolean;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-checkbox': TSinchCheckbox;

package/checkbox/index.js

@@ -4,7 +4,7 @@ import { setFormValue } from '../utils/form';
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;flex-direction:row;box-sizing:border-box;width:100%;min-height:24px;--sinch-local-color-background:var(--sinch-comp-checkbox-color-default-background-initial);--sinch-local-color-background-hover:var(--sinch-comp-checkbox-color-default-background-hover);--sinch-local-color-background-active:var(--sinch-comp-checkbox-color-default-background-active);--sinch-local-color-border:var(--sinch-comp-checkbox-color-default-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-checkbox-color-default-border-hover);--sinch-local-color-border-active:var(--sinch-comp-checkbox-color-default-border-active);--sinch-local-color-text:var(--sinch-comp-checkbox-color-default-text-initial)}:host([invalid])>#wrapper{--sinch-local-color-background:var(--sinch-comp-checkbox-color-invalid-background-initial);--sinch-local-color-background-hover:var(--sinch-comp-checkbox-color-invalid-background-hover);--sinch-local-color-background-active:var(--sinch-comp-checkbox-color-invalid-background-active);--sinch-local-color-border:var(--sinch-comp-checkbox-color-invalid-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-checkbox-color-invalid-border-hover);--sinch-local-color-border-active:var(--sinch-comp-checkbox-color-invalid-border-active);--sinch-local-color-text:var(--sinch-comp-checkbox-color-invalid-text-initial)}:host([checked])>#wrapper{--sinch-local-color-background:var(--sinch-comp-checkbox-color-checked-background-initial);--sinch-local-color-background-hover:var(--sinch-comp-checkbox-color-checked-background-hover);--sinch-local-color-background-active:var(--sinch-comp-checkbox-color-checked-background-active);--sinch-local-color-border:var(--sinch-comp-checkbox-color-checked-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-checkbox-color-checked-border-hover);--sinch-local-color-border-active:var(--sinch-comp-checkbox-color-checked-border-active)}:host([disabled])>#wrapper{--sinch-local-color-background:var(--sinch-comp-checkbox-color-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-checkbox-color-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-checkbox-color-disabled-text-initial)}:host([disabled][checked])>#wrapper{--sinch-local-color-background:var(--sinch-comp-checkbox-color-checked-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-checkbox-color-checked-disabled-border-initial)}#checkbox{width:18px;height:18px;cursor:pointer}:host([disabled]) #checkbox{cursor:initial}#icon-container{position:relative;width:18px;height:18px;align-self:flex-start;margin-top:3px}#checkbox::before{content:"";position:absolute;inset:-3px;border:2px solid var(--sinch-comp-checkbox-color-default-outline-focus);border-radius:calc(var(--sinch-comp-checkbox-shape-radius) + 3px);transition:opacity .1s linear;opacity:0;box-sizing:border-box;pointer-events:none}:host(:focus-visible) #checkbox::before{opacity:1}#checkbox::after{content:"";position:absolute;width:18px;height:18px;inset:0;margin:auto;background-color:var(--sinch-local-color-background);border:1px solid var(--sinch-local-color-border);border-radius:var(--sinch-comp-checkbox-shape-radius);transition:background-color .1s linear;box-sizing:border-box;pointer-events:none}:host(:hover:not([disabled])) #checkbox::after{background-color:var(--sinch-local-color-background-hover);border-color:var(--sinch-local-color-border-hover)}:host(:active:not([disabled])) #checkbox::after{background-color:var(--sinch-local-color-background-active);border-color:var(--sinch-local-color-border-active)}#icon-checkmark,#icon-indeterminate{position:absolute;left:1px;top:1px;width:16px;height:16px;transition:opacity .1s linear;opacity:0;pointer-events:none;fill:var(--sinch-sys-color-surface-primary-default)}:host(:not([indeterminate])[checked]) #icon-checkmark{opacity:1}:host([indeterminate][checked]) #icon-indeterminate{opacity:1}@media (prefers-reduced-motion){#checkbox::after,#checkbox::before,#icon-checkmark,#icon-indeterminate{transition:none}}#label{flex:1;align-self:center;padding-left:8px;font:var(--sinch-comp-checkbox-font-label);cursor:pointer;--sinch-global-color-text:var(--sinch-local-color-text)}:host(:not([text])) #label,:host([text=""]) #label{display:none}:host([disabled]) #label{cursor:initial}</style><div id="wrapper"><div id="icon-container"><div id="checkbox"></div><svg id="icon-checkmark" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 16.17 5.53 12.7a.996.996 0 1 0-1.41 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71a.996.996 0 1 0-1.41-1.41L9 16.17Z"/></svg><svg id="icon-indeterminate" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 13H6c-.55 0-1-.45-1-1s.45-1 1-1h12c.55 0 1 .45 1 1s-.45 1-1 1Z"/></svg></div><sinch-rich-text id="label"></sinch-rich-text></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-checkbox', class extends NectaryElement {
+export class Checkbox extends NectaryElement {
   #$label;
   #controller = null;
   #internals;
@@ -164,4 +164,5 @@ defineCustomElement('sinch-checkbox', class extends NectaryElement {
   #onBlurReactHandler = e => {
     getReactEventHandler(this, 'on-blur')?.(e);
   };
-});
+}
+defineCustomElement('sinch-checkbox', Checkbox);