@nectary/components 4.10.5 → 4.11.1

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

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

package/progress-stepper-item/index.js

@@ -5,7 +5,7 @@ const templateHTML = '<style>:host{display:block;outline:0}#button{position:rela
 import { ATTR_PROGRESS_STEPPER_ITEM_ACTIVE_DESCENDANT, ATTR_PROGRESS_STEPPER_ITEM_CHECKED, ATTR_PROGRESS_STEPPER_ITEM_STATUS, isProgressStepperItemActive, isProgressStepperItemActiveDescendant } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-progress-stepper-item', class extends NectaryElement {
+export class ProgressStepperItem extends NectaryElement {
   #$text;
   constructor() {
     super();
@@ -80,4 +80,5 @@ defineCustomElement('sinch-progress-stepper-item', class extends NectaryElement
   #updateTabIndex() {
     this.tabIndex = isProgressStepperItemActiveDescendant(this) && isProgressStepperItemActive(this) ? 0 : -1;
   }
-});
+}
+defineCustomElement('sinch-progress-stepper-item', ProgressStepperItem);

package/radio/index.d.ts

@@ -1,5 +1,24 @@
+import { NectaryElement } from '../utils';
 import type { TSinchRadio } from './types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class Radio 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[];
+    set name(value: string);
+    get name(): string;
+    set value(value: string);
+    get value(): string;
+    set invalid(isInvalid: boolean);
+    get invalid(): boolean;
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-radio': TSinchRadio;

package/radio/index.js

@@ -3,7 +3,7 @@ import { setFormValue } from '../utils/form';
 const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:var(--sinch-comp-radio-direction,column);gap:var(--sinch-comp-radio-gap,8px);box-sizing:border-box;width:100%}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-radio', class extends NectaryElement {
+export class Radio extends NectaryElement {
   #$slot;
   #controller = null;
   #internals;
@@ -196,4 +196,5 @@ defineCustomElement('sinch-radio', class extends NectaryElement {
   #onChangeReactHandler = e => {
     getReactEventHandler(this, 'on-change')?.(e);
   };
-});
+}
+defineCustomElement('sinch-radio', Radio);

package/radio-option/index.d.ts

@@ -1,5 +1,23 @@
+import { NectaryElement } from '../utils';
 import type { TSinchRadioOption } from './types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class RadioOption extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set checked(isChecked: boolean);
+    get checked(): boolean;
+    set value(value: string);
+    get value(): string;
+    set disabled(isDisabled: boolean);
+    get disabled(): boolean;
+    set text(value: string);
+    get text(): string;
+    get focusable(): boolean;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-radio-option': TSinchRadioOption;

package/radio-option/index.js

