@i-cell/ids-styles 0.0.32 → 0.0.34

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 (88) hide show
  1. package/dist/accordion/accordion.css +11 -0
  2. package/dist/accordion/accordion.min.css +1 -1
  3. package/dist/accordion/accordion.plugin.js +17 -1
  4. package/dist/avatar/avatar.css +11 -0
  5. package/dist/avatar/avatar.min.css +1 -1
  6. package/dist/avatar/avatar.plugin.js +11 -1
  7. package/dist/button/button-group.css +11 -0
  8. package/dist/button/button-group.min.css +1 -1
  9. package/dist/button/button-group.plugin.js +17 -1
  10. package/dist/button/button.css +11 -0
  11. package/dist/button/button.min.css +1 -1
  12. package/dist/button/button.plugin.js +11 -1
  13. package/dist/card/card.css +11 -0
  14. package/dist/card/card.min.css +1 -1
  15. package/dist/card/card.plugin.js +14 -1
  16. package/dist/checkbox/checkbox.css +11 -0
  17. package/dist/checkbox/checkbox.min.css +1 -1
  18. package/dist/checkbox/checkbox.plugin.js +16 -1
  19. package/dist/components.css +635 -105
  20. package/dist/components.min.css +1 -1
  21. package/dist/components.plugin.js +741 -178
  22. package/dist/dialog/dialog.css +15 -1
  23. package/dist/dialog/dialog.min.css +1 -1
  24. package/dist/dialog/dialog.plugin.js +16 -9
  25. package/dist/divider/divider.css +11 -0
  26. package/dist/divider/divider.min.css +1 -1
  27. package/dist/divider/divider.plugin.js +16 -1
  28. package/dist/form-elements/fieldset/fieldset.css +11 -0
  29. package/dist/form-elements/fieldset/fieldset.min.css +1 -1
  30. package/dist/form-elements/fieldset/fieldset.plugin.js +10 -2
  31. package/dist/form-elements/form-field/form-field.css +11 -0
  32. package/dist/form-elements/form-field/form-field.min.css +1 -1
  33. package/dist/form-elements/form-field/form-field.plugin.js +16 -1
  34. package/dist/form-elements/message/message.css +11 -0
  35. package/dist/form-elements/message/message.min.css +1 -1
  36. package/dist/form-elements/message/message.plugin.js +17 -1
  37. package/dist/icon/icon.css +11 -0
  38. package/dist/icon/icon.min.css +1 -1
  39. package/dist/icon/icon.plugin.js +11 -0
  40. package/dist/icon-button/icon-button.css +11 -0
  41. package/dist/icon-button/icon-button.min.css +1 -1
  42. package/dist/icon-button/icon-button.plugin.js +11 -1
  43. package/dist/menu-item/menu-item.css +252 -11
  44. package/dist/menu-item/menu-item.min.css +1 -1
  45. package/dist/menu-item/menu-item.plugin.js +247 -11
  46. package/dist/notification/notification.css +13 -0
  47. package/dist/notification/notification.min.css +1 -1
  48. package/dist/notification/notification.plugin.js +13 -0
  49. package/dist/overlay-panel/overlay-panel.css +11 -0
  50. package/dist/overlay-panel/overlay-panel.min.css +1 -1
  51. package/dist/overlay-panel/overlay-panel.plugin.js +16 -1
  52. package/dist/paginator/paginator.css +11 -0
  53. package/dist/paginator/paginator.min.css +1 -1
  54. package/dist/paginator/paginator.plugin.js +14 -1
  55. package/dist/radio/radio.css +11 -0
  56. package/dist/radio/radio.min.css +1 -1
  57. package/dist/radio/radio.plugin.js +16 -1
  58. package/dist/reset.css +0 -0
  59. package/dist/reset.min.css +0 -0
  60. package/dist/reset.plugin.js +8 -0
  61. package/dist/segmented-control/segmented-control.css +11 -0
  62. package/dist/segmented-control/segmented-control.min.css +1 -1
  63. package/dist/segmented-control/segmented-control.plugin.js +13 -1
  64. package/dist/segmented-control-toggle/segmented-control-toggle.css +11 -0
  65. package/dist/segmented-control-toggle/segmented-control-toggle.min.css +1 -1
  66. package/dist/segmented-control-toggle/segmented-control-toggle.plugin.js +13 -1
  67. package/dist/select/select.css +11 -0
  68. package/dist/select/select.min.css +1 -1
  69. package/dist/select/select.plugin.js +14 -1
  70. package/dist/snackbar/snackbar.css +11 -0
  71. package/dist/snackbar/snackbar.min.css +1 -1
  72. package/dist/snackbar/snackbar.plugin.js +10 -1
  73. package/dist/switch/switch.css +11 -0
  74. package/dist/switch/switch.min.css +1 -1
  75. package/dist/switch/switch.plugin.js +15 -1
  76. package/dist/tab/tab.css +102 -92
  77. package/dist/tab/tab.min.css +1 -1
  78. package/dist/tab/tab.plugin.js +141 -135
  79. package/dist/table/table.css +11 -1
  80. package/dist/table/table.min.css +1 -1
  81. package/dist/table/table.plugin.js +16 -1
  82. package/dist/tag/tag.css +11 -0
  83. package/dist/tag/tag.min.css +1 -1
  84. package/dist/tag/tag.plugin.js +16 -1
  85. package/dist/tooltip/tooltip.css +11 -0
  86. package/dist/tooltip/tooltip.min.css +1 -1
  87. package/dist/tooltip/tooltip.plugin.js +14 -1
  88. package/package.json +3 -3
