@nectary/components 4.8.2 → 4.9.1

package/list-item/types.d.ts

@@ -1,9 +1,11 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchListItemElement = HTMLElement;
-export type TSinchListItemReact = TSinchElementReact<TSinchListItemElement> & {
-    style?: {
-        '--sinch-comp-list-color-default-background-initial'?: string;
-        '--sinch-comp-list-color-default-background-hover'?: string;
-        '--sinch-comp-list-color-default-border-initial'?: string;
-    };
+import type { NectaryComponentReactByType } from '../types';
+export type TSinchListItemStyle = {
+    '--sinch-comp-list-color-default-background-initial'?: string;
+    '--sinch-comp-list-color-default-background-hover'?: string;
+    '--sinch-comp-list-color-default-border-initial'?: string;
+};
+export type TSinchListItem = {
+    style: TSinchListItemStyle;
 };
+export type TSinchListItemElement = HTMLElement;
+export type TSinchListItemReact = NectaryComponentReactByType<TSinchListItemElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "4.8.2",
+  "version": "4.9.1",
   "files": [
     "**/*/*.css",
     "**/*/*.json",
@@ -20,7 +20,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.15",
-    "@nectary/assets": "2.2.5"
+    "@nectary/assets": "2.3.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.15",
@@ -34,6 +34,6 @@
     "typescript": "^5.2.2"
   },
   "peerDependencies": {
-    "@nectary/theme-base": "1.4.1"
+    "@nectary/theme-base": "1.4.2"
   }
 }

package/pagination/index.d.ts

@@ -1,19 +1,23 @@
 import '../icon';
-import type { TSinchPaginationElement, TSinchPaginationReact } from './types';
+import type { TSinchPagination } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-pagination': TSinchPagination;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-pagination': TSinchPaginationElement;
+        'sinch-pagination': NectaryComponentVanilla<'sinch-pagination'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-pagination': TSinchPaginationReact;
+            'sinch-pagination': NectaryComponentReact<'sinch-pagination'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-pagination': TSinchPaginationReact;
+            'sinch-pagination': NectaryComponentReact<'sinch-pagination'>;
         }
     }
 }

package/pagination/types.d.ts

@@ -1,32 +1,36 @@
-import type { TRect, TSinchElementReact } from '../types';
-export type TSinchPaginationElement = HTMLElement & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect } from '../types';
+export type TSinchPaginationProps = {
     value: number;
     max: number;
-    readonly prevButtonRect: TRect;
-    readonly nextButtonRect: TRect;
+    readonly prevButtonRect?: TRect;
+    readonly nextButtonRect?: TRect;
+};
+export type TSinchPaginationMethods = {
     nthButtonRect(index: number): TRect | null;
-    addEventListener(type: '-change', listener: (e: CustomEvent<number>) => void): void;
-    setAttribute(name: 'value', value: string): void;
-    setAttribute(name: 'max', value: string): void;
 };