@@ -2,7 +2,7 @@ import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrEqual, is
 const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:row;box-sizing:border-box;width:100%;min-height:24px;--sinch-local-color-background:var(--sinch-comp-radio-color-default-background-initial);--sinch-local-color-background-hover:var(--sinch-comp-radio-color-default-background-hover);--sinch-local-color-background-active:var(--sinch-comp-radio-color-default-background-active);--sinch-local-color-border:var(--sinch-comp-radio-color-default-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-radio-color-default-border-hover);--sinch-local-color-border-active:var(--sinch-comp-radio-color-default-border-active);--sinch-local-color-knob:var(--sinch-comp-radio-color-checked-knob-initial);--sinch-local-color-knob-hover:var(--sinch-comp-radio-color-checked-knob-hover);--sinch-local-color-knob-active:var(--sinch-comp-radio-color-checked-knob-active);--sinch-local-color-text:var(--sinch-comp-radio-color-default-label-initial)}:host([data-invalid])>#wrapper{--sinch-local-color-border:var(--sinch-comp-radio-color-invalid-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-radio-color-invalid-border-hover);--sinch-local-color-border-active:var(--sinch-comp-radio-color-invalid-border-active);--sinch-local-color-text:var(--sinch-comp-radio-color-invalid-label-initial)}:host([checked])>#wrapper{--sinch-local-color-border:var(--sinch-comp-radio-color-checked-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-radio-color-checked-border-hover);--sinch-local-color-border-active:var(--sinch-comp-radio-color-checked-border-active)}:host([disabled])>#wrapper{--sinch-local-color-background:var(--sinch-comp-radio-color-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-radio-color-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-radio-color-disabled-label-initial)}:host([disabled][checked])>#wrapper{--sinch-local-color-border:var(--sinch-comp-radio-color-checked-disabled-border-initial);--sinch-local-color-knob:var(--sinch-comp-radio-color-checked-disabled-knob-initial);--sinch-local-color-text:var(--sinch-comp-radio-color-checked-disabled-label-initial)}#input{all:initial;display:block;width:18px;height:18px;cursor:pointer}:host([disabled]) #input{cursor:initial}#input-wrapper{position:relative;width:18px;height:18px;align-self:flex-start;margin-top:3px}#input::before{content:"";position:absolute;inset:-3px;border:2px solid var(--sinch-comp-radio-color-default-outline-focus);border-radius:50%;transition:opacity .1s linear;opacity:0;box-sizing:border-box;pointer-events:none}:host(:focus-visible) #input::before{opacity:1}#input::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:50%;box-sizing:border-box;pointer-events:none}:host(:hover:not([disabled])) #input::after{background-color:var(--sinch-local-color-background-hover);border-color:var(--sinch-local-color-border-hover)}:host(:active:not([disabled])) #input::after{background-color:var(--sinch-local-color-background-active);border-color:var(--sinch-local-color-border-active)}#knob{position:absolute;width:10px;height:10px;inset:0;margin:auto;border-radius:50%;transition:opacity .1s linear;opacity:0;background-color:var(--sinch-local-color-knob);pointer-events:none}:host([checked]) #knob{opacity:1}:host(:hover:not([disabled])) #knob{background-color:var(--sinch-local-color-knob-hover)}:host(:active:not([disabled])) #knob{background-color:var(--sinch-local-color-knob-active)}@media (prefers-reduced-motion){#input::after,#input::before,#knob{transition:none}}#label{flex:1;align-self:center;padding-left:8px;font:var(--sinch-comp-radio-font-label);color:var(--sinch-local-color-text);cursor:pointer}#label:empty{display:none}:host([disabled]) #label{cursor:initial}</style><div id="wrapper"><div id="input-wrapper"><div id="input"></div><div id="knob"></div></div><span id="label"></span></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-radio-option', class extends NectaryElement {