package/dist/tab/tab.plugin.js CHANGED
@@ -2,7 +2,20 @@
2
2
  module.exports = function TabPlugin() {
3
3
  return function ({ addComponents }) {
4
4
  const cssObj = {
5
- '.ids-tab-group': { display: 'flex' },
5
+ '.ids-tab-group': {
6
+ boxSizing: 'border-box',
7
+ borderWidth: '0',
8
+ borderStyle: 'none',
9
+ borderColor: 'rgba(0,0,0,0)',
10
+ lineHeight: 1.5,
11
+ display: 'flex',
12
+ },
13
+ '.ids-tab-group::before,.ids-tab-group::after,.ids-tab-group *,.ids-tab-group ::before,.ids-tab-group ::after': {
14
+ boxSizing: 'border-box',
15
+ borderWidth: '0',
16
+ borderStyle: 'none',
17
+ borderColor: 'rgba(0,0,0,0)',
18
+ },
6
19
  '.ids-tab-group .ids-tab-group__container': { display: 'flex', flexDirection: 'column', position: 'relative', flexShrink: 0 },
7
20
  '.ids-tab-group .ids-tab__indicator': {
8
21
  display: 'flex',
@@ -12,7 +25,7 @@ module.exports = function TabPlugin() {
12
25
  pointerEvents: 'none',
13
26
  zIndex: 1,
14
27
  },
15
- '.ids-tab-group .ids-tab__indicator .ids-tab__line': { position: 'relative', boxSizing: 'border-box', opacity: 0 },
28
+ '.ids-tab-group .ids-tab__indicator .ids-tab__line': { position: 'relative', opacity: 0 },
16
29
  '.ids-tab-group.ids-tab-group-horizontal': { flexDirection: 'column', alignItems: 'center', flexShrink: 0 },
17
30
  '.ids-tab-group.ids-tab-group-horizontal>.ids-tab-group__container': { width: '100%' },
18
31
  '.ids-tab-group.ids-tab-group-horizontal>.ids-tab-group__container .ids-tab-group__header .ids-tab': { justifyContent: 'center' },
@@ -71,58 +84,58 @@ module.exports = function TabPlugin() {
71
84
  },
72
85
  '.ids-tab-group.ids-tab-group-vertical .ids-tab__indicator': { top: '0' },
73
86
  '.ids-tab-group.ids-tab-group-vertical .ids-tab__indicator .ids-tab__line': { alignSelf: 'flex-start', height: '100%' },
74
- '.ids-tab-group .ids-tab-group__container .ids-tab-group__header': {
87
+ '.ids-tab-group>.ids-tab-group__container>.ids-tab-group__header': {
75
88
  display: 'flex',
76
89
  justifyContent: 'center',
77
90
  alignItems: 'flex-start',
78
- listStyleType: 'none',
91
+ listStyle: 'none',
79
92
  margin: '0',
80
93
  },
81
- '.ids-tab-group .ids-tab-group__container .ids-tab-group__header .ids-tab': {
94
+ '.ids-tab-group>.ids-tab-group__container>.ids-tab-group__header>.ids-tab': {
82
95
  display: 'flex',
83
96
  alignItems: 'center',
84
97
  cursor: 'pointer',
85
98
  position: 'relative',
86
99
  borderStyle: 'solid',
87
100
  },
88
- '.ids-tab-group .ids-tab-group__container .ids-tab-group__header .ids-tab:focus,.ids-tab-group .ids-tab-group__container .ids-tab-group__header .ids-tab:focus-visible':
101
+ '.ids-tab-group>.ids-tab-group__container>.ids-tab-group__header>.ids-tab:focus,.ids-tab-group>.ids-tab-group__container>.ids-tab-group__header>.ids-tab:focus-visible':
89
102
  { outlineStyle: 'solid' },
90
- '.ids-tab-group .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab__label': {
103
+ '.ids-tab-group>.ids-tab-group__container>.ids-tab-group__header>.ids-tab.ids-tab__label': {
91
104
  display: 'inline-block',
92
105
  textOverflow: 'ellipsis',
93
106
  overflow: 'hidden',
94
107
  whiteSpace: 'nowrap',
95
108
  },
96
- '.ids-tab-group .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab-disabled': {
109
+ '.ids-tab-group>.ids-tab-group__container>.ids-tab-group__header>.ids-tab.ids-tab-disabled': {
97
110
  pointerEvents: 'none',
98
111
  userSelect: 'none',
99
112
  },
100
- '.ids-tab-group .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active>.ids-tab__indicator .ids-tab__line': {
113
+ '.ids-tab-group>.ids-tab-group__container>.ids-tab-group__header>.ids-tab.ids-tab--active>.ids-tab__indicator .ids-tab__line': {
101
114
  opacity: 1,
102
115
  },
103
116
  '.ids-tab-group.ids-tab-group-compact': {
104
117
  padding: 'var(--ids-comp-tab-container-size-padding-y-compact) var(--ids-comp-tab-container-size-padding-x-compact)',
105
118
  gap: 'var(--ids-comp-tab-container-size-gap-compact)',
106
119
  },
107
- '.ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-bottom': {
120
+ '.ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-bottom>.ids-tab-group__container': {
108
121
  borderBottomWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-compact)',
109
122
  },
110
- '.ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-bottom .ids-tab__indicator': {
111
- bottom:
112
- 'calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-compact) + var(--ids-comp-tab-item-size-border-width-compact)))',
113
- },
114
- '.ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-bottom .ids-tab__indicator .ids-tab__line': {
115
- borderBottomWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-compact)',
116
- },
117
- '.ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-top': {
118
- borderTopWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-compact)',
119
- },
120
- '.ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab__indicator': {
121
- top: 'calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-compact) + var(--ids-comp-tab-item-size-border-width-compact)))',
122
- },
123
- '.ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab__indicator .ids-tab__line': {
123
+ '.ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-bottom>.ids-tab-group__container .ids-tab__indicator':
124
+ {
125
+ bottom:
126
+ 'calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-compact) + var(--ids-comp-tab-item-size-border-width-compact)))',
127
+ },
128
+ '.ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-bottom>.ids-tab-group__container .ids-tab__indicator .ids-tab__line':
129
+ { borderBottomWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-compact)' },
130
+ '.ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-top>.ids-tab-group__container': {
124
131
  borderTopWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-compact)',
125
132
  },
133
+ '.ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-top>.ids-tab-group__container .ids-tab__indicator':
134
+ {
135
+ top: 'calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-compact) + var(--ids-comp-tab-item-size-border-width-compact)))',
136
+ },
137
+ '.ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-top>.ids-tab-group__container .ids-tab__indicator .ids-tab__line':
138
+ { borderTopWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-compact)' },
126
139
  '.ids-tab-group.ids-tab-group-compact.ids-tab-group-vertical.ids-tab-group-indicator-left .ids-tab__indicator': {
127
140
  borderLeftWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-compact)',
128
141
  },
@@ -168,24 +181,25 @@ module.exports = function TabPlugin() {
168
181
  padding: 'var(--ids-comp-tab-container-size-padding-y-comfortable) var(--ids-comp-tab-container-size-padding-x-comfortable)',
169
182
  gap: 'var(--ids-comp-tab-container-size-gap-comfortable)',
170
183
  },
171
- '.ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-bottom': {
184
+ '.ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-bottom>.ids-tab-group__container': {
172
185
  borderBottomWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-comfortable)',
173
186
  },
174
- '.ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-bottom .ids-tab__indicator': {
175
- bottom:
176
- 'calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-comfortable) + var(--ids-comp-tab-item-size-border-width-comfortable)))',
177
- },
178
- '.ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-bottom .ids-tab__indicator .ids-tab__line':
187
+ '.ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-bottom>.ids-tab-group__container .ids-tab__indicator':
188
+ {
189
+ bottom:
190
+ 'calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-comfortable) + var(--ids-comp-tab-item-size-border-width-comfortable)))',
191
+ },
192
+ '.ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-bottom>.ids-tab-group__container .ids-tab__indicator .ids-tab__line':
179
193
  { borderBottomWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-comfortable)' },
180
- '.ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-top': {
181
- borderTopWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-comfortable)',
182
- },
183
- '.ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab__indicator': {
184
- top: 'calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-comfortable) + var(--ids-comp-tab-item-size-border-width-comfortable)))',
185
- },
186
- '.ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab__indicator .ids-tab__line': {
194
+ '.ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-top>.ids-tab-group__container': {
187
195
  borderTopWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-comfortable)',
188
196
  },
197
+ '.ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-top>.ids-tab-group__container .ids-tab__indicator':
198
+ {
199
+ top: 'calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-comfortable) + var(--ids-comp-tab-item-size-border-width-comfortable)))',
200
+ },
201
+ '.ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-top>.ids-tab-group__container .ids-tab__indicator .ids-tab__line':
202
+ { borderTopWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-comfortable)' },
189
203
  '.ids-tab-group.ids-tab-group-comfortable.ids-tab-group-vertical.ids-tab-group-indicator-left .ids-tab__indicator': {
190
204
  borderLeftWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-comfortable)',
191
205
  },
@@ -231,25 +245,25 @@ module.exports = function TabPlugin() {
231
245
  padding: 'var(--ids-comp-tab-container-size-padding-y-spacious) var(--ids-comp-tab-container-size-padding-x-spacious)',
232
246
  gap: 'var(--ids-comp-tab-container-size-gap-spacious)',
233
247
  },
234
- '.ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-bottom': {
235
- borderBottomWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-spacious)',
236
- },
237
- '.ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-bottom .ids-tab__indicator': {
238
- bottom:
239
- 'calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-spacious) + var(--ids-comp-tab-item-size-border-width-spacious)))',
240
- },
241
- '.ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-bottom .ids-tab__indicator .ids-tab__line': {
248
+ '.ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-bottom>.ids-tab-group__container': {
242
249
  borderBottomWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-spacious)',
243
250
  },
244
- '.ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-top': {
245
- borderTopWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-spacious)',
246
- },
247
- '.ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab__indicator': {
248
- top: 'calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-spacious) + var(--ids-comp-tab-item-size-border-width-spacious)))',
249
- },
250
- '.ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab__indicator .ids-tab__line': {
251
+ '.ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-bottom>.ids-tab-group__container .ids-tab__indicator':
252
+ {
253
+ bottom:
254
+ 'calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-spacious) + var(--ids-comp-tab-item-size-border-width-spacious)))',
255
+ },
256
+ '.ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-bottom>.ids-tab-group__container .ids-tab__indicator .ids-tab__line':
257
+ { borderBottomWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-spacious)' },
258
+ '.ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-top>.ids-tab-group__container': {
251
259
  borderTopWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-spacious)',
252
260
  },
261
+ '.ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-top>.ids-tab-group__container .ids-tab__indicator':
262
+ {
263
+ top: 'calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-spacious) + var(--ids-comp-tab-item-size-border-width-spacious)))',
264
+ },
265
+ '.ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-top>.ids-tab-group__container .ids-tab__indicator .ids-tab__line':
266
+ { borderTopWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-spacious)' },
253
267
  '.ids-tab-group.ids-tab-group-spacious.ids-tab-group-vertical.ids-tab-group-indicator-left .ids-tab__indicator': {
254
268
  borderLeftWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-spacious)',
255
269
  },
@@ -295,25 +309,25 @@ module.exports = function TabPlugin() {
295
309
  padding: 'var(--ids-comp-tab-container-size-padding-y-dense) var(--ids-comp-tab-container-size-padding-x-dense)',
296
310
  gap: 'var(--ids-comp-tab-container-size-gap-dense)',
297
311
  },
298
- '.ids-tab-group.ids-tab-group-dense.ids-tab-group-horizontal.ids-tab-group-indicator-bottom': {
312
+ '.ids-tab-group.ids-tab-group-dense.ids-tab-group-horizontal.ids-tab-group-indicator-bottom>.ids-tab-group__container': {
299
313
  borderBottomWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-dense)',
300
314
  },
301
- '.ids-tab-group.ids-tab-group-dense.ids-tab-group-horizontal.ids-tab-group-indicator-bottom .ids-tab__indicator': {
302
- bottom:
303
- '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-bottom .ids-tab__indicator .ids-tab__line': {
306
- borderBottomWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-dense)',
307
- },
308
- '.ids-tab-group.ids-tab-group-dense.ids-tab-group-horizontal.ids-tab-group-indicator-top': {
309
- borderTopWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-dense)',
310
- },
311
- '.ids-tab-group.ids-tab-group-dense.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab__indicator': {
312
- top: 'calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-dense) + var(--ids-comp-tab-item-size-border-width-dense)))',
313
- },
314
- '.ids-tab-group.ids-tab-group-dense.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab__indicator .ids-tab__line': {
315
+ '.ids-tab-group.ids-tab-group-dense.ids-tab-group-horizontal.ids-tab-group-indicator-bottom>.ids-tab-group__container .ids-tab__indicator':
316
+ {
317
+ bottom:
318
+ 'calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-dense) + var(--ids-comp-tab-item-size-border-width-dense)))',
319
+ },
320
+ '.ids-tab-group.ids-tab-group-dense.ids-tab-group-horizontal.ids-tab-group-indicator-bottom>.ids-tab-group__container .ids-tab__indicator .ids-tab__line':
321
+ { borderBottomWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-dense)' },
322
+ '.ids-tab-group.ids-tab-group-dense.ids-tab-group-horizontal.ids-tab-group-indicator-top>.ids-tab-group__container': {
315
323
  borderTopWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-dense)',
316
324
  },
