@nectary/components 4.6.3 → 4.6.5

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

@@ -21,4 +21,27 @@ export type TSinchHorizontalStepperItemReact = TSinchElementReact<TSinchHorizont
     description?: string;
     /** Status */
     status?: TSinchHorizontalStepperStatusType;
+} & {
+    style?: {
+        '--sinch-comp-horizontal-stepper-color-background-default'?: string;
+        '--sinch-comp-horizontal-stepper-color-background-active'?: string;
+        '--sinch-comp-horizontal-stepper-color-background-visited'?: string;
+        '--sinch-comp-horizontal-stepper-color-background-visited-error'?: string;
+        '--sinch-comp-horizontal-stepper-color-background-visited-skip'?: string;
+        '--sinch-comp-horizontal-stepper-color-border-default'?: string;
+        '--sinch-comp-horizontal-stepper-color-border-active'?: string;
+        '--sinch-comp-horizontal-stepper-color-border-visited'?: string;
+        '--sinch-comp-horizontal-stepper-color-border-visited-error'?: string;
+        '--sinch-comp-horizontal-stepper-color-border-visited-skip'?: string;
+        '--sinch-comp-horizontal-stepper-color-icon-default'?: string;
+        '--sinch-comp-horizontal-stepper-color-icon-active'?: string;
+        '--sinch-comp-horizontal-stepper-color-icon-visited'?: string;
+        '--sinch-comp-horizontal-stepper-color-icon-visited-error'?: string;
+        '--sinch-comp-horizontal-stepper-color-icon-visited-skip'?: string;
+        '--sinch-comp-horizontal-stepper-color-label'?: string;
+        '--sinch-comp-horizontal-stepper-color-description'?: string;
+        '--sinch-sys-font-desktop-title-s'?: string;
+        '--sinch-global-size-icon'?: string;
+        '--sinch-global-color-text'?: string;
+    };
 };

package/icon/types.d.ts

@@ -28,7 +28,14 @@ export type TSinchIconReact = TSinchElementReact<TSinchIconElement> & ({
     name: TSinchIcons;
 }) & {
     style?: {
+        '--sinch-comp-icon-font-weight'?: string;
+        '--sinch-comp-icon-font-family'?: string;
+        '--sinch-comp-icon-font-feature-settings'?: string;
+        '--sinch-comp-icon-font-family-zero-to-d'?: string;
+        '--sinch-comp-icon-font-family-e-to-o'?: string;
+        '--sinch-comp-icon-font-family-p-to-z'?: string;
         '--sinch-global-size-icon'?: string;
         '--sinch-global-color-icon'?: string;
+        '--sinch-sys-color-text-default'?: string;
     };
 };

package/inline-alert/types.d.ts

@@ -12,4 +12,26 @@ export type TSinchInlineAlertReact = TSinchElementReact<TSinchInlineAlertElement
     type: TSinchInlineAlertType;
     text?: string;
     caption: string;
+} & {
+    style?: {
+        '--sinch-comp-inline-alert-shape-radius'?: string;
+        '--sinch-comp-inline-alert-color-success-default-background'?: string;
+        '--sinch-comp-inline-alert-color-success-default-text'?: string;
+        '--sinch-comp-inline-alert-color-success-default-icon'?: string;
+        '--sinch-comp-inline-alert-color-warning-default-background'?: string;
+        '--sinch-comp-inline-alert-color-warning-default-text'?: string;
+        '--sinch-comp-inline-alert-color-warning-default-icon'?: string;
+        '--sinch-comp-inline-alert-color-error-default-background'?: string;
+        '--sinch-comp-inline-alert-color-error-default-text'?: string;
+        '--sinch-comp-inline-alert-color-error-default-icon'?: string;
+        '--sinch-comp-inline-alert-color-info-default-background'?: string;
+        '--sinch-comp-inline-alert-color-info-default-text'?: string;
+        '--sinch-comp-inline-alert-color-info-default-icon'?: string;
+        '--sinch-comp-inline-alert-font-title'?: string;
+        '--sinch-comp-inline-alert-font-body'?: string;
+        '--sinch-comp-title-font'?: string;
+        '--sinch-comp-rich-text-font'?: string;
+        '--sinch-global-color-text'?: string;
+        '--sinch-global-color-icon'?: string;
+    };
 };