+export class RadioOption extends NectaryElement {
   #$label;
   constructor() {
     super();
@@ -76,4 +76,5 @@ defineCustomElement('sinch-radio-option', class extends NectaryElement {
   get focusable() {
     return true;
   }
-});
+}
+defineCustomElement('sinch-radio-option', RadioOption);

package/rich-text/index.d.ts

@@ -1,8 +1,22 @@
 import '../emoji';
 import '../code-tag';
 import '../link';
+import { NectaryElement } from '../utils';
 import type { TSinchRichText } from './types';
+import type { TSinchTextType } from '../text/types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class RichText extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, _oldVal: string | null, _newVal: string | null): void;
+    get size(): TSinchTextType;
+    set size(value: TSinchTextType);
+    get text(): string;
+    set text(value: string);
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-rich-text': TSinchRichText;

package/rich-text/index.js

@@ -7,7 +7,7 @@ const templateHTML = '<style>:host{display:block;--sinch-comp-rich-text-font:var
 import { createParseVisitor, sizeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-rich-text', class extends NectaryElement {
+export class RichText extends NectaryElement {
   #wrapper;
   #parseVisitor;
   #controller = null;
@@ -98,4 +98,5 @@ defineCustomElement('sinch-rich-text', class extends NectaryElement {
   #onClickReactHandler = e => {
     getReactEventHandler(this, 'on-element-click')?.(e);
   };
-});
+}
+defineCustomElement('sinch-rich-text', RichText);

package/rich-textarea/index.d.ts

@@ -1,5 +1,33 @@
+import { NectaryElement } from '../utils';
 import type { TSinchRichTextarea } from './types';
 import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
+export declare class RichTextarea extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set value(value: string);
+    get value(): string;
+    set placeholder(value: string | null);
+    get placeholder(): string | null;
+    set disabled(isDisabled: boolean);
+    get disabled(): boolean;
+    set rows(value: HTMLTextAreaElement['rows']);
+    get rows(): HTMLTextAreaElement['rows'];
+    get focusable(): boolean;
+    focus(): void;
+    blur(): void;
+    insertText(value: string): void;
+    insertLink(text: string, href: string): void;
+    formatItalic(): void;
+    formatBold(): void;
+    formatStrikethrough(): void;
+    formatCodeTag(): void;
+    formatOrderedList(): void;
+    formatUnorderedList(): void;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-rich-textarea': TSinchRichTextarea;

package/rich-textarea/index.js

@@ -5,7 +5,7 @@ import { createParseVisitor, deleteContentBackward, formatIndent, formatInline,
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 const SUPPORTS_SHADOW_SELECTION = typeof window.ShadowRoot.prototype.getSelection === 'function';
-defineCustomElement('sinch-rich-textarea', class extends NectaryElement {
+export class RichTextarea extends NectaryElement {
   #$input;
   #$placeholder;
   #controller = null;
@@ -461,4 +461,5 @@ defineCustomElement('sinch-rich-textarea', class extends NectaryElement {
   #onSelectionReactHandler = e => {
     getReactEventHandler(this, 'on-selection')?.(e);
   };
-});
+}
+defineCustomElement('sinch-rich-textarea', RichTextarea);

package/segment/index.d.ts

@@ -1,6 +1,23 @@
 import '../title';
+import { NectaryElement } from '../utils';
 import type { TSinchSegment } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReact, NectaryComponentVanilla, TRect } from '../types';
+import type { TSinchSize } from '../utils/size';
+export declare class Segment 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 collapsed(isChecked: boolean);
+    get collapsed(): boolean;
+    get size(): TSinchSize;
+    set size(value: TSinchSize);
+    get collapseButtonRect(): TRect | null;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-segment': TSinchSegment;

package/segment/index.js

@@ -6,7 +6,7 @@ const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-dire
 import { getTitleTypeFromSize } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-segment', class extends NectaryElement {
+export class Segment extends NectaryElement {
   #$caption;
   #$previewSlot;
   #$previewWrapper;
@@ -106,4 +106,5 @@ defineCustomElement('sinch-segment', class extends NectaryElement {
   #onActionSlotChange = () => {
     setClass(this.#$actionWrapper, 'empty', this.#$actionSlot.assignedElements().length === 0);
   };
-});
+}
+defineCustomElement('sinch-segment', Segment);

package/segment-collapse/index.d.ts

@@ -1,6 +1,20 @@
 import '../icon';
+import { NectaryElement } from '../utils';
 import type { TSinchSegmentExpand } from './types';
 import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
+export declare class SegmentCollapse extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set value(isChecked: boolean);
+    get value(): boolean;
+    get focusable(): boolean;
+    focus(): void;
+    blur(): void;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-segment-collapse': TSinchSegmentExpand;

package/segment-collapse/index.js

@@ -3,7 +3,7 @@ import { defineCustomElement, getBooleanAttribute, getReactEventHandler, isAttrT
 const templateHTML = '<style>:host{display:block;--sinch-global-size-icon:32px}#icon-dropdown{display:block;will-change:transform;transform:rotate(180deg)}:host([value]:not([value=false])) #icon-dropdown{transform:rotate(0)}</style><sinch-button id="button" size="s"><sinch-icon icons-version="2" name="fa-chevron-down" id="icon-dropdown" slot="icon"></sinch-icon></sinch-button>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-segment-collapse', class extends NectaryElement {
+export class SegmentCollapse extends NectaryElement {
   #$button;
   constructor() {
     super();
@@ -56,4 +56,5 @@ defineCustomElement('sinch-segment-collapse', class extends NectaryElement {
   #onChangeReactHandler = e => {
     getReactEventHandler(this, 'on-change')?.(e);
   };
-});
+}
+defineCustomElement('sinch-segment-collapse', SegmentCollapse);

package/segmented-control/index.d.ts

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

package/segmented-control/index.js

@@ -2,7 +2,7 @@ import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHa
 const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:row;width:100%;box-sizing:border-box;position:relative;z-index:0}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-segmented-control', class extends NectaryElement {
+export class SegmentedControl extends NectaryElement {
   #$slot;
   #controller = null;
   constructor() {
@@ -82,4 +82,5 @@ defineCustomElement('sinch-segmented-control', class extends NectaryElement {
   #onChangeReactHandler = e => {
     getReactEventHandler(this, 'on-change')?.(e);
   };
-});
+}
+defineCustomElement('sinch-segmented-control', SegmentedControl);

package/segmented-control-option/index.d.ts

@@ -1,5 +1,21 @@
+import { NectaryElement } from '../utils';
 import type { TSinchSegmentedControlOption } from './types';
 import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
+export declare class SegmentedControlOption extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set value(value: string);
+    get value(): string;
+    set disabled(isDisabled: boolean);
+    get disabled(): boolean;
+    set text(value: string);
+    get text(): string;
+    get focusable(): boolean;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-segmented-control-option': TSinchSegmentedControlOption;

package/segmented-control-option/index.js

@@ -2,7 +2,7 @@ import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHa
 const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;gap:12px;width:100%;height:32px;padding:0 16px;box-sizing:border-box;color:var(--sinch-local-color-text);background-color:var(--sinch-local-color-background);cursor:pointer;--sinch-local-color-text:var(--sinch-comp-segmented-control-color-default-text-initial);--sinch-local-shape-radius:var(--sinch-comp-segmented-control-shape-radius);--sinch-local-color-border:var(--sinch-comp-segmented-control-color-default-border-initial);--sinch-local-color-background:var(--sinch-comp-segmented-control-color-default-background-initial);--sinch-global-color-icon:var(--sinch-comp-segmented-control-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-segmented-control-size-icon)}:host(:hover){--sinch-local-color-background:var(--sinch-comp-segmented-control-color-default-background-hover)}:host(:first-child) #wrapper{border-top-left-radius:var(--sinch-local-shape-radius);border-bottom-left-radius:var(--sinch-local-shape-radius)}:host(:last-child) #wrapper{border-top-right-radius:var(--sinch-local-shape-radius);border-bottom-right-radius:var(--sinch-local-shape-radius)}:host([data-checked]) #wrapper{--sinch-local-color-text:var(--sinch-comp-segmented-control-color-checked-text-initial);--sinch-global-color-icon:var(--sinch-comp-segmented-control-color-checked-icon-initial);--sinch-local-color-border:var(--sinch-comp-segmented-control-color-checked-border-initial);--sinch-local-color-background:var(--sinch-comp-segmented-control-color-checked-background-initial)}:host([disabled]) #wrapper{--sinch-local-color-text:var(--sinch-comp-segmented-control-color-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-segmented-control-color-disabled-icon-initial);--sinch-local-color-border:var(--sinch-comp-segmented-control-color-disabled-border-initial);--sinch-local-color-background:var(--sinch-comp-segmented-control-color-disabled-background-initial)}#border{position:absolute;inset:0;border:1px solid var(--sinch-local-color-border);pointer-events:none;box-sizing:border-box}:host(:first-child) #border{border-top-left-radius:var(--sinch-local-shape-radius);border-bottom-left-radius:var(--sinch-local-shape-radius)}:host(:last-child) #border{border-top-right-radius:var(--sinch-local-shape-radius);border-bottom-right-radius:var(--sinch-local-shape-radius)}:host(:not(:first-child)) #border{border-left-width:0}:host([data-checked]) #border{border-width:2px}:host([data-checked]:not(:first-child)) #border{left:-1px}#outline{display:none;position:absolute;inset:-3px;border:2px solid var(--sinch-comp-segmented-control-color-default-outline-focus);pointer-events:none;box-sizing:border-box;z-index:1}:host(:focus-visible) #outline{display:block}:host(:first-child) #outline{border-top-left-radius:calc(var(--sinch-local-shape-radius) + 3px);border-bottom-left-radius:calc(var(--sinch-local-shape-radius) + 3px)}:host(:last-child) #outline{border-top-right-radius:calc(var(--sinch-local-shape-radius) + 3px);border-bottom-right-radius:calc(var(--sinch-local-shape-radius) + 3px)}:host(:not(:first-child)) #outline{left:-4px}#content{font:var(--sinch-comp-segmented-control-font-label);flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none}::slotted(*){display:block;pointer-events:none}</style><div id="wrapper"><slot name="icon"></slot><span id="content"></span><div id="border"></div><div id="outline"></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-segmented-control-option', class extends NectaryElement {
+export class SegmentedControlOption extends NectaryElement {
   #$label;
   #controller = null;
   constructor() {
@@ -92,4 +92,5 @@ defineCustomElement('sinch-segmented-control-option', class extends NectaryEleme
   #onBlurReactHandler = () => {
     getReactEventHandler(this, 'on-blur')?.();
   };
-});
+}
+defineCustomElement('sinch-segmented-control-option', SegmentedControlOption);

package/segmented-icon-control/index.d.ts

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

package/segmented-icon-control/index.js

@@ -2,7 +2,7 @@ import { defineCustomElement, getAttribute, getBooleanAttribute, unpackCsv, getF
 const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:row;width:100%;box-sizing:border-box;position:relative;z-index:0}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-segmented-icon-control', class extends NectaryElement {
+export class SegmentedIconControl extends NectaryElement {
   #$slot;
   #controller = null;
   constructor() {
@@ -98,4 +98,5 @@ defineCustomElement('sinch-segmented-icon-control', class extends NectaryElement
   #onChangeReactHandler = e => {
     getReactEventHandler(this, 'on-change')?.(e);
   };
-});
+}
+defineCustomElement('sinch-segmented-icon-control', SegmentedIconControl);