-export type TSinchPaginationReact = TSinchElementReact<TSinchPaginationElement> & {
-    value: number;
-    max: number;
-    'on-change': (e: CustomEvent<number>) => void;
-} & {
-    style?: {
-        '--sinch-comp-pagination-shape-radius'?: string;
-        '--sinch-comp-pagination-font-default-page-number'?: string;
-        '--sinch-comp-pagination-font-checked-page-number'?: string;
-        '--sinch-comp-pagination-color-default-icon-default'?: string;
-        '--sinch-comp-pagination-color-default-text-initial'?: string;
-        '--sinch-comp-pagination-color-default-background-initial'?: string;
-        '--sinch-comp-pagination-color-default-background-hover'?: string;
-        '--sinch-comp-pagination-color-default-outline-focus'?: string;
-        '--sinch-comp-pagination-color-checked-background-initial'?: string;
-        '--sinch-comp-pagination-color-checked-background-hover'?: string;
-        '--sinch-comp-pagination-color-disabled-icon-initial'?: string;
-        '--sinch-global-color-icon'?: string;
-        '--sinch-icon-size'?: string;
-    };
+export type TSinchPaginationEvents = {
+    '-change': (e: CustomEvent<number>) => void;
+};
+export type TSinchPaginationStyle = {
+    '--sinch-comp-pagination-shape-radius'?: string;
+    '--sinch-comp-pagination-font-default-page-number'?: string;
+    '--sinch-comp-pagination-font-checked-page-number'?: string;
+    '--sinch-comp-pagination-color-default-icon-default'?: string;
+    '--sinch-comp-pagination-color-default-text-initial'?: string;
+    '--sinch-comp-pagination-color-default-background-initial'?: string;
+    '--sinch-comp-pagination-color-default-background-hover'?: string;
+    '--sinch-comp-pagination-color-default-outline-focus'?: string;
+    '--sinch-comp-pagination-color-checked-background-initial'?: string;
+    '--sinch-comp-pagination-color-checked-background-hover'?: string;
+    '--sinch-comp-pagination-color-disabled-icon-initial'?: string;
+    '--sinch-global-color-icon'?: string;
+    '--sinch-icon-size'?: string;
+};
+export type TSinchPagination = {
+    props: TSinchPaginationProps;
+    methods: TSinchPaginationMethods;
+    events: TSinchPaginationEvents;
+    style: TSinchPaginationStyle;
 };
+export type TSinchPaginationElement = NectaryComponentVanillaByType<TSinchPagination>;
+export type TSinchPaginationReact = NectaryComponentReactByType<TSinchPagination>;

package/persistent-overlay/index.d.ts

@@ -1,19 +1,23 @@
 import '../dialog';
-import type { TSinchPersistentOverlayElement, TSinchPersistentOverlayReact } from './types';
+import type { TSinchPersistentOverlay } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-persistent-overlay': TSinchPersistentOverlay;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-persistent-overlay': TSinchPersistentOverlayElement;
+        'sinch-persistent-overlay': NectaryComponentVanilla<'sinch-persistent-overlay'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-persistent-overlay': TSinchPersistentOverlayReact;
+            'sinch-persistent-overlay': NectaryComponentReact<'sinch-persistent-overlay'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-persistent-overlay': TSinchPersistentOverlayReact;
+            'sinch-persistent-overlay': NectaryComponentReact<'sinch-persistent-overlay'>;
         }
     }
 }

package/persistent-overlay/types.d.ts

@@ -1,26 +1,24 @@
-import type { TSinchDialogElement, TSinchDialogReact } from '../dialog/types';
-import type { TSinchElementReact } from '../types';
-export type TSinchPersistentOverlayElement = HTMLElement & {
-    /** Open/close state */
-    open: TSinchDialogElement['open'];
-    /** Dialog caption */
-    caption: TSinchDialogElement['caption'];
-    /** Dialog caption */
-    setAttribute(name: 'caption', value: TSinchDialogElement['caption']): void;
-    /** visibility altered event handler */
-    addEventListener(type: '-visibility-altered', listener: (e: CustomEvent) => void): void;
-};
-export type TSinchPersistentOverlayReact = TSinchElementReact<TSinchPersistentOverlayElement> & {
+import type { TSinchDialogProps } from '../dialog/types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchPersistentOverlayProps = {
     /** Controls whether the dialog should be open */
-    open: TSinchDialogReact['open'];
+    open: TSinchDialogProps['open'];
     /** Dialog caption */
-    caption: TSinchDialogReact['caption'];
+    caption: TSinchDialogProps['caption'];
     /** Label that is used for a11y */
-    'aria-label': TSinchDialogReact['aria-label'];
+    'aria-label': TSinchDialogProps['aria-label'];
+};
+export type TSinchPersistentOverlayEvents = {
     /** visibility altered event handler */
-    'on-visibility-altered': (e: CustomEvent) => void;
-} & {
-    style?: {
-        '--sinch-dialog-close-button-display'?: string;
-    };
+    '-visibility-altered': (e: CustomEvent) => void;
+};
+export type TSinchPersistentOverlayStyle = {
+    '--sinch-dialog-close-button-display'?: string;
+};
+export type TSinchPersistentOverlay = {
+    props: TSinchPersistentOverlayProps;
+    events: TSinchPersistentOverlayEvents;
+    style: TSinchPersistentOverlayStyle;
 };
+export type TSinchPersistentOverlayElement = NectaryComponentVanillaByType<TSinchPersistentOverlay>;
+export type TSinchPersistentOverlayReact = NectaryComponentReactByType<TSinchPersistentOverlay>;