325
+ '.ids-tab-group.ids-tab-group-dense.ids-tab-group-horizontal.ids-tab-group-indicator-top>.ids-tab-group__container .ids-tab__indicator':
326
+ {
327
+ top: 'calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-dense) + var(--ids-comp-tab-item-size-border-width-dense)))',
328
+ },
329
+ '.ids-tab-group.ids-tab-group-dense.ids-tab-group-horizontal.ids-tab-group-indicator-top>.ids-tab-group__container .ids-tab__indicator .ids-tab__line':
330
+ { borderTopWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-dense)' },
317
331
  '.ids-tab-group.ids-tab-group-dense.ids-tab-group-vertical.ids-tab-group-indicator-left .ids-tab__indicator': {
318
332
  borderLeftWidth: 'var(--ids-comp-tab-item-active-indicator-size-width-dense)',
319
333
  },
@@ -367,8 +381,8 @@ module.exports = function TabPlugin() {
367
381
  '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab>.ids-icon': {
368
382
  color: 'var(--ids-comp-tab-item-standard-unselected-fg-icon-surface-default)',
369
383
  },
370
- '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab>.ids-tab__indicator': {
371
- color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-surface-default)',
384
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab>.ids-tab__indicator>.ids-tab__line': {
385
+ borderColor: 'var(--ids-comp-tab-item-standard-active-indicator-bg-surface-default)',
372
386
  },
