@nectary/components 4.10.5 → 4.11.0

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;

package/grid-item/index.js

@@ -2,7 +2,7 @@ import { defineCustomElement, getIntegerAttribute, NectaryElement, updateInteger
 const templateHTML = '<style>:host{display:block;grid-column:span 12}:host([xl="2"]){grid-column:span 2}:host([xl="3"]){grid-column:span 3}:host([xl="4"]){grid-column:span 4}:host([xl="5"]){grid-column:span 5}:host([xl="6"]){grid-column:span 6}:host([xl="7"]){grid-column:span 7}:host([xl="8"]){grid-column:span 8}:host([xl="9"]){grid-column:span 9}:host([xl="10"]){grid-column:span 10}:host([xl="11"]){grid-column:span 11}:host([xl="12"]){grid-column:span 12}@media only screen and (max-width:1439px){:host{grid-column:span 12}:host([l="2"]){grid-column:span 2}:host([l="3"]){grid-column:span 3}:host([l="4"]){grid-column:span 4}:host([l="5"]){grid-column:span 5}:host([l="6"]){grid-column:span 6}:host([l="7"]){grid-column:span 7}:host([l="8"]){grid-column:span 8}:host([l="9"]){grid-column:span 9}:host([l="10"]){grid-column:span 10}:host([l="11"]){grid-column:span 11}:host([l="12"]){grid-column:span 12}}@media only screen and (max-width:1023px){:host{grid-column:span 8}:host([m="2"]){grid-column:span 2}:host([m="3"]){grid-column:span 3}:host([m="4"]){grid-column:span 4}:host([m="5"]){grid-column:span 5}:host([m="6"]){grid-column:span 6}:host([m="7"]){grid-column:span 7}:host([m="8"]){grid-column:span 8}}@media only screen and (max-width:767px){:host{grid-column:span 4}:host([s="2"]){grid-column:span 2}:host([s="3"]){grid-column:span 3}:host([s="4"]){grid-column:span 4}}</style><slot name="content"></slot>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-grid-item', class extends NectaryElement {
+export class GridItem extends NectaryElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -32,4 +32,5 @@ defineCustomElement('sinch-grid-item', class extends NectaryElement {
   set xl(value) {
     updateIntegerAttribute(this, 'xl', value);
   }
-});
+}
+defineCustomElement('sinch-grid-item', GridItem);