package/segmented-icon-control-option/index.d.ts

@@ -1,5 +1,19 @@
+import { NectaryElement } from '../utils';
 import type { TSinchSegmentedIconControlOption } from './types';
 import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
+export declare class SegmentedIconControlOption extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set value(value: string);
+    get value(): string;
+    set disabled(isDisabled: boolean);
+    get disabled(): boolean;
+    get focusable(): boolean;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-segmented-icon-control-option': TSinchSegmentedIconControlOption;

package/segmented-icon-control-option/index.js

@@ -2,7 +2,7 @@ import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHa
 const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;width:56px;height:32px;padding:3px 16px;box-sizing:border-box;background-color:var(--sinch-local-color-background);cursor:pointer;--sinch-global-color-icon:var(--sinch-comp-segmented-control-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-segmented-control-size-icon);--sinch-local-shape-radius:var(--sinch-comp-segmented-control-shape-radius);--sinch-local-color-border:var(--sinch-comp-segmented-control-color-default-border-initial);--sinch-local-color-background:var(--sinch-comp-segmented-control-color-default-background-initial)}:host(:hover){--sinch-local-color-background:var(--sinch-comp-segmented-control-color-default-background-hover)}:host(:first-child) #wrapper{border-top-left-radius:var(--sinch-local-shape-radius);border-bottom-left-radius:var(--sinch-local-shape-radius)}:host(:last-child) #wrapper{border-top-right-radius:var(--sinch-local-shape-radius);border-bottom-right-radius:var(--sinch-local-shape-radius)}:host([data-checked]) #wrapper{--sinch-global-color-icon:var(--sinch-comp-segmented-control-color-checked-icon-initial);--sinch-local-color-border:var(--sinch-comp-segmented-control-color-checked-border-initial);--sinch-local-color-background:var(--sinch-comp-segmented-control-color-checked-background-initial)}:host([disabled]) #wrapper{--sinch-global-color-icon:var(--sinch-comp-segmented-control-color-disabled-icon-initial);--sinch-local-color-border:var(--sinch-comp-segmented-control-color-disabled-border-initial);--sinch-local-color-background:var(--sinch-comp-segmented-control-color-disabled-background-initial);cursor:initial}#border{position:absolute;inset:0;border:1px solid var(--sinch-local-color-border);pointer-events:none;box-sizing:border-box}:host(:first-child) #border{border-top-left-radius:var(--sinch-local-shape-radius);border-bottom-left-radius:var(--sinch-local-shape-radius)}:host(:last-child) #border{border-top-right-radius:var(--sinch-local-shape-radius);border-bottom-right-radius:var(--sinch-local-shape-radius)}:host(:not(:first-child)) #border{border-left-width:0}:host([data-checked]) #border{border-width:2px}:host([data-checked]:not(:first-child)) #border{left:-1px}#outline{display:none;position:absolute;inset:-3px;border:2px solid var(--sinch-comp-segmented-control-color-default-outline-focus);pointer-events:none;box-sizing:border-box;z-index:1}:host(:focus-visible) #outline{display:block}:host(:first-child) #outline{border-top-left-radius:calc(var(--sinch-local-shape-radius) + 3px);border-bottom-left-radius:calc(var(--sinch-local-shape-radius) + 3px)}:host(:last-child) #outline{border-top-right-radius:calc(var(--sinch-local-shape-radius) + 3px);border-bottom-right-radius:calc(var(--sinch-local-shape-radius) + 3px)}:host(:not(:first-child)) #outline{left:-4px}::slotted(*){display:block;pointer-events:none}</style><div id="wrapper"><slot name="icon"></slot><div id="border"></div><div id="outline"></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-segmented-icon-control-option', class extends NectaryElement {