package/input/types.d.ts

@@ -88,4 +88,31 @@ export type TSinchInputReact = TSinchElementReact<TSinchInputElement> & {
     'on-wheel'?: (e: CustomEvent<void> & {
         target: TSinchInputElement;
     }) => void;
+} & {
+    style?: {
+        '--sinch-comp-input-size-container-l'?: string;
+        '--sinch-comp-input-size-container-m'?: string;
+        '--sinch-comp-input-size-container-s'?: string;
+        '--sinch-comp-input-size-icon-l'?: string;
+        '--sinch-comp-input-size-icon-m'?: string;
+        '--sinch-comp-input-size-icon-s'?: string;
+        '--sinch-comp-input-shape-radius-size-l'?: string;
+        '--sinch-comp-input-shape-radius-size-m'?: string;
+        '--sinch-comp-input-shape-radius-size-s'?: string;
+        '--sinch-comp-input-font-input'?: string;
+        '--sinch-comp-input-font-placeholder'?: string;
+        '--sinch-sys-font-body-monospace-m'?: string;
+        '--sinch-comp-input-color-default-background-initial'?: string;
+        '--sinch-comp-input-color-default-text-initial'?: string;
+        '--sinch-comp-input-color-default-text-placeholder'?: string;
+        '--sinch-comp-input-color-default-border-initial'?: string;
+        '--sinch-comp-input-color-default-border-focus'?: string;
+        '--sinch-comp-input-color-default-icon-initial'?: string;
+        '--sinch-comp-input-color-disabled-text-initial'?: string;
+        '--sinch-comp-input-color-disabled-border-initial'?: string;
+        '--sinch-comp-input-color-disabled-icon-initial'?: string;
+        '--sinch-comp-input-color-invalid-border-initial'?: string;
+        '--sinch-global-size-icon'?: string;
+        '--sinch-global-color-icon'?: string;
+    };
 };

package/link/types.d.ts

@@ -56,4 +56,22 @@ export type TSinchLinkReact = TSinchElementReact<TSinchLinkElement> & {
     'on-focus'?: (e: CustomEvent<void>) => void;
     /** Blur even handler */
     'on-blur'?: (e: CustomEvent<void>) => void;
+} & {
+    style?: {
+        '--sinch-comp-link-default-font-initial'?: string;
+        '--sinch-comp-link-default-text-decoration-initial'?: string;
+        '--sinch-comp-link-default-text-decoration-hover'?: string;
+        '--sinch-comp-link-default-text-decoration-disabled'?: string;
+        '--sinch-comp-link-standalone-font-initial'?: string;
+        '--sinch-comp-link-color-default-text-initial'?: string;
+        '--sinch-comp-link-color-default-text-hover'?: string;
+        '--sinch-comp-link-color-default-icon-initial'?: string;
+        '--sinch-comp-link-color-default-icon-hover'?: string;
+        '--sinch-comp-link-color-default-outline-focus'?: string;
+        '--sinch-comp-link-color-disabled-text-initial'?: string;
+        '--sinch-comp-link-color-disabled-icon-initial'?: string;
+        '--sinch-global-color-icon'?: string;
+        '--sinch-global-size-icon'?: string;
+        '--sinch-global-text-white-space'?: string;
+    };
 };

package/list-item/types.d.ts

@@ -1,3 +1,9 @@
 import type { TSinchElementReact } from '../types';
 export type TSinchListItemElement = HTMLElement;
-export type TSinchListItemReact = TSinchElementReact<TSinchListItemElement>;
+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;
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "4.6.3",
+  "version": "4.6.5",
   "files": [
     "**/*/*.css",
     "**/*/*.json",
@@ -20,7 +20,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.15",
-    "@nectary/assets": "2.1.1"
+    "@nectary/assets": "2.2.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.15",

package/pagination/types.d.ts

@@ -13,4 +13,20 @@ 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;
+    };
 };

package/persistent-overlay/types.d.ts

@@ -19,4 +19,8 @@ export type TSinchPersistentOverlayReact = TSinchElementReact<TSinchPersistentOv
     'aria-label': TSinchDialogReact['aria-label'];
     /** visibility altered event handler */
     'on-visibility-altered': (e: CustomEvent) => void;
