@nectary/components 4.6.4 → 4.6.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (67) hide show
  1. package/accordion-item/types.d.ts +23 -0
  2. package/action-menu-option/types.d.ts +17 -0
  3. package/alert/types.d.ts +16 -0
  4. package/avatar/types.d.ts +18 -0
  5. package/badge/types.d.ts +9 -0
  6. package/button/types.d.ts +127 -0
  7. package/button-group-item/types.d.ts +26 -0
  8. package/checkbox/types.d.ts +32 -0
  9. package/chip/types.d.ts +17 -0
  10. package/code-tag/types.d.ts +9 -0
  11. package/color-menu-option/types.d.ts +8 -0
  12. package/color-swatch/types.d.ts +8 -0
  13. package/date-picker/types.d.ts +31 -0
  14. package/dialog/types.d.ts +17 -0
  15. package/emoji/types.d.ts +5 -0
  16. package/emoji-picker/types.d.ts +9 -0
  17. package/field/types.d.ts +14 -0
  18. package/file-drop/types.d.ts +21 -0
  19. package/file-status/types.d.ts +21 -0
  20. package/flag/types.d.ts +4 -0
  21. package/grid/types.d.ts +16 -1
  22. package/help-tooltip/types.d.ts +5 -1
  23. package/horizontal-stepper/types.d.ts +30 -0
  24. package/horizontal-stepper-item/types.d.ts +23 -0
  25. package/icon/types.d.ts +7 -0
  26. package/inline-alert/types.d.ts +22 -0
  27. package/input/types.d.ts +27 -0
  28. package/link/types.d.ts +18 -0
  29. package/list-item/types.d.ts +7 -1
  30. package/package.json +4 -1
  31. package/pagination/types.d.ts +16 -0
  32. package/persistent-overlay/types.d.ts +4 -0
  33. package/popover/index.js +16 -1
  34. package/popover/types.d.ts +7 -0
  35. package/progress/types.d.ts +6 -0
  36. package/progress-stepper-item/types.d.ts +28 -0
  37. package/radio-option/types.d.ts +28 -0
  38. package/rich-text/types.d.ts +20 -0
  39. package/rich-textarea/types.d.ts +20 -0
  40. package/segment/types.d.ts +10 -0
  41. package/segment-collapse/types.d.ts +4 -0
  42. package/segmented-control-option/types.d.ts +20 -0
  43. package/segmented-icon-control-option/types.d.ts +16 -0
  44. package/select-button/types.d.ts +25 -0
  45. package/select-menu/types.d.ts +6 -0
  46. package/select-menu-option/types.d.ts +16 -0
  47. package/skeleton/types.d.ts +7 -0
  48. package/skeleton-item/types.d.ts +13 -0
  49. package/spinner/types.d.ts +5 -0
  50. package/table-cell/types.d.ts +4 -0
  51. package/table-head-cell/types.d.ts +8 -0
  52. package/table-row/types.d.ts +7 -0
  53. package/tabs/types.d.ts +4 -0
  54. package/tabs-icon-option/types.d.ts +14 -0
  55. package/tabs-option/types.d.ts +19 -0
  56. package/tag/types.d.ts +15 -0
  57. package/text/types.d.ts +14 -0
  58. package/textarea/types.d.ts +14 -0
  59. package/tile-control/types.d.ts +4 -0
  60. package/tile-control-option/types.d.ts +29 -0
  61. package/time-picker/types.d.ts +23 -0
  62. package/title/types.d.ts +11 -0
  63. package/toast/types.d.ts +20 -0
  64. package/toggle/types.d.ts +18 -0
  65. package/tooltip/types.d.ts +11 -0
  66. package/vertical-stepper/types.d.ts +22 -0
  67. package/vertical-stepper-item/types.d.ts +27 -0
package/accordion-item/types.d.ts CHANGED
@@ -33,4 +33,27 @@ export type TSinchAccordionItemReact = TSinchElementReact<TSinchAccordionItemEle
33
33
  status?: TSinchAccordionStatusType;
34
34
  /** Disabled */
35
35
  disabled?: boolean;
36
+ } & {
37
+ style?: {
38
+ '--sinch-comp-accordion-color-default-border-initial'?: string;
39
+ '--sinch-comp-accordion-color-default-icon-initial'?: string;
40
+ '--sinch-comp-accordion-color-default-title-initial'?: string;
41
+ '--sinch-comp-accordion-color-default-optional-text-initial'?: string;
42
+ '--sinch-comp-accordion-color-default-outline-focus'?: string;
43
+ '--sinch-comp-accordion-color-default-status-success'?: string;
44
+ '--sinch-comp-accordion-color-default-status-warning'?: string;
45
+ '--sinch-comp-accordion-color-default-status-error'?: string;
46
+ '--sinch-comp-accordion-color-default-status-info'?: string;
47
+ '--sinch-comp-accordion-color-disabled-icon-initial'?: string;
48
+ '--sinch-comp-accordion-color-disabled-title-initial'?: string;
49
+ '--sinch-comp-accordion-color-disabled-optional-text-initial'?: string;
50
+ '--sinch-comp-accordion-font-title'?: string;
51
+ '--sinch-comp-accordion-font-optional-text'?: string;
52
+ '--sinch-comp-accordion-size-icon'?: string;
53
+ '--sinch-global-color-icon'?: string;
54
+ '--sinch-global-size-icon'?: string;
55
+ '--sinch-global-color-text'?: string;
56
+ '--sinch-comp-title-font'?: string;
57
+ '--sinch-comp-text-font'?: string;
58
+ };
36
59
  };
