@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.
- package/accordion-item/types.d.ts +23 -0
- package/action-menu-option/types.d.ts +17 -0
- package/alert/types.d.ts +16 -0
- package/avatar/types.d.ts +18 -0
- package/badge/types.d.ts +9 -0
- package/button/types.d.ts +127 -0
- package/button-group-item/types.d.ts +26 -0
- package/checkbox/types.d.ts +32 -0
- package/chip/types.d.ts +17 -0
- package/code-tag/types.d.ts +9 -0
- package/color-menu-option/types.d.ts +8 -0
- package/color-swatch/types.d.ts +8 -0
- package/date-picker/types.d.ts +31 -0
- package/dialog/types.d.ts +17 -0
- package/emoji/types.d.ts +5 -0
- package/emoji-picker/types.d.ts +9 -0
- package/field/types.d.ts +14 -0
- package/file-drop/types.d.ts +21 -0
- package/file-status/types.d.ts +21 -0
- package/flag/types.d.ts +4 -0
- package/grid/types.d.ts +16 -1
- package/help-tooltip/types.d.ts +5 -1
- package/horizontal-stepper/types.d.ts +30 -0
- package/horizontal-stepper-item/types.d.ts +23 -0
- package/icon/types.d.ts +7 -0
- package/inline-alert/types.d.ts +22 -0
- package/input/types.d.ts +27 -0
- package/link/types.d.ts +18 -0
- package/list-item/types.d.ts +7 -1
- package/package.json +4 -1
- package/pagination/types.d.ts +16 -0
- package/persistent-overlay/types.d.ts +4 -0
- package/popover/index.js +16 -1
- package/popover/types.d.ts +7 -0
- package/progress/types.d.ts +6 -0
- package/progress-stepper-item/types.d.ts +28 -0
- package/radio-option/types.d.ts +28 -0
- package/rich-text/types.d.ts +20 -0
- package/rich-textarea/types.d.ts +20 -0
- package/segment/types.d.ts +10 -0
- package/segment-collapse/types.d.ts +4 -0
- package/segmented-control-option/types.d.ts +20 -0
- package/segmented-icon-control-option/types.d.ts +16 -0
- package/select-button/types.d.ts +25 -0
- package/select-menu/types.d.ts +6 -0
- package/select-menu-option/types.d.ts +16 -0
- package/skeleton/types.d.ts +7 -0
- package/skeleton-item/types.d.ts +13 -0
- package/spinner/types.d.ts +5 -0
- package/table-cell/types.d.ts +4 -0
- package/table-head-cell/types.d.ts +8 -0
- package/table-row/types.d.ts +7 -0
- package/tabs/types.d.ts +4 -0
- package/tabs-icon-option/types.d.ts +14 -0
- package/tabs-option/types.d.ts +19 -0
- package/tag/types.d.ts +15 -0
- package/text/types.d.ts +14 -0
- package/textarea/types.d.ts +14 -0
- package/tile-control/types.d.ts +4 -0
- package/tile-control-option/types.d.ts +29 -0
- package/time-picker/types.d.ts +23 -0
- package/title/types.d.ts +11 -0
- package/toast/types.d.ts +20 -0
- package/toggle/types.d.ts +18 -0
- package/tooltip/types.d.ts +11 -0
- package/vertical-stepper/types.d.ts +22 -0
- package/vertical-stepper-item/types.d.ts +27 -0
|
@@ -21,4 +21,27 @@ export type TSinchHorizontalStepperItemReact = TSinchElementReact<TSinchHorizont
|
|
|
21
21
|
description?: string;
|
|
22
22
|
/** Status */
|
|
23
23
|
status?: TSinchHorizontalStepperStatusType;
|
|
24
|
+
} & {
|
|
25
|
+
style?: {
|
|
26
|
+
'--sinch-comp-horizontal-stepper-color-background-default'?: string;
|
|
27
|
+
'--sinch-comp-horizontal-stepper-color-background-active'?: string;
|
|
28
|
+
'--sinch-comp-horizontal-stepper-color-background-visited'?: string;
|
|
29
|
+
'--sinch-comp-horizontal-stepper-color-background-visited-error'?: string;
|
|
30
|
+
'--sinch-comp-horizontal-stepper-color-background-visited-skip'?: string;
|
|
31
|
+
'--sinch-comp-horizontal-stepper-color-border-default'?: string;
|
|
32
|
+
'--sinch-comp-horizontal-stepper-color-border-active'?: string;
|
|
33
|
+
'--sinch-comp-horizontal-stepper-color-border-visited'?: string;
|
|
34
|
+
'--sinch-comp-horizontal-stepper-color-border-visited-error'?: string;
|
|
35
|
+
'--sinch-comp-horizontal-stepper-color-border-visited-skip'?: string;
|
|
36
|
+
'--sinch-comp-horizontal-stepper-color-icon-default'?: string;
|
|
37
|
+
'--sinch-comp-horizontal-stepper-color-icon-active'?: string;
|
|
38
|
+
'--sinch-comp-horizontal-stepper-color-icon-visited'?: string;
|
|
39
|
+
'--sinch-comp-horizontal-stepper-color-icon-visited-error'?: string;
|
|
40
|
+
'--sinch-comp-horizontal-stepper-color-icon-visited-skip'?: string;
|
|
41
|
+
'--sinch-comp-horizontal-stepper-color-label'?: string;
|
|
42
|
+
'--sinch-comp-horizontal-stepper-color-description'?: string;
|
|
43
|
+
'--sinch-sys-font-desktop-title-s'?: string;
|
|
44
|
+
'--sinch-global-size-icon'?: string;
|
|
45
|
+
'--sinch-global-color-text'?: string;
|
|
46
|
+
};
|
|
24
47
|
};
|
package/icon/types.d.ts
CHANGED
|
@@ -28,7 +28,14 @@ export type TSinchIconReact = TSinchElementReact<TSinchIconElement> & ({
|
|
|
28
28
|
name: TSinchIcons;
|
|
29
29
|
}) & {
|
|
30
30
|
style?: {
|
|
31
|
+
'--sinch-comp-icon-font-weight'?: string;
|
|
32
|
+
'--sinch-comp-icon-font-family'?: string;
|
|
33
|
+
'--sinch-comp-icon-font-feature-settings'?: string;
|
|
34
|
+
'--sinch-comp-icon-font-family-zero-to-d'?: string;
|
|
35
|
+
'--sinch-comp-icon-font-family-e-to-o'?: string;
|
|
36
|
+
'--sinch-comp-icon-font-family-p-to-z'?: string;
|
|
31
37
|
'--sinch-global-size-icon'?: string;
|
|
32
38
|
'--sinch-global-color-icon'?: string;
|
|
39
|
+
'--sinch-sys-color-text-default'?: string;
|
|
33
40
|
};
|
|
34
41
|
};
|
package/inline-alert/types.d.ts
CHANGED
|
@@ -12,4 +12,26 @@ export type TSinchInlineAlertReact = TSinchElementReact<TSinchInlineAlertElement
|
|
|
12
12
|
type: TSinchInlineAlertType;
|
|
13
13
|
text?: string;
|
|
14
14
|
caption: string;
|
|
15
|
+
} & {
|
|
16
|
+
style?: {
|
|
17
|
+
'--sinch-comp-inline-alert-shape-radius'?: string;
|
|
18
|
+
'--sinch-comp-inline-alert-color-success-default-background'?: string;
|
|
19
|
+
'--sinch-comp-inline-alert-color-success-default-text'?: string;
|
|
20
|
+
'--sinch-comp-inline-alert-color-success-default-icon'?: string;
|
|
21
|
+
'--sinch-comp-inline-alert-color-warning-default-background'?: string;
|
|
22
|
+
'--sinch-comp-inline-alert-color-warning-default-text'?: string;
|
|
23
|
+
'--sinch-comp-inline-alert-color-warning-default-icon'?: string;
|
|
24
|
+
'--sinch-comp-inline-alert-color-error-default-background'?: string;
|
|
25
|
+
'--sinch-comp-inline-alert-color-error-default-text'?: string;
|
|
26
|
+
'--sinch-comp-inline-alert-color-error-default-icon'?: string;
|
|
27
|
+
'--sinch-comp-inline-alert-color-info-default-background'?: string;
|
|
28
|
+
'--sinch-comp-inline-alert-color-info-default-text'?: string;
|
|
29
|
+
'--sinch-comp-inline-alert-color-info-default-icon'?: string;
|
|
30
|
+
'--sinch-comp-inline-alert-font-title'?: string;
|
|
31
|
+
'--sinch-comp-inline-alert-font-body'?: string;
|
|
32
|
+
'--sinch-comp-title-font'?: string;
|
|
33
|
+
'--sinch-comp-rich-text-font'?: string;
|
|
34
|
+
'--sinch-global-color-text'?: string;
|
|
35
|
+
'--sinch-global-color-icon'?: string;
|
|
36
|
+
};
|
|
15
37
|
};
|
package/input/types.d.ts
CHANGED
|
@@ -88,4 +88,31 @@ export type TSinchInputReact = TSinchElementReact<TSinchInputElement> & {
|
|
|
88
88
|
'on-wheel'?: (e: CustomEvent<void> & {
|
|
89
89
|
target: TSinchInputElement;
|
|
90
90
|
}) => void;
|
|
91
|
+
} & {
|
|
92
|
+
style?: {
|
|
93
|
+
'--sinch-comp-input-size-container-l'?: string;
|
|
94
|
+
'--sinch-comp-input-size-container-m'?: string;
|
|
95
|
+
'--sinch-comp-input-size-container-s'?: string;
|
|
96
|
+
'--sinch-comp-input-size-icon-l'?: string;
|
|
97
|
+
'--sinch-comp-input-size-icon-m'?: string;
|
|
98
|
+
'--sinch-comp-input-size-icon-s'?: string;
|
|
99
|
+
'--sinch-comp-input-shape-radius-size-l'?: string;
|
|
100
|
+
'--sinch-comp-input-shape-radius-size-m'?: string;
|
|
101
|
+
'--sinch-comp-input-shape-radius-size-s'?: string;
|
|
102
|
+
'--sinch-comp-input-font-input'?: string;
|
|
103
|
+
'--sinch-comp-input-font-placeholder'?: string;
|
|
104
|
+
'--sinch-sys-font-body-monospace-m'?: string;
|
|
105
|
+
'--sinch-comp-input-color-default-background-initial'?: string;
|
|
106
|
+
'--sinch-comp-input-color-default-text-initial'?: string;
|
|
107
|
+
'--sinch-comp-input-color-default-text-placeholder'?: string;
|
|
108
|
+
'--sinch-comp-input-color-default-border-initial'?: string;
|
|
109
|
+
'--sinch-comp-input-color-default-border-focus'?: string;
|
|
110
|
+
'--sinch-comp-input-color-default-icon-initial'?: string;
|
|
111
|
+
'--sinch-comp-input-color-disabled-text-initial'?: string;
|
|
112
|
+
'--sinch-comp-input-color-disabled-border-initial'?: string;
|
|
113
|
+
'--sinch-comp-input-color-disabled-icon-initial'?: string;
|
|
114
|
+
'--sinch-comp-input-color-invalid-border-initial'?: string;
|
|
115
|
+
'--sinch-global-size-icon'?: string;
|
|
116
|
+
'--sinch-global-color-icon'?: string;
|
|
117
|
+
};
|
|
91
118
|
};
|
package/link/types.d.ts
CHANGED
|
@@ -56,4 +56,22 @@ export type TSinchLinkReact = TSinchElementReact<TSinchLinkElement> & {
|
|
|
56
56
|
'on-focus'?: (e: CustomEvent<void>) => void;
|
|
57
57
|
/** Blur even handler */
|
|
58
58
|
'on-blur'?: (e: CustomEvent<void>) => void;
|
|
59
|
+
} & {
|
|
60
|
+
style?: {
|
|
61
|
+
'--sinch-comp-link-default-font-initial'?: string;
|
|
62
|
+
'--sinch-comp-link-default-text-decoration-initial'?: string;
|
|
63
|
+
'--sinch-comp-link-default-text-decoration-hover'?: string;
|
|
64
|
+
'--sinch-comp-link-default-text-decoration-disabled'?: string;
|
|
65
|
+
'--sinch-comp-link-standalone-font-initial'?: string;
|
|
66
|
+
'--sinch-comp-link-color-default-text-initial'?: string;
|
|
67
|
+
'--sinch-comp-link-color-default-text-hover'?: string;
|
|
68
|
+
'--sinch-comp-link-color-default-icon-initial'?: string;
|
|
69
|
+
'--sinch-comp-link-color-default-icon-hover'?: string;
|
|
70
|
+
'--sinch-comp-link-color-default-outline-focus'?: string;
|
|
71
|
+
'--sinch-comp-link-color-disabled-text-initial'?: string;
|
|
72
|
+
'--sinch-comp-link-color-disabled-icon-initial'?: string;
|
|
73
|
+
'--sinch-global-color-icon'?: string;
|
|
74
|
+
'--sinch-global-size-icon'?: string;
|
|
75
|
+
'--sinch-global-text-white-space'?: string;
|
|
76
|
+
};
|
|
59
77
|
};
|
package/list-item/types.d.ts
CHANGED
|
@@ -1,3 +1,9 @@
|
|
|
1
1
|
import type { TSinchElementReact } from '../types';
|
|
2
2
|
export type TSinchListItemElement = HTMLElement;
|
|
3
|
-
export type TSinchListItemReact = TSinchElementReact<TSinchListItemElement
|
|
3
|
+
export type TSinchListItemReact = TSinchElementReact<TSinchListItemElement> & {
|
|
4
|
+
style?: {
|
|
5
|
+
'--sinch-comp-list-color-default-background-initial'?: string;
|
|
6
|
+
'--sinch-comp-list-color-default-background-hover'?: string;
|
|
7
|
+
'--sinch-comp-list-color-default-border-initial'?: string;
|
|
8
|
+
};
|
|
9
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nectary/components",
|
|
3
|
-
"version": "4.6.
|
|
3
|
+
"version": "4.6.6",
|
|
4
4
|
"files": [
|
|
5
5
|
"**/*/*.css",
|
|
6
6
|
"**/*/*.json",
|
|
@@ -32,5 +32,8 @@
|
|
|
32
32
|
"@types/react": "^18.2.21",
|
|
33
33
|
"babel-plugin-html-inline-minifier": "workspace:*",
|
|
34
34
|
"typescript": "^5.2.2"
|
|
35
|
+
},
|
|
36
|
+
"peerDependencies": {
|
|
37
|
+
"@nectary/theme-base": "1.4.0"
|
|
35
38
|
}
|
|
36
39
|
}
|
package/pagination/types.d.ts
CHANGED
|
@@ -13,4 +13,20 @@ export type TSinchPaginationReact = TSinchElementReact<TSinchPaginationElement>
|
|
|
13
13
|
value: number;
|
|
14
14
|
max: number;
|
|
15
15
|
'on-change': (e: CustomEvent<number>) => void;
|
|
16
|
+
} & {
|
|
17
|
+
style?: {
|
|
18
|
+
'--sinch-comp-pagination-shape-radius'?: string;
|
|
19
|
+
'--sinch-comp-pagination-font-default-page-number'?: string;
|
|
20
|
+
'--sinch-comp-pagination-font-checked-page-number'?: string;
|
|
21
|
+
'--sinch-comp-pagination-color-default-icon-default'?: string;
|
|
22
|
+
'--sinch-comp-pagination-color-default-text-initial'?: string;
|
|
23
|
+
'--sinch-comp-pagination-color-default-background-initial'?: string;
|
|
24
|
+
'--sinch-comp-pagination-color-default-background-hover'?: string;
|
|
25
|
+
'--sinch-comp-pagination-color-default-outline-focus'?: string;
|
|
26
|
+
'--sinch-comp-pagination-color-checked-background-initial'?: string;
|
|
27
|
+
'--sinch-comp-pagination-color-checked-background-hover'?: string;
|
|
28
|
+
'--sinch-comp-pagination-color-disabled-icon-initial'?: string;
|
|
29
|
+
'--sinch-global-color-icon'?: string;
|
|
30
|
+
'--sinch-icon-size'?: string;
|
|
31
|
+
};
|
|
16
32
|
};
|
|
@@ -19,4 +19,8 @@ export type TSinchPersistentOverlayReact = TSinchElementReact<TSinchPersistentOv
|
|
|
19
19
|
'aria-label': TSinchDialogReact['aria-label'];
|
|
20
20
|
/** visibility altered event handler */
|
|
21
21
|
'on-visibility-altered': (e: CustomEvent) => void;
|
|
22
|
+
} & {
|
|
23
|
+
style?: {
|
|
24
|
+
'--sinch-dialog-close-button-display'?: string;
|
|
25
|
+
};
|
|
22
26
|
};
|
package/popover/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import '../pop';
|
|
2
2
|
import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, updateLiteralAttribute, updateBooleanAttribute, NectaryElement, updateAttribute, getReactEventHandler, isAttrTrue, setClass, rectOverlap, subscribeContext, isAttrEqual } from '../utils';
|
|
3
|
-
const templateHTML = '<style>:host{display:contents}#content-wrapper{position:relative;padding-top:4px}:host([tip]) #content-wrapper{padding-top:12px;filter:drop-shadow(var(--sinch-comp-popover-shadow))}:host([orientation^=top]) #content-wrapper{padding-top:0;padding-bottom:4px}:host([orientation^=top][tip]) #content-wrapper{padding-top:0;padding-bottom:12px}#content{background-color:var(--sinch-comp-popover-color-default-background-initial);border:1px solid var(--sinch-comp-popover-color-default-border-initial);border-radius:var(--sinch-comp-popover-shape-radius);box-shadow:var(--sinch-comp-popover-shadow);overflow:hidden}:host([tip]) #content{box-shadow:none}#tip{position:absolute;left:50%;top:13px;transform:translateX(-50%) rotate(180deg);transform-origin:top center;fill:var(--sinch-comp-popover-color-default-background-initial);stroke:var(--sinch-comp-popover-color-default-border-initial);stroke-linecap:square;pointer-events:none;display:none}:host([orientation^=top]) #tip{transform:translateX(-50%) rotate(0);top:calc(100% - 13px)}:host([tip]) #tip:not(.hidden){display:block}</style><sinch-pop id="pop" inset="4"><slot name="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><slot name="content"></slot></div><svg id="tip" width="16" height="9" aria-hidden="true"><path d="m0 0 8 8 8 -8"/></svg></div></sinch-pop>';
|
|
3
|
+
const templateHTML = '<style>:host{display:contents}#content-wrapper{position:relative;padding-top:4px;width:fit-content;min-width:100%}:host([tip]) #content-wrapper{padding-top:12px;filter:drop-shadow(var(--sinch-comp-popover-shadow))}:host([orientation^=top]) #content-wrapper{padding-top:0;padding-bottom:4px}:host([orientation^=top][tip]) #content-wrapper{padding-top:0;padding-bottom:12px}#content{background-color:var(--sinch-comp-popover-color-default-background-initial);border:1px solid var(--sinch-comp-popover-color-default-border-initial);border-radius:var(--sinch-comp-popover-shape-radius);box-shadow:var(--sinch-comp-popover-shadow);overflow:hidden}:host([tip]) #content{box-shadow:none}#tip{position:absolute;left:50%;top:13px;transform:translateX(-50%) rotate(180deg);transform-origin:top center;fill:var(--sinch-comp-popover-color-default-background-initial);stroke:var(--sinch-comp-popover-color-default-border-initial);stroke-linecap:square;pointer-events:none;display:none}:host([orientation^=top]) #tip{transform:translateX(-50%) rotate(0);top:calc(100% - 13px)}:host([tip]) #tip:not(.hidden){display:block}</style><sinch-pop id="pop" inset="4"><slot name="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><slot name="content"></slot></div><svg id="tip" width="16" height="9" aria-hidden="true"><path d="m0 0 8 8 8 -8"/></svg></div></sinch-pop>';
|
|
4
4
|
import { getPopOrientation, orientationValues } from './utils';
|
|
5
5
|
const TIP_SIZE = 16;
|
|
6
6
|
const template = document.createElement('template');
|
|
@@ -10,6 +10,7 @@ defineCustomElement('sinch-popover', class extends NectaryElement {
|
|
|
10
10
|
#$content;
|
|
11
11
|
#$tip;
|
|
12
12
|
#controller = null;
|
|
13
|
+
#resizeObserver = null;
|
|
13
14
|
constructor() {
|
|
14
15
|
super();
|
|
15
16
|
const shadowRoot = this.attachShadow();
|
|
@@ -31,10 +32,18 @@ defineCustomElement('sinch-popover', class extends NectaryElement {
|
|
|
31
32
|
});
|
|
32
33
|
subscribeContext(this.#$content, 'visibility', this.#onContextVisibility, signal);
|
|
33
34
|
updateAttribute(this.#$pop, 'orientation', getPopOrientation(this.orientation));
|
|
35
|
+
this.#resizeObserver = new ResizeObserver(() => {
|
|
36
|
+
if (this.#$pop.open) {
|
|
37
|
+
this.#updateContentMaxWidth();
|
|
38
|
+
}
|
|
39
|
+
});
|
|
40
|
+
this.#resizeObserver.observe(document.body);
|
|
34
41
|
}
|
|
35
42
|
disconnectedCallback() {
|
|
36
43
|
this.#controller.abort();
|
|
37
44
|
this.#controller = null;
|
|
45
|
+
this.#resizeObserver?.disconnect();
|
|
46
|
+
this.#resizeObserver = null;
|
|
38
47
|
}
|
|
39
48
|
static get observedAttributes() {
|
|
40
49
|
return ['orientation', 'open', 'modal', 'tip', 'aria-label', 'aria-description'];
|
|
@@ -119,6 +128,7 @@ defineCustomElement('sinch-popover', class extends NectaryElement {
|
|
|
119
128
|
#onContextVisibility = e => {
|
|
120
129
|
if (e.detail) {
|
|
121
130
|
this.#updateTipOrientation();
|
|
131
|
+
this.#updateContentMaxWidth();
|
|
122
132
|
} else {
|
|
123
133
|
this.#resetTipOrientation();
|
|
124
134
|
}
|
|
@@ -143,4 +153,9 @@ defineCustomElement('sinch-popover', class extends NectaryElement {
|
|
|
143
153
|
this.#$tip.style.left = `${xPos}px`;
|
|
144
154
|
setClass(this.#$tip, 'hidden', rectOverlap(targetRect, contentRect));
|
|
145
155
|
};
|
|
156
|
+
#updateContentMaxWidth = () => {
|
|
157
|
+
const contentRect = this.#$content.getBoundingClientRect();
|
|
158
|
+
const availableSpace = window.innerWidth - contentRect.left - 16;
|
|
159
|
+
this.#$content.style.maxWidth = `${availableSpace}px`;
|
|
160
|
+
};
|
|
146
161
|
});
|
package/popover/types.d.ts
CHANGED
|
@@ -35,4 +35,11 @@ export type TSinchPopoverReact = TSinchElementReact<TSinchPopoverElement> & {
|
|
|
35
35
|
'aria-label': string;
|
|
36
36
|
/** Close event handler */
|
|
37
37
|
'on-close'?: (e: CustomEvent<void>) => void;
|
|
38
|
+
} & {
|
|
39
|
+
style?: {
|
|
40
|
+
'--sinch-comp-popover-shape-radius'?: string;
|
|
41
|
+
'--sinch-comp-popover-shadow'?: string;
|
|
42
|
+
'--sinch-comp-popover-color-default-background-initial'?: string;
|
|
43
|
+
'--sinch-comp-popover-color-default-border-initial'?: string;
|
|
44
|
+
};
|
|
38
45
|
};
|
package/progress/types.d.ts
CHANGED
|
@@ -9,4 +9,10 @@ export type TSinchProgressReact = TSinchElementReact<TSinchProgressElement> & {
|
|
|
9
9
|
value: number;
|
|
10
10
|
detailed?: boolean;
|
|
11
11
|
'aria-label': string;
|
|
12
|
+
} & {
|
|
13
|
+
style?: {
|
|
14
|
+
'--sinch-comp-progress-color-default-background-initial'?: string;
|
|
15
|
+
'--sinch-comp-progress-color-default-bar-initial'?: string;
|
|
16
|
+
'--sinch-comp-progress-color-default-text-initial'?: string;
|
|
17
|
+
};
|
|
12
18
|
};
|
|
@@ -20,4 +20,32 @@ export type TSinchProgressStepperItemReact = TSinchElementReact<TSinchProgressSt
|
|
|
20
20
|
text: string;
|
|
21
21
|
/** Invalid */
|
|
22
22
|
invalid?: boolean;
|
|
23
|
+
} & {
|
|
24
|
+
style?: {
|
|
25
|
+
'--sinch-comp-progress-stepper-step-shape-radius'?: string;
|
|
26
|
+
'--sinch-comp-progress-stepper-step-color-incomplete-background-hover'?: string;
|
|
27
|
+
'--sinch-comp-progress-stepper-step-color-incomplete-label-default'?: string;
|
|
28
|
+
'--sinch-comp-progress-stepper-step-color-incomplete-current-label-default'?: string;
|
|
29
|
+
'--sinch-comp-progress-stepper-step-color-incomplete-progress-background'?: string;
|
|
30
|
+
'--sinch-comp-progress-stepper-step-color-incomplete-progress-bar'?: string;
|
|
31
|
+
'--sinch-comp-progress-stepper-step-color-complete-background-hover'?: string;
|
|
32
|
+
'--sinch-comp-progress-stepper-step-color-complete-label-default'?: string;
|
|
33
|
+
'--sinch-comp-progress-stepper-step-color-complete-current-label-default'?: string;
|
|
34
|
+
'--sinch-comp-progress-stepper-step-color-complete-progress-background'?: string;
|
|
35
|
+
'--sinch-comp-progress-stepper-step-color-complete-progress-bar'?: string;
|
|
36
|
+
'--sinch-comp-progress-stepper-step-color-invalid-background-hover'?: string;
|
|
37
|
+
'--sinch-comp-progress-stepper-step-color-invalid-label-default'?: string;
|
|
38
|
+
'--sinch-comp-progress-stepper-step-color-invalid-icon-default'?: string;
|
|
39
|
+
'--sinch-comp-progress-stepper-step-color-invalid-progress-background'?: string;
|
|
40
|
+
'--sinch-comp-progress-stepper-step-color-inactive-label-default'?: string;
|
|
41
|
+
'--sinch-comp-progress-stepper-step-color-inactive-progress-background'?: string;
|
|
42
|
+
'--sinch-comp-progress-stepper-step-color-outline-focus'?: string;
|
|
43
|
+
'--sinch-comp-progress-stepper-step-font-incomplete-label'?: string;
|
|
44
|
+
'--sinch-comp-progress-stepper-step-font-complete-label'?: string;
|
|
45
|
+
'--sinch-comp-progress-stepper-step-font-inactive-label'?: string;
|
|
46
|
+
'--sinch-comp-progress-stepper-step-font-invalid-label'?: string;
|
|
47
|
+
'--sinch-comp-progress-stepper-step-font-incomplete-current-label'?: string;
|
|
48
|
+
'--sinch-comp-progress-stepper-step-font-complete-current-label'?: string;
|
|
49
|
+
'--sinch-comp-progress-stepper-step-font-invalid-current-label'?: string;
|
|
50
|
+
};
|
|
23
51
|
};
|
package/radio-option/types.d.ts
CHANGED
|
@@ -15,4 +15,32 @@ export type TSinchRadioOptionReact = TSinchElementReact<TSinchRadioOptionElement
|
|
|
15
15
|
disabled?: boolean;
|
|
16
16
|
text: string;
|
|
17
17
|
'aria-label': string;
|
|
18
|
+
} & {
|
|
19
|
+
style?: {
|
|
20
|
+
'--sinch-comp-radio-color-default-background-initial'?: string;
|
|
21
|
+
'--sinch-comp-radio-color-default-background-hover'?: string;
|
|
22
|
+
'--sinch-comp-radio-color-default-background-active'?: string;
|
|
23
|
+
'--sinch-comp-radio-color-default-border-initial'?: string;
|
|
24
|
+
'--sinch-comp-radio-color-default-border-hover'?: string;
|
|
25
|
+
'--sinch-comp-radio-color-default-border-active'?: string;
|
|
26
|
+
'--sinch-comp-radio-color-default-label-initial'?: string;
|
|
27
|
+
'--sinch-comp-radio-color-default-outline-focus'?: string;
|
|
28
|
+
'--sinch-comp-radio-color-checked-border-initial'?: string;
|
|
29
|
+
'--sinch-comp-radio-color-checked-border-hover'?: string;
|
|
30
|
+
'--sinch-comp-radio-color-checked-border-active'?: string;
|
|
31
|
+
'--sinch-comp-radio-color-checked-knob-initial'?: string;
|
|
32
|
+
'--sinch-comp-radio-color-checked-knob-hover'?: string;
|
|
33
|
+
'--sinch-comp-radio-color-checked-knob-active'?: string;
|
|
34
|
+
'--sinch-comp-radio-color-invalid-border-initial'?: string;
|
|
35
|
+
'--sinch-comp-radio-color-invalid-border-hover'?: string;
|
|
36
|
+
'--sinch-comp-radio-color-invalid-border-active'?: string;
|
|
37
|
+
'--sinch-comp-radio-color-invalid-label-initial'?: string;
|
|
38
|
+
'--sinch-comp-radio-color-disabled-background-initial'?: string;
|
|
39
|
+
'--sinch-comp-radio-color-disabled-border-initial'?: string;
|
|
40
|
+
'--sinch-comp-radio-color-disabled-label-initial'?: string;
|
|
41
|
+
'--sinch-comp-radio-color-checked-disabled-border-initial'?: string;
|
|
42
|
+
'--sinch-comp-radio-color-checked-disabled-knob-initial'?: string;
|
|
43
|
+
'--sinch-comp-radio-color-checked-disabled-label-initial'?: string;
|
|
44
|
+
'--sinch-comp-radio-font-label'?: string;
|
|
45
|
+
};
|
|
18
46
|
};
|
package/rich-text/types.d.ts
CHANGED
|
@@ -9,4 +9,24 @@ export type TSinchRichTextElement = HTMLElement & {
|
|
|
9
9
|
export type TSinchRichTextReact = TSinchElementReact<TSinchRichTextElement> & {
|
|
10
10
|
size?: TSinchTextType;
|
|
11
11
|
text: string;
|
|
12
|
+
} & {
|
|
13
|
+
style?: {
|
|
14
|
+
'--sinch-comp-rich-text-font'?: string;
|
|
15
|
+
'--sinch-sys-font-body-m'?: string;
|
|
16
|
+
'--sinch-sys-font-body-s'?: string;
|
|
17
|
+
'--sinch-sys-font-body-xs'?: string;
|
|
18
|
+
'--sinch-sys-font-body-xxs'?: string;
|
|
19
|
+
'--sinch-ref-typography-font-weight-700'?: string;
|
|
20
|
+
'--sinch-comp-link-default-font-initial'?: string;
|
|
21
|
+
'--sinch-comp-code-tag-font-text'?: string;
|
|
22
|
+
'--sinch-sys-color-text-default'?: string;
|
|
23
|
+
'--sinch-comp-link-color-default-text-initial'?: string;
|
|
24
|
+
'--sinch-comp-link-color-default-text-hover'?: string;
|
|
25
|
+
'--sinch-comp-code-tag-color-default-border-initial'?: string;
|
|
26
|
+
'--sinch-comp-code-tag-color-default-background-initial'?: string;
|
|
27
|
+
'--sinch-comp-code-tag-shape-radius'?: string;
|
|
28
|
+
'--sinch-comp-emoji-vertical-align'?: string;
|
|
29
|
+
'--sinch-global-color-text'?: string;
|
|
30
|
+
'--sinch-global-size-icon'?: string;
|
|
31
|
+
};
|
|
12
32
|
};
|
package/rich-textarea/types.d.ts
CHANGED
|
@@ -45,4 +45,24 @@ export type TSinchRichTextareaReact = TSinchElementReact<TSinchRichTextareaEleme
|
|
|
45
45
|
'on-focus'?: (e: CustomEvent<void>) => void;
|
|
46
46
|
/** Blur handler */
|
|
47
47
|
'on-blur'?: (e: CustomEvent<void>) => void;
|
|
48
|
+
} & {
|
|
49
|
+
style?: {
|
|
50
|
+
'--sinch-comp-textarea-shape-radius'?: string;
|
|
51
|
+
'--sinch-comp-code-tag-shape-radius'?: string;
|
|
52
|
+
'--sinch-comp-textarea-color-default-background-initial'?: string;
|
|
53
|
+
'--sinch-comp-textarea-color-default-text-initial'?: string;
|
|
54
|
+
'--sinch-comp-textarea-color-default-text-placeholder'?: string;
|
|
55
|
+
'--sinch-comp-textarea-color-default-border-initial'?: string;
|
|
56
|
+
'--sinch-comp-textarea-color-default-border-focus'?: string;
|
|
57
|
+
'--sinch-comp-textarea-color-invalid-border-initial'?: string;
|
|
58
|
+
'--sinch-comp-textarea-color-disabled-text-initial'?: string;
|
|
59
|
+
'--sinch-comp-textarea-color-disabled-border-initial'?: string;
|
|
60
|
+
'--sinch-comp-code-tag-color-default-text-initial'?: string;
|
|
61
|
+
'--sinch-comp-code-tag-color-default-border-initial'?: string;
|
|
62
|
+
'--sinch-comp-code-tag-color-default-background-initial'?: string;
|
|
63
|
+
'--sinch-comp-link-color-default-text-initial'?: string;
|
|
64
|
+
'--sinch-comp-textarea-font-input'?: string;
|
|
65
|
+
'--sinch-comp-code-tag-font-text'?: string;
|
|
66
|
+
'--sinch-comp-link-default-font-initial'?: string;
|
|
67
|
+
};
|
|
48
68
|
};
|
package/segment/types.d.ts
CHANGED
|
@@ -13,4 +13,14 @@ export type TSinchSegmentReact = TSinchElementReact<TSinchSegmentElement> & {
|
|
|
13
13
|
caption: string;
|
|
14
14
|
collapsed?: boolean;
|
|
15
15
|
size?: TSinchSize;
|
|
16
|
+
} & {
|
|
17
|
+
style?: {
|
|
18
|
+
'--sinch-comp-segment-shape-radius'?: string;
|
|
19
|
+
'--sinch-comp-segment-color-default-border-initial'?: string;
|
|
20
|
+
'--sinch-comp-segment-color-default-background-initial'?: string;
|
|
21
|
+
'--sinch-comp-segment-font-size-m-title'?: string;
|
|
22
|
+
'--sinch-comp-segment-font-size-l-title'?: string;
|
|
23
|
+
'--sinch-comp-segment-font-size-s-title'?: string;
|
|
24
|
+
'--sinch-global-size-icon'?: string;
|
|
25
|
+
};
|
|
16
26
|
};
|
|
@@ -16,4 +16,24 @@ export type TSinchSegmentedControlOptionReact = TSinchElementReact<TSinchSegment
|
|
|
16
16
|
'aria-label': string;
|
|
17
17
|
'on-focus'?: (e: CustomEvent<void>) => void;
|
|
18
18
|
'on-blur'?: (e: CustomEvent<void>) => void;
|
|
19
|
+
} & {
|
|
20
|
+
style?: {
|
|
21
|
+
'--sinch-comp-segmented-control-shape-radius'?: string;
|
|
22
|
+
'--sinch-comp-segmented-control-color-default-text-initial'?: string;
|
|
23
|
+
'--sinch-comp-segmented-control-color-default-icon-initial'?: string;
|
|
24
|
+
'--sinch-comp-segmented-control-color-default-border-initial'?: string;
|
|
25
|
+
'--sinch-comp-segmented-control-color-default-background-initial'?: string;
|
|
26
|
+
'--sinch-comp-segmented-control-color-default-background-hover'?: string;
|
|
27
|
+
'--sinch-comp-segmented-control-color-default-outline-focus'?: string;
|
|
28
|
+
'--sinch-comp-segmented-control-color-checked-text-initial'?: string;
|
|
29
|
+
'--sinch-comp-segmented-control-color-checked-icon-initial'?: string;
|
|
30
|
+
'--sinch-comp-segmented-control-color-checked-border-initial'?: string;
|
|
31
|
+
'--sinch-comp-segmented-control-color-checked-background-initial'?: string;
|
|
32
|
+
'--sinch-comp-segmented-control-color-disabled-text-initial'?: string;
|
|
33
|
+
'--sinch-comp-segmented-control-color-disabled-icon-initial'?: string;
|
|
34
|
+
'--sinch-comp-segmented-control-color-disabled-border-initial'?: string;
|
|
35
|
+
'--sinch-comp-segmented-control-color-disabled-background-initial'?: string;
|
|
36
|
+
'--sinch-comp-segmented-control-font-label'?: string;
|
|
37
|
+
'--sinch-comp-segmented-control-size-icon'?: string;
|
|
38
|
+
};
|
|
19
39
|
};
|
|
@@ -13,4 +13,20 @@ export type TSinchSegmentedIconControlOptionReact = TSinchElementReact<TSinchSeg
|
|
|
13
13
|
'aria-label': string;
|
|
14
14
|
'on-focus'?: (e: CustomEvent<void>) => void;
|
|
15
15
|
'on-blur'?: (e: CustomEvent<void>) => void;
|
|
16
|
+
} & {
|
|
17
|
+
style?: {
|
|
18
|
+
'--sinch-comp-segmented-control-shape-radius'?: string;
|
|
19
|
+
'--sinch-comp-segmented-control-color-default-icon-initial'?: string;
|
|
20
|
+
'--sinch-comp-segmented-control-color-default-border-initial'?: string;
|
|
21
|
+
'--sinch-comp-segmented-control-color-default-background-initial'?: string;
|
|
22
|
+
'--sinch-comp-segmented-control-color-default-background-hover'?: string;
|
|
23
|
+
'--sinch-comp-segmented-control-color-default-outline-focus'?: string;
|
|
24
|
+
'--sinch-comp-segmented-control-color-checked-icon-initial'?: string;
|
|
25
|
+
'--sinch-comp-segmented-control-color-checked-border-initial'?: string;
|
|
26
|
+
'--sinch-comp-segmented-control-color-checked-background-initial'?: string;
|
|
27
|
+
'--sinch-comp-segmented-control-color-disabled-icon-initial'?: string;
|
|
28
|
+
'--sinch-comp-segmented-control-color-disabled-border-initial'?: string;
|
|
29
|
+
'--sinch-comp-segmented-control-color-disabled-background-initial'?: string;
|
|
30
|
+
'--sinch-comp-segmented-control-size-icon'?: string;
|
|
31
|
+
};
|
|
16
32
|
};
|
package/select-button/types.d.ts
CHANGED
|
@@ -47,4 +47,29 @@ export type TSinchSelectButtonReact = TSinchElementReact<TSinchSelectButtonEleme
|
|
|
47
47
|
'on-focus'?: (e: CustomEvent<void>) => void;
|
|
48
48
|
/** Blur handler */
|
|
49
49
|
'on-blur'?: (e: CustomEvent<void>) => void;
|
|
50
|
+
} & {
|
|
51
|
+
style?: {
|
|
52
|
+
'--sinch-comp-select-button-size-container-l'?: string;
|
|
53
|
+
'--sinch-comp-select-button-size-icon-l'?: string;
|
|
54
|
+
'--sinch-comp-select-button-shape-radius-size-l'?: string;
|
|
55
|
+
'--sinch-comp-select-button-size-container-m'?: string;
|
|
56
|
+
'--sinch-comp-select-button-size-icon-m'?: string;
|
|
57
|
+
'--sinch-comp-select-button-shape-radius-size-m'?: string;
|
|
58
|
+
'--sinch-comp-select-button-size-container-s'?: string;
|
|
59
|
+
'--sinch-comp-select-button-size-icon-s'?: string;
|
|
60
|
+
'--sinch-comp-select-button-shape-radius-size-s'?: string;
|
|
61
|
+
'--sinch-comp-select-button-color-default-background-initial'?: string;
|
|
62
|
+
'--sinch-comp-select-button-color-default-icon-initial'?: string;
|
|
63
|
+
'--sinch-comp-select-button-color-default-text-initial'?: string;
|
|
64
|
+
'--sinch-comp-select-button-color-default-placeholder-initial'?: string;
|
|
65
|
+
'--sinch-comp-select-button-color-default-border-initial'?: string;
|
|
66
|
+
'--sinch-comp-select-button-color-default-border-focus'?: string;
|
|
67
|
+
'--sinch-comp-select-button-color-invalid-border-initial'?: string;
|
|
68
|
+
'--sinch-comp-select-button-color-disabled-icon-initial'?: string;
|
|
69
|
+
'--sinch-comp-select-button-color-disabled-text-initial'?: string;
|
|
70
|
+
'--sinch-comp-select-button-color-disabled-placeholder-initial'?: string;
|
|
71
|
+
'--sinch-comp-select-button-color-disabled-border-initial'?: string;
|
|
72
|
+
'--sinch-comp-select-button-font-input'?: string;
|
|
73
|
+
'--sinch-comp-select-button-font-placeholder'?: string;
|
|
74
|
+
};
|
|
50
75
|
};
|
package/select-menu/types.d.ts
CHANGED
|
@@ -42,4 +42,10 @@ export type TSinchSelectMenuReact = TSinchElementReact<TSinchSelectMenuElement>
|
|
|
42
42
|
'search-value'?: string;
|
|
43
43
|
/** Change value handler */
|
|
44
44
|
'on-change'?: (e: CustomEvent<string>) => void;
|
|
45
|
+
} & {
|
|
46
|
+
style?: {
|
|
47
|
+
'--sinch-comp-select-menu-color-default-title-initial'?: string;
|
|
48
|
+
'--sinch-comp-select-menu-color-default-not-found-text-initial'?: string;
|
|
49
|
+
'--sinch-comp-select-menu-font-not-found-text'?: string;
|
|
50
|
+
};
|
|
45
51
|
};
|
|
@@ -23,4 +23,20 @@ export type TSinchSelectMenuOptionReact = TSinchElementReact<TSinchSelectMenuOpt
|
|
|
23
23
|
disabled?: boolean;
|
|
24
24
|
/** Label that is used for a11y */
|
|
25
25
|
'aria-label': string;
|
|
26
|
+
} & {
|
|
27
|
+
style?: {
|
|
28
|
+
'--sinch-comp-select-menu-size-icon'?: string;
|
|
29
|
+
'--sinch-comp-select-menu-font-option'?: string;
|
|
30
|
+
'--sinch-comp-select-menu-color-default-background-initial'?: string;
|
|
31
|
+
'--sinch-comp-select-menu-color-default-background-selected'?: string;
|
|
32
|
+
'--sinch-comp-select-menu-color-default-background-hover'?: string;
|
|
33
|
+
'--sinch-comp-select-menu-color-default-option-initial'?: string;
|
|
34
|
+
'--sinch-comp-select-menu-color-default-icon-initial'?: string;
|
|
35
|
+
'--sinch-comp-select-menu-color-disabled-background-initial'?: string;
|
|
36
|
+
'--sinch-comp-select-menu-color-disabled-option-initial'?: string;
|
|
37
|
+
'--sinch-comp-select-menu-color-disabled-icon-initial'?: string;
|
|
38
|
+
'--sinch-global-color-text'?: string;
|
|
39
|
+
'--sinch-global-color-icon'?: string;
|
|
40
|
+
'--sinch-global-size-icon'?: string;
|
|
41
|
+
};
|
|
26
42
|
};
|
package/skeleton/types.d.ts
CHANGED
|
@@ -6,4 +6,11 @@ export type TSinchSkeletonElement = HTMLElement & {
|
|
|
6
6
|
export type TSinchSkeletonReact = TSinchElementReact<TSinchSkeletonElement> & {
|
|
7
7
|
/** Card like container */
|
|
8
8
|
card?: boolean;
|
|
9
|
+
} & {
|
|
10
|
+
style?: {
|
|
11
|
+
'--sinch-sys-color-surface-primary-default'?: string;
|
|
12
|
+
'--sinch-sys-color-surface-tertiary-default'?: string;
|
|
13
|
+
'--sinch-sys-color-border-subtle'?: string;
|
|
14
|
+
'--sinch-sys-shape-radius-l'?: string;
|
|
15
|
+
};
|
|
9
16
|
};
|
package/skeleton-item/types.d.ts
CHANGED
|
@@ -10,4 +10,17 @@ export type TSinchSkeletonItemElement = HTMLElement & {
|
|
|
10
10
|
export type TSinchSkeletonItemReact = TSinchElementReact<TSinchSkeletonItemElement> & {
|
|
11
11
|
/** Size */
|
|
12
12
|
size?: TSinchSizeEx;
|
|
13
|
+
} & {
|
|
14
|
+
style?: {
|
|
15
|
+
'--sinch-sys-size-xs'?: string;
|
|
16
|
+
'--sinch-sys-size-s'?: string;
|
|
17
|
+
'--sinch-sys-size-m'?: string;
|
|
18
|
+
'--sinch-sys-size-l'?: string;
|
|
19
|
+
'--sinch-sys-shape-radius-xs'?: string;
|
|
20
|
+
'--sinch-sys-shape-radius-s'?: string;
|
|
21
|
+
'--sinch-sys-shape-radius-m'?: string;
|
|
22
|
+
'--sinch-sys-shape-radius-l'?: string;
|
|
23
|
+
'--sinch-sys-color-border-subtle'?: string;
|
|
24
|
+
'--sinch-local-shape-radius'?: string;
|
|
25
|
+
};
|
|
13
26
|
};
|
package/spinner/types.d.ts
CHANGED
|
@@ -9,4 +9,9 @@ export type TSinchSpinnerElement = HTMLElement & {
|
|
|
9
9
|
export type TSinchSpinnerReact = TSinchElementReact<TSinchSpinnerElement> & {
|
|
10
10
|
/** Spinner size */
|
|
11
11
|
size?: TSinchSize;
|
|
12
|
+
} & {
|
|
13
|
+
style?: {
|
|
14
|
+
'--sinch-global-color-icon'?: string;
|
|
15
|
+
'--sinch-sys-color-text-default'?: string;
|
|
16
|
+
};
|
|
12
17
|
};
|
package/table-cell/types.d.ts
CHANGED
|
@@ -6,4 +6,8 @@ export type TSinchTableCellElement = HTMLElement & {
|
|
|
6
6
|
};
|
|
7
7
|
export type TSinchTableCellReact = TSinchElementReact<TSinchTableCellElement> & {
|
|
8
8
|
align?: TSinchTableAlignType;
|
|
9
|
+
} & {
|
|
10
|
+
style?: {
|
|
11
|
+
'--sinch-comp-table-color-cell-default-border-initial'?: string;
|
|
12
|
+
};
|
|
9
13
|
};
|
|
@@ -12,4 +12,12 @@ export type TSinchTableHeaderCellReact = TSinchElementReact<TSinchTableHeaderCel
|
|
|
12
12
|
text?: string;
|
|
13
13
|
fit?: boolean;
|
|
14
14
|
align?: TSinchTableAlignType;
|
|
15
|
+
} & {
|
|
16
|
+
style?: {
|
|
17
|
+
'--sinch-comp-table-color-head-cell-default-border-initial'?: string;
|
|
18
|
+
'--sinch-comp-table-color-head-cell-default-icon-initial'?: string;
|
|
19
|
+
'--sinch-comp-table-color-head-cell-default-text-initial'?: string;
|
|
20
|
+
'--sinch-global-color-icon'?: string;
|
|
21
|
+
'--sinch-global-color-text'?: string;
|
|
22
|
+
};
|
|
15
23
|
};
|
package/table-row/types.d.ts
CHANGED
|
@@ -8,4 +8,11 @@ export type TSinchTableRowElement = HTMLElement & {
|
|
|
8
8
|
export type TSinchTableRowReact = TSinchElementReact<TSinchTableRowElement> & {
|
|
9
9
|
sticky?: boolean;
|
|
10
10
|
selected?: boolean;
|
|
11
|
+
} & {
|
|
12
|
+
style?: {
|
|
13
|
+
'--sinch-comp-table-color-row-default-background-initial'?: string;
|
|
14
|
+
'--sinch-comp-table-color-row-default-background-hover'?: string;
|
|
15
|
+
'--sinch-comp-table-color-row-default-background-sticky'?: string;
|
|
16
|
+
'--sinch-comp-table-color-row-checked-background-initial'?: string;
|
|
17
|
+
};
|
|
11
18
|
};
|
package/tabs/types.d.ts
CHANGED
|
@@ -15,4 +15,8 @@ export type TSinchTabsReact = TSinchElementReact<TSinchTabsElement> & {
|
|
|
15
15
|
'aria-label': string;
|
|
16
16
|
/** Change value event */
|
|
17
17
|
'on-change'?: (e: CustomEvent<string>) => void;
|
|
18
|
+
} & {
|
|
19
|
+
style?: {
|
|
20
|
+
'--sinch-comp-tab-color-default-border-initial'?: string;
|
|
21
|
+
};
|
|
18
22
|
};
|
|
@@ -16,4 +16,18 @@ export type TSinchTabsIconOptionReact = TSinchElementReact<TSinchTabsIconOptionE
|
|
|
16
16
|
'aria-label': string;
|
|
17
17
|
/** Disabled */
|
|
18
18
|
disabled?: boolean;
|
|
19
|
+
} & {
|
|
20
|
+
style?: {
|
|
21
|
+
'--sinch-comp-tab-size-icon'?: string;
|
|
22
|
+
'--sinch-comp-tab-shape-radius'?: string;
|
|
23
|
+
'--sinch-comp-tab-color-default-background-initial'?: string;
|
|
24
|
+
'--sinch-comp-tab-color-default-background-hover'?: string;
|
|
25
|
+
'--sinch-comp-tab-color-default-icon-initial'?: string;
|
|
26
|
+
'--sinch-comp-tab-color-default-outline-focus'?: string;
|
|
27
|
+
'--sinch-comp-tab-color-checked-icon-initial'?: string;
|
|
28
|
+
'--sinch-comp-tab-color-checked-border-initial'?: string;
|
|
29
|
+
'--sinch-comp-tab-color-disabled-icon-initial'?: string;
|
|
30
|
+
'--sinch-global-color-icon'?: string;
|
|
31
|
+
'--sinch-global-size-icon'?: string;
|
|
32
|
+
};
|
|
19
33
|
};
|