@nectary/components 4.10.4 → 4.11.0

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);

package/chip/index.d.ts

@@ -1,7 +1,23 @@
 import '../text';
 import '../icon';
+import { NectaryElement } from '../utils';
 import type { TSinchChip } from './types';
 import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
+export declare class Chip extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    get color(): string | null;
+    set color(value: string | null);
+    get text(): string;
+    set text(value: string);
+    get small(): boolean;
+    set small(isSmall: boolean);
+    get focusable(): boolean;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-chip': TSinchChip;

package/chip/index.js

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

package/code-tag/index.d.ts

@@ -1,5 +1,14 @@
+import { NectaryElement } from '../utils';
 import type { TSinchCodeTag } from './types';
 import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
+export declare class CodeTag extends NectaryElement {
+    #private;
+    constructor();
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    get text(): string;
+    set text(value: string);
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-code-tag': TSinchCodeTag;

package/code-tag/index.js

@@ -2,7 +2,7 @@ import { defineCustomElement, getAttribute, updateAttribute, NectaryElement } fr
 const templateHTML = '<style>:host{display:inline}#content{font:var(--sinch-comp-code-tag-font-text);font-size:inherit;line-height:inherit;color:var(--sinch-comp-code-tag-color-default-text-initial);border:1px solid var(--sinch-comp-code-tag-color-default-border-initial);background-color:var(--sinch-comp-code-tag-color-default-background-initial);padding:0 .25em;border-radius:var(--sinch-comp-code-tag-shape-radius);white-space:var(--sinch-global-text-white-space,normal)}</style><span id="content"></span>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-code-tag', class extends NectaryElement {
+export class CodeTag extends NectaryElement {
   #$text;
   constructor() {
     super();
@@ -28,4 +28,5 @@ defineCustomElement('sinch-code-tag', class extends NectaryElement {
   set text(value) {
     updateAttribute(this, 'text', value);
   }
-});
+}
+defineCustomElement('sinch-code-tag', CodeTag);

package/color-menu/index.d.ts

@@ -1,5 +1,24 @@
+import { NectaryElement } from '../utils';
 import type { TSinchColorMenu } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReact, NectaryComponentVanilla, TRect } from '../types';
+export declare class ColorMenu extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string): void;
+    set value(value: string);
+    get value(): string;
+    set colors(value: string | null);
+    get colors(): string | null;
+    set rows(value: number | null);
+    get rows(): number | null;
+    set cols(value: number | null);
+    get cols(): number | null;
+    get focusable(): boolean;
+    nthItemRect(index: number): TRect | null;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-color-menu': TSinchColorMenu;

package/color-menu/index.js

@@ -5,7 +5,7 @@ const ITEM_WIDTH = 44;
 const ITEM_HEIGHT = 56;
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-color-menu', class extends NectaryElement {
+export class ColorMenu extends NectaryElement {
   #$listbox;
   #$optionsSlot;
   #controller = null;
@@ -305,4 +305,5 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
   #onChangeReactHandler = e => {
     getReactEventHandler(this, 'on-change')?.(e);
   };
-});
+}
+defineCustomElement('sinch-color-menu', ColorMenu);

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

@@ -1,7 +1,18 @@
 import '../color-swatch';
 import '../tooltip';
+import { NectaryElement } from '../utils';
 import type { TSinchColorMenuOption } from './types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class ColorMenuOption extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, _: string | null, newVal: string | null): void;
+    set value(value: string);
+    get value(): string;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-color-menu-option': TSinchColorMenuOption;

package/color-menu-option/index.js