package/action-menu-option/types.d.ts CHANGED
@@ -20,4 +20,21 @@ export type TSinchActionMenuOptionReact = TSinchElementReact<TSinchActionMenuOpt
20
20
  'aria-label': string;
21
21
  /** Click event handler */
22
22
  'on-click'?: (e: CustomEvent<void>) => void;
23
+ } & {
24
+ style?: {
25
+ '--sinch-comp-action-menu-color-default-background-initial'?: string;
26
+ '--sinch-comp-action-menu-color-default-background-selected'?: string;
27
+ '--sinch-comp-action-menu-color-default-background-hover'?: string;
28
+ '--sinch-comp-action-menu-color-default-text-initial'?: string;
29
+ '--sinch-comp-action-menu-color-default-icon-initial'?: string;
30
+ '--sinch-comp-action-menu-color-disabled-background-initial'?: string;
31
+ '--sinch-comp-action-menu-color-disabled-text-initial'?: string;
32
+ '--sinch-comp-action-menu-color-disabled-icon-initial'?: string;
33
+ '--sinch-comp-action-menu-font-option'?: string;
34
+ '--sinch-comp-action-menu-size-icon'?: string;
35
+ '--sinch-global-color-text'?: string;
36
+ '--sinch-global-color-icon'?: string;
37
+ '--sinch-global-size-icon'?: string;
38
+ '--sinch-comp-text-font'?: string;
39
+ };
23
40
  };
package/alert/types.d.ts CHANGED
@@ -15,4 +15,20 @@ export type TSinchAlertReact = TSinchElementReact<TSinchAlertElement> & {
15
15
  type: TSinchAlertType;
16
16
  /** Text */
17
17
  text: string;
18
+ } & {
19
+ style?: {
20
+ '--sinch-comp-alert-color-warning-default-background'?: string;
21
+ '--sinch-comp-alert-color-warning-default-icon'?: string;
22
+ '--sinch-comp-alert-color-warning-default-text'?: string;
23
+ '--sinch-comp-alert-color-error-default-background'?: string;
24
+ '--sinch-comp-alert-color-error-default-icon'?: string;
25
+ '--sinch-comp-alert-color-error-default-text'?: string;
26
+ '--sinch-comp-alert-color-info-default-background'?: string;
27
+ '--sinch-comp-alert-color-info-default-icon'?: string;
28
+ '--sinch-comp-alert-color-info-default-text'?: string;
29
+ '--sinch-comp-alert-font-body'?: string;
30
+ '--sinch-global-color-icon'?: string;
31
+ '--sinch-global-color-text'?: string;
32
+ '--sinch-comp-rich-text-font'?: string;
33
+ };
18
34
  };
package/avatar/types.d.ts CHANGED
@@ -34,4 +34,22 @@ export type TSinchAvatarReact = TSinchElementReact<TSinchAvatarElement> & {
34
34
  size?: TSinchSize;
35
35
  /** Status */
36
36
  status?: TSinchAvatarStatus;
37
+ } & {
38
+ style?: {
39
+ '--sinch-comp-avatar-container-color-default-background'?: string;
40
+ '--sinch-comp-avatar-container-color-default-foreground'?: string;
41
+ '--sinch-comp-avatar-border-color-default-initial'?: string;
42
+ '--sinch-comp-avatar-status-color-online-default-background'?: string;
43
+ '--sinch-comp-avatar-status-color-away-default-background'?: string;
44
+ '--sinch-comp-avatar-status-color-busy-default-background'?: string;
45
+ '--sinch-comp-avatar-status-color-offline-default-background'?: string;
46
+ '--sinch-comp-avatar-shape-radius'?: string;
47
+ '--sinch-comp-avatar-size-s'?: string;
48
+ '--sinch-comp-avatar-size-m'?: string;
49
+ '--sinch-comp-avatar-size-l'?: string;
50
+ '--sinch-comp-avatar-container-font-size-s-text'?: string;
51
+ '--sinch-comp-avatar-container-font-size-m-text'?: string;
52
+ '--sinch-comp-avatar-container-font-size-l-text'?: string;
53
+ '--sinch-local-size'?: string;
54
+ };
37
55
  };
package/badge/types.d.ts CHANGED
@@ -31,4 +31,13 @@ export type TSinchBadgeReact = TSinchElementReact<TSinchBadgeElement> & {
31
31
  mode?: TSinchBadgeMode;
32
32
  /** Hidden */
33
33
  hidden?: boolean;
34
+ } & {
35
+ style?: {
36
+ '--sinch-comp-badge-color-border'?: string;
37
+ '--sinch-comp-badge-color-text'?: string;
38
+ '--sinch-comp-badge-color-background'?: string;
39
+ '--sinch-comp-badge-shape-radius'?: string;
40
+ '--sinch-comp-badge-font-size-l'?: string;
41
+ '--sinch-comp-badge-font-size-m'?: string;
42
+ };
34
43
  };
