@nectary/components 4.10.5 → 4.11.1

package/help-tooltip/index.d.ts

@@ -1,7 +1,24 @@
 import '../tooltip';
 import '../icon';
+import { NectaryElement } from '../utils';
 import type { TSinchHelpTooltip } from './types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class HelpTooltip extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, _: string | null, newVal: string | null): void;
+    get text(): string;
+    set text(value: string);
+    get width(): number | undefined;
+    set width(value: number | undefined);
+    get orientation(): string;
+    set orientation(value: string);
+    get footprintRect(): import("../types").TRect;
+    get tooltipRect(): import("../types").TRect;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-help-tooltip': TSinchHelpTooltip;

package/help-tooltip/index.js

@@ -4,7 +4,7 @@ import { defineCustomElement, getAttribute, getIntegerAttribute, getReactEventHa
 const templateHTML = '<style>:host{display:contents}#icon{--sinch-global-size-icon:18px}</style><sinch-tooltip type="fast"><sinch-icon icons-version="2" name="circle-question" id="icon"></sinch-icon></sinch-tooltip>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-help-tooltip', class extends NectaryElement {
+export class HelpTooltip extends NectaryElement {
   #$tooltip;
   #controller = null;
   constructor() {
@@ -71,4 +71,5 @@ defineCustomElement('sinch-help-tooltip', class extends NectaryElement {
   #onTooltipHideReactHandler = () => {
     getReactEventHandler(this, 'on-hide')?.();
   };
-});
+}
+defineCustomElement('sinch-help-tooltip', HelpTooltip);

package/horizontal-stepper/index.d.ts

@@ -1,5 +1,16 @@
+import { NectaryElement } from '../utils';
 import type { TSinchHorizontalStepper } from './types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class HorizontalStepper extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string): void;
+    set index(value: string);
+    get index(): string;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-horizontal-stepper': TSinchHorizontalStepper;

package/horizontal-stepper/index.js

@@ -2,7 +2,7 @@ import { clampNumber, defineCustomElement, getAttribute, getIntegerAttribute, Ne
 const templateHTML = '<style>:host{display:block;outline:0;--sinch-comp-horizontal-stepper-color-background-default:var(--sinch-sys-color-surface-tertiary-default);--sinch-comp-horizontal-stepper-color-background-visited-skip:var(--sinch-sys-color-surface-tertiary-default);--sinch-comp-horizontal-stepper-color-background-active:var(--sinch-ref-color-neutral-700);--sinch-comp-horizontal-stepper-color-background-visited:var(--sinch-ref-color-neutral-350);--sinch-comp-horizontal-stepper-color-background-visited-error:var(--sinch-sys-color-feedback-danger-strong);--sinch-comp-horizontal-stepper-color-border-default:transparent;--sinch-comp-horizontal-stepper-color-border-visited-skip:var(--sinch-ref-color-neutral-700);--sinch-comp-horizontal-stepper-color-border-active:transparent;--sinch-comp-horizontal-stepper-color-border-visited:var(--sinch-ref-color-neutral-700);--sinch-comp-horizontal-stepper-color-border-visited-error:var(--sinch-ref-color-neutral-700);--sinch-comp-horizontal-stepper-color-icon-default:var(--sinch-ref-color-neutral-900);--sinch-comp-horizontal-stepper-color-icon-visited-skip:var(--sinch-ref-color-neutral-900);--sinch-comp-horizontal-stepper-color-icon-active:var(--sinch-sys-color-basic-pure);--sinch-comp-horizontal-stepper-color-icon-visited:var(--sinch-ref-color-neutral-900);--sinch-comp-horizontal-stepper-color-icon-visited-error:var(--sinch-ref-color-neutral-900);--sinch-comp-horizontal-stepper-color-label:var(--sinch-sys-color-text-default);--sinch-comp-horizontal-stepper-color-description:var(--sinch-sys-color-text-muted);--sinch-comp-horizontal-stepper-color-progress:var(--sinch-ref-color-neutral-350);--sinch-comp-horizontal-stepper-color-progress-visited:var(--sinch-ref-color-neutral-700)}#wrapper{position:relative;display:flex;flex-direction:row;gap:28px;width:fit-content}#progress{position:absolute;height:1px;background-color:var(--sinch-comp-horizontal-stepper-color-progress);left:72px;right:72px;top:16px;transform:translateY(-50%)}#bar{position:absolute;height:1px;background-color:var(--sinch-comp-horizontal-stepper-color-progress-visited);left:0;top:0}</style><div id="wrapper"><div id="progress"><div id="bar"></div></div><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-horizontal-stepper', class extends NectaryElement {
+export class HorizontalStepper extends NectaryElement {
   #$itemsSlot;
   #$progressBar;
   constructor() {
@@ -58,4 +58,5 @@ defineCustomElement('sinch-horizontal-stepper', class extends NectaryElement {
     this.setAttribute('aria-valuemax', String($items.length));
     this.setAttribute('aria-valuenow', String(valueIndex + 1));
   };
-});
+}
+defineCustomElement('sinch-horizontal-stepper', HorizontalStepper);

package/horizontal-stepper-item/index.d.ts

@@ -1,8 +1,21 @@
 import '../icon';
 import '../title';
 import '../text';
-import type { TSinchHorizontalStepperItem } from './types';
+import { NectaryElement } from '../utils';
+import type { TSinchHorizontalStepperStatusType, TSinchHorizontalStepperItem } from './types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class HorizontalStepperItem extends NectaryElement {
+    #private;
+    constructor();
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set label(value: string);
+    get label(): string;
+    set description(value: string);
+    get description(): string;
+    get status(): TSinchHorizontalStepperStatusType | null;
+    set status(value: TSinchHorizontalStepperStatusType | null);
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-horizontal-stepper-item': TSinchHorizontalStepperItem;

package/horizontal-stepper-item/index.js

@@ -6,7 +6,7 @@ const templateHTML = '<style>:host{display:block;outline:0}#wrapper{width:144px;
 import { statusValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-horizontal-stepper-item', class extends NectaryElement {
+export class HorizontalStepperItem extends NectaryElement {
   #$label;
   #$description;
   #$circleText;
@@ -58,4 +58,5 @@ defineCustomElement('sinch-horizontal-stepper-item', class extends NectaryElemen
   set status(value) {
     updateLiteralAttribute(this, statusValues, 'status', value);
   }
-});
+}
+defineCustomElement('sinch-horizontal-stepper-item', HorizontalStepperItem);

package/icon/index.d.ts

@@ -1,5 +1,17 @@
+import { NectaryElement } from '../utils';
 import type { TSinchIcon } from './types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class Icon extends NectaryElement {
+    #private;
+    constructor();
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, _: string | null, newVal: string | null): void;
+    set name(value: string);
+    get name(): string;
+    set iconsVersion(value: '1' | '2');
+    get iconsVersion(): '1' | '2';
+    _matchNameToFont(): void;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-icon': TSinchIcon;

package/icon/index.js

@@ -2,7 +2,7 @@ import { defineCustomElement, getAttribute, NectaryElement, updateAttribute } fr
 const templateHTML = '<style>:host{display:inline-block}#icon{display:block;font-weight:var(--sinch-comp-icon-font-weight);font-size:var(--sinch-global-size-icon, 24px);-webkit-font-smoothing:antialiased;line-height:1;white-space:nowrap;width:var(--sinch-global-size-icon,24px);height:var(--sinch-global-size-icon,24px);color:var(--sinch-global-color-icon,var(--sinch-sys-color-text-default));user-select:none;font-family:var(--sinch-comp-icon-font-family);font-feature-settings:var(--sinch-comp-icon-font-feature-settings)}#icon.zero-to-d{font-family:var(--sinch-comp-icon-font-family-zero-to-d)}#icon.e-to-o{font-family:var(--sinch-comp-icon-font-family-e-to-o)}#icon.p-to-z{font-family:var(--sinch-comp-icon-font-family-p-to-z)}</style><span id="icon" role="img"></span>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-icon', class extends NectaryElement {
+export class Icon extends NectaryElement {
   #$icon;
   constructor() {
     super();
@@ -56,4 +56,5 @@ defineCustomElement('sinch-icon', class extends NectaryElement {
       return updateAttribute(this.#$icon, 'class', 'p-to-z');
     }
   }
-});
+}
+defineCustomElement('sinch-icon', Icon);

package/inline-alert/index.d.ts

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

package/inline-alert/index.js

@@ -7,7 +7,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-inline-alert', class extends NectaryElement {
+export class InlineAlert extends NectaryElement {
   #$text;
   #$caption;
   #$closeWrapper;
@@ -80,4 +80,5 @@ defineCustomElement('sinch-inline-alert', class extends NectaryElement {
   #onActionSlotChange = () => {
     setClass(this.#$actionWrapper, 'empty', this.#$actionSlot.assignedElements().length === 0);
   };
-});
+}
+defineCustomElement('sinch-inline-alert', InlineAlert);

package/input/index.d.ts

@@ -1,5 +1,49 @@
-import type { TSinchInput } from './types';
+import { NectaryElement } from '../utils';
+import type { TSinchInputType, TSinchInput } from './types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { TSinchSize } from '../utils/size';
+export declare class Input 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 type(value: TSinchInputType);
+    get type(): TSinchInputType;
+    set value(value: string);
+    get value(): string;
+    set mask(value: string | null);
+    get mask(): string | null;
+    set placeholder(value: string | null);
+    get placeholder(): string | null;
+    set invalid(isInvalid: boolean);
+    get invalid(): boolean;
+    set disabled(isDisabled: boolean);
+    get disabled(): boolean;
+    set autofocus(isAutofocus: boolean);
+    get autofocus(): boolean;
+    set size(size: TSinchSize);
+    get size(): TSinchSize;
+    set autocomplete(value: string);
+    get autocomplete(): string;
+    get selectionStart(): HTMLInputElement['selectionStart'];
+    set selectionStart(value: HTMLInputElement['selectionStart']);
+    get selectionEnd(): HTMLInputElement['selectionEnd'];
+    set selectionEnd(value: HTMLInputElement['selectionEnd']);
+    get selectionDirection(): HTMLInputElement['selectionDirection'];
+    set selectionDirection(value: HTMLInputElement['selectionDirection']);
+    setSelectionRange(selectionStart: number, selectionEnd: number): void;
+    get focusable(): boolean;
+    focus(): void;
+    blur(): void;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-input': TSinchInput;

package/input/index.js

@@ -5,7 +5,7 @@ const templateHTML = '<style>:host{all:initial;display:inline-block;vertical-ali
 import { deleteContentBackward, deleteContentForward, getMaskSymbols, inputTypes, insertText, beginMaskedComposition, endMaskedComposition, splitValueAndMask, getMergedValueSliced, insertFromPaste } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-input', class extends NectaryElement {
+export class Input extends NectaryElement {
   #$input;
   #$inputMask;
   #$iconSlot;
@@ -710,4 +710,5 @@ defineCustomElement('sinch-input', class extends NectaryElement {
   #onWheelReactHandler = e => {
     getReactEventHandler(this, 'on-wheel')?.(e);
   };
-});
+}
+defineCustomElement('sinch-input', Input);

package/link/index.d.ts

@@ -1,6 +1,32 @@
 import '../icon';
+import { NectaryElement } from '../utils';
 import type { TSinchLink } from './types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class Link 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 href(): string;
+    set href(value: string);
+    set 'use-history'(value: boolean);
+    get 'use-history'(): boolean;
+    set disabled(isDisabled: boolean);
+    get disabled(): boolean;
+    set external(isExternal: boolean);
+    get external(): boolean;
+    set standalone(isstandalone: boolean);
+    get standalone(): boolean;
+    set preventDefault(isPrevented: boolean);
+    get preventDefault(): boolean;
+    get focusable(): boolean;
+    focus(): void;
+    blur(): void;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-link': TSinchLink;

package/link/index.js

@@ -3,7 +3,7 @@ import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAt
 const templateHTML = '<style>:host{display:inline}a{font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap;--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-initial)}a:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover);--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-hover)}a:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host([standalone]){display:block}:host([standalone]) a{display:block;font:var(--sinch-comp-link-standalone-font-initial);font-size:inherit;line-height:inherit;text-decoration:none;width:fit-content}#external-icon,#standalone-icon{display:none;height:1em}#icon-prefix{display:none;margin-left:-.25em}:host([external]:not([standalone])) #external-icon{display:inline-block;margin-left:.25em;vertical-align:-.2em;--sinch-global-size-icon:1em}:host([standalone][external]) #external-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([standalone]) #icon-prefix{display:inline}:host([standalone]:not([external])) #standalone-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([disabled]) a{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled);--sinch-global-color-icon:var(--sinch-comp-link-color-disabled-icon-initial)}#content{white-space:var(--sinch-global-text-white-space,normal)}</style><a referrerpolicy="no-referer" aria-hidden="true"><span id="content"></span><span id="icon-prefix">&nbsp;</span><sinch-icon icons-version="2" name="fa-arrow-up-right" id="external-icon"></sinch-icon><sinch-icon icons-version="2" name="fa-arrow-right" id="standalone-icon"></sinch-icon></a>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-link', class extends NectaryElement {
+export class Link extends NectaryElement {
   #$anchor;
   #$text;
   constructor() {
@@ -147,4 +147,5 @@ defineCustomElement('sinch-link', class extends NectaryElement {
   #onClickReactHandler = e => {
     getReactEventHandler(this, 'on-click')?.(e);
   };
-});
+}
+defineCustomElement('sinch-link', Link);

package/list/index.d.ts

@@ -1,4 +1,9 @@
+import { NectaryElement } from '../utils';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class List extends NectaryElement {
+    constructor();
+    connectedCallback(): void;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-list': {};

package/list/index.js

@@ -2,7 +2,7 @@ import { defineCustomElement, NectaryElement } from '../utils';
 const templateHTML = '<style>:host{display:block;height:100%}#wrapper{display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:100%;overflow-y:auto}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-list', class extends NectaryElement {
+export class List extends NectaryElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -11,4 +11,5 @@ defineCustomElement('sinch-list', class extends NectaryElement {
   connectedCallback() {
     this.setAttribute('role', 'list');
   }
-});
+}
+defineCustomElement('sinch-list', List);

package/list-item/index.d.ts

@@ -1,5 +1,10 @@
+import { NectaryElement } from '../utils';
 import type { TSinchListItem } from './types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class ListItem extends NectaryElement {
+    constructor();
+    connectedCallback(): void;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-list-item': TSinchListItem;

package/list-item/index.js

@@ -2,7 +2,7 @@ import { defineCustomElement, NectaryElement } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0}#wrapper{width:100%;height:100%;box-sizing:border-box;overflow:hidden;padding:8px 0;background-color:var(--sinch-comp-list-color-default-background-initial);border-bottom:1px solid var(--sinch-comp-list-color-default-border-initial)}:host(:last-child)>#wrapper{border-bottom:none}:host(:hover)>#wrapper{background-color:var(--sinch-comp-list-color-default-background-hover)}</style><div id="wrapper"><slot name="content"></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-list-item', class extends NectaryElement {
+export class ListItem extends NectaryElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -11,4 +11,5 @@ defineCustomElement('sinch-list-item', class extends NectaryElement {
   connectedCallback() {
     this.setAttribute('role', 'listitem');
   }
-});
+}
+defineCustomElement('sinch-list-item', ListItem);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "4.10.5",
+  "version": "4.11.1",
   "files": [
     "**/*/*.css",
     "**/*/*.json",
@@ -20,7 +20,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.15",
-    "@nectary/assets": "2.4.2"
+    "@nectary/assets": "2.5.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.15",

package/pagination/index.d.ts

@@ -1,6 +1,25 @@
 import '../icon';
+import { NectaryElement } from '../utils';
 import type { TSinchPagination } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReact, NectaryComponentVanilla, TRect } from '../types';
+export declare class Pagination extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string): void;
+    set value(val: number);
+    get value(): number;
+    set max(val: number);
+    get max(): number;
+    get focusable(): boolean;
+    focus(): void;
+    blur(): void;
+    get prevButtonRect(): TRect;
+    get nextButtonRect(): TRect;
+    nthButtonRect(index: number): TRect | null;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-pagination': TSinchPagination;

package/pagination/index.js

@@ -9,7 +9,7 @@ const DOTS_LEFT_INDEX = 1;
 const DOTS_RIGHT_INDEX = LAST_BTN_INDEX - 1;
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-pagination', class extends NectaryElement {
+export class Pagination extends NectaryElement {
   #$left;
   #$right;
   #$buttons;
@@ -144,4 +144,5 @@ defineCustomElement('sinch-pagination', class extends NectaryElement {
     const btn = this.#$buttons[index];
     return btn == null ? null : getRect(btn);
   }
-});
+}
+defineCustomElement('sinch-pagination', Pagination);

package/persistent-overlay/index.d.ts

@@ -1,6 +1,19 @@
 import '../dialog';
+import { NectaryElement } from '../utils';
 import type { TSinchPersistentOverlay } from './types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class PersistentOverlay extends NectaryElement {
+    #private;
+    constructor();
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    set caption(caption: string);
+    get caption(): string;
+    set open(isOpen: boolean);
+    get open(): boolean;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-persistent-overlay': TSinchPersistentOverlay;

package/persistent-overlay/index.js

@@ -16,7 +16,7 @@ const observeDialogVisibilityManipulation = function (sinchDialogElement, cb) {
   }, intervalLength);
   return checkInterval;
 };