@@ -5,7 +5,7 @@ import { defineCustomElement, getAttribute, NectaryElement, updateAttribute } fr
 const templateHTML = '<style>:host{display:block;outline:0}#wrapper{width:44px;height:56px;padding:12px 6px;box-sizing:border-box}#swatch-wrapper{position:relative;cursor:pointer;width:32px;height:32px}#swatch-wrapper::after{content:"";position:absolute;width:34px;height:34px;inset:-3px;border:2px solid var(--sinch-comp-color-menu-option-color-default-border-initial);border-radius:50%;pointer-events:none}:host([data-checked]) #swatch-wrapper::after{border-color:var(--sinch-comp-color-menu-option-color-default-border-selected)}:host([data-selected]) #swatch-wrapper::after{border-color:var(--sinch-comp-color-menu-option-color-default-border-focus)}:host(:hover) #swatch-wrapper::after{border-color:var(--sinch-comp-color-menu-option-color-default-border-hover)}:host(:active) #swatch-wrapper::after{border-color:var(--sinch-comp-color-menu-option-color-default-border-active)}</style><div id="wrapper"><sinch-tooltip id="tooltip"><div id="swatch-wrapper"><sinch-color-swatch id="swatch"></sinch-color-swatch></div></sinch-tooltip></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-color-menu-option', class extends NectaryElement {
+export class ColorMenuOption extends NectaryElement {
   #$wrapper;
   #$tooltip;
   #$swatch;
@@ -45,4 +45,5 @@ defineCustomElement('sinch-color-menu-option', class extends NectaryElement {
   get value() {
     return getAttribute(this, 'value', '');
   }
-});
+}
+defineCustomElement('sinch-color-menu-option', ColorMenuOption);

package/color-swatch/index.d.ts

@@ -1,6 +1,17 @@
 import '../text';
+import { NectaryElement } from '../utils';
 import type { TSinchColorSwatch } from './types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class ColorSwatch extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string): void;
+    get name(): string | null;
+    set name(value: string | null);
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-color-swatch': TSinchColorSwatch;

package/color-swatch/index.js

@@ -4,7 +4,7 @@ const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#w
 import { getSwatchColorBg } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-color-swatch', class extends NectaryElement {
+export class ColorSwatch extends NectaryElement {
   #$wrapper;
   constructor() {
     super();
@@ -51,4 +51,5 @@ defineCustomElement('sinch-color-swatch', class extends NectaryElement {
       setClass(this.#$wrapper, 'no-color', true);
     }
   }
-});
+}
+defineCustomElement('sinch-color-swatch', ColorSwatch);

package/date-picker/index.d.ts

@@ -1,7 +1,41 @@
 import '../icon';
 import '../text';
+import { NectaryElement } from '../utils';
 import type { TSinchDatePicker } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReact, NectaryComponentVanilla, TRect } from '../types';
+export declare class DatePicker 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, prevValue: string | null, newVal: string | null): void;
+    set name(value: string);
+    get name(): string;
+    set locale(value: string);
+    get locale(): string;
+    set value(value: string);
+    get value(): string;
+    set min(value: string);
+    get min(): string;
+    set max(value: string);
+    get max(): string;
+    set range(isRanged: boolean);
+    get range(): boolean;
+    set prevMonthAriaLabel(value: string);
+    get prevMonthAriaLabel(): string;
+    set nextMonthAriaLabel(value: string);
+    get nextMonthAriaLabel(): string;
+    get prevYearButtonRect(): TRect;
+    get nextYearButtonRect(): TRect;
+    get prevMonthButtonRect(): TRect;
+    get nextMonthButtonRect(): TRect;
+    nthButtonRect(index: number): TRect | null;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-date-picker': TSinchDatePicker;

package/date-picker/index.js

@@ -6,7 +6,7 @@ const templateHTML = '<style>:host{display:block;outline:0}#content{width:fit-co
 import { areDatesEqual, canGoNextMonth, canGoNextYear, canGoPrevMonth, canGoPrevYear, clampMaxDate, clampMinDate, cloneDate, dateToIso, decMonth, decYear, getCalendarMonth, getDayNames, getMonthNames, incMonth, incYear, isDateBetween, isDateOnScreen, isoToDate, isValidDate, sortDates, today } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-date-picker', class extends NectaryElement {
+export class DatePicker extends NectaryElement {
   #$month;
   #$weeks;
   #$days;
@@ -407,4 +407,5 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
   #onChangeReactHandler = e => {
     getReactEventHandler(this, 'on-change')?.(e);
   };
-});
+}
+defineCustomElement('sinch-date-picker', DatePicker);