package/pop/index.d.ts

@@ -1,18 +1,22 @@
-import type { TSinchPopElement, TSinchPopReact } from './types';
+import type { TSinchPop } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-pop': TSinchPop;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-pop': TSinchPopElement;
+        'sinch-pop': NectaryComponentVanilla<'sinch-pop'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-pop': TSinchPopReact;
+            'sinch-pop': NectaryComponentReact<'sinch-pop'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-pop': TSinchPopReact;
+            'sinch-pop': NectaryComponentReact<'sinch-pop'>;
         }
     }
 }

package/pop/types.d.ts

@@ -1,26 +1,6 @@
-import type { TRect, TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect } from '../types';
 export type TSinchPopOrientation = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'bottom-center' | 'bottom-stretch' | 'top-center' | 'top-stretch' | 'center-right' | 'center-left';
-export type TSinchPopElement = HTMLElement & {
-    /** Open/close state */
-    open: boolean;
-    /** Orientation, where it *points to* from origin */
-    orientation: TSinchPopOrientation;
-    /** Modal/non-modal mode */
-    modal: boolean;
-    inset: number;
-    readonly footprintRect: TRect;
-    readonly popoverRect: TRect;
-    /** Close event */
-    addEventListener(type: '-close', listener: (e: CustomEvent<void>) => void): void;
-    /** Open/close state */
-    setAttribute(name: 'open', value: ''): void;
-    /** Orientation, where it *points to* from origin */
-    setAttribute(name: 'orientation', value: TSinchPopOrientation): void;
-    /** Modal/non-modal mode */
-    setAttribute(name: 'modal', value: boolean): void;
-    setAttribute(name: 'inset', value: string): void;
-};
-export type TSinchPopReact = TSinchElementReact<TSinchPopElement> & {
+export type TSinchPopProps = {
     /** Open/close state */
     open: boolean;
     /** Orientation, where it *points to* from origin */
@@ -30,6 +10,16 @@ export type TSinchPopReact = TSinchElementReact<TSinchPopElement> & {
     inset?: number;
     /** Label that is used for a11y */
     'aria-label': string;
+    readonly footprintRect?: TRect;
+    readonly popoverRect?: TRect;
+};
+export type TSinchPopEvents = {
     /** Close event handler */
-    'on-close'?: (e: CustomEvent<void>) => void;
+    '-close'?: (e: CustomEvent<void>) => void;
+};
+export type TSinchPop = {
+    props: TSinchPopProps;
+    events: TSinchPopEvents;
 };
+export type TSinchPopElement = NectaryComponentVanillaByType<TSinchPop>;
+export type TSinchPopReact = NectaryComponentReactByType<TSinchPop>;

package/popover/index.d.ts

@@ -1,19 +1,23 @@
 import '../pop';
-import type { TSinchPopoverElement, TSinchPopoverReact } from './types';
+import type { TSinchPopover } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-popover': TSinchPopover;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-popover': TSinchPopoverElement;
+        'sinch-popover': NectaryComponentVanilla<'sinch-popover'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-popover': TSinchPopoverReact;
+            'sinch-popover': NectaryComponentReact<'sinch-popover'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-popover': TSinchPopoverReact;
+            'sinch-popover': NectaryComponentReact<'sinch-popover'>;
         }
     }
 }

package/popover/types.d.ts

@@ -1,28 +1,6 @@
-import type { TRect, TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect } from '../types';
 export type TSinchPopoverOrientation = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'bottom' | 'top';