-defineCustomElement('sinch-persistent-overlay', class extends NectaryElement {
+export class PersistentOverlay extends NectaryElement {
   #$sinchDialog;
   #visibilityObserverInterval;
   #controller = null;
@@ -98,4 +98,5 @@ defineCustomElement('sinch-persistent-overlay', class extends NectaryElement {
   #onVisibilityAlteredReactHandler = e => {
     getReactEventHandler(this, 'on-visibility-altered')?.(e);
   };
-});
+}
+defineCustomElement('sinch-persistent-overlay', PersistentOverlay);

package/pop/index.d.ts

@@ -1,5 +1,24 @@
-import type { TSinchPop } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import { NectaryElement } from '../utils';
+import type { TSinchPopOrientation, TSinchPop } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla, TRect } from '../types';
+export declare class Pop extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    set modal(isModal: boolean);
+    get modal(): boolean;
+    set open(isOpen: boolean);
+    get open(): boolean;
+    get orientation(): TSinchPopOrientation;
+    set orientation(value: TSinchPopOrientation);
+    set inset(inset: number);
+    get inset(): number;
+    get footprintRect(): TRect;
+    get popoverRect(): TRect;
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-pop': TSinchPop;

package/pop/index.js

@@ -3,7 +3,7 @@ const templateHTML = '<style>:host{display:contents;position:relative}dialog{pos
 import { disableOverscroll, enableOverscroll, orientationValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-pop', class extends NectaryElement {
+export class Pop extends NectaryElement {
   #$targetWrapper;
   #$focus;
   #$dialog;
@@ -422,4 +422,5 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
       this.#updateOrientation();
     }
   };