package/dialog/index.d.ts

@@ -1,8 +1,23 @@
 import '../icon';
 import '../stop-events';
 import '../title';
+import { NectaryElement } from '../utils';
 import type { TSinchDialog } from './types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class Dialog extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set caption(caption: string);
+    get caption(): string;
+    set open(isOpen: boolean);
+    get open(): boolean;
+    get dialogRect(): import("../types").TRect;
+    get closeButtonRect(): import("../types").TRect;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-dialog': TSinchDialog;

package/dialog/index.js

@@ -6,7 +6,7 @@ const templateHTML = '<style>:host{display:contents;--sinch-comp-dialog-max-widt
 import { disableScroll, enableScroll } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-dialog', class extends NectaryElement {
+export class Dialog extends NectaryElement {
   #$dialog;
   #$closeButton;
   #$caption;
@@ -145,4 +145,5 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
   #onActionSlotChange = () => {
     setClass(this.#$actionWrapper, 'empty', this.#$actionSlot.assignedElements().length === 0);
   };
-});
+}
+defineCustomElement('sinch-dialog', Dialog);

package/emoji/index.d.ts

@@ -1,5 +1,16 @@
+import { NectaryElement } from '../utils';
 import type { TSinchEmoji } from './types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class Emoji extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, _: string | null, newVal: string | null): void;
+    set char(value: string);
+    get char(): string;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-emoji': TSinchEmoji;

package/emoji/index.js

@@ -3,7 +3,7 @@ const templateHTML = '<style>:host{display:contents;--sinch-comp-emoji-vertical-
 import { getEmojiBaseUrl, getEmojiUrl } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-emoji', class extends NectaryElement {
+export class Emoji extends NectaryElement {
   #$img;
   constructor() {
     super();
@@ -43,4 +43,5 @@ defineCustomElement('sinch-emoji', class extends NectaryElement {
     }
     this.#$img.src = getEmojiUrl(getEmojiBaseUrl(this), this.char);
   }
-});
+}
+defineCustomElement('sinch-emoji', Emoji);

package/emoji-picker/index.d.ts

@@ -8,8 +8,22 @@ import '../tabs-icon-option';
 import '../emoji';
 import '../text';
 import '../icon';
+import { NectaryElement } from '../utils';
 import type { TSinchEmojiPicker } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReact, NectaryComponentVanilla, TRect } from '../types';
+export declare class EmojiPicker extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    get skinToneButtonRect(): TRect;
+    get searchInputRect(): TRect;
+    get searchClearButtonRect(): TRect;
+    nthSkinToneRect(index: number): TRect | null;
+    nthTabRect(index: number): TRect | null;
+    nthEmojiRect(index: number): TRect | null;
+    get focusable(): boolean;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-emoji-picker': TSinchEmojiPicker;

package/emoji-picker/index.js

@@ -18,7 +18,7 @@ const template = document.createElement('template');
 const MIN_SEARCH_LENGTH = 2;
 const SEARCH_DEBOUNCE_TIMEOUT = 300;
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
+export class EmojiPicker extends NectaryElement {
   #$tabs;
   #$searchInput;
   #$searchClearButton;
@@ -304,4 +304,5 @@ defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
     btn.appendChild(el);
     return btn;
   }
-});
+}
+defineCustomElement('sinch-emoji-picker', EmojiPicker);

package/field/index.d.ts

@@ -1,5 +1,26 @@
+import { NectaryElement } from '../utils';
 import type { TSinchField } from './types';
 import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