373
387
  '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab:hover': {
374
388
  backgroundColor: 'var(--ids-comp-tab-item-standard-unselected-bg-surface-hovered)',
@@ -378,9 +392,8 @@ module.exports = function TabPlugin() {
378
392
  '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab:hover>.ids-icon': {
379
393
  color: 'var(--ids-comp-tab-item-standard-unselected-fg-icon-surface-hovered)',
380
394
  },
381
- '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab:hover>.ids-tab__indicator': {
382
- color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-surface-hovered)',
383
- },
395
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab:hover>.ids-tab__indicator>.ids-tab__line':
396
+ { borderColor: 'var(--ids-comp-tab-item-standard-active-indicator-bg-surface-hovered)' },
384
397
  '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab:focus,.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab:focus-visible':
385
398
  {
386
399
  backgroundColor: 'var(--ids-comp-tab-item-standard-unselected-bg-surface-focused)',
@@ -390,8 +403,8 @@ module.exports = function TabPlugin() {
390
403
  },
391
404
  '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab:focus>.ids-icon,.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab:focus-visible>.ids-icon':
392
405
  { color: 'var(--ids-comp-tab-item-standard-unselected-fg-icon-surface-focused)' },
393
- '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab:focus>.ids-tab__indicator,.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab:focus-visible>.ids-tab__indicator':
394
- { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-surface-focused)' },
406
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab:focus>.ids-tab__indicator>.ids-tab__line,.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab:focus-visible>.ids-tab__indicator>.ids-tab__line':
407
+ { borderColor: 'var(--ids-comp-tab-item-standard-active-indicator-bg-surface-focused)' },
395
408
  '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab:active': {
396
409
  backgroundColor: 'var(--ids-comp-tab-item-standard-unselected-bg-surface-pressed)',
397
410
  borderColor: 'var(--ids-comp-tab-item-standard-unselected-border-surface-pressed)',
@@ -400,9 +413,8 @@ module.exports = function TabPlugin() {
400
413
  '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab:active>.ids-icon': {
401
414
  color: 'var(--ids-comp-tab-item-standard-unselected-fg-icon-surface-pressed)',
402
415
  },
403
- '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab:active>.ids-tab__indicator': {
404
- color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-surface-pressed)',
405
- },
416
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab:active>.ids-tab__indicator>.ids-tab__line':
417
+ { borderColor: 'var(--ids-comp-tab-item-standard-active-indicator-bg-surface-pressed)' },
406
418
  '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab-disabled': {
407
419
  backgroundColor: 'var(--ids-comp-tab-item-standard-unselected-bg-surface-disabled)',
408
420
  borderColor: 'var(--ids-comp-tab-item-standard-unselected-border-surface-disabled)',
@@ -411,8 +423,8 @@ module.exports = function TabPlugin() {
411
423
  '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab-disabled>.ids-icon': {
412
424
  color: 'var(--ids-comp-tab-item-standard-unselected-fg-icon-surface-disabled)',
413
425
  },
414
- '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab-disabled>.ids-tab__indicator':
415
- { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-surface-disabled)' },
426
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab-disabled>.ids-tab__indicator>.ids-tab__line':
427
+ { borderColor: 'var(--ids-comp-tab-item-standard-active-indicator-bg-surface-disabled)' },
416
428
  '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active': {
417
429
  backgroundColor: 'var(--ids-comp-tab-item-standard-selected-bg-surface-default)',
418
430
  borderColor: 'var(--ids-comp-tab-item-standard-selected-border-surface-default)',
@@ -421,8 +433,8 @@ module.exports = function TabPlugin() {
421
433
  '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active>.ids-icon': {
422
434
  color: 'var(--ids-comp-tab-item-standard-selected-fg-icon-surface-default)',
423
435
  },
424
- '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active>.ids-tab__indicator':
425
- { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-surface-default)' },
436
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active>.ids-tab__indicator>.ids-tab__line':
437
+ { borderColor: 'var(--ids-comp-tab-item-standard-active-indicator-bg-surface-default)' },
426
438
  '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:hover': {
427
439
  backgroundColor: 'var(--ids-comp-tab-item-standard-selected-bg-surface-hovered)',
428
440
  borderColor: 'var(--ids-comp-tab-item-standard-selected-border-surface-hovered)',
@@ -431,8 +443,8 @@ module.exports = function TabPlugin() {
431
443
  '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:hover>.ids-icon': {
432
444
  color: 'var(--ids-comp-tab-item-standard-selected-fg-icon-surface-hovered)',
433
445
  },
434
- '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:hover>.ids-tab__indicator':
435
- { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-surface-hovered)' },
446
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:hover>.ids-tab__indicator>.ids-tab__line':
447
+ { borderColor: 'var(--ids-comp-tab-item-standard-active-indicator-bg-surface-hovered)' },
436
448
  '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:focus,.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:focus-visible':
437
449
  {
438
450
  backgroundColor: 'var(--ids-comp-tab-item-standard-selected-bg-surface-focused)',
@@ -441,8 +453,8 @@ module.exports = function TabPlugin() {
441
453
  },
442
454
  '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:focus>.ids-icon,.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:focus-visible>.ids-icon':
443
455
  { color: 'var(--ids-comp-tab-item-standard-selected-fg-icon-surface-focused)' },
444
- '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:focus>.ids-tab__indicator,.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:focus-visible>.ids-tab__indicator':
445
- { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-surface-focused)' },
456
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:focus>.ids-tab__indicator>.ids-tab__line,.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:focus-visible>.ids-tab__indicator>.ids-tab__line':
457
+ { borderColor: 'var(--ids-comp-tab-item-standard-active-indicator-bg-surface-focused)' },
446
458
  '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:active': {
447
459
  backgroundColor: 'var(--ids-comp-tab-item-standard-selected-bg-surface-pressed)',
448
460
  borderColor: 'var(--ids-comp-tab-item-standard-selected-border-surface-pressed)',
@@ -451,8 +463,8 @@ module.exports = function TabPlugin() {
451
463
  '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:active>.ids-icon': {
452
464
  color: 'var(--ids-comp-tab-item-standard-selected-fg-icon-surface-pressed)',
453
465
  },
454
- '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:active>.ids-tab__indicator':
455
- { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-surface-pressed)' },
466
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:active>.ids-tab__indicator>.ids-tab__line':
467
+ { borderColor: 'var(--ids-comp-tab-item-standard-active-indicator-bg-surface-pressed)' },
456
468
  '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active.ids-tab-disabled': {
457
469
  backgroundColor: 'var(--ids-comp-tab-item-standard-unselected-bg-surface-disabled)',
458
470
  borderColor: 'var(--ids-comp-tab-item-standard-unselected-border-surface-disabled)',
@@ -460,8 +472,8 @@ module.exports = function TabPlugin() {
460
472
  },
461
473
  '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active.ids-tab-disabled>.ids-icon':
462
474
  { color: 'var(--ids-comp-tab-item-standard-unselected-fg-icon-surface-disabled)' },
463
- '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active.ids-tab-disabled>.ids-tab__indicator':
464
- { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-surface-disabled)' },
475
+ '.ids-tab-group.ids-tab-group-surface>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active.ids-tab-disabled>.ids-tab__indicator>.ids-tab__line':
476
+ { borderColor: 'var(--ids-comp-tab-item-standard-active-indicator-bg-surface-disabled)' },
465
477
  '.ids-tab-group.ids-tab-group-light': { backgroundColor: 'var(--ids-comp-tab-container-color-bg-default)' },
466
478
  '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header': {
467
479
  backgroundColor: 'var(--ids-comp-tab-tabgroup-color-bg-default)',
@@ -474,8 +486,8 @@ module.exports = function TabPlugin() {
474
486
  '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab>.ids-icon': {
475
487
  color: 'var(--ids-comp-tab-item-standard-unselected-fg-icon-light-default)',
476
488
  },
477
- '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab>.ids-tab__indicator': {
478
- color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-light-default)',
489
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab>.ids-tab__indicator>.ids-tab__line': {
490
+ borderColor: 'var(--ids-comp-tab-item-standard-active-indicator-bg-light-default)',
479
491
  },
480
492
  '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab:hover': {
481
493
  backgroundColor: 'var(--ids-comp-tab-item-standard-unselected-bg-light-hovered)',
@@ -485,9 +497,8 @@ module.exports = function TabPlugin() {
485
497
  '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab:hover>.ids-icon': {
486
498
  color: 'var(--ids-comp-tab-item-standard-unselected-fg-icon-light-hovered)',
487
499
  },
488
- '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab:hover>.ids-tab__indicator': {
489
- color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-light-hovered)',
490
- },
500
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab:hover>.ids-tab__indicator>.ids-tab__line':
501
+ { borderColor: 'var(--ids-comp-tab-item-standard-active-indicator-bg-light-hovered)' },
491
502
  '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab:focus,.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab:focus-visible':
492
503
  {
493
504
  backgroundColor: 'var(--ids-comp-tab-item-standard-unselected-bg-light-focused)',
@@ -497,8 +508,8 @@ module.exports = function TabPlugin() {
497
508
  },
498
509
  '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab:focus>.ids-icon,.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab:focus-visible>.ids-icon':
499
510
  { color: 'var(--ids-comp-tab-item-standard-unselected-fg-icon-light-focused)' },
500
- '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab:focus>.ids-tab__indicator,.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab:focus-visible>.ids-tab__indicator':
501
- { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-light-focused)' },
511
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab:focus>.ids-tab__indicator>.ids-tab__line,.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab:focus-visible>.ids-tab__indicator>.ids-tab__line':
512
+ { borderColor: 'var(--ids-comp-tab-item-standard-active-indicator-bg-light-focused)' },
502
513
  '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab:active': {
503
514
  backgroundColor: 'var(--ids-comp-tab-item-standard-unselected-bg-light-pressed)',
504
515
  borderColor: 'var(--ids-comp-tab-item-standard-unselected-border-light-pressed)',
@@ -507,9 +518,8 @@ module.exports = function TabPlugin() {
507
518
  '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab:active>.ids-icon': {
508
519
  color: 'var(--ids-comp-tab-item-standard-unselected-fg-icon-light-pressed)',
509
520
  },
510
- '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab:active>.ids-tab__indicator': {
511
- color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-light-pressed)',
512
- },
521
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab:active>.ids-tab__indicator>.ids-tab__line':
522
+ { borderColor: 'var(--ids-comp-tab-item-standard-active-indicator-bg-light-pressed)' },
513
523
  '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab-disabled': {
514
524
  backgroundColor: 'var(--ids-comp-tab-item-standard-unselected-bg-light-disabled)',
515
525
  borderColor: 'var(--ids-comp-tab-item-standard-unselected-border-light-disabled)',
@@ -518,9 +528,8 @@ module.exports = function TabPlugin() {
518
528
  '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab-disabled>.ids-icon': {
519
529
  color: 'var(--ids-comp-tab-item-standard-unselected-fg-icon-light-disabled)',
520
530
  },
521
- '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab-disabled>.ids-tab__indicator': {
522
- color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-light-disabled)',
523
- },
531
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab-disabled>.ids-tab__indicator>.ids-tab__line':
532
+ { borderColor: 'var(--ids-comp-tab-item-standard-active-indicator-bg-light-disabled)' },
524
533
  '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active': {
525
534
  backgroundColor: 'var(--ids-comp-tab-item-standard-selected-bg-light-default)',
526
535
  borderColor: 'var(--ids-comp-tab-item-standard-selected-border-light-default)',
@@ -529,9 +538,8 @@ module.exports = function TabPlugin() {
529
538
  '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active>.ids-icon': {
530
539
  color: 'var(--ids-comp-tab-item-standard-selected-fg-icon-light-default)',
531
540
  },
532
- '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active>.ids-tab__indicator': {
533
- color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-light-default)',
534
- },
541
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active>.ids-tab__indicator>.ids-tab__line':
542
+ { borderColor: 'var(--ids-comp-tab-item-standard-active-indicator-bg-light-default)' },
535
543
  '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:hover': {
536
544
  backgroundColor: 'var(--ids-comp-tab-item-standard-selected-bg-light-hovered)',
537
545
  borderColor: 'var(--ids-comp-tab-item-standard-selected-border-light-hovered)',
@@ -540,8 +548,8 @@ module.exports = function TabPlugin() {
540
548
  '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:hover>.ids-icon': {
541
549
  color: 'var(--ids-comp-tab-item-standard-selected-fg-icon-light-hovered)',
542
550
  },
543
- '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:hover>.ids-tab__indicator':
544
- { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-light-hovered)' },
551
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:hover>.ids-tab__indicator>.ids-tab__line':
552
+ { borderColor: 'var(--ids-comp-tab-item-standard-active-indicator-bg-light-hovered)' },
545
553
  '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:focus,.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:focus-visible':
546
554
  {
547
555
  backgroundColor: 'var(--ids-comp-tab-item-standard-selected-bg-light-focused)',
@@ -550,8 +558,8 @@ module.exports = function TabPlugin() {
550
558
  },
551
559
  '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:focus>.ids-icon,.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:focus-visible>.ids-icon':
552
560
  { color: 'var(--ids-comp-tab-item-standard-selected-fg-icon-light-focused)' },
553
- '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:focus>.ids-tab__indicator,.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:focus-visible>.ids-tab__indicator':
554
- { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-light-focused)' },
561
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:focus>.ids-tab__indicator>.ids-tab__line,.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:focus-visible>.ids-tab__indicator>.ids-tab__line':
562
+ { borderColor: 'var(--ids-comp-tab-item-standard-active-indicator-bg-light-focused)' },
555
563
  '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:active': {
556
564
  backgroundColor: 'var(--ids-comp-tab-item-standard-selected-bg-light-pressed)',
557
565
  borderColor: 'var(--ids-comp-tab-item-standard-selected-border-light-pressed)',
@@ -560,8 +568,8 @@ module.exports = function TabPlugin() {
560
568
  '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:active>.ids-icon': {
561
569
  color: 'var(--ids-comp-tab-item-standard-selected-fg-icon-light-pressed)',
562
570
  },
563
- '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:active>.ids-tab__indicator':
564
- { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-light-pressed)' },
571
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:active>.ids-tab__indicator>.ids-tab__line':
572
+ { borderColor: 'var(--ids-comp-tab-item-standard-active-indicator-bg-light-pressed)' },
565
573
  '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active.ids-tab-disabled': {
566
574
  backgroundColor: 'var(--ids-comp-tab-item-standard-unselected-bg-light-disabled)',
567
575
  borderColor: 'var(--ids-comp-tab-item-standard-unselected-border-light-disabled)',
@@ -569,8 +577,8 @@ module.exports = function TabPlugin() {
569
577
  },
570
578
  '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active.ids-tab-disabled>.ids-icon':
571
579
  { color: 'var(--ids-comp-tab-item-standard-unselected-fg-icon-light-disabled)' },
572
- '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active.ids-tab-disabled>.ids-tab__indicator':
573
- { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-light-disabled)' },
580
+ '.ids-tab-group.ids-tab-group-light>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active.ids-tab-disabled>.ids-tab__indicator>.ids-tab__line':
581
+ { borderColor: 'var(--ids-comp-tab-item-standard-active-indicator-bg-light-disabled)' },
574
582
  '.ids-tab-group.ids-tab-group-primary': { backgroundColor: 'var(--ids-comp-tab-container-color-bg-default)' },
575
583
  '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header': {
576
584
  backgroundColor: 'var(--ids-comp-tab-tabgroup-color-bg-default)',
@@ -583,8 +591,8 @@ module.exports = function TabPlugin() {
583
591
  '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab>.ids-icon': {
584
592
  color: 'var(--ids-comp-tab-item-standard-unselected-fg-icon-primary-default)',
585
593
  },
586
- '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab>.ids-tab__indicator': {
587
- color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-primary-default)',
594
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab>.ids-tab__indicator>.ids-tab__line': {
595
+ borderColor: 'var(--ids-comp-tab-item-standard-active-indicator-bg-primary-default)',
588
596
  },
589
597
  '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab:hover': {
590
598
  backgroundColor: 'var(--ids-comp-tab-item-standard-unselected-bg-primary-hovered)',
@@ -594,9 +602,8 @@ module.exports = function TabPlugin() {
594
602
  '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab:hover>.ids-icon': {
595
603
  color: 'var(--ids-comp-tab-item-standard-unselected-fg-icon-primary-hovered)',
596
604
  },
597
- '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab:hover>.ids-tab__indicator': {
598
- color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-primary-hovered)',
599
- },
605
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab:hover>.ids-tab__indicator>.ids-tab__line':
606
+ { borderColor: 'var(--ids-comp-tab-item-standard-active-indicator-bg-primary-hovered)' },
600
607
  '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab:focus,.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab:focus-visible':
601
608
  {
602
609
  backgroundColor: 'var(--ids-comp-tab-item-standard-unselected-bg-primary-focused)',
@@ -606,8 +613,8 @@ module.exports = function TabPlugin() {
606
613
  },
607
614
  '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab:focus>.ids-icon,.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab:focus-visible>.ids-icon':
608
615
  { color: 'var(--ids-comp-tab-item-standard-unselected-fg-icon-primary-focused)' },
609
- '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab:focus>.ids-tab__indicator,.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab:focus-visible>.ids-tab__indicator':
610
- { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-primary-focused)' },
616
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab:focus>.ids-tab__indicator>.ids-tab__line,.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab:focus-visible>.ids-tab__indicator>.ids-tab__line':
617
+ { borderColor: 'var(--ids-comp-tab-item-standard-active-indicator-bg-primary-focused)' },
611
618
  '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab:active': {
612
619
  backgroundColor: 'var(--ids-comp-tab-item-standard-unselected-bg-primary-pressed)',
613
620
  borderColor: 'var(--ids-comp-tab-item-standard-unselected-border-primary-pressed)',
@@ -616,9 +623,8 @@ module.exports = function TabPlugin() {
616
623
  '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab:active>.ids-icon': {
617
624
  color: 'var(--ids-comp-tab-item-standard-unselected-fg-icon-primary-pressed)',
618
625
  },
619
- '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab:active>.ids-tab__indicator': {
620
- color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-primary-pressed)',
621
- },
626
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab:active>.ids-tab__indicator>.ids-tab__line':
627
+ { borderColor: 'var(--ids-comp-tab-item-standard-active-indicator-bg-primary-pressed)' },
622
628
  '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab-disabled': {
623
629
  backgroundColor: 'var(--ids-comp-tab-item-standard-unselected-bg-primary-disabled)',
624
630
  borderColor: 'var(--ids-comp-tab-item-standard-unselected-border-primary-disabled)',
@@ -627,8 +633,8 @@ module.exports = function TabPlugin() {
627
633
  '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab-disabled>.ids-icon': {
628
634
  color: 'var(--ids-comp-tab-item-standard-unselected-fg-icon-primary-disabled)',
629
635
  },
630
- '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab-disabled>.ids-tab__indicator':
631
- { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-primary-disabled)' },
636
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab-disabled>.ids-tab__indicator>.ids-tab__line':
637
+ { borderColor: 'var(--ids-comp-tab-item-standard-active-indicator-bg-primary-disabled)' },
632
638
  '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active': {
633
639
  backgroundColor: 'var(--ids-comp-tab-item-standard-selected-bg-primary-default)',
634
640
  borderColor: 'var(--ids-comp-tab-item-standard-selected-border-primary-default)',
@@ -637,8 +643,8 @@ module.exports = function TabPlugin() {
637
643
  '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active>.ids-icon': {
638
644
  color: 'var(--ids-comp-tab-item-standard-selected-fg-icon-primary-default)',
639
645
  },
640
- '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active>.ids-tab__indicator':
641
- { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-primary-default)' },
646
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active>.ids-tab__indicator>.ids-tab__line':
647
+ { borderColor: 'var(--ids-comp-tab-item-standard-active-indicator-bg-primary-default)' },
642
648
  '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:hover': {
643
649
  backgroundColor: 'var(--ids-comp-tab-item-standard-selected-bg-primary-hovered)',
644
650
  borderColor: 'var(--ids-comp-tab-item-standard-selected-border-primary-hovered)',
@@ -647,8 +653,8 @@ module.exports = function TabPlugin() {
647
653
  '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:hover>.ids-icon': {
648
654
  color: 'var(--ids-comp-tab-item-standard-selected-fg-icon-primary-hovered)',
649
655
  },
650
- '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:hover>.ids-tab__indicator':
651
- { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-primary-hovered)' },
656
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:hover>.ids-tab__indicator>.ids-tab__line':
657
+ { borderColor: 'var(--ids-comp-tab-item-standard-active-indicator-bg-primary-hovered)' },
652
658
  '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:focus,.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:focus-visible':
653
659
  {
654
660
  backgroundColor: 'var(--ids-comp-tab-item-standard-selected-bg-primary-focused)',
@@ -657,8 +663,8 @@ module.exports = function TabPlugin() {
657
663
  },
658
664
  '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:focus>.ids-icon,.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:focus-visible>.ids-icon':
659
665
  { color: 'var(--ids-comp-tab-item-standard-selected-fg-icon-primary-focused)' },
660
- '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:focus>.ids-tab__indicator,.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:focus-visible>.ids-tab__indicator':
661
- { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-primary-focused)' },
666
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:focus>.ids-tab__indicator>.ids-tab__line,.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:focus-visible>.ids-tab__indicator>.ids-tab__line':
667
+ { borderColor: 'var(--ids-comp-tab-item-standard-active-indicator-bg-primary-focused)' },
662
668
  '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:active': {
663
669
  backgroundColor: 'var(--ids-comp-tab-item-standard-selected-bg-primary-pressed)',
664
670
  borderColor: 'var(--ids-comp-tab-item-standard-selected-border-primary-pressed)',
@@ -667,8 +673,8 @@ module.exports = function TabPlugin() {
667
673
  '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:active>.ids-icon': {
668
674
  color: 'var(--ids-comp-tab-item-standard-selected-fg-icon-primary-pressed)',
669
675
  },
670
- '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:active>.ids-tab__indicator':
671
- { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-primary-pressed)' },
676
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:active>.ids-tab__indicator>.ids-tab__line':
677
+ { borderColor: 'var(--ids-comp-tab-item-standard-active-indicator-bg-primary-pressed)' },
672
678
  '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active.ids-tab-disabled': {
673
679
  backgroundColor: 'var(--ids-comp-tab-item-standard-unselected-bg-primary-disabled)',
674
680
  borderColor: 'var(--ids-comp-tab-item-standard-unselected-border-primary-disabled)',
@@ -676,8 +682,8 @@ module.exports = function TabPlugin() {
676
682
  },
677
683
  '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active.ids-tab-disabled>.ids-icon':
678
684
  { color: 'var(--ids-comp-tab-item-standard-unselected-fg-icon-primary-disabled)' },
679
- '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active.ids-tab-disabled>.ids-tab__indicator':
680
- { color: 'var(--ids-comp-tab-item-standard-active-indicator-bg-primary-disabled)' },
685
+ '.ids-tab-group.ids-tab-group-primary>.ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active.ids-tab-disabled>.ids-tab__indicator>.ids-tab__line':
686
+ { borderColor: 'var(--ids-comp-tab-item-standard-active-indicator-bg-primary-disabled)' },
681
687
  };
682
688
 
683
689
  addComponents(cssObj);
package/dist/table/table.css CHANGED
@@ -1,9 +1,19 @@
1
1
  .ids-table {
2
- position: relative;
3
2
  box-sizing: border-box;
3
+ border-width: 0;
4
+ border-style: none;
5
+ border-color: transparent;
6
+ line-height: 1.5;
7
+ position: relative;
4
8
  display: block;
5
9
  max-width: 100%;
6
10
  }
11
+ .ids-table::before, .ids-table::after, .ids-table *, .ids-table ::before, .ids-table ::after {
12
+ box-sizing: border-box;
13
+ border-width: 0;
14
+ border-style: none;
15
+ border-color: transparent;
16
+ }
7
17
  .ids-table > .ids-table__horizontal-scroll {
8
18
  position: relative;
9
19
  overflow: auto;