-});
+}
+defineCustomElement('sinch-pop', Pop);

package/popover/index.d.ts

@@ -1,6 +1,25 @@
 import '../pop';
-import type { TSinchPopover } from './types';
+import { NectaryElement } from '../utils';
+import type { TSinchPopoverOrientation, TSinchPopover } from './types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class Popover extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set modal(isModal: boolean);
+    get modal(): boolean;
+    set open(isOpen: boolean);
+    get open(): boolean;
+    set tip(hasTip: boolean);
+    get tip(): boolean;
+    get orientation(): TSinchPopoverOrientation;
+    set orientation(value: TSinchPopoverOrientation);
+    get footprintRect(): import("../types").TRect;
+    get popoverRect(): import("../types").TRect;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-popover': TSinchPopover;

package/popover/index.js

@@ -5,7 +5,7 @@ import { getPopOrientation, orientationValues } from './utils';
 const TIP_SIZE = 16;
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-popover', class extends NectaryElement {
+export class Popover extends NectaryElement {
   #$pop;
   #$content;
   #$tip;
@@ -158,4 +158,5 @@ defineCustomElement('sinch-popover', class extends NectaryElement {
     const availableSpace = window.innerWidth - contentRect.left - 16;
     this.#$content.style.maxWidth = `${availableSpace}px`;
   };
-});
+}
+defineCustomElement('sinch-popover', Popover);