-export type TSinchPopoverElement = HTMLElement & {
-    /** Open/close state */
-    open: boolean;
-    /** Orientation, where it *points to* from origin */
-    orientation: TSinchPopoverOrientation;
-    /** Modal/non-modal mode */
-    modal: boolean;
-    /** Show tip */
-    tip: boolean;
-    readonly footprintRect: TRect;
-    readonly popoverRect: TRect;
-    /** Close event */
-    addEventListener(type: '-close', listener: (e: CustomEvent<void>) => void): void;
-    /** Open/close state */
-    setAttribute(name: 'open', value: ''): void;
-    /** Orientation, where it *points to* from origin */
-    setAttribute(name: 'orientation', value: TSinchPopoverOrientation): void;
-    /** Modal/non-modal mode */
-    setAttribute(name: 'modal', value: ''): void;
-    /** Show tip */
-    setAttribute(name: 'tip', value: ''): void;
-};
-export type TSinchPopoverReact = TSinchElementReact<TSinchPopoverElement> & {
+export type TSinchPopoverProps = {
     /** Open/close state */
     open: boolean;
     /** Orientation, where it *points to* from origin */
@@ -33,13 +11,23 @@ export type TSinchPopoverReact = TSinchElementReact<TSinchPopoverElement> & {
     tip?: boolean;
     /** Label that is used for a11y */
     'aria-label': string;
+    readonly footprintRect?: TRect;
+    readonly popoverRect?: TRect;
+};
+export type TSinchPopoverEvents = {
     /** Close event handler */
-    'on-close'?: (e: CustomEvent<void>) => void;
-} & {
-    style?: {
-        '--sinch-comp-popover-shape-radius'?: string;
-        '--sinch-comp-popover-shadow'?: string;
-        '--sinch-comp-popover-color-default-background-initial'?: string;
-        '--sinch-comp-popover-color-default-border-initial'?: string;
-    };
+    '-close'?: (e: CustomEvent<void>) => void;
+};
+export type TSinchPopoverStyle = {
+    '--sinch-comp-popover-shape-radius'?: string;
+    '--sinch-comp-popover-shadow'?: string;
+    '--sinch-comp-popover-color-default-background-initial'?: string;
+    '--sinch-comp-popover-color-default-border-initial'?: string;
+};
+export type TSinchPopover = {
+    props: TSinchPopoverProps;
+    events: TSinchPopoverEvents;
+    style: TSinchPopoverStyle;
 };
+export type TSinchPopoverElement = NectaryComponentVanillaByType<TSinchPopover>;
+export type TSinchPopoverReact = NectaryComponentReactByType<TSinchPopover>;

package/progress/index.d.ts

@@ -1,19 +1,23 @@
 import '../text';
-import type { TSinchProgressElement, TSinchProgressReact } from './types';
+import type { TSinchProgress } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-progress': TSinchProgress;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-progress': TSinchProgressElement;
+        'sinch-progress': NectaryComponentVanilla<'sinch-progress'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-progress': TSinchProgressReact;
+            'sinch-progress': NectaryComponentReact<'sinch-progress'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-progress': TSinchProgressReact;
+            'sinch-progress': NectaryComponentReact<'sinch-progress'>;
         }
     }
 }

package/progress/types.d.ts

@@ -1,18 +1,17 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchProgressElement = HTMLElement & {
-    value: number;
-    detailed: boolean;
-    setAttribute(name: 'value', value: string): void;
-    setAttribute(name: 'detailed', value: ''): void;
-};
-export type TSinchProgressReact = TSinchElementReact<TSinchProgressElement> & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchProgressProps = {
     value: number;
     detailed?: boolean;
     'aria-label': string;
-} & {
-    style?: {
-        '--sinch-comp-progress-color-default-background-initial'?: string;
-        '--sinch-comp-progress-color-default-bar-initial'?: string;
-        '--sinch-comp-progress-color-default-text-initial'?: string;
-    };
 };
+export type TSinchProgressStyle = {
+    '--sinch-comp-progress-color-default-background-initial'?: string;
+    '--sinch-comp-progress-color-default-bar-initial'?: string;
+    '--sinch-comp-progress-color-default-text-initial'?: string;
+};
+export type TSinchProgress = {
+    props: TSinchProgressProps;
+    style: TSinchProgressStyle;
+};
+export type TSinchProgressElement = NectaryComponentVanillaByType<TSinchProgress>;
+export type TSinchProgressReact = NectaryComponentReactByType<TSinchProgress>;

package/progress-stepper/index.d.ts

@@ -1,18 +1,22 @@
-import type { TSinchProgressStepperElement, TSinchProgressStepperReact } from './types';
+import type { TSinchProgressStepper } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-progress-stepper': TSinchProgressStepper;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-progress-stepper': TSinchProgressStepperElement;
+        'sinch-progress-stepper': NectaryComponentVanilla<'sinch-progress-stepper'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-progress-stepper': TSinchProgressStepperReact;
+            'sinch-progress-stepper': NectaryComponentReact<'sinch-progress-stepper'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-progress-stepper': TSinchProgressStepperReact;
+            'sinch-progress-stepper': NectaryComponentReact<'sinch-progress-stepper'>;
         }
     }
 }