+} & {
+    style?: {
+        '--sinch-dialog-close-button-display'?: string;
+    };
 };

package/popover/types.d.ts

@@ -35,4 +35,11 @@ export type TSinchPopoverReact = TSinchElementReact<TSinchPopoverElement> & {
     'aria-label': string;
     /** 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;
+    };
 };

package/progress/types.d.ts

@@ -9,4 +9,10 @@ export type TSinchProgressReact = TSinchElementReact<TSinchProgressElement> & {
     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;
+    };
 };

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

@@ -20,4 +20,32 @@ export type TSinchProgressStepperItemReact = TSinchElementReact<TSinchProgressSt
     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;
+    };
 };

package/radio-option/types.d.ts

@@ -15,4 +15,32 @@ export type TSinchRadioOptionReact = TSinchElementReact<TSinchRadioOptionElement
     disabled?: boolean;
     text: string;
     'aria-label': string;
+} & {
+    style?: {
+        '--sinch-comp-radio-color-default-background-initial'?: string;
+        '--sinch-comp-radio-color-default-background-hover'?: string;
+        '--sinch-comp-radio-color-default-background-active'?: string;
+        '--sinch-comp-radio-color-default-border-initial'?: string;
+        '--sinch-comp-radio-color-default-border-hover'?: string;
+        '--sinch-comp-radio-color-default-border-active'?: string;
+        '--sinch-comp-radio-color-default-label-initial'?: string;
+        '--sinch-comp-radio-color-default-outline-focus'?: string;
+        '--sinch-comp-radio-color-checked-border-initial'?: string;
+        '--sinch-comp-radio-color-checked-border-hover'?: string;
+        '--sinch-comp-radio-color-checked-border-active'?: string;
+        '--sinch-comp-radio-color-checked-knob-initial'?: string;
+        '--sinch-comp-radio-color-checked-knob-hover'?: string;
+        '--sinch-comp-radio-color-checked-knob-active'?: string;
+        '--sinch-comp-radio-color-invalid-border-initial'?: string;
+        '--sinch-comp-radio-color-invalid-border-hover'?: string;
+        '--sinch-comp-radio-color-invalid-border-active'?: string;
+        '--sinch-comp-radio-color-invalid-label-initial'?: string;
+        '--sinch-comp-radio-color-disabled-background-initial'?: string;
+        '--sinch-comp-radio-color-disabled-border-initial'?: string;
+        '--sinch-comp-radio-color-disabled-label-initial'?: string;
+        '--sinch-comp-radio-color-checked-disabled-border-initial'?: string;
+        '--sinch-comp-radio-color-checked-disabled-knob-initial'?: string;
+        '--sinch-comp-radio-color-checked-disabled-label-initial'?: string;
+        '--sinch-comp-radio-font-label'?: string;
+    };
 };

package/rich-text/types.d.ts

@@ -9,4 +9,24 @@ export type TSinchRichTextElement = HTMLElement & {
 export type TSinchRichTextReact = TSinchElementReact<TSinchRichTextElement> & {
     size?: TSinchTextType;
     text: string;
+} & {
+    style?: {
+        '--sinch-comp-rich-text-font'?: string;
+        '--sinch-sys-font-body-m'?: string;
+        '--sinch-sys-font-body-s'?: string;
+        '--sinch-sys-font-body-xs'?: string;
+        '--sinch-sys-font-body-xxs'?: string;
+        '--sinch-ref-typography-font-weight-700'?: string;
+        '--sinch-comp-link-default-font-initial'?: string;
+        '--sinch-comp-code-tag-font-text'?: string;
+        '--sinch-sys-color-text-default'?: string;
+        '--sinch-comp-link-color-default-text-initial'?: string;
+        '--sinch-comp-link-color-default-text-hover'?: string;
+        '--sinch-comp-code-tag-color-default-border-initial'?: string;
+        '--sinch-comp-code-tag-color-default-background-initial'?: string;
+        '--sinch-comp-code-tag-shape-radius'?: string;
+        '--sinch-comp-emoji-vertical-align'?: string;
+        '--sinch-global-color-text'?: string;
+        '--sinch-global-size-icon'?: string;
+    };
 };

package/rich-textarea/types.d.ts

@@ -45,4 +45,24 @@ export type TSinchRichTextareaReact = TSinchElementReact<TSinchRichTextareaEleme
     'on-focus'?: (e: CustomEvent<void>) => void;
     /** Blur handler */
     'on-blur'?: (e: CustomEvent<void>) => void;
+} & {
+    style?: {
+        '--sinch-comp-textarea-shape-radius'?: string;
+        '--sinch-comp-code-tag-shape-radius'?: string;
+        '--sinch-comp-textarea-color-default-background-initial'?: string;
+        '--sinch-comp-textarea-color-default-text-initial'?: string;
+        '--sinch-comp-textarea-color-default-text-placeholder'?: string;
+        '--sinch-comp-textarea-color-default-border-initial'?: string;
+        '--sinch-comp-textarea-color-default-border-focus'?: string;
+        '--sinch-comp-textarea-color-invalid-border-initial'?: string;
+        '--sinch-comp-textarea-color-disabled-text-initial'?: string;
+        '--sinch-comp-textarea-color-disabled-border-initial'?: string;
+        '--sinch-comp-code-tag-color-default-text-initial'?: string;
+        '--sinch-comp-code-tag-color-default-border-initial'?: string;
+        '--sinch-comp-code-tag-color-default-background-initial'?: string;
+        '--sinch-comp-link-color-default-text-initial'?: string;
+        '--sinch-comp-textarea-font-input'?: string;
+        '--sinch-comp-code-tag-font-text'?: string;
+        '--sinch-comp-link-default-font-initial'?: string;
+    };
 };