+export declare class Field extends NectaryElement {
+    #private;
+    topSection: HTMLDivElement;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    shouldShowTopSection(): void;
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set label(value: string | null);
+    get label(): string | null;
+    set optionalText(value: string | null);
+    get optionalText(): string | null;
+    set additionalText(value: string | null);
+    get additionalText(): string | null;
+    set invalidText(value: string | null);
+    get invalidText(): string | null;
+    set disabled(isDisabled: boolean);
+    get disabled(): boolean;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-field': TSinchField;

package/field/index.js

@@ -2,7 +2,7 @@ import { defineCustomElement, getAttribute, getBooleanAttribute, getFirstSlotEle
 const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;width:100%}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px}#top.empty{display:none}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-comp-field-font-label);color:var(--sinch-comp-field-color-default-label-initial)}#optional{flex:1;font:var(--sinch-comp-field-font-optional);color:var(--sinch-comp-field-color-default-optional-initial);text-align:right}#additional{flex:1;text-align:right;font:var(--sinch-comp-field-font-additional);color:var(--sinch-comp-field-color-default-additional-initial);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-comp-field-font-invalid);color:var(--sinch-comp-field-color-invalid-text-initial);line-height:20px;margin-top:2px}#invalid:empty{display:none}#tooltip{align-self:center;margin:0 8px;display:flex}#tooltip.empty{display:none}:host([disabled]) #label{color:var(--sinch-comp-field-color-disabled-label-initial)}:host([disabled]) #additional{color:var(--sinch-comp-field-color-disabled-additional-initial)}:host([disabled]) #optional{color:var(--sinch-comp-field-color-disabled-optional-initial)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><div id="tooltip"><slot name="tooltip"></slot></div><span id="optional"></span></div><slot name="input"></slot><div id="bottom"><div id="invalid"></div><div id="additional"></div></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-field', class extends NectaryElement {
+export class Field extends NectaryElement {
   #$label;
   #$optionalText;
   #$additionalText;
@@ -117,4 +117,5 @@ defineCustomElement('sinch-field', class extends NectaryElement {
   #onTooltipSlotChange = () => {
     setClass(this.#$tooltipWrapper, 'empty', this.#$tooltipSlot.assignedElements().length === 0);
   };
-});
+}
+defineCustomElement('sinch-field', Field);

package/file-drop/index.d.ts

@@ -1,7 +1,30 @@
 import '../text';
 import '../file-picker';
+import { NectaryElement } from '../utils';
 import type { TSinchFileDrop } from './types';
 import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
+export declare class FileDrop extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set multiple(isMultiple: boolean);
+    get multiple(): boolean;
+    set accept(value: string | null);
+    get accept(): string | null;
+    get size(): number | null;
+    set size(value: number | null);
+    set text(value: string);
+    get text(): string;
+    set placeholder(value: string);
+    get placeholder(): string;
+    set disabled(isDisabled: boolean);
+    get disabled(): boolean;
+    set invalid(isInvalid: boolean);
+    get invalid(): boolean;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-file-drop': TSinchFileDrop;

package/file-drop/index.js

@@ -5,7 +5,7 @@ const templateHTML = '<style>:host{display:block}#wrapper{position:relative;disp
 import { areFilesAccepted, areItemsAccepted, doFilesSatisfySize } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-file-drop', class extends NectaryElement {
+export class FileDrop extends NectaryElement {
   #$filePicker;
   #$dropArea;
   #$placeholder;
@@ -208,4 +208,5 @@ defineCustomElement('sinch-file-drop', class extends NectaryElement {
       detail: type
     }));
   }
-});
+}
+defineCustomElement('sinch-file-drop', FileDrop);

package/file-picker/index.d.ts

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

package/file-picker/index.js

@@ -3,7 +3,7 @@ const templateHTML = '<style>:host{display:inline-block}::slotted(*){display:blo
 import { doFilesSatisfySize } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-file-picker', class extends NectaryElement {
+export class FilePicker extends NectaryElement {
   #$input;
   #$targetSlot;
   #controller = null;
@@ -97,4 +97,5 @@ defineCustomElement('sinch-file-picker', class extends NectaryElement {
   #onInvalidReactHandler = e => {
     getReactEventHandler(this, 'on-invalid')?.(e);
   };
-});
+}
+defineCustomElement('sinch-file-picker', FilePicker);

package/file-status/index.d.ts

@@ -1,8 +1,21 @@
 import '../spinner';
 import '../icon';
 import '../text';
-import type { TSinchFileStatus } from './types';
+import { NectaryElement } from '../utils';
+import type { TSinchFileStatusType, TSinchFileStatus } from './types';
 import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