package/button/types.d.ts CHANGED
@@ -50,4 +50,131 @@ export type TSinchButtonReact = TSinchElementReact<TSinchButtonElement> & {
50
50
  'on-focus'?: (e: CustomEvent<void>) => void;
51
51
  /** Blur event handler */
52
52
  'on-blur'?: (e: CustomEvent<void>) => void;
53
+ } & {
54
+ style?: {
55
+ '--sinch-comp-button-shape-radius-size-xs'?: string;
56
+ '--sinch-comp-button-shape-radius-size-s'?: string;
57
+ '--sinch-comp-button-shape-radius-size-m'?: string;
58
+ '--sinch-comp-button-shape-radius-size-l'?: string;
59
+ '--sinch-comp-button-size-container-xs'?: string;
60
+ '--sinch-comp-button-size-container-s'?: string;
61
+ '--sinch-comp-button-size-container-m'?: string;
62
+ '--sinch-comp-button-size-container-l'?: string;
63
+ '--sinch-comp-button-size-icon-xs'?: string;
64
+ '--sinch-comp-button-size-icon-s'?: string;
65
+ '--sinch-comp-button-size-icon-m'?: string;
66
+ '--sinch-comp-button-size-icon-l'?: string;
67
+ '--sinch-comp-button-font-size-s-text'?: string;
68
+ '--sinch-comp-button-font-size-m-text'?: string;
69
+ '--sinch-comp-button-font-size-l-text'?: string;
70
+ '--sinch-comp-button-color-primary-default-background-initial'?: string;
71
+ '--sinch-comp-button-color-primary-default-background-hover'?: string;
72
+ '--sinch-comp-button-color-primary-default-background-active'?: string;
73
+ '--sinch-comp-button-color-primary-default-border-initial'?: string;
74
+ '--sinch-comp-button-color-primary-default-text-initial'?: string;
75
+ '--sinch-comp-button-color-primary-default-icon-initial'?: string;
76
+ '--sinch-comp-button-color-primary-default-outline-focus'?: string;
77
+ '--sinch-comp-button-color-primary-disabled-background-initial'?: string;
78
+ '--sinch-comp-button-color-primary-disabled-border-initial'?: string;
79
+ '--sinch-comp-button-color-primary-disabled-text-initial'?: string;
80
+ '--sinch-comp-button-color-primary-disabled-icon-initial'?: string;
81
+ '--sinch-comp-button-color-secondary-default-background-initial'?: string;
82
+ '--sinch-comp-button-color-secondary-default-background-hover'?: string;
83
+ '--sinch-comp-button-color-secondary-default-background-active'?: string;
84
+ '--sinch-comp-button-color-secondary-default-border-initial'?: string;
85
+ '--sinch-comp-button-color-secondary-default-text-initial'?: string;
86
+ '--sinch-comp-button-color-secondary-default-icon-initial'?: string;
87
+ '--sinch-comp-button-color-secondary-default-outline-focus'?: string;
88
+ '--sinch-comp-button-color-secondary-disabled-background-initial'?: string;
89
+ '--sinch-comp-button-color-secondary-disabled-border-initial'?: string;
90
+ '--sinch-comp-button-color-secondary-disabled-text-initial'?: string;
91
+ '--sinch-comp-button-color-secondary-disabled-icon-initial'?: string;
92
+ '--sinch-comp-button-color-subtle-primary-default-background-initial'?: string;
93
+ '--sinch-comp-button-color-subtle-primary-default-background-hover'?: string;
94
+ '--sinch-comp-button-color-subtle-primary-default-background-active'?: string;
95
+ '--sinch-comp-button-color-subtle-primary-default-border-initial'?: string;
96
+ '--sinch-comp-button-color-subtle-primary-default-text-initial'?: string;
97
+ '--sinch-comp-button-color-subtle-primary-default-icon-initial'?: string;
98
+ '--sinch-comp-button-color-subtle-primary-default-outline-focus'?: string;
99
+ '--sinch-comp-button-color-subtle-primary-disabled-background-initial'?: string;
100
+ '--sinch-comp-button-color-subtle-primary-disabled-border-initial'?: string;
101
+ '--sinch-comp-button-color-subtle-primary-disabled-text-initial'?: string;
102
+ '--sinch-comp-button-color-subtle-primary-disabled-icon-initial'?: string;
103
+ '--sinch-comp-button-color-subtle-primary-toggled-background-initial'?: string;
104
+ '--sinch-comp-button-color-subtle-secondary-default-background-initial'?: string;
105
+ '--sinch-comp-button-color-subtle-secondary-default-background-hover'?: string;
106
+ '--sinch-comp-button-color-subtle-secondary-default-background-active'?: string;
107
+ '--sinch-comp-button-color-subtle-secondary-default-border-initial'?: string;
108
+ '--sinch-comp-button-color-subtle-secondary-default-text-initial'?: string;
109
+ '--sinch-comp-button-color-subtle-secondary-default-icon-initial'?: string;
110
+ '--sinch-comp-button-color-subtle-secondary-default-outline-focus'?: string;
111
+ '--sinch-comp-button-color-subtle-secondary-disabled-background-initial'?: string;
112
+ '--sinch-comp-button-color-subtle-secondary-disabled-border-initial'?: string;
113
+ '--sinch-comp-button-color-subtle-secondary-disabled-text-initial'?: string;
114
+ '--sinch-comp-button-color-subtle-secondary-disabled-icon-initial'?: string;
115
+ '--sinch-comp-button-color-subtle-secondary-toggled-background-initial'?: string;
116
+ '--sinch-comp-button-color-cta-primary-default-background-initial'?: string;
117
+ '--sinch-comp-button-color-cta-primary-default-background-hover'?: string;
118
+ '--sinch-comp-button-color-cta-primary-default-background-active'?: string;
119
+ '--sinch-comp-button-color-cta-primary-default-border-initial'?: string;
120
+ '--sinch-comp-button-color-cta-primary-default-text-initial'?: string;
121
+ '--sinch-comp-button-color-cta-primary-default-icon-initial'?: string;
122
+ '--sinch-comp-button-color-cta-primary-default-outline-focus'?: string;
123
+ '--sinch-comp-button-color-cta-primary-disabled-background-initial'?: string;
124
+ '--sinch-comp-button-color-cta-primary-disabled-border-initial'?: string;
125
+ '--sinch-comp-button-color-cta-primary-disabled-text-initial'?: string;
126
+ '--sinch-comp-button-color-cta-primary-disabled-icon-initial'?: string;
127
+ '--sinch-comp-button-color-cta-secondary-default-background-initial'?: string;
128
+ '--sinch-comp-button-color-cta-secondary-default-background-hover'?: string;
129
+ '--sinch-comp-button-color-cta-secondary-default-background-active'?: string;
130
+ '--sinch-comp-button-color-cta-secondary-default-border-initial'?: string;
131
+ '--sinch-comp-button-color-cta-secondary-default-text-initial'?: string;
132
+ '--sinch-comp-button-color-cta-secondary-default-icon-initial'?: string;
133
+ '--sinch-comp-button-color-cta-secondary-default-outline-focus'?: string;
134
+ '--sinch-comp-button-color-cta-secondary-disabled-background-initial'?: string;
135
+ '--sinch-comp-button-color-cta-secondary-disabled-border-initial'?: string;
136
+ '--sinch-comp-button-color-cta-secondary-disabled-text-initial'?: string;
137
+ '--sinch-comp-button-color-cta-secondary-disabled-icon-initial'?: string;
138
+ '--sinch-comp-button-color-danger-default-background-initial'?: string;
139
+ '--sinch-comp-button-color-danger-default-background-hover'?: string;
140
+ '--sinch-comp-button-color-danger-default-background-active'?: string;
141
+ '--sinch-comp-button-color-danger-default-border-initial'?: string;
142
+ '--sinch-comp-button-color-danger-default-text-initial'?: string;
143
+ '--sinch-comp-button-color-danger-default-icon-initial'?: string;
144
+ '--sinch-comp-button-color-danger-disabled-background-initial'?: string;
145
+ '--sinch-comp-button-color-danger-disabled-border-initial'?: string;
146
+ '--sinch-comp-button-color-danger-disabled-text-initial'?: string;
147
+ '--sinch-comp-button-color-danger-disabled-icon-initial'?: string;
148
+ '--sinch-comp-button-shadow-primary-initial'?: string;
149
+ '--sinch-comp-button-shadow-primary-hover'?: string;
150
+ '--sinch-comp-button-shadow-primary-active'?: string;
151
+ '--sinch-comp-button-shadow-primary-focus'?: string;
152
+ '--sinch-comp-button-shadow-primary-disabled'?: string;
153
+ '--sinch-comp-button-shadow-secondary-initial'?: string;
154
+ '--sinch-comp-button-shadow-secondary-hover'?: string;
155
+ '--sinch-comp-button-shadow-secondary-focus'?: string;
156
+ '--sinch-comp-button-shadow-secondary-disabled'?: string;
157
+ '--sinch-comp-button-shadow-subtle-initial'?: string;
158
+ '--sinch-comp-button-shadow-subtle-hover'?: string;
159
+ '--sinch-comp-button-shadow-subtle-active'?: string;
160
+ '--sinch-comp-button-shadow-subtle-focus'?: string;
161
+ '--sinch-comp-button-shadow-subtle-disabled'?: string;
162
+ '--sinch-comp-button-shadow-cta-primary-initial'?: string;
163
+ '--sinch-comp-button-shadow-cta-primary-hover'?: string;
164
+ '--sinch-comp-button-shadow-cta-primary-active'?: string;
165
+ '--sinch-comp-button-shadow-cta-primary-focus'?: string;
166
+ '--sinch-comp-button-shadow-cta-primary-disabled'?: string;
167
+ '--sinch-comp-button-shadow-cta-secondary-initial'?: string;
168
+ '--sinch-comp-button-shadow-cta-secondary-hover'?: string;
169
+ '--sinch-comp-button-shadow-cta-secondary-active'?: string;
170
+ '--sinch-comp-button-shadow-cta-secondary-focus'?: string;
171
+ '--sinch-comp-button-shadow-cta-secondary-disabled'?: string;
172
+ '--sinch-comp-button-shadow-danger-initial'?: string;
173
+ '--sinch-comp-button-shadow-danger-hover'?: string;
174
+ '--sinch-comp-button-shadow-danger-active'?: string;
175
+ '--sinch-comp-button-shadow-danger-focus'?: string;
176
+ '--sinch-global-color-text'?: string;
177
+ '--sinch-global-color-icon'?: string;
178
+ '--sinch-global-size-icon'?: string;
179
+ };
53
180
  };