package/segment/types.d.ts

@@ -13,4 +13,14 @@ export type TSinchSegmentReact = TSinchElementReact<TSinchSegmentElement> & {
     caption: string;
     collapsed?: boolean;
     size?: TSinchSize;
+} & {
+    style?: {
+        '--sinch-comp-segment-shape-radius'?: string;
+        '--sinch-comp-segment-color-default-border-initial'?: string;
+        '--sinch-comp-segment-color-default-background-initial'?: string;
+        '--sinch-comp-segment-font-size-m-title'?: string;
+        '--sinch-comp-segment-font-size-l-title'?: string;
+        '--sinch-comp-segment-font-size-s-title'?: string;
+        '--sinch-global-size-icon'?: string;
+    };
 };

package/segment-collapse/types.d.ts

@@ -8,4 +8,8 @@ export type TSinchSegmentExpandReact = TSinchElementReact<TSinchSegmentExpandEle
     value: boolean;
     'aria-label': string;
     'on-change'?: (e: CustomEvent<boolean>) => void;
+} & {
+    style?: {
+        '--sinch-global-size-icon'?: string;
+    };
 };

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

@@ -16,4 +16,24 @@ export type TSinchSegmentedControlOptionReact = TSinchElementReact<TSinchSegment
     'aria-label': string;
     'on-focus'?: (e: CustomEvent<void>) => void;
     'on-blur'?: (e: CustomEvent<void>) => void;
+} & {
+    style?: {
+        '--sinch-comp-segmented-control-shape-radius'?: string;
+        '--sinch-comp-segmented-control-color-default-text-initial'?: string;
+        '--sinch-comp-segmented-control-color-default-icon-initial'?: string;
+        '--sinch-comp-segmented-control-color-default-border-initial'?: string;
+        '--sinch-comp-segmented-control-color-default-background-initial'?: string;
+        '--sinch-comp-segmented-control-color-default-background-hover'?: string;
+        '--sinch-comp-segmented-control-color-default-outline-focus'?: string;
+        '--sinch-comp-segmented-control-color-checked-text-initial'?: string;
+        '--sinch-comp-segmented-control-color-checked-icon-initial'?: string;
+        '--sinch-comp-segmented-control-color-checked-border-initial'?: string;
+        '--sinch-comp-segmented-control-color-checked-background-initial'?: string;
+        '--sinch-comp-segmented-control-color-disabled-text-initial'?: string;
+        '--sinch-comp-segmented-control-color-disabled-icon-initial'?: string;
+        '--sinch-comp-segmented-control-color-disabled-border-initial'?: string;
+        '--sinch-comp-segmented-control-color-disabled-background-initial'?: string;
+        '--sinch-comp-segmented-control-font-label'?: string;
+        '--sinch-comp-segmented-control-size-icon'?: string;
+    };
 };

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