+export class SegmentedIconControlOption extends NectaryElement {
   #controller = null;
   constructor() {
     super();
@@ -79,4 +79,5 @@ defineCustomElement('sinch-segmented-icon-control-option', class extends Nectary
   #onBlurReactHandler = () => {
     getReactEventHandler(this, 'on-blur')?.();
   };
-});
+}
+defineCustomElement('sinch-segmented-icon-control-option', SegmentedIconControlOption);

package/select-button/index.d.ts

@@ -1,7 +1,28 @@
 import '../text';
 import '../icon';
+import { NectaryElement } from '../utils';
 import type { TSinchSelectButtonProps, TSinchSelectButtonStyle, TSinchSelectButtonEvents } from './types';
 import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
+import type { TSinchSize } from '../utils/size';
+export declare class SelectButton extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set text(value: string);
+    get text(): string;
+    set placeholder(value: string | null);
+    get placeholder(): string | null;
+    set invalid(isInvalid: boolean);
+    get invalid(): boolean;
+    set disabled(isDisabled: boolean);
+    get disabled(): boolean;
+    set size(size: TSinchSize);
+    get size(): TSinchSize;
+    get focusable(): boolean;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-select-button': {

package/select-button/index.js

@@ -5,7 +5,7 @@ import { DEFAULT_SIZE, sizeValues } from '../utils/size';
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;cursor:pointer}:host([disabled]){cursor:initial}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:var(--sinch-local-size);padding:0 8px 0 12px;background-color:var(--sinch-comp-select-button-color-default-background-initial);border-radius:var(--sinch-local-shape-radius);--sinch-local-size:var(--sinch-comp-select-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-m);--sinch-global-color-icon:var(--sinch-comp-select-button-color-default-icon-initial)}:host([data-size="l"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-l);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-l);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-l)}:host([data-size="m"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-m)}:host([data-size="s"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-s);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-s);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-s)}:host([data-size="l"]) #wrapper{padding:0 12px}:host([data-size="m"]) #wrapper{padding:0 8px 0 12px}:host([data-size="s"]) #wrapper{padding:0 4px 0 12px}:host([disabled]) #wrapper{--sinch-global-color-icon:var(--sinch-comp-select-button-color-disabled-icon-initial)}#text{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-button-font-input);--sinch-global-color-text:var(--sinch-comp-select-button-color-default-text-initial)}#text:empty{display:none}#placeholder{display:none;flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-button-font-placeholder);--sinch-global-color-text:var(--sinch-comp-select-button-color-default-placeholder-initial)}#text:empty+#placeholder{display:block}#border{position:absolute;border:1px solid var(--sinch-comp-select-button-color-default-border-initial);border-radius:var(--sinch-local-shape-radius);inset:0;pointer-events:none}:host(:focus-visible) #border{border-color:var(--sinch-comp-select-button-color-default-border-focus);border-width:2px}:host([invalid]) #border{border-color:var(--sinch-comp-select-button-color-invalid-border-initial)}:host([disabled]) #border{border-color:var(--sinch-comp-select-button-color-disabled-border-initial)}:host([disabled]) #text{--sinch-global-color-text:var(--sinch-comp-select-button-color-disabled-text-initial)}:host([disabled]) #placeholder{--sinch-global-color-text:var(--sinch-comp-select-button-color-disabled-placeholder-initial)}#left{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;margin-left:-4px}#left.empty{display:none}#dropdown-icon{margin-left:-4px}</style><div id="wrapper" inert><div id="border"></div><div id="left"><slot name="left"></slot></div><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text><sinch-text id="placeholder" type="m" ellipsis></sinch-text><sinch-icon icons-version="2" name="fa-chevron-down" id="dropdown-icon"></sinch-icon></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-select-button', class extends NectaryElement {
+export class SelectButton extends NectaryElement {
   #$text;
   #$placeholder;
   #$leftSlot;
@@ -199,4 +199,5 @@ defineCustomElement('sinch-select-button', class extends NectaryElement {
   #onBlurReactHandler = () => {
     getReactEventHandler(this, 'on-blur')?.();
   };
-});
+}
+defineCustomElement('sinch-select-button', SelectButton);