package/button-group-item/types.d.ts CHANGED
@@ -15,4 +15,30 @@ export type TSinchButtonGroupItemReact = TSinchElementReact<TSinchButtonGroupIte
15
15
  'on-click'?: TSinchButtonReact['on-click'];
16
16
  'on-focus'?: TSinchButtonReact['on-focus'];
17
17
  'aria-label': TSinchButtonReact['aria-label'];
18
+ } & {
19
+ style?: {
20
+ '--sinch-comp-button-shape-radius-size-xs'?: string;
21
+ '--sinch-comp-button-shape-radius-size-s'?: string;
22
+ '--sinch-comp-button-shape-radius-size-m'?: string;
23
+ '--sinch-comp-button-shape-radius-size-l'?: string;
24
+ '--sinch-button-border'?: string;
25
+ '--sinch-button-border-top'?: string;
26
+ '--sinch-button-border-bottom'?: string;
27
+ '--sinch-button-border-left'?: string;
28
+ '--sinch-button-border-right'?: string;
29
+ '--sinch-button-shape-radius-base'?: string;
30
+ '--sinch-button-shape-radius-top-right'?: string;
31
+ '--sinch-button-shape-radius-top-left'?: string;
32
+ '--sinch-button-shape-radius-bottom-right'?: string;
33
+ '--sinch-button-shape-radius-bottom-left'?: string;
34
+ '--sinch-button-set-size-shape-radius'?: string;
35
+ '--sinch-local-divider-color'?: string;
36
+ '--sinch-comp-button-color-primary-default-text-initial'?: string;
37
+ '--sinch-comp-button-color-secondary-default-text-initial'?: string;
38
+ '--sinch-comp-button-color-subtle-primary-default-text-initial'?: string;
39
+ '--sinch-comp-button-color-subtle-secondary-default-text-initial'?: string;
40
+ '--sinch-comp-button-color-cta-primary-default-text-initial'?: string;
41
+ '--sinch-comp-button-color-cta-secondary-default-text-initial'?: string;
42
+ '--sinch-comp-button-color-danger-default-text-initial'?: string;
43
+ };
18
44
  };