+export declare class FileStatus extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    get type(): TSinchFileStatusType;
+    set type(value: TSinchFileStatusType);
+    get filename(): string;
+    set filename(value: string);
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-file-status': TSinchFileStatus;

package/file-status/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-file-status', class extends NectaryElement {
+export class FileStatus extends NectaryElement {
   #$filename;
   #$contentSlot;
   #controller = null;
@@ -58,4 +58,5 @@ defineCustomElement('sinch-file-status', class extends NectaryElement {
   #onContentSlotChange = () => {
     updateBooleanAttribute(this.#$filename, 'emphasized', this.#$contentSlot.assignedElements().length > 0);
   };
-});
+}
+defineCustomElement('sinch-file-status', FileStatus);

package/flag/index.d.ts

@@ -1,5 +1,16 @@
+import { NectaryElement } from '../utils';
 import type { TSinchFlag } from './types';
 import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
+export declare class Flag extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, _: string | null, newVal: string | null): void;
+    set code(value: string);
+    get code(): string;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-flag': TSinchFlag;

package/flag/index.js

@@ -3,7 +3,7 @@ const templateHTML = '<style>:host{display:contents}#image{pointer-events:none;w
 import { getFlagUrl } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-flag', class extends NectaryElement {
+export class Flag extends NectaryElement {
   #$img;
   constructor() {
     super();
@@ -43,4 +43,5 @@ defineCustomElement('sinch-flag', class extends NectaryElement {
     }
     this.#$img.src = getFlagUrl(this, this.code);
   }
-});
+}
+defineCustomElement('sinch-flag', Flag);

package/grid/index.d.ts

@@ -1,5 +1,9 @@
+import { NectaryElement } from '../utils';
 import type { TSinchGrid } from './types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class Grid extends NectaryElement {
+    constructor();
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-grid': TSinchGrid;

package/grid/index.js

@@ -2,10 +2,11 @@ import { defineCustomElement, NectaryElement } from '../utils';
 const templateHTML = '<style>:host{display:grid;grid-template-columns:repeat(var(--sinch-comp-grid-columns-xl),minmax(0,1fr));grid-column-gap:var(--sinch-comp-grid-gutter-xl);grid-row-gap:var(--sinch-comp-grid-gutter-xl);padding:var(--sinch-comp-grid-margin-xl)}@media only screen and (max-width:1439px){:host{grid-template-columns:repeat(var(--sinch-comp-grid-columns-l),minmax(0,1fr));grid-column-gap:var(--sinch-comp-grid-gutter-l);grid-row-gap:var(--sinch-comp-grid-gutter-l);padding:var(--sinch-comp-grid-margin-l)}}@media only screen and (max-width:1023px){:host{grid-template-columns:repeat(var(--sinch-comp-grid-columns-m),minmax(0,1fr));grid-column-gap:var(--sinch-comp-grid-gutter-m);grid-row-gap:var(--sinch-comp-grid-gutter-m);padding:var(--sinch-comp-grid-margin-m)}}@media only screen and (max-width:767px){:host{grid-template-columns:repeat(var(--sinch-comp-grid-columns-s),minmax(0,1fr));grid-column-gap:var(--sinch-comp-grid-gutter-s);grid-row-gap:var(--sinch-comp-grid-gutter-s);padding:var(--sinch-comp-grid-margin-s)}}</style><slot name="item"></slot>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-grid', class extends NectaryElement {
+export class Grid extends NectaryElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
   }
-});
+}
+defineCustomElement('sinch-grid', Grid);

package/grid-item/index.d.ts

@@ -1,5 +1,17 @@
+import { NectaryElement } from '../utils';
 import type { TSinchGridItem } from './types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class GridItem extends NectaryElement {
+    constructor();
+    get s(): number | null;
+    set s(value: number | null);
+    get m(): number | null;
+    set m(value: number | null);
+    get l(): number | null;
+    set l(value: number | null);
+    get xl(): number | null;
+    set xl(value: number | null);
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-grid-item': TSinchGridItem;