@i-cell/ids-styles 0.0.21 → 0.0.23

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 (10) hide show
  1. package/dist/components.css +819 -187
  2. package/dist/components.min.css +1 -1
  3. package/dist/components.plugin.js +822 -112
  4. package/dist/notification/notification.css +61 -187
  5. package/dist/notification/notification.min.css +1 -1
  6. package/dist/notification/notification.plugin.js +171 -112
  7. package/dist/tab/tab.css +757 -0
  8. package/dist/tab/tab.min.css +1 -0
  9. package/dist/tab/tab.plugin.js +660 -0
  10. package/package.json +1 -1
package/dist/tab/tab.plugin.js ADDED
@@ -0,0 +1,660 @@
1
+ // Tailwind CSS plugin for the tab component in the i-Cell Design System
2
+ module.exports = function TabPlugin() {
3
+ return function ({ addComponents }) {
4
+ const cssObj = {
5
+ '.ids-tab-group': { display: 'flex' },
6
+ '.ids-tab-group .ids-tab-group__container': { display: 'flex', flexDirection: 'column', position: 'relative', flexShrink: 0 },
7
+ '.ids-tab-group .ids-tab-item__indicator': {
8
+ display: 'flex',
9
+ justifyContent: 'center',
10
+ position: 'absolute',
11
+ height: '100%',
12
+ pointerEvents: 'none',
13
+ zIndex: 1,
14
+ },
15
+ '.ids-tab-group .ids-tab-item__indicator .ids-tab-item__line': { position: 'relative', boxSizing: 'border-box', opacity: 0 },
16
+ '.ids-tab-group.ids-tab-group-horizontal': { flexDirection: 'column', alignItems: 'center', flexShrink: 0 },
17
+ '.ids-tab-group.ids-tab-group-horizontal>.ids-tab-group__container': { width: '100%' },
18
+ '.ids-tab-group.ids-tab-group-horizontal>.ids-tab-group__container .ids-tab-group__header .ids-tab-item': {
19
+ justifyContent: 'center',
20
+ },
21
+ '.ids-tab-group.ids-tab-group-horizontal>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus,.ids-tab-group.ids-tab-group-horizontal>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus-visible':
22
+ { outlineOffset: '4px' },
23
+ '.ids-tab-group.ids-tab-group-horizontal.ids-tab-group-indicator-bottom>.ids-tab-group__container': {
24
+ borderBottomStyle: 'solid',
25
+ borderBottomColor: 'var(--ids-comp-tab-tabgroup-color-border-default)',
26
+ },
27
+ '.ids-tab-group.ids-tab-group-horizontal.ids-tab-group-indicator-bottom>.ids-tab-group__container .ids-tab-item__line': {
28
+ alignSelf: 'flex-end',
29
+ borderBottomStyle: 'solid',
30
+ },
31
+ '.ids-tab-group.ids-tab-group-horizontal.ids-tab-group-indicator-top>.ids-tab-group__container': {
32
+ borderTopStyle: 'solid',
33
+ borderTopColor: 'var(--ids-comp-tab-tabgroup-color-border-default)',
34
+ },
35
+ '.ids-tab-group.ids-tab-group-horizontal.ids-tab-group-indicator-top>.ids-tab-group__container .ids-tab-item__line': {
36
+ alignSelf: 'flex-start',
37
+ borderTopStyle: 'solid',
38
+ },
39
+ '.ids-tab-group.ids-tab-group-horizontal.ids-tab-group-stretch-tabs>.ids-tab-group__container .ids-tab-group__header': {
40
+ alignSelf: 'stretch',
41
+ },
42
+ '.ids-tab-group.ids-tab-group-horizontal.ids-tab-group-stretch-tabs>.ids-tab-group__container .ids-tab-group__header .ids-tab-item': {
43
+ flexGrow: 1,
44
+ },
45
+ '.ids-tab-group.ids-tab-group-horizontal.ids-tab-group-start>.ids-tab-group__container .ids-tab-group__header': {
46
+ alignSelf: 'flex-start',
47
+ },
48
+ '.ids-tab-group.ids-tab-group-horizontal.ids-tab-group-center>.ids-tab-group__container .ids-tab-group__header': {
49
+ alignSelf: 'center',
50
+ },
51
+ '.ids-tab-group.ids-tab-group-horizontal.ids-tab-group-end>.ids-tab-group__container .ids-tab-group__header': {
52
+ alignSelf: 'flex-end',
53
+ },
54
+ '.ids-tab-group.ids-tab-group-horizontal>.ids-tab-body-content': { display: 'flex', alignItems: 'flex-start', alignSelf: 'stretch' },
55
+ '.ids-tab-group.ids-tab-group-horizontal .ids-tab-item__indicator': { left: '0', width: '100%' },
56
+ '.ids-tab-group.ids-tab-group-horizontal .ids-tab-item__indicator .ids-tab-item__line': { width: '100%' },
57
+ '.ids-tab-group.ids-tab-group-vertical': { display: 'inline-flex', alignItems: 'flex-start', width: '100%' },
58
+ '.ids-tab-group.ids-tab-group-vertical>.ids-tab-group__container .ids-tab-group__header': {
59
+ display: 'flex',
60
+ flexDirection: 'column',
61
+ alignItems: 'center',
62
+ flexShrink: 0,
63
+ },
64
+ '.ids-tab-group.ids-tab-group-vertical>.ids-tab-group__container .ids-tab-group__header .ids-tab-item': { alignSelf: 'stretch' },
65
+ '.ids-tab-group.ids-tab-group-vertical>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus,.ids-tab-group.ids-tab-group-vertical>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus-visible':
66
+ { outlineOffset: '2px' },
67
+ '.ids-tab-group.ids-tab-group-vertical>.ids-tab-body-content': { display: 'flex', justifyContent: 'center', alignSelf: 'stretch' },
68
+ '.ids-tab-group.ids-tab-group-vertical.ids-tab-group-indicator-left .ids-tab-item__indicator': { left: '0' },
69
+ '.ids-tab-group.ids-tab-group-vertical.ids-tab-group-indicator-left .ids-tab-item__indicator .ids-tab-item__line': {
70
+ borderLeftStyle: 'solid',
71
+ },
72
+ '.ids-tab-group.ids-tab-group-vertical.ids-tab-group-indicator-right .ids-tab-item__indicator': { right: '0' },
73
+ '.ids-tab-group.ids-tab-group-vertical.ids-tab-group-indicator-right .ids-tab-item__indicator .ids-tab-item__line': {
74
+ borderRightStyle: 'solid',
75
+ },
76
+ '.ids-tab-group.ids-tab-group-vertical .ids-tab-item__indicator': { top: '0' },
77
+ '.ids-tab-group.ids-tab-group-vertical .ids-tab-item__indicator .ids-tab-item__line': { alignSelf: 'flex-start', height: '100%' },
78
+ '.ids-tab-group .ids-tab-group__container .ids-tab-group__header': {
79
+ display: 'flex',
80
+ justifyContent: 'center',
81
+ alignItems: 'flex-start',
82
+ listStyleType: 'none',
83
+ margin: '0',
84
+ },
85
+ '.ids-tab-group .ids-tab-group__container .ids-tab-group__header .ids-tab-item': {
86
+ display: 'flex',
87
+ alignItems: 'center',
88
+ cursor: 'pointer',
89
+ position: 'relative',
90
+ borderStyle: 'solid',
91
+ },
92
+ '.ids-tab-group .ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus,.ids-tab-group .ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus-visible':
93
+ { outlineStyle: 'solid' },
94
+ '.ids-tab-group .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item__label': {
95
+ display: 'inline-block',
96
+ textOverflow: 'ellipsis',
97
+ overflow: 'hidden',
98
+ whiteSpace: 'nowrap',
99
+ },
100
+ '.ids-tab-group .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item-disabled': {
101
+ pointerEvents: 'none',
102
+ userSelect: 'none',
103
+ },
104
+ '.ids-tab-group .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active>.ids-tab-item__indicator .ids-tab-item__line':
105
+ { opacity: 1 },
106
+ '.ids-tab-group.ids-tab-group-compact': {
107
+ padding: 'var(--ids-comp-tab-container-size-padding-y-compact) var(--ids-comp-tab-container-size-padding-x-compact)',
108
+ gap: 'var(--ids-comp-tab-container-size-gap-compact)',
109
+ },
110
+ '.ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-bottom': {
111
+ borderBottomWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-compact)',
112
+ },
113
+ '.ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-bottom .ids-tab-item__indicator': {
114
+ bottom:
115
+ 'calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-compact) + var(--ids-comp-tab-item-size-border-width-compact)))',
116
+ },
117
+ '.ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-bottom .ids-tab-item__indicator .ids-tab-item__line':
118
+ { borderBottomWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-compact)' },
119
+ '.ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-top': {
120
+ borderTopWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-compact)',
121
+ },
122
+ '.ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab-item__indicator': {
123
+ top: 'calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-compact) + var(--ids-comp-tab-item-size-border-width-compact)))',
124
+ },
125
+ '.ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab-item__indicator .ids-tab-item__line':
126
+ { borderTopWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-compact)' },
127
+ '.ids-tab-group.ids-tab-group-compact.ids-tab-group-vertical.ids-tab-group-indicator-left .ids-tab-item__indicator': {
128
+ borderLeftWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-compact)',
129
+ },
130
+ '.ids-tab-group.ids-tab-group-compact.ids-tab-group-vertical.ids-tab-group-indicator-left .ids-tab-item__indicator .ids-tab-item__line':
131
+ { borderLeftWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-compact)' },
132
+ '.ids-tab-group.ids-tab-group-compact.ids-tab-group-vertical.ids-tab-group-indicator-right .ids-tab-item__indicator': {
133
+ borderRightWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-compact)',
134
+ },
135
+ '.ids-tab-group.ids-tab-group-compact.ids-tab-group-vertical.ids-tab-group-indicator-right .ids-tab-item__indicator .ids-tab-item__line':
136
+ { borderRightWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-compact)' },
137
+ '.ids-tab-group.ids-tab-group-compact>.ids-tab-body-content': {
138
+ padding: 'var(--ids-comp-tab-tabpanel-size-padding-y-compact) var(--ids-comp-tab-tabpanel-size-padding-x-compact)',
139
+ },
140
+ '.ids-tab-group.ids-tab-group-compact>.ids-tab-group__container .ids-tab-group__header': {
141
+ padding: 'var(--ids-comp-tab-tabgroup-size-padding-y-compact) var(--ids-comp-tab-tabgroup-size-padding-x-compact)',
142
+ gap: 'var(--ids-comp-tab-tabgroup-size-gap-compact)',
143
+ },
144
+ '.ids-tab-group.ids-tab-group-compact>.ids-tab-group__container .ids-tab-group__header .ids-tab-item': {
145
+ padding: 'var(--ids-comp-tab-item-size-padding-y-compact) var(--ids-comp-tab-item-size-padding-x-compact)',
146
+ gap: 'var(--ids-comp-tab-item-size-gap-compact)',
147
+ borderRadius: 'var(--ids-comp-tab-item-size-border-radius-compact)',
148
+ borderWidth: 'var(--ids-comp-tab-item-size-border-width-compact)',
149
+ },
150
+ '.ids-tab-group.ids-tab-group-compact>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus,.ids-tab-group.ids-tab-group-compact>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus-visible':
151
+ { outlineWidth: 'var(--ids-comp-tab-item-focused-outline-size-outline-compact)' },
152
+ '.ids-tab-group.ids-tab-group-compact>.ids-tab-group__container .ids-tab-group__header .ids-tab-item>.ids-tab-item__label': {
153
+ fontFamily: 'var(--ids-comp-tab-item-label-typography-font-family-compact)',
154
+ fontSize: 'var(--ids-comp-tab-item-label-typography-font-size-compact)',
155
+ fontWeight: 'var(--ids-comp-tab-item-label-typography-font-weight-compact)',
156
+ letterSpacing: 'var(--ids-comp-tab-item-label-typography-letter-spacing-compact)',
157
+ lineHeight: 'var(--ids-comp-tab-item-label-typography-line-height-compact)',
158
+ },
159
+ '.ids-tab-group.ids-tab-group-compact>.ids-tab-group__container .ids-tab-group__header .ids-tab-item>.ids-icon': {
160
+ fontSize: 'var(--ids-comp-tab-item-icon-typography-font-size-compact)',
161
+ fontWeight: 'var(--ids-comp-tab-item-icon-typography-font-weight-compact)',
162
+ lineHeight: 'var(--ids-comp-tab-item-icon-typography-line-height-compact)',
163
+ width: 'var(--ids-comp-tab-item-icon-size-width-compact)',
164
+ height: 'var(--ids-comp-tab-item-icon-size-height-compact)',
165
+ },
166
+ '.ids-tab-group.ids-tab-group-comfortable': {
167
+ padding: 'var(--ids-comp-tab-container-size-padding-y-comfortable) var(--ids-comp-tab-container-size-padding-x-comfortable)',
168
+ gap: 'var(--ids-comp-tab-container-size-gap-comfortable)',
169
+ },
170
+ '.ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-bottom': {
171
+ borderBottomWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-comfortable)',
172
+ },
173
+ '.ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-bottom .ids-tab-item__indicator': {
174
+ bottom:
175
+ 'calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-comfortable) + var(--ids-comp-tab-item-size-border-width-comfortable)))',
176
+ },
177
+ '.ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-bottom .ids-tab-item__indicator .ids-tab-item__line':
178
+ { borderBottomWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-comfortable)' },
179
+ '.ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-top': {
180
+ borderTopWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-comfortable)',
181
+ },
182
+ '.ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab-item__indicator': {
183
+ top: 'calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-comfortable) + var(--ids-comp-tab-item-size-border-width-comfortable)))',
184
+ },
185
+ '.ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab-item__indicator .ids-tab-item__line':
186
+ { borderTopWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-comfortable)' },
187
+ '.ids-tab-group.ids-tab-group-comfortable.ids-tab-group-vertical.ids-tab-group-indicator-left .ids-tab-item__indicator': {
188
+ borderLeftWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-comfortable)',
189
+ },
190
+ '.ids-tab-group.ids-tab-group-comfortable.ids-tab-group-vertical.ids-tab-group-indicator-left .ids-tab-item__indicator .ids-tab-item__line':
191
+ { borderLeftWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-comfortable)' },
192
+ '.ids-tab-group.ids-tab-group-comfortable.ids-tab-group-vertical.ids-tab-group-indicator-right .ids-tab-item__indicator': {
193
+ borderRightWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-comfortable)',
194
+ },
195
+ '.ids-tab-group.ids-tab-group-comfortable.ids-tab-group-vertical.ids-tab-group-indicator-right .ids-tab-item__indicator .ids-tab-item__line':
196
+ { borderRightWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-comfortable)' },
197
+ '.ids-tab-group.ids-tab-group-comfortable>.ids-tab-body-content': {
198
+ padding: 'var(--ids-comp-tab-tabpanel-size-padding-y-comfortable) var(--ids-comp-tab-tabpanel-size-padding-x-comfortable)',
199
+ },
200
+ '.ids-tab-group.ids-tab-group-comfortable>.ids-tab-group__container .ids-tab-group__header': {
201
+ padding: 'var(--ids-comp-tab-tabgroup-size-padding-y-comfortable) var(--ids-comp-tab-tabgroup-size-padding-x-comfortable)',
202
+ gap: 'var(--ids-comp-tab-tabgroup-size-gap-comfortable)',
203
+ },
204
+ '.ids-tab-group.ids-tab-group-comfortable>.ids-tab-group__container .ids-tab-group__header .ids-tab-item': {
205
+ padding: 'var(--ids-comp-tab-item-size-padding-y-comfortable) var(--ids-comp-tab-item-size-padding-x-comfortable)',
206
+ gap: 'var(--ids-comp-tab-item-size-gap-comfortable)',
207
+ borderRadius: 'var(--ids-comp-tab-item-size-border-radius-comfortable)',
208
+ borderWidth: 'var(--ids-comp-tab-item-size-border-width-comfortable)',
209
+ },
210
+ '.ids-tab-group.ids-tab-group-comfortable>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus,.ids-tab-group.ids-tab-group-comfortable>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus-visible':
211
+ { outlineWidth: 'var(--ids-comp-tab-item-focused-outline-size-outline-comfortable)' },
212
+ '.ids-tab-group.ids-tab-group-comfortable>.ids-tab-group__container .ids-tab-group__header .ids-tab-item>.ids-tab-item__label': {
213
+ fontFamily: 'var(--ids-comp-tab-item-label-typography-font-family-comfortable)',
214
+ fontSize: 'var(--ids-comp-tab-item-label-typography-font-size-comfortable)',
215
+ fontWeight: 'var(--ids-comp-tab-item-label-typography-font-weight-comfortable)',
216
+ letterSpacing: 'var(--ids-comp-tab-item-label-typography-letter-spacing-comfortable)',
217
+ lineHeight: 'var(--ids-comp-tab-item-label-typography-line-height-comfortable)',
218
+ },
219
+ '.ids-tab-group.ids-tab-group-comfortable>.ids-tab-group__container .ids-tab-group__header .ids-tab-item>.ids-icon': {
220
+ fontSize: 'var(--ids-comp-tab-item-icon-typography-font-size-comfortable)',
221
+ fontWeight: 'var(--ids-comp-tab-item-icon-typography-font-weight-comfortable)',
222
+ lineHeight: 'var(--ids-comp-tab-item-icon-typography-line-height-comfortable)',
223
+ width: 'var(--ids-comp-tab-item-icon-size-width-comfortable)',
224
+ height: 'var(--ids-comp-tab-item-icon-size-height-comfortable)',
225
+ },
226
+ '.ids-tab-group.ids-tab-group-spacious': {
227
+ padding: 'var(--ids-comp-tab-container-size-padding-y-spacious) var(--ids-comp-tab-container-size-padding-x-spacious)',
228
+ gap: 'var(--ids-comp-tab-container-size-gap-spacious)',
229
+ },
230
+ '.ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-bottom': {
231
+ borderBottomWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-spacious)',
232
+ },
233
+ '.ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-bottom .ids-tab-item__indicator': {
234
+ bottom:
235
+ 'calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-spacious) + var(--ids-comp-tab-item-size-border-width-spacious)))',
236
+ },
237
+ '.ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-bottom .ids-tab-item__indicator .ids-tab-item__line':
238
+ { borderBottomWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-spacious)' },
239
+ '.ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-top': {
240
+ borderTopWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-spacious)',
241
+ },
242
+ '.ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab-item__indicator': {
243
+ top: 'calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-spacious) + var(--ids-comp-tab-item-size-border-width-spacious)))',
244
+ },
245
+ '.ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab-item__indicator .ids-tab-item__line':
246
+ { borderTopWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-spacious)' },
247
+ '.ids-tab-group.ids-tab-group-spacious.ids-tab-group-vertical.ids-tab-group-indicator-left .ids-tab-item__indicator': {
248
+ borderLeftWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-spacious)',
249
+ },
250
+ '.ids-tab-group.ids-tab-group-spacious.ids-tab-group-vertical.ids-tab-group-indicator-left .ids-tab-item__indicator .ids-tab-item__line':
251
+ { borderLeftWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-spacious)' },
252
+ '.ids-tab-group.ids-tab-group-spacious.ids-tab-group-vertical.ids-tab-group-indicator-right .ids-tab-item__indicator': {
253
+ borderRightWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-spacious)',
254
+ },
255
+ '.ids-tab-group.ids-tab-group-spacious.ids-tab-group-vertical.ids-tab-group-indicator-right .ids-tab-item__indicator .ids-tab-item__line':
256
+ { borderRightWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-spacious)' },
257
+ '.ids-tab-group.ids-tab-group-spacious>.ids-tab-body-content': {
258
+ padding: 'var(--ids-comp-tab-tabpanel-size-padding-y-spacious) var(--ids-comp-tab-tabpanel-size-padding-x-spacious)',
259
+ },
260
+ '.ids-tab-group.ids-tab-group-spacious>.ids-tab-group__container .ids-tab-group__header': {
261
+ padding: 'var(--ids-comp-tab-tabgroup-size-padding-y-spacious) var(--ids-comp-tab-tabgroup-size-padding-x-spacious)',
262
+ gap: 'var(--ids-comp-tab-tabgroup-size-gap-spacious)',
263
+ },
264
+ '.ids-tab-group.ids-tab-group-spacious>.ids-tab-group__container .ids-tab-group__header .ids-tab-item': {
265
+ padding: 'var(--ids-comp-tab-item-size-padding-y-spacious) var(--ids-comp-tab-item-size-padding-x-spacious)',
266
+ gap: 'var(--ids-comp-tab-item-size-gap-spacious)',
267
+ borderRadius: 'var(--ids-comp-tab-item-size-border-radius-spacious)',
268
+ borderWidth: 'var(--ids-comp-tab-item-size-border-width-spacious)',
269
+ },
270
+ '.ids-tab-group.ids-tab-group-spacious>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus,.ids-tab-group.ids-tab-group-spacious>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus-visible':
271
+ { outlineWidth: 'var(--ids-comp-tab-item-focused-outline-size-outline-spacious)' },
272
+ '.ids-tab-group.ids-tab-group-spacious>.ids-tab-group__container .ids-tab-group__header .ids-tab-item>.ids-tab-item__label': {
273
+ fontFamily: 'var(--ids-comp-tab-item-label-typography-font-family-spacious)',
274
+ fontSize: 'var(--ids-comp-tab-item-label-typography-font-size-spacious)',
275
+ fontWeight: 'var(--ids-comp-tab-item-label-typography-font-weight-spacious)',
276
+ letterSpacing: 'var(--ids-comp-tab-item-label-typography-letter-spacing-spacious)',
277
+ lineHeight: 'var(--ids-comp-tab-item-label-typography-line-height-spacious)',
278
+ },
279
+ '.ids-tab-group.ids-tab-group-spacious>.ids-tab-group__container .ids-tab-group__header .ids-tab-item>.ids-icon': {
280
+ fontSize: 'var(--ids-comp-tab-item-icon-typography-font-size-spacious)',
281
+ fontWeight: 'var(--ids-comp-tab-item-icon-typography-font-weight-spacious)',
282
+ lineHeight: 'var(--ids-comp-tab-item-icon-typography-line-height-spacious)',
283
+ width: 'var(--ids-comp-tab-item-icon-size-width-spacious)',
284
+ height: 'var(--ids-comp-tab-item-icon-size-height-spacious)',
285
+ },
286
+ '.ids-tab-group.ids-tab-group-dense': {
287
+ padding: 'var(--ids-comp-tab-container-size-padding-y-dense) var(--ids-comp-tab-container-size-padding-x-dense)',
288
+ gap: 'var(--ids-comp-tab-container-size-gap-dense)',
289
+ },
290
+ '.ids-tab-group.ids-tab-group-dense.ids-tab-group-horizontal.ids-tab-group-indicator-bottom': {
291
+ borderBottomWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-dense)',
292
+ },
293
+ '.ids-tab-group.ids-tab-group-dense.ids-tab-group-horizontal.ids-tab-group-indicator-bottom .ids-tab-item__indicator': {
294
+ bottom:
295
+ 'calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-dense) + var(--ids-comp-tab-item-size-border-width-dense)))',
296
+ },
297
+ '.ids-tab-group.ids-tab-group-dense.ids-tab-group-horizontal.ids-tab-group-indicator-bottom .ids-tab-item__indicator .ids-tab-item__line':
298
+ { borderBottomWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-dense)' },
299
+ '.ids-tab-group.ids-tab-group-dense.ids-tab-group-horizontal.ids-tab-group-indicator-top': {
300
+ borderTopWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-dense)',
301
+ },
302
+ '.ids-tab-group.ids-tab-group-dense.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab-item__indicator': {
303
+ top: 'calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-dense) + var(--ids-comp-tab-item-size-border-width-dense)))',
304
+ },
305
+ '.ids-tab-group.ids-tab-group-dense.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab-item__indicator .ids-tab-item__line':
306
+ { borderTopWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-dense)' },
307
+ '.ids-tab-group.ids-tab-group-dense.ids-tab-group-vertical.ids-tab-group-indicator-left .ids-tab-item__indicator': {
308
+ borderLeftWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-dense)',
309
+ },
310
+ '.ids-tab-group.ids-tab-group-dense.ids-tab-group-vertical.ids-tab-group-indicator-left .ids-tab-item__indicator .ids-tab-item__line':
311
+ { borderLeftWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-dense)' },
312
+ '.ids-tab-group.ids-tab-group-dense.ids-tab-group-vertical.ids-tab-group-indicator-right .ids-tab-item__indicator': {
313
+ borderRightWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-dense)',
314
+ },
315
+ '.ids-tab-group.ids-tab-group-dense.ids-tab-group-vertical.ids-tab-group-indicator-right .ids-tab-item__indicator .ids-tab-item__line':
316
+ { borderRightWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-dense)' },
317
+ '.ids-tab-group.ids-tab-group-dense>.ids-tab-body-content': {
318
+ padding: 'var(--ids-comp-tab-tabpanel-size-padding-y-dense) var(--ids-comp-tab-tabpanel-size-padding-x-dense)',
319
+ },
320
+ '.ids-tab-group.ids-tab-group-dense>.ids-tab-group__container .ids-tab-group__header': {
321
+ padding: 'var(--ids-comp-tab-tabgroup-size-padding-y-dense) var(--ids-comp-tab-tabgroup-size-padding-x-dense)',
322
+ gap: 'var(--ids-comp-tab-tabgroup-size-gap-dense)',
323
+ },
324
+ '.ids-tab-group.ids-tab-group-dense>.ids-tab-group__container .ids-tab-group__header .ids-tab-item': {
325
+ padding: 'var(--ids-comp-tab-item-size-padding-y-dense) var(--ids-comp-tab-item-size-padding-x-dense)',
326
+ gap: 'var(--ids-comp-tab-item-size-gap-dense)',
327
+ borderRadius: 'var(--ids-comp-tab-item-size-border-radius-dense)',
328
+ borderWidth: 'var(--ids-comp-tab-item-size-border-width-dense)',
329
+ },
330
+ '.ids-tab-group.ids-tab-group-dense>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus,.ids-tab-group.ids-tab-group-dense>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus-visible':
331
+ { outlineWidth: 'var(--ids-comp-tab-item-focused-outline-size-outline-dense)' },
332
+ '.ids-tab-group.ids-tab-group-dense>.ids-tab-group__container .ids-tab-group__header .ids-tab-item>.ids-tab-item__label': {
333
+ fontFamily: 'var(--ids-comp-tab-item-label-typography-font-family-dense)',
334
+ fontSize: 'var(--ids-comp-tab-item-label-typography-font-size-dense)',
335
+ fontWeight: 'var(--ids-comp-tab-item-label-typography-font-weight-dense)',
336
+ letterSpacing: 'var(--ids-comp-tab-item-label-typography-letter-spacing-dense)',
337
+ lineHeight: 'var(--ids-comp-tab-item-label-typography-line-height-dense)',
338
+ },
339
+ '.ids-tab-group.ids-tab-group-dense>.ids-tab-group__container .ids-tab-group__header .ids-tab-item>.ids-icon': {
340
+ fontSize: 'var(--ids-comp-tab-item-icon-typography-font-size-dense)',
341
+ fontWeight: 'var(--ids-comp-tab-item-icon-typography-font-weight-dense)',
342
+ lineHeight: 'var(--ids-comp-tab-item-icon-typography-line-height-dense)',
343
+ width: 'var(--ids-comp-tab-item-icon-size-width-dense)',
344
+ height: 'var(--ids-comp-tab-item-icon-size-height-dense)',
345
+ },
346
+ '.ids-tab-group.ids-tab-group-surface': { backgroundColor: 'var(--ids-comp-tab-container-color-bg-default)' },
347
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header': {
348
+ backgroundColor: 'var(--ids-comp-tab-tabgroup-color-bg-default)',
349
+ },
350
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab-item': {
351
+ backgroundColor: 'var(--ids-comp-tab-item-standard-unselected-bg-surface-default)',
352
+ borderColor: 'var(--ids-comp-tab-item-standard-unselected-border-surface-default)',
353
+ color: 'var(--ids-comp-tab-item-standard-unselected-fg-label-surface-default)',
354
+ },
355
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab-item>.ids-icon': {
356
+ color: 'var(--ids-comp-tab-item-standard-unselected-fg-icon-surface-default)',
357
+ },
358
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab-item>.ids-tab-item__indicator': {
359
+ color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-surface-default)',
360
+ },
361
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:hover': {
362
+ backgroundColor: 'var(--ids-comp-tab-item-standard-unselected-bg-surface-hovered)',
363
+ borderColor: 'var(--ids-comp-tab-item-standard-unselected-border-surface-hovered)',
364
+ color: 'var(--ids-comp-tab-item-standard-unselected-fg-label-surface-hovered)',
365
+ },
366
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:hover>.ids-icon': {
367
+ color: 'var(--ids-comp-tab-item-standard-unselected-fg-icon-surface-hovered)',
368
+ },
369
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:hover>.ids-tab-item__indicator':
370
+ { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-surface-hovered)' },
371
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus,.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus-visible':
372
+ {
373
+ backgroundColor: 'var(--ids-comp-tab-item-standard-unselected-bg-surface-focused)',
374
+ borderColor: 'var(--ids-comp-tab-item-standard-unselected-border-surface-focused)',
375
+ color: 'var(--ids-comp-tab-item-standard-unselected-fg-label-surface-focused)',
376
+ outlineColor: 'var(--ids-comp-tab-item-standard-focused-outline-color-dark-default)',
377
+ },
378
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus>.ids-icon,.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus-visible>.ids-icon':
379
+ { color: 'var(--ids-comp-tab-item-standard-unselected-fg-icon-surface-focused)' },
380
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus>.ids-tab-item__indicator,.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus-visible>.ids-tab-item__indicator':
381
+ { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-surface-focused)' },
382
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:active': {
383
+ backgroundColor: 'var(--ids-comp-tab-item-standard-unselected-bg-surface-pressed)',
384
+ borderColor: 'var(--ids-comp-tab-item-standard-unselected-border-surface-pressed)',
385
+ color: 'var(--ids-comp-tab-item-standard-unselected-fg-label-surface-pressed)',
386
+ },
387
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:active>.ids-icon': {
388
+ color: 'var(--ids-comp-tab-item-standard-unselected-fg-icon-surface-pressed)',
389
+ },
390
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:active>.ids-tab-item__indicator':
391
+ { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-surface-pressed)' },
392
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item-disabled': {
393
+ backgroundColor: 'var(--ids-comp-tab-item-standard-unselected-bg-surface-disabled)',
394
+ borderColor: 'var(--ids-comp-tab-item-standard-unselected-border-surface-disabled)',
395
+ color: 'var(--ids-comp-tab-item-standard-unselected-fg-label-surface-disabled)',
396
+ },
397
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item-disabled>.ids-icon':
398
+ { color: 'var(--ids-comp-tab-item-standard-unselected-fg-icon-surface-disabled)' },
399
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item-disabled>.ids-tab-item__indicator':
400
+ { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-surface-disabled)' },
401
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active': {
402
+ backgroundColor: 'var(--ids-comp-tab-item-standard-selected-bg-surface-default)',
403
+ borderColor: 'var(--ids-comp-tab-item-standard-selected-border-surface-default)',
404
+ color: 'var(--ids-comp-tab-item-standard-selected-fg-label-surface-default)',
405
+ },
406
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active>.ids-icon':
407
+ { color: 'var(--ids-comp-tab-item-standard-selected-fg-icon-surface-default)' },
408
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active>.ids-tab-item__indicator':
409
+ { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-surface-default)' },
410
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:hover': {
411
+ backgroundColor: 'var(--ids-comp-tab-item-standard-selected-bg-surface-hovered)',
412
+ borderColor: 'var(--ids-comp-tab-item-standard-selected-border-surface-hovered)',
413
+ color: 'var(--ids-comp-tab-item-standard-selected-fg-label-surface-hovered)',
414
+ },
415
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:hover>.ids-icon':
416
+ { color: 'var(--ids-comp-tab-item-standard-selected-fg-icon-surface-hovered)' },
417
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:hover>.ids-tab-item__indicator':
418
+ { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-surface-hovered)' },
419
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:focus,.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:focus-visible':
420
+ {
421
+ backgroundColor: 'var(--ids-comp-tab-item-standard-selected-bg-surface-focused)',
422
+ borderColor: 'var(--ids-comp-tab-item-standard-selected-border-surface-focused)',
423
+ color: 'var(--ids-comp-tab-item-standard-selected-fg-label-surface-focused)',
424
+ },
425
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:focus>.ids-icon,.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:focus-visible>.ids-icon':
426
+ { color: 'var(--ids-comp-tab-item-standard-selected-fg-icon-surface-focused)' },
427
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:focus>.ids-tab-item__indicator,.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:focus-visible>.ids-tab-item__indicator':
428
+ { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-surface-focused)' },
429
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:active': {
430
+ backgroundColor: 'var(--ids-comp-tab-item-standard-selected-bg-surface-pressed)',
431
+ borderColor: 'var(--ids-comp-tab-item-standard-selected-border-surface-pressed)',
432
+ color: 'var(--ids-comp-tab-item-standard-selected-fg-label-surface-pressed)',
433
+ },
434
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:active>.ids-icon':
435
+ { color: 'var(--ids-comp-tab-item-standard-selected-fg-icon-surface-pressed)' },
436
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:active>.ids-tab-item__indicator':
437
+ { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-surface-pressed)' },
438
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active.ids-tab-item-disabled':
439
+ {
440
+ backgroundColor: 'var(--ids-comp-tab-item-standard-unselected-bg-surface-disabled)',
441
+ borderColor: 'var(--ids-comp-tab-item-standard-unselected-border-surface-disabled)',
442
+ color: 'var(--ids-comp-tab-item-standard-unselected-fg-label-surface-disabled)',
443
+ },
444
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active.ids-tab-item-disabled>.ids-icon':
445
+ { color: 'var(--ids-comp-tab-item-standard-unselected-fg-icon-surface-disabled)' },
446
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active.ids-tab-item-disabled>.ids-tab-item__indicator':
447
+ { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-surface-disabled)' },
448
+ '.ids-tab-group.ids-tab-group-light': { backgroundColor: 'var(--ids-comp-tab-container-color-bg-default)' },
449
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header': {
450
+ backgroundColor: 'var(--ids-comp-tab-tabgroup-color-bg-default)',
451
+ },
452
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab-item': {
453
+ backgroundColor: 'var(--ids-comp-tab-item-standard-unselected-bg-light-default)',
454
+ borderColor: 'var(--ids-comp-tab-item-standard-unselected-border-light-default)',
455
+ color: 'var(--ids-comp-tab-item-standard-unselected-fg-label-light-default)',
456
+ },
457
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab-item>.ids-icon': {
458
+ color: 'var(--ids-comp-tab-item-standard-unselected-fg-icon-light-default)',
459
+ },
460
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab-item>.ids-tab-item__indicator': {
461
+ color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-light-default)',
462
+ },
463
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:hover': {
464
+ backgroundColor: 'var(--ids-comp-tab-item-standard-unselected-bg-light-hovered)',
465
+ borderColor: 'var(--ids-comp-tab-item-standard-unselected-border-light-hovered)',
466
+ color: 'var(--ids-comp-tab-item-standard-unselected-fg-label-light-hovered)',
467
+ },
468
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:hover>.ids-icon': {
469
+ color: 'var(--ids-comp-tab-item-standard-unselected-fg-icon-light-hovered)',
470
+ },
471
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:hover>.ids-tab-item__indicator': {
472
+ color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-light-hovered)',
473
+ },
474
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus,.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus-visible':
475
+ {
476
+ backgroundColor: 'var(--ids-comp-tab-item-standard-unselected-bg-light-focused)',
477
+ borderColor: 'var(--ids-comp-tab-item-standard-unselected-border-light-focused)',
478
+ color: 'var(--ids-comp-tab-item-standard-unselected-fg-label-light-focused)',
479
+ outlineColor: 'var(--ids-comp-tab-item-standard-focused-outline-color-dark-default)',
480
+ },
481
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus>.ids-icon,.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus-visible>.ids-icon':
482
+ { color: 'var(--ids-comp-tab-item-standard-unselected-fg-icon-light-focused)' },
483
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus>.ids-tab-item__indicator,.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus-visible>.ids-tab-item__indicator':
484
+ { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-light-focused)' },
485
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:active': {
486
+ backgroundColor: 'var(--ids-comp-tab-item-standard-unselected-bg-light-pressed)',
487
+ borderColor: 'var(--ids-comp-tab-item-standard-unselected-border-light-pressed)',
488
+ color: 'var(--ids-comp-tab-item-standard-unselected-fg-label-light-pressed)',
489
+ },
490
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:active>.ids-icon': {
491
+ color: 'var(--ids-comp-tab-item-standard-unselected-fg-icon-light-pressed)',
492
+ },
493
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:active>.ids-tab-item__indicator': {
494
+ color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-light-pressed)',
495
+ },
496
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item-disabled': {
497
+ backgroundColor: 'var(--ids-comp-tab-item-standard-unselected-bg-light-disabled)',
498
+ borderColor: 'var(--ids-comp-tab-item-standard-unselected-border-light-disabled)',
499
+ color: 'var(--ids-comp-tab-item-standard-unselected-fg-label-light-disabled)',
500
+ },
501
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item-disabled>.ids-icon': {
502
+ color: 'var(--ids-comp-tab-item-standard-unselected-fg-icon-light-disabled)',
503
+ },
504
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item-disabled>.ids-tab-item__indicator':
505
+ { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-light-disabled)' },
506
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active': {
507
+ backgroundColor: 'var(--ids-comp-tab-item-standard-selected-bg-light-default)',
508
+ borderColor: 'var(--ids-comp-tab-item-standard-selected-border-light-default)',
509
+ color: 'var(--ids-comp-tab-item-standard-selected-fg-label-light-default)',
510
+ },
511
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active>.ids-icon': {
512
+ color: 'var(--ids-comp-tab-item-standard-selected-fg-icon-light-default)',
513
+ },
514
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active>.ids-tab-item__indicator':
515
+ { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-light-default)' },
516
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:hover': {
517
+ backgroundColor: 'var(--ids-comp-tab-item-standard-selected-bg-light-hovered)',
518
+ borderColor: 'var(--ids-comp-tab-item-standard-selected-border-light-hovered)',
519
+ color: 'var(--ids-comp-tab-item-standard-selected-fg-label-light-hovered)',
520
+ },
521
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:hover>.ids-icon':
522
+ { color: 'var(--ids-comp-tab-item-standard-selected-fg-icon-light-hovered)' },
523
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:hover>.ids-tab-item__indicator':
524
+ { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-light-hovered)' },
525
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:focus,.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:focus-visible':
526
+ {
527
+ backgroundColor: 'var(--ids-comp-tab-item-standard-selected-bg-light-focused)',
528
+ borderColor: 'var(--ids-comp-tab-item-standard-selected-border-light-focused)',
529
+ color: 'var(--ids-comp-tab-item-standard-selected-fg-label-light-focused)',
530
+ },
531
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:focus>.ids-icon,.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:focus-visible>.ids-icon':
532
+ { color: 'var(--ids-comp-tab-item-standard-selected-fg-icon-light-focused)' },
533
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:focus>.ids-tab-item__indicator,.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:focus-visible>.ids-tab-item__indicator':
534
+ { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-light-focused)' },
535
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:active': {
536
+ backgroundColor: 'var(--ids-comp-tab-item-standard-selected-bg-light-pressed)',
537
+ borderColor: 'var(--ids-comp-tab-item-standard-selected-border-light-pressed)',
538
+ color: 'var(--ids-comp-tab-item-standard-selected-fg-label-light-pressed)',
539
+ },
540
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:active>.ids-icon':
541
+ { color: 'var(--ids-comp-tab-item-standard-selected-fg-icon-light-pressed)' },
542
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:active>.ids-tab-item__indicator':
543
+ { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-light-pressed)' },
544
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active.ids-tab-item-disabled':
545
+ {
546
+ backgroundColor: 'var(--ids-comp-tab-item-standard-unselected-bg-light-disabled)',
547
+ borderColor: 'var(--ids-comp-tab-item-standard-unselected-border-light-disabled)',
548
+ color: 'var(--ids-comp-tab-item-standard-unselected-fg-label-light-disabled)',
549
+ },
550
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active.ids-tab-item-disabled>.ids-icon':
551
+ { color: 'var(--ids-comp-tab-item-standard-unselected-fg-icon-light-disabled)' },
552
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active.ids-tab-item-disabled>.ids-tab-item__indicator':
553
+ { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-light-disabled)' },
554
+ '.ids-tab-group.ids-tab-group-primary': { backgroundColor: 'var(--ids-comp-tab-container-color-bg-default)' },
555
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header': {
556
+ backgroundColor: 'var(--ids-comp-tab-tabgroup-color-bg-default)',
557
+ },
558
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab-item': {
559
+ backgroundColor: 'var(--ids-comp-tab-item-standard-unselected-bg-primary-default)',
560
+ borderColor: 'var(--ids-comp-tab-item-standard-unselected-border-primary-default)',
561
+ color: 'var(--ids-comp-tab-item-standard-unselected-fg-label-primary-default)',
562
+ },
563
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab-item>.ids-icon': {
564
+ color: 'var(--ids-comp-tab-item-standard-unselected-fg-icon-primary-default)',
565
+ },
566
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab-item>.ids-tab-item__indicator': {
567
+ color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-primary-default)',
568
+ },
569
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:hover': {
570
+ backgroundColor: 'var(--ids-comp-tab-item-standard-unselected-bg-primary-hovered)',
571
+ borderColor: 'var(--ids-comp-tab-item-standard-unselected-border-primary-hovered)',
572
+ color: 'var(--ids-comp-tab-item-standard-unselected-fg-label-primary-hovered)',
573
+ },
574
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:hover>.ids-icon': {
575
+ color: 'var(--ids-comp-tab-item-standard-unselected-fg-icon-primary-hovered)',
576
+ },
577
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:hover>.ids-tab-item__indicator':
578
+ { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-primary-hovered)' },
579
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus,.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus-visible':
580
+ {
581
+ backgroundColor: 'var(--ids-comp-tab-item-standard-unselected-bg-primary-focused)',
582
+ borderColor: 'var(--ids-comp-tab-item-standard-unselected-border-primary-focused)',
583
+ color: 'var(--ids-comp-tab-item-standard-unselected-fg-label-primary-focused)',
584
+ outlineColor: 'var(--ids-comp-tab-item-standard-focused-outline-color-dark-default)',
585
+ },
586
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus>.ids-icon,.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus-visible>.ids-icon':
587
+ { color: 'var(--ids-comp-tab-item-standard-unselected-fg-icon-primary-focused)' },
588
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus>.ids-tab-item__indicator,.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus-visible>.ids-tab-item__indicator':
589
+ { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-primary-focused)' },
590
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:active': {
591
+ backgroundColor: 'var(--ids-comp-tab-item-standard-unselected-bg-primary-pressed)',
592
+ borderColor: 'var(--ids-comp-tab-item-standard-unselected-border-primary-pressed)',
593
+ color: 'var(--ids-comp-tab-item-standard-unselected-fg-label-primary-pressed)',
594
+ },
595
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:active>.ids-icon': {
596
+ color: 'var(--ids-comp-tab-item-standard-unselected-fg-icon-primary-pressed)',
597
+ },
598
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab-item:active>.ids-tab-item__indicator':
599
+ { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-primary-pressed)' },
600
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item-disabled': {
601
+ backgroundColor: 'var(--ids-comp-tab-item-standard-unselected-bg-primary-disabled)',
602
+ borderColor: 'var(--ids-comp-tab-item-standard-unselected-border-primary-disabled)',
603
+ color: 'var(--ids-comp-tab-item-standard-unselected-fg-label-primary-disabled)',
604
+ },
605
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item-disabled>.ids-icon':
606
+ { color: 'var(--ids-comp-tab-item-standard-unselected-fg-icon-primary-disabled)' },
607
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item-disabled>.ids-tab-item__indicator':
608
+ { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-primary-disabled)' },
609
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active': {
610
+ backgroundColor: 'var(--ids-comp-tab-item-standard-selected-bg-primary-default)',
611
+ borderColor: 'var(--ids-comp-tab-item-standard-selected-border-primary-default)',
612
+ color: 'var(--ids-comp-tab-item-standard-selected-fg-label-primary-default)',
613
+ },
614
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active>.ids-icon':
615
+ { color: 'var(--ids-comp-tab-item-standard-selected-fg-icon-primary-default)' },
616
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active>.ids-tab-item__indicator':
617
+ { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-primary-default)' },
618
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:hover': {
619
+ backgroundColor: 'var(--ids-comp-tab-item-standard-selected-bg-primary-hovered)',
620
+ borderColor: 'var(--ids-comp-tab-item-standard-selected-border-primary-hovered)',
621
+ color: 'var(--ids-comp-tab-item-standard-selected-fg-label-primary-hovered)',
622
+ },
623
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:hover>.ids-icon':
624
+ { color: 'var(--ids-comp-tab-item-standard-selected-fg-icon-primary-hovered)' },
625
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:hover>.ids-tab-item__indicator':
626
+ { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-primary-hovered)' },
627
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:focus,.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:focus-visible':
628
+ {
629
+ backgroundColor: 'var(--ids-comp-tab-item-standard-selected-bg-primary-focused)',
630
+ borderColor: 'var(--ids-comp-tab-item-standard-selected-border-primary-focused)',
631
+ color: 'var(--ids-comp-tab-item-standard-selected-fg-label-primary-focused)',
632
+ },
633
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:focus>.ids-icon,.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:focus-visible>.ids-icon':
634
+ { color: 'var(--ids-comp-tab-item-standard-selected-fg-icon-primary-focused)' },
635
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:focus>.ids-tab-item__indicator,.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:focus-visible>.ids-tab-item__indicator':
636
+ { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-primary-focused)' },
637
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:active': {
638
+ backgroundColor: 'var(--ids-comp-tab-item-standard-selected-bg-primary-pressed)',
639
+ borderColor: 'var(--ids-comp-tab-item-standard-selected-border-primary-pressed)',
640
+ color: 'var(--ids-comp-tab-item-standard-selected-fg-label-primary-pressed)',
641
+ },
642
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:active>.ids-icon':
643
+ { color: 'var(--ids-comp-tab-item-standard-selected-fg-icon-primary-pressed)' },
644
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:active>.ids-tab-item__indicator':
645
+ { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-primary-pressed)' },
646
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active.ids-tab-item-disabled':
647
+ {
648
+ backgroundColor: 'var(--ids-comp-tab-item-standard-unselected-bg-primary-disabled)',
649
+ borderColor: 'var(--ids-comp-tab-item-standard-unselected-border-primary-disabled)',
650
+ color: 'var(--ids-comp-tab-item-standard-unselected-fg-label-primary-disabled)',
651
+ },
652
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active.ids-tab-item-disabled>.ids-icon':
653
+ { color: 'var(--ids-comp-tab-item-standard-unselected-fg-icon-primary-disabled)' },
654
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active.ids-tab-item-disabled>.ids-tab-item__indicator':
655
+ { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-primary-disabled)' },
656
+ };
657
+
658
+ addComponents(cssObj);
659
+ };
660
+ };