package/checkbox/types.d.ts CHANGED
@@ -46,4 +46,36 @@ export type TSinchCheckboxReact = TSinchElementReact<TSinchCheckboxElement> & {
46
46
  'on-focus'?: (e: CustomEvent<void>) => void;
47
47
  /** Blur handler */
48
48
  'on-blur'?: (e: CustomEvent<void>) => void;
49
+ } & {
50
+ style?: {
51
+ '--sinch-comp-checkbox-shape-radius'?: string;
52
+ '--sinch-comp-checkbox-font-label'?: string;
53
+ '--sinch-comp-checkbox-color-default-background-initial'?: string;
54
+ '--sinch-comp-checkbox-color-default-background-hover'?: string;
55
+ '--sinch-comp-checkbox-color-default-background-active'?: string;
56
+ '--sinch-comp-checkbox-color-default-border-initial'?: string;
57
+ '--sinch-comp-checkbox-color-default-border-hover'?: string;
58
+ '--sinch-comp-checkbox-color-default-border-active'?: string;
59
+ '--sinch-comp-checkbox-color-default-text-initial'?: string;
60
+ '--sinch-comp-checkbox-color-default-outline-focus'?: string;
61
+ '--sinch-comp-checkbox-color-invalid-background-initial'?: string;
62
+ '--sinch-comp-checkbox-color-invalid-background-hover'?: string;
63
+ '--sinch-comp-checkbox-color-invalid-background-active'?: string;
64
+ '--sinch-comp-checkbox-color-invalid-border-initial'?: string;
65
+ '--sinch-comp-checkbox-color-invalid-border-hover'?: string;
66
+ '--sinch-comp-checkbox-color-invalid-border-active'?: string;
67
+ '--sinch-comp-checkbox-color-invalid-text-initial'?: string;
68
+ '--sinch-comp-checkbox-color-checked-background-initial'?: string;
69
+ '--sinch-comp-checkbox-color-checked-background-hover'?: string;
70
+ '--sinch-comp-checkbox-color-checked-background-active'?: string;
71
+ '--sinch-comp-checkbox-color-checked-border-initial'?: string;
72
+ '--sinch-comp-checkbox-color-checked-border-hover'?: string;
73
+ '--sinch-comp-checkbox-color-checked-border-active'?: string;
74
+ '--sinch-comp-checkbox-color-disabled-background-initial'?: string;
75
+ '--sinch-comp-checkbox-color-disabled-border-initial'?: string;
76
+ '--sinch-comp-checkbox-color-disabled-text-initial'?: string;
77
+ '--sinch-comp-checkbox-color-checked-disabled-background-initial'?: string;
78
+ '--sinch-comp-checkbox-color-checked-disabled-border-initial'?: string;
79
+ '--sinch-sys-color-surface-primary-default'?: string;
80
+ };
49
81
  };
package/chip/types.d.ts CHANGED
@@ -34,4 +34,21 @@ export type TSinchChipReact = TSinchElementReact<TSinchChipElement> & {
34
34
  'on-blur'?: (e: CustomEvent<void>) => void;
35
35
  /** Label that is used for a11y` */
36
36
  'aria-label': string;
37
+ } & {
38
+ style?: {
39
+ '--sinch-comp-chip-size-container-m'?: string;
40
+ '--sinch-comp-chip-size-container-s'?: string;
41
+ '--sinch-comp-chip-size-icon-m'?: string;
42
+ '--sinch-comp-chip-size-icon-s'?: string;
43
+ '--sinch-comp-chip-font-size-m-label'?: string;
44
+ '--sinch-comp-chip-font-size-s-label'?: string;
45
+ '--sinch-comp-chip-color-neutral-default-background-initial'?: string;
46
+ '--sinch-comp-chip-color-neutral-default-foreground-initial'?: string;
47
+ '--sinch-comp-chip-color-outiline-focus'?: string;
48
+ '--sinch-comp-chip-shape-radius'?: string;
49
+ '--sinch-global-color-text'?: string;
50
+ '--sinch-global-color-icon'?: string;
51
+ '--sinch-global-size-icon'?: string;
52
+ '--sinch-comp-text-font'?: string;
53
+ };
37
54
  };