@@ -13,4 +13,20 @@ export type TSinchSegmentedIconControlOptionReact = TSinchElementReact<TSinchSeg
     'aria-label': string;
     'on-focus'?: (e: CustomEvent<void>) => void;
     'on-blur'?: (e: CustomEvent<void>) => void;
+} & {
+    style?: {
+        '--sinch-comp-segmented-control-shape-radius'?: string;
+        '--sinch-comp-segmented-control-color-default-icon-initial'?: string;
+        '--sinch-comp-segmented-control-color-default-border-initial'?: string;
+        '--sinch-comp-segmented-control-color-default-background-initial'?: string;
+        '--sinch-comp-segmented-control-color-default-background-hover'?: string;
+        '--sinch-comp-segmented-control-color-default-outline-focus'?: string;
+        '--sinch-comp-segmented-control-color-checked-icon-initial'?: string;
+        '--sinch-comp-segmented-control-color-checked-border-initial'?: string;
+        '--sinch-comp-segmented-control-color-checked-background-initial'?: string;
+        '--sinch-comp-segmented-control-color-disabled-icon-initial'?: string;
+        '--sinch-comp-segmented-control-color-disabled-border-initial'?: string;
+        '--sinch-comp-segmented-control-color-disabled-background-initial'?: string;
+        '--sinch-comp-segmented-control-size-icon'?: string;
+    };
 };

package/select-button/types.d.ts

@@ -47,4 +47,29 @@ export type TSinchSelectButtonReact = TSinchElementReact<TSinchSelectButtonEleme
     'on-focus'?: (e: CustomEvent<void>) => void;
     /** Blur handler */
     'on-blur'?: (e: CustomEvent<void>) => void;
+} & {
+    style?: {
+        '--sinch-comp-select-button-size-container-l'?: string;
+        '--sinch-comp-select-button-size-icon-l'?: string;
+        '--sinch-comp-select-button-shape-radius-size-l'?: string;
+        '--sinch-comp-select-button-size-container-m'?: string;
+        '--sinch-comp-select-button-size-icon-m'?: string;
+        '--sinch-comp-select-button-shape-radius-size-m'?: string;
+        '--sinch-comp-select-button-size-container-s'?: string;
+        '--sinch-comp-select-button-size-icon-s'?: string;
+        '--sinch-comp-select-button-shape-radius-size-s'?: string;
+        '--sinch-comp-select-button-color-default-background-initial'?: string;
+        '--sinch-comp-select-button-color-default-icon-initial'?: string;
+        '--sinch-comp-select-button-color-default-text-initial'?: string;
+        '--sinch-comp-select-button-color-default-placeholder-initial'?: string;
+        '--sinch-comp-select-button-color-default-border-initial'?: string;
+        '--sinch-comp-select-button-color-default-border-focus'?: string;
+        '--sinch-comp-select-button-color-invalid-border-initial'?: string;
+        '--sinch-comp-select-button-color-disabled-icon-initial'?: string;
+        '--sinch-comp-select-button-color-disabled-text-initial'?: string;
+        '--sinch-comp-select-button-color-disabled-placeholder-initial'?: string;
+        '--sinch-comp-select-button-color-disabled-border-initial'?: string;
+        '--sinch-comp-select-button-font-input'?: string;
+        '--sinch-comp-select-button-font-placeholder'?: string;
+    };
 };

package/select-menu/types.d.ts

@@ -42,4 +42,10 @@ export type TSinchSelectMenuReact = TSinchElementReact<TSinchSelectMenuElement>
     'search-value'?: string;
     /** Change value handler */
     'on-change'?: (e: CustomEvent<string>) => void;
+} & {
+    style?: {
+        '--sinch-comp-select-menu-color-default-title-initial'?: string;
+        '--sinch-comp-select-menu-color-default-not-found-text-initial'?: string;
+        '--sinch-comp-select-menu-font-not-found-text'?: string;
+    };
 };

package/select-menu-option/types.d.ts