package/progress-stepper/types.d.ts

@@ -1,22 +1,17 @@
-import type { TRect, TSinchElementReact } from '../types';
-export type TSinchProgressStepperElement = HTMLElement & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchProgressStepperProps = {
     /** Current selected item value */
     value: string;
     /** Current progress value */
     progressValue: string;
-    nthOptionRect(index: number): TRect | null;
-    /** Change value event */
-    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
-    /** Current selected item value */
-    setAttribute(name: 'value', value: string): void;
-    /** Current progress value */
-    setAttribute(name: 'progressvalue', value: string): void;
 };
-export type TSinchProgressStepperReact = TSinchElementReact<TSinchProgressStepperElement> & {
-    /** Current selected item value */
-    value: string;
-    /** Current progress value */
-    progressValue: string;
+export type TSinchProgressStepperEvents = {
     /** Change selected value event */
-    'on-change'?: (e: CustomEvent<string>) => void;
+    '-change'?: (e: CustomEvent<string>) => void;
+};
+export type TSinchProgressStepper = {
+    props: TSinchProgressStepperProps;
+    events: TSinchProgressStepperEvents;
 };
+export type TSinchProgressStepperElement = NectaryComponentVanillaByType<TSinchProgressStepper>;
+export type TSinchProgressStepperReact = NectaryComponentReactByType<TSinchProgressStepper>;

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

@@ -1,20 +1,24 @@
 import '../icon';
 import '../text';
-import type { TSinchProgressStepperItemElement, TSinchProgressStepperItemReact } from './types';
+import type { TSinchProgressStepperItem } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-progress-stepper-item': TSinchProgressStepperItem;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-progress-stepper-item': TSinchProgressStepperItemElement;
+        'sinch-progress-stepper-item': NectaryComponentVanilla<'sinch-progress-stepper-item'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-progress-stepper-item': TSinchProgressStepperItemReact;
+            'sinch-progress-stepper-item': NectaryComponentReact<'sinch-progress-stepper-item'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-progress-stepper-item': TSinchProgressStepperItemReact;
+            'sinch-progress-stepper-item': NectaryComponentReact<'sinch-progress-stepper-item'>;
         }
     }
 }

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

@@ -1,51 +1,42 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchProgressStepperItemElement = HTMLElement & {
-    /** Value */
-    value: string;
-    /** Text */
-    text: string;
-    /** Invalid */
-    invalid: boolean;
-    /** Value */
-    setAttribute(name: 'value', value: string): void;
-    /** Text */
-    setAttribute(name: 'text', value: string): void;
-    /** Invalid */
-    setAttribute(name: 'invalid', value: ''): void;
-};
-export type TSinchProgressStepperItemReact = TSinchElementReact<TSinchProgressStepperItemElement> & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchProgressStepperItemProps = {
     /** Value */
     value: string;
     /** Text */
     text: string;
     /** Invalid */
     invalid?: boolean;
-} & {
-    style?: {
-        '--sinch-comp-progress-stepper-step-shape-radius'?: string;
-        '--sinch-comp-progress-stepper-step-color-incomplete-background-hover'?: string;
-        '--sinch-comp-progress-stepper-step-color-incomplete-label-default'?: string;
-        '--sinch-comp-progress-stepper-step-color-incomplete-current-label-default'?: string;
-        '--sinch-comp-progress-stepper-step-color-incomplete-progress-background'?: string;
-        '--sinch-comp-progress-stepper-step-color-incomplete-progress-bar'?: string;
-        '--sinch-comp-progress-stepper-step-color-complete-background-hover'?: string;
-        '--sinch-comp-progress-stepper-step-color-complete-label-default'?: string;
-        '--sinch-comp-progress-stepper-step-color-complete-current-label-default'?: string;
-        '--sinch-comp-progress-stepper-step-color-complete-progress-background'?: string;
-        '--sinch-comp-progress-stepper-step-color-complete-progress-bar'?: string;
-        '--sinch-comp-progress-stepper-step-color-invalid-background-hover'?: string;
-        '--sinch-comp-progress-stepper-step-color-invalid-label-default'?: string;
-        '--sinch-comp-progress-stepper-step-color-invalid-icon-default'?: string;
-        '--sinch-comp-progress-stepper-step-color-invalid-progress-background'?: string;
-        '--sinch-comp-progress-stepper-step-color-inactive-label-default'?: string;
-        '--sinch-comp-progress-stepper-step-color-inactive-progress-background'?: string;
-        '--sinch-comp-progress-stepper-step-color-outline-focus'?: string;
-        '--sinch-comp-progress-stepper-step-font-incomplete-label'?: string;
-        '--sinch-comp-progress-stepper-step-font-complete-label'?: string;
-        '--sinch-comp-progress-stepper-step-font-inactive-label'?: string;
-        '--sinch-comp-progress-stepper-step-font-invalid-label'?: string;
-        '--sinch-comp-progress-stepper-step-font-incomplete-current-label'?: string;
-        '--sinch-comp-progress-stepper-step-font-complete-current-label'?: string;
-        '--sinch-comp-progress-stepper-step-font-invalid-current-label'?: string;
-    };
 };