package/code-tag/types.d.ts CHANGED
@@ -8,4 +8,13 @@ export type TSinchCodeTagElement = HTMLElement & {
8
8
  export type TSinchCodeTagReact = TSinchElementReact<TSinchCodeTagElement> & {
9
9
  /** Text content of hyperlink */
10
10
  text: string;
11
+ } & {
12
+ style?: {
13
+ '--sinch-comp-code-tag-color-default-text-initial'?: string;
14
+ '--sinch-comp-code-tag-color-default-border-initial'?: string;
15
+ '--sinch-comp-code-tag-color-default-background-initial'?: string;
16
+ '--sinch-comp-code-tag-font-text'?: string;
17
+ '--sinch-comp-code-tag-shape-radius'?: string;
18
+ '--sinch-global-text-white-space'?: string;
19
+ };
11
20
  };
package/color-menu-option/types.d.ts CHANGED
@@ -8,4 +8,12 @@ export type TSinchColorMenuOptionElement = HTMLElement & {
8
8
  export type TSinchColorMenuOptionReact = TSinchElementReact<TSinchColorMenuOptionElement> & {
9
9
  /** Value */
10
10
  value: string;
11
+ } & {
12
+ style?: {
13
+ '--sinch-comp-color-menu-option-color-default-border-initial'?: string;
14
+ '--sinch-comp-color-menu-option-color-default-border-selected'?: string;
15
+ '--sinch-comp-color-menu-option-color-default-border-focus'?: string;
16
+ '--sinch-comp-color-menu-option-color-default-border-hover'?: string;
17
+ '--sinch-comp-color-menu-option-color-default-border-active'?: string;
18
+ };
11
19
  };
package/color-swatch/types.d.ts CHANGED
@@ -8,4 +8,12 @@ export type TSinchColorSwatchElement = HTMLElement & {
8
8
  export type TSinchColorSwatchReact = TSinchElementReact<TSinchColorSwatchElement> & {
9
9
  /** Color name */
10
10
  name?: string;
11
+ } & {
12
+ style?: {
13
+ '--sinch-global-size-icon'?: string;
14
+ '--sinch-ref-color-violet-200'?: string;
15
+ '--sinch-ref-color-honey-200'?: string;
16
+ '--sinch-ref-color-grass-200'?: string;
17
+ '--sinch-ref-color-ocean-200'?: string;
18
+ };
11
19
  };
package/date-picker/types.d.ts CHANGED
@@ -67,4 +67,35 @@ export type TSinchDatePickerReact = TSinchElementReact<TSinchDatePickerElement>
67
67
  'next-month-aria-label': string;
68
68
  /** Change value handler, return date in ISO 8601 format */
69
69
  'on-change'?: (e: CustomEvent<string>) => void;
70
+ } & {
71
+ style?: {
72
+ '--sinch-comp-date-picker-font-day'?: string;
73
+ '--sinch-comp-date-picker-font-today'?: string;
74
+ '--sinch-comp-date-picker-font-weekday'?: string;
75
+ '--sinch-comp-date-picker-font-header'?: string;
76
+ '--sinch-comp-date-picker-day-shape-radius'?: string;
77
+ '--sinch-comp-date-picker-header-color-default-text-initial'?: string;
78
+ '--sinch-comp-date-picker-weekday-color-default-text-initial'?: string;
79
+ '--sinch-comp-date-picker-day-color-default-text-initial'?: string;
80
+ '--sinch-comp-date-picker-day-color-default-background-initial'?: string;
81
+ '--sinch-comp-date-picker-day-color-default-background-hover'?: string;
82
+ '--sinch-comp-date-picker-day-color-default-border-initial'?: string;
83
+ '--sinch-comp-date-picker-day-color-default-outline-focus'?: string;
84
+ '--sinch-comp-date-picker-day-color-default-range-background'?: string;
85
+ '--sinch-comp-date-picker-day-color-disabled-text-initial'?: string;
86
+ '--sinch-comp-date-picker-day-color-checked-text-initial'?: string;
87
+ '--sinch-comp-date-picker-day-color-checked-background-initial'?: string;
88
+ '--sinch-comp-date-picker-day-color-checked-border-initial'?: string;
89
+ '--sinch-comp-date-picker-today-color-default-text-initial'?: string;
90
+ '--sinch-comp-date-picker-today-color-default-background-initial'?: string;
91
+ '--sinch-comp-date-picker-today-color-default-background-hover'?: string;
92
+ '--sinch-comp-date-picker-today-color-default-border-initial'?: string;
93
+ '--sinch-comp-date-picker-today-color-disabled-text-initial'?: string;
94
+ '--sinch-comp-date-picker-today-color-disabled-border-initial'?: string;
95
+ '--sinch-comp-date-picker-today-color-checked-text-initial'?: string;
96
+ '--sinch-comp-date-picker-today-color-checked-background-initial'?: string;
97
+ '--sinch-comp-date-picker-today-color-checked-border-initial'?: string;
98
+ '--sinch-com-text-font'?: string;
99
+ '--sinch-global-color-text'?: string;
100
+ };
70
101
  };
package/dialog/types.d.ts CHANGED
@@ -25,4 +25,21 @@ export type TSinchDialogReact = TSinchElementReact<TSinchDialogElement> & {
25
25
  'close-aria-label': string;
26
26
  /** close event handler */
27
27
  'on-close'?: (e: CustomEvent<TSinchDialogCloseDetail>) => void;
28
+ } & {
29
+ style?: {
30
+ '--sinch-comp-dialog-max-width'?: string;
31
+ '--sinch-comp-dialog-max-height'?: string;
32
+ '--sinch-comp-dialog-width'?: string;
33
+ '--sinch-dialog-close-button-display'?: string;
34
+ '--sinch-comp-dialog-shape-radius'?: string;
35
+ '--sinch-comp-dialog-font-title'?: string;
36
+ '--sinch-comp-dialog-shadow'?: string;
37
+ '--sinch-comp-dialog-color-default-background-initial'?: string;
38
+ '--sinch-comp-dialog-color-default-icon-initial'?: string;
39
+ '--sinch-comp-dialog-color-default-title-initial'?: string;
40
+ '--sinch-global-size-icon'?: string;
41
+ '--sinch-global-color-icon'?: string;
42
+ '--sinch-global-color-text'?: string;
43
+ '--sinch-comp-title-font'?: string;
44
+ };
28
45
  };
package/emoji/types.d.ts CHANGED
@@ -8,4 +8,9 @@ export type TSinchEmojiElement = HTMLElement & {
8
8
  export type TSinchEmojiReact = TSinchElementReact<TSinchEmojiElement> & {
9
9
  /** Emoji character */
10
10
  char: string;
11
+ } & {
12
+ style?: {
13
+ '--sinch-comp-emoji-vertical-align'?: string;
14
+ '--sinch-global-size-icon'?: string;
15
+ };
11
16
  };
package/emoji-picker/types.d.ts CHANGED
@@ -23,4 +23,13 @@ export type TSinchEmojiPickerElement = HTMLElement & {
23
23
  export type TSinchEmojiPickerReact = TSinchElementReact<TSinchEmojiPickerElement> & {
24
24
  /** Change value handler */
25
25
  'on-change': (e: CustomEvent<string>) => void;
26
+ } & {
27
+ style?: {
28
+ '--sinch-comp-emoji-picker-font-not-found'?: string;
29
+ '--sinch-comp-emoji-picker-color-default-text-not-found'?: string;
30
+ '--sinch-global-color-text'?: string;
31
+ '--sinch-global-color-icon'?: string;
32
+ '--sinch-global-size-icon'?: string;
33
+ '--sinch-comp-text-font'?: string;
34
+ };
26
35
  };
package/field/types.d.ts CHANGED
@@ -32,4 +32,18 @@ export type TSinchFieldReact = TSinchElementReact<TSinchFieldElement> & {
32
32
  invalidText?: string;
33
33
  /** Disabled */
34
34
  disabled?: boolean;
35
+ } & {
36
+ style?: {
37
+ '--sinch-comp-field-font-label'?: string;
38
+ '--sinch-comp-field-font-optional'?: string;
39
+ '--sinch-comp-field-font-additional'?: string;
40
+ '--sinch-comp-field-font-invalid'?: string;
41
+ '--sinch-comp-field-color-default-label-initial'?: string;
42
+ '--sinch-comp-field-color-default-optional-initial'?: string;
43
+ '--sinch-comp-field-color-default-additional-initial'?: string;
44
+ '--sinch-comp-field-color-disabled-label-initial'?: string;
45
+ '--sinch-comp-field-color-disabled-optional-initial'?: string;
46
+ '--sinch-comp-field-color-disabled-additional-initial'?: string;
47
+ '--sinch-comp-field-color-invalid-text-initial'?: string;
48
+ };
35
49
  };
package/file-drop/types.d.ts CHANGED
@@ -47,4 +47,25 @@ export type TSinchFileDropReact = TSinchElementReact<TSinchFileDropElement> & {
47
47
  'on-change': (e: CustomEvent<File[]>) => void;
48
48
  /** Invalid handler */
49
49
  'on-invalid': (e: CustomEvent<TSinchFileDropInvalidType>) => void;
50
+ } & {
51
+ style?: {
52
+ '--sinch-comp-file-drop-shape-radius'?: string;
53
+ '--sinch-comp-file-drop-font-placeholder'?: string;
54
+ '--sinch-comp-file-drop-color-default-background-initial'?: string;
55
+ '--sinch-comp-file-drop-color-default-background-active'?: string;
56
+ '--sinch-comp-file-drop-color-default-border-initial'?: string;
57
+ '--sinch-comp-file-drop-color-default-border-active'?: string;
58
+ '--sinch-comp-file-drop-color-default-placeholder-initial'?: string;
59
+ '--sinch-comp-file-drop-color-default-placeholder-active'?: string;
60
+ '--sinch-comp-file-drop-color-invalid-background-initial'?: string;
61
+ '--sinch-comp-file-drop-color-invalid-background-active'?: string;
62
+ '--sinch-comp-file-drop-color-invalid-border-initial'?: string;
63
+ '--sinch-comp-file-drop-color-invalid-border-active'?: string;
64
+ '--sinch-comp-file-drop-color-invalid-placeholder-active'?: string;
65
+ '--sinch-comp-file-drop-color-disabled-background-initial'?: string;
66
+ '--sinch-comp-file-drop-color-disabled-border-initial'?: string;
67
+ '--sinch-comp-file-drop-color-disabled-placeholder-initial'?: string;
68
+ '--sinch-global-color-text'?: string;
69
+ '--sinch-comp-text-font'?: string;
70
+ };
50
71
  };
package/file-status/types.d.ts CHANGED
@@ -15,4 +15,25 @@ export type TSinchFileStatusReact = TSinchElementReact<TSinchFileStatusElement>
15
15
  type: TSinchFileStatusType;
16
16
  /** File name */
17
17
  filename: string;
18
+ } & {
19
+ style?: {
20
+ '--sinch-comp-file-status-shape-radius'?: string;
21
+ '--sinch-comp-file-status-color-error-background'?: string;
22
+ '--sinch-comp-file-status-color-error-text'?: string;
23
+ '--sinch-comp-file-status-color-error-icon'?: string;
24
+ '--sinch-comp-file-status-color-success-background'?: string;
25
+ '--sinch-comp-file-status-color-success-text'?: string;
26
+ '--sinch-comp-file-status-color-success-icon'?: string;
27
+ '--sinch-comp-file-status-color-pending-background'?: string;
28
+ '--sinch-comp-file-status-color-pending-text'?: string;
29
+ '--sinch-comp-file-status-color-pending-icon'?: string;
30
+ '--sinch-comp-file-status-color-progress-background'?: string;
31
+ '--sinch-comp-file-status-color-progress-text'?: string;
32
+ '--sinch-comp-file-status-color-progress-icon'?: string;
33
+ '--sinch-comp-file-status-color-loading-background'?: string;
34
+ '--sinch-comp-file-status-color-loading-text'?: string;
35
+ '--sinch-comp-file-status-color-loading-icon'?: string;
36
+ '--sinch-global-color-text'?: string;
37
+ '--sinch-global-color-icon'?: string;
38
+ };
18
39
  };
package/flag/types.d.ts CHANGED
@@ -8,4 +8,8 @@ export type TSinchFlagElement = HTMLElement & {
8
8
  export type TSinchFlagReact = TSinchElementReact<TSinchFlagElement> & {
9
9
  /** Flag country code */
10
10
  code: string;
11
+ } & {
12
+ style?: {
13
+ '--sinch-global-size-icon'?: string;
14
+ };
11
15
  };
package/grid/types.d.ts CHANGED
@@ -1,3 +1,18 @@
1
1
  import type { TSinchElementReact } from '../types';
2
2
  export type TSinchGridElement = HTMLElement;
3
- export type TSinchGridReact = TSinchElementReact<TSinchGridElement>;
3
+ export type TSinchGridReact = TSinchElementReact<TSinchGridElement> & {
4
+ style?: {
5
+ '--sinch-comp-grid-columns-xl'?: string;
6
+ '--sinch-comp-grid-gutter-xl'?: string;
7
+ '--sinch-comp-grid-margin-xl'?: string;
8
+ '--sinch-comp-grid-columns-l'?: string;
9
+ '--sinch-comp-grid-gutter-l'?: string;
10
+ '--sinch-comp-grid-margin-l'?: string;
11
+ '--sinch-comp-grid-columns-m'?: string;
12
+ '--sinch-comp-grid-gutter-m'?: string;
13
+ '--sinch-comp-grid-margin-m'?: string;
14
+ '--sinch-comp-grid-columns-s'?: string;
15
+ '--sinch-comp-grid-gutter-s'?: string;
16
+ '--sinch-comp-grid-margin-s'?: string;
17
+ };
18
+ };
package/help-tooltip/types.d.ts CHANGED
@@ -1,3 +1,7 @@
1
1
  import type { TSinchTooltipElement, TSinchTooltipReact } from '../tooltip/types';
2
2
  export type TSinchHelpTooltipElement = TSinchTooltipElement;
3
- export type TSinchHelpTooltipReact = TSinchTooltipReact;
3
+ export type TSinchHelpTooltipReact = TSinchTooltipReact & {
4
+ style?: {
5
+ '--sinch-global-size-icon'?: string;
6
+ };
7
+ };
package/horizontal-stepper/types.d.ts CHANGED
@@ -10,4 +10,34 @@ export type TSinchHorizontalStepperReact = TSinchElementReact<TSinchHorizontalSt
10
10
  index: string;
11
11
  /** Label that is used for a11y */
12
12
  'aria-label': string;
13
+ } & {
14
+ style?: {
15
+ '--sinch-comp-horizontal-stepper-color-background-default'?: string;
16
+ '--sinch-comp-horizontal-stepper-color-background-visited-skip'?: string;
17
+ '--sinch-comp-horizontal-stepper-color-background-active'?: string;
18
+ '--sinch-comp-horizontal-stepper-color-background-visited'?: string;
19
+ '--sinch-comp-horizontal-stepper-color-background-visited-error'?: string;
20
+ '--sinch-comp-horizontal-stepper-color-border-default'?: string;
21
+ '--sinch-comp-horizontal-stepper-color-border-visited-skip'?: string;
22
+ '--sinch-comp-horizontal-stepper-color-border-active'?: string;
23
+ '--sinch-comp-horizontal-stepper-color-border-visited'?: string;
24
+ '--sinch-comp-horizontal-stepper-color-border-visited-error'?: string;
25
+ '--sinch-comp-horizontal-stepper-color-icon-default'?: string;
26
+ '--sinch-comp-horizontal-stepper-color-icon-visited-skip'?: string;
27
+ '--sinch-comp-horizontal-stepper-color-icon-active'?: string;
28
+ '--sinch-comp-horizontal-stepper-color-icon-visited'?: string;
29
+ '--sinch-comp-horizontal-stepper-color-icon-visited-error'?: string;
30
+ '--sinch-comp-horizontal-stepper-color-label'?: string;
31
+ '--sinch-comp-horizontal-stepper-color-description'?: string;
32
+ '--sinch-comp-horizontal-stepper-color-progress'?: string;
33
+ '--sinch-comp-horizontal-stepper-color-progress-visited'?: string;
34
+ '--sinch-sys-color-surface-tertiary-default'?: string;
35
+ '--sinch-sys-color-basic-pure'?: string;
36
+ '--sinch-sys-color-text-default'?: string;
37
+ '--sinch-sys-color-text-muted'?: string;
38
+ '--sinch-sys-color-feedback-danger-strong'?: string;
39
+ '--sinch-ref-color-neutral-350'?: string;
40
+ '--sinch-ref-color-neutral-700'?: string;
41
+ '--sinch-ref-color-neutral-900'?: string;
42
+ };
13
43
  };