@@ -23,4 +23,20 @@ export type TSinchSelectMenuOptionReact = TSinchElementReact<TSinchSelectMenuOpt
     disabled?: boolean;
     /** Label that is used for a11y */
     'aria-label': string;
+} & {
+    style?: {
+        '--sinch-comp-select-menu-size-icon'?: string;
+        '--sinch-comp-select-menu-font-option'?: string;
+        '--sinch-comp-select-menu-color-default-background-initial'?: string;
+        '--sinch-comp-select-menu-color-default-background-selected'?: string;
+        '--sinch-comp-select-menu-color-default-background-hover'?: string;
+        '--sinch-comp-select-menu-color-default-option-initial'?: string;
+        '--sinch-comp-select-menu-color-default-icon-initial'?: string;
+        '--sinch-comp-select-menu-color-disabled-background-initial'?: string;
+        '--sinch-comp-select-menu-color-disabled-option-initial'?: string;
+        '--sinch-comp-select-menu-color-disabled-icon-initial'?: string;
+        '--sinch-global-color-text'?: string;
+        '--sinch-global-color-icon'?: string;
+        '--sinch-global-size-icon'?: string;
+    };
 };

package/skeleton/types.d.ts

@@ -6,4 +6,11 @@ export type TSinchSkeletonElement = HTMLElement & {
 export type TSinchSkeletonReact = TSinchElementReact<TSinchSkeletonElement> & {
     /** Card like container */
     card?: boolean;
+} & {
+    style?: {
+        '--sinch-sys-color-surface-primary-default'?: string;
+        '--sinch-sys-color-surface-tertiary-default'?: string;
+        '--sinch-sys-color-border-subtle'?: string;
+        '--sinch-sys-shape-radius-l'?: string;
+    };
 };

package/skeleton-item/types.d.ts

@@ -10,4 +10,17 @@ export type TSinchSkeletonItemElement = HTMLElement & {
 export type TSinchSkeletonItemReact = TSinchElementReact<TSinchSkeletonItemElement> & {
     /** Size */
     size?: TSinchSizeEx;
+} & {
+    style?: {
+        '--sinch-sys-size-xs'?: string;
+        '--sinch-sys-size-s'?: string;
+        '--sinch-sys-size-m'?: string;
+        '--sinch-sys-size-l'?: string;
+        '--sinch-sys-shape-radius-xs'?: string;
+        '--sinch-sys-shape-radius-s'?: string;
+        '--sinch-sys-shape-radius-m'?: string;
+        '--sinch-sys-shape-radius-l'?: string;
+        '--sinch-sys-color-border-subtle'?: string;
+        '--sinch-local-shape-radius'?: string;
+    };
 };

package/spinner/types.d.ts

@@ -9,4 +9,9 @@ export type TSinchSpinnerElement = HTMLElement & {
 export type TSinchSpinnerReact = TSinchElementReact<TSinchSpinnerElement> & {
     /** Spinner size */
     size?: TSinchSize;
+} & {
+    style?: {
+        '--sinch-global-color-icon'?: string;
+        '--sinch-sys-color-text-default'?: string;
+    };
 };

package/table-cell/types.d.ts

@@ -6,4 +6,8 @@ export type TSinchTableCellElement = HTMLElement & {
 };
 export type TSinchTableCellReact = TSinchElementReact<TSinchTableCellElement> & {
     align?: TSinchTableAlignType;
+} & {
+    style?: {
+        '--sinch-comp-table-color-cell-default-border-initial'?: string;
+    };
 };

package/table-head-cell/types.d.ts

@@ -12,4 +12,12 @@ export type TSinchTableHeaderCellReact = TSinchElementReact<TSinchTableHeaderCel
     text?: string;
     fit?: boolean;
     align?: TSinchTableAlignType;
+} & {
+    style?: {
+        '--sinch-comp-table-color-head-cell-default-border-initial'?: string;
+        '--sinch-comp-table-color-head-cell-default-icon-initial'?: string;
+        '--sinch-comp-table-color-head-cell-default-text-initial'?: string;
+        '--sinch-global-color-icon'?: string;
+        '--sinch-global-color-text'?: string;
+    };
 };

package/table-row/types.d.ts

@@ -8,4 +8,11 @@ export type TSinchTableRowElement = HTMLElement & {
 export type TSinchTableRowReact = TSinchElementReact<TSinchTableRowElement> & {
     sticky?: boolean;
     selected?: boolean;
+} & {
+    style?: {
+        '--sinch-comp-table-color-row-default-background-initial'?: string;
+        '--sinch-comp-table-color-row-default-background-hover'?: string;
+        '--sinch-comp-table-color-row-default-background-sticky'?: string;
+        '--sinch-comp-table-color-row-checked-background-initial'?: string;
+    };
 };

package/tabs/types.d.ts

@@ -15,4 +15,8 @@ export type TSinchTabsReact = TSinchElementReact<TSinchTabsElement> & {
     'aria-label': string;
     /** Change value event */
     'on-change'?: (e: CustomEvent<string>) => void;
+} & {
+    style?: {
+        '--sinch-comp-tab-color-default-border-initial'?: string;
+    };
 };

package/tabs-icon-option/types.d.ts

@@ -16,4 +16,18 @@ export type TSinchTabsIconOptionReact = TSinchElementReact<TSinchTabsIconOptionE
     'aria-label': string;
     /** Disabled */
     disabled?: boolean;
+} & {
+    style?: {
+        '--sinch-comp-tab-size-icon'?: string;
+        '--sinch-comp-tab-shape-radius'?: string;
+        '--sinch-comp-tab-color-default-background-initial'?: string;
+        '--sinch-comp-tab-color-default-background-hover'?: string;
+        '--sinch-comp-tab-color-default-icon-initial'?: string;
+        '--sinch-comp-tab-color-default-outline-focus'?: string;
+        '--sinch-comp-tab-color-checked-icon-initial'?: string;
+        '--sinch-comp-tab-color-checked-border-initial'?: string;
+        '--sinch-comp-tab-color-disabled-icon-initial'?: string;
+        '--sinch-global-color-icon'?: string;
+        '--sinch-global-size-icon'?: string;
+    };
 };

package/tabs-option/types.d.ts

@@ -22,4 +22,23 @@ export type TSinchTabsOptionReact = TSinchElementReact<TSinchTabsOptionElement>
     'aria-label': string;
     /** Disabled */
     disabled?: boolean;
+} & {
+    style?: {
+        '--sinch-comp-tab-font-label'?: string;
+        '--sinch-comp-tab-size-icon'?: string;
+        '--sinch-comp-tab-shape-radius'?: string;
+        '--sinch-comp-tab-color-default-background-initial'?: string;
+        '--sinch-comp-tab-color-default-background-hover'?: string;
+        '--sinch-comp-tab-color-default-text-initial'?: string;
+        '--sinch-comp-tab-color-default-icon-initial'?: string;
+        '--sinch-comp-tab-color-default-outline-focus'?: string;
+        '--sinch-comp-tab-color-checked-text-initial'?: string;
+        '--sinch-comp-tab-color-checked-icon-initial'?: string;
+        '--sinch-comp-tab-color-checked-border-initial'?: string;
+        '--sinch-comp-tab-color-disabled-text-initial'?: string;
+        '--sinch-comp-tab-color-disabled-icon-initial'?: string;
+        '--sinch-global-color-text'?: string;
+        '--sinch-global-color-icon'?: string;
+        '--sinch-global-size-icon'?: string;
+    };
 };

package/tag/types.d.ts

@@ -20,4 +20,19 @@ export type TSinchTagReact = TSinchElementReact<TSinchTagElement> & {
     color?: string;
     /** Small */
     small?: boolean;
+} & {
+    style?: {
+        '--sinch-comp-tag-size-container-m'?: string;
+        '--sinch-comp-tag-size-container-s'?: string;
+        '--sinch-comp-tag-size-icon-m'?: string;
+        '--sinch-comp-tag-size-icon-s'?: string;
+        '--sinch-comp-tag-shape-radius'?: string;
+        '--sinch-comp-tag-font-size-m-label'?: string;
+        '--sinch-comp-tag-font-size-s-label'?: string;
+        '--sinch-comp-tag-color-default-background'?: string;
+        '--sinch-comp-tag-color-default-foreground'?: string;
+        '--sinch-global-color-text'?: string;
+        '--sinch-global-color-icon'?: string;
+        '--sinch-global-size-icon'?: string;
+    };
 };