+export type TSinchProgressStepperItemStyle = {
+    '--sinch-comp-progress-stepper-step-shape-radius'?: string;
+    '--sinch-comp-progress-stepper-step-color-incomplete-background-hover'?: string;
+    '--sinch-comp-progress-stepper-step-color-incomplete-label-default'?: string;
+    '--sinch-comp-progress-stepper-step-color-incomplete-current-label-default'?: string;
+    '--sinch-comp-progress-stepper-step-color-incomplete-progress-background'?: string;
+    '--sinch-comp-progress-stepper-step-color-incomplete-progress-bar'?: string;
+    '--sinch-comp-progress-stepper-step-color-complete-background-hover'?: string;
+    '--sinch-comp-progress-stepper-step-color-complete-label-default'?: string;
+    '--sinch-comp-progress-stepper-step-color-complete-current-label-default'?: string;
+    '--sinch-comp-progress-stepper-step-color-complete-progress-background'?: string;
+    '--sinch-comp-progress-stepper-step-color-complete-progress-bar'?: string;
+    '--sinch-comp-progress-stepper-step-color-invalid-background-hover'?: string;
+    '--sinch-comp-progress-stepper-step-color-invalid-label-default'?: string;
+    '--sinch-comp-progress-stepper-step-color-invalid-icon-default'?: string;
+    '--sinch-comp-progress-stepper-step-color-invalid-progress-background'?: string;
+    '--sinch-comp-progress-stepper-step-color-inactive-label-default'?: string;
+    '--sinch-comp-progress-stepper-step-color-inactive-progress-background'?: string;
+    '--sinch-comp-progress-stepper-step-color-outline-focus'?: string;
+    '--sinch-comp-progress-stepper-step-font-incomplete-label'?: string;
+    '--sinch-comp-progress-stepper-step-font-complete-label'?: string;
+    '--sinch-comp-progress-stepper-step-font-inactive-label'?: string;
+    '--sinch-comp-progress-stepper-step-font-invalid-label'?: string;
+    '--sinch-comp-progress-stepper-step-font-incomplete-current-label'?: string;
+    '--sinch-comp-progress-stepper-step-font-complete-current-label'?: string;
+    '--sinch-comp-progress-stepper-step-font-invalid-current-label'?: string;
+};
+export type TSinchProgressStepperItem = {
+    props: TSinchProgressStepperItemProps;
+    style: TSinchProgressStepperItemStyle;
+};
+export type TSinchProgressStepperItemElement = NectaryComponentVanillaByType<TSinchProgressStepperItem>;
+export type TSinchProgressStepperItemReact = NectaryComponentReactByType<TSinchProgressStepperItem>;

package/radio/index.d.ts

@@ -1,18 +1,22 @@
-import type { TSinchRadioElement, TSinchRadioReact } from './types';
+import type { TSinchRadio } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-radio': TSinchRadio;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-radio': TSinchRadioElement;
+        'sinch-radio': NectaryComponentVanilla<'sinch-radio'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-radio': TSinchRadioReact;
+            'sinch-radio': NectaryComponentReact<'sinch-radio'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-radio': TSinchRadioReact;
+            'sinch-radio': NectaryComponentReact<'sinch-radio'>;
         }
     }
 }