package/select-menu/index.d.ts

@@ -1,8 +1,38 @@
 import '../input';
 import '../icon';
 import '../text';
+import { NectaryElement } from '../utils';
 import type { TSinchSelectMenu } from './types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class SelectMenu extends NectaryElement {
+    #private;
+    static formAssociated: boolean;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    formAssociatedCallback(): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string | FormData | null): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set name(value: string);
+    get name(): string;
+    set value(value: string);
+    get value(): string;
+    set rows(value: number | null);
+    get rows(): number | null;
+    set multiple(isMultiple: boolean);
+    get multiple(): boolean;
+    set searchable(isSearchable: boolean | null);
+    get searchable(): boolean | null;
+    set 'search-autocomplete'(autocomplete: string);
+    get 'search-autocomplete'(): string;
+    set 'search-placeholder'(placeholder: string);
+    get 'search-placeholder'(): string;
+    set 'search-value'(value: string);
+    get 'search-value'(): string;
+    get focusable(): boolean;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-select-menu': TSinchSelectMenu;

package/select-menu/index.js

@@ -9,7 +9,7 @@ const ITEM_HEIGHT = 40;
 const NUM_ITEMS_SEARCH = 7;
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-select-menu', class extends NectaryElement {
+export class SelectMenu extends NectaryElement {
   #$optionSlot;
   #$listbox;
   #$search;
@@ -415,4 +415,5 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
   #onSearchChangeReactHandler = e => {
     getReactEventHandler(this, 'on-search-change')?.(e);
   };