package/progress/index.d.ts

@@ -1,6 +1,18 @@
 import '../text';
+import { NectaryElement } from '../utils';
 import type { TSinchProgress } from './types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class Progress extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    get value(): number;
+    set value(value: number);
+    get detailed(): boolean;
+    set detailed(isDetailed: boolean);
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-progress': TSinchProgress;

package/progress/index.js

@@ -3,7 +3,7 @@ import { defineCustomElement, updateAttribute, NectaryElement, updateBooleanAttr
 const templateHTML = '<style>:host{display:block}#wrapper{display:flex;align-items:center;height:24px}#bar,#progress{height:8px;border-radius:4px}#progress{background-color:var(--sinch-comp-progress-color-default-background-initial);flex:1;min-width:0}#bar{background-color:var(--sinch-comp-progress-color-default-bar-initial);width:0}#text{display:none;width:46px;--sinch-global-color-text:var(--sinch-comp-progress-color-default-text-initial)}:host([detailed]) #text{display:block}</style><div id="wrapper"><sinch-text id="text" type="m"></sinch-text><div id="progress"><div id="bar"></div></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-progress', class extends NectaryElement {
+export class Progress extends NectaryElement {
   #$bar;
   #$text;
   constructor() {
@@ -56,4 +56,5 @@ defineCustomElement('sinch-progress', class extends NectaryElement {
   set detailed(isDetailed) {
     updateBooleanAttribute(this, 'detailed', isDetailed);
   }
-});
+}
+defineCustomElement('sinch-progress', Progress);

package/progress-stepper/index.d.ts

@@ -1,5 +1,19 @@
+import { NectaryElement } from '../utils';
 import type { TSinchProgressStepper } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReact, NectaryComponentVanilla, TRect } from '../types';
+export declare class ProgressStepper 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;
+    set progressValue(value: string);
+    get progressValue(): string;
+    nthOptionRect(index: number): TRect | null;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-progress-stepper': TSinchProgressStepper;

package/progress-stepper/index.js

@@ -3,7 +3,7 @@ import { defineCustomElement, getAttribute, getReactEventHandler, getRect, getTa
 const templateHTML = '<style>:host{display:block}#wrapper{display:flex;width:100%}::slotted(sinch-progress-stepper-item){flex:1;min-width:0}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-progress-stepper', class extends NectaryElement {
+export class ProgressStepper extends NectaryElement {
   #$slot;
   #controller = null;
   #$items = [];
@@ -203,4 +203,5 @@ defineCustomElement('sinch-progress-stepper', class extends NectaryElement {
   #onChangeReactHandler = e => {
     getReactEventHandler(this, 'on-change')?.(e);
   };
-});
+}
+defineCustomElement('sinch-progress-stepper', ProgressStepper);