-});
+}
+defineCustomElement('sinch-select-menu', SelectMenu);

package/skeleton/index.d.ts

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

package/skeleton/index.js

@@ -4,7 +4,7 @@ const template = document.createElement('template');
 template.innerHTML = templateHTML;
 const ANIMATION_DURATION = 2000;
 const BORDER_WIDTH = 1;
-defineCustomElement('sinch-skeleton', class extends NectaryElement {
+export class Skeleton extends NectaryElement {
   #animation = null;
   #shimmer;
   #wrapper;
@@ -105,4 +105,5 @@ defineCustomElement('sinch-skeleton', class extends NectaryElement {
     rect.setAttribute('rx', radius.toString());
     this.#clip.appendChild(rect);
   }
-});
+}
+defineCustomElement('sinch-skeleton', Skeleton);

package/skeleton-item/index.d.ts

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

package/skeleton-item/index.js

@@ -2,10 +2,11 @@ import { defineCustomElement, NectaryElement } from '../utils';
 const templateHTML = '<style>:host{display:block;height:var(--sinch-sys-size-m);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-m)}:host([size=xs]){height:var(--sinch-sys-size-xs);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-xs)}:host([size="s"]){height:var(--sinch-sys-size-s);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-s)}:host([size="m"]){height:var(--sinch-sys-size-m);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-m)}:host([size="l"]){height:var(--sinch-sys-size-l);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-l)}#content{height:100%;background-color:var(--sinch-sys-color-border-subtle);border-radius:var(--sinch-local-shape-radius)}</style><div id="content"></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-skeleton-item', class extends NectaryElement {
+export class SkeletonItem extends NectaryElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
   }
-});
+}
+defineCustomElement('sinch-skeleton-item', SkeletonItem);