@i-cell/ids-styles 0.0.33 → 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 +468 -94
  20. package/dist/components.min.css +1 -1
  21. package/dist/components.plugin.js +585 -168
  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 +85 -0
  44. package/dist/menu-item/menu-item.min.css +1 -1
  45. package/dist/menu-item/menu-item.plugin.js +91 -1
  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 +1 -1
package/dist/tab/tab.css CHANGED
@@ -1,6 +1,17 @@
1
1
  .ids-tab-group {
2
+ box-sizing: border-box;
3
+ border-width: 0;
4
+ border-style: none;
5
+ border-color: transparent;
6
+ line-height: 1.5;
2
7
  display: flex;
3
8
  }
9
+ .ids-tab-group::before, .ids-tab-group::after, .ids-tab-group *, .ids-tab-group ::before, .ids-tab-group ::after {
10
+ box-sizing: border-box;
11
+ border-width: 0;
12
+ border-style: none;
13
+ border-color: transparent;
14
+ }
4
15
  .ids-tab-group .ids-tab-group__container {
5
16
  display: flex;
6
17
  flex-direction: column;
@@ -17,7 +28,6 @@
17
28
  }
18
29
  .ids-tab-group .ids-tab__indicator .ids-tab__line {
19
30
  position: relative;
20
- box-sizing: border-box;
21
31
  opacity: 0;
22
32
  }
23
33
  .ids-tab-group.ids-tab-group-horizontal {
@@ -118,56 +128,56 @@
118
128
  align-self: flex-start;
119
129
  height: 100%;
120
130
  }
121
- .ids-tab-group .ids-tab-group__container .ids-tab-group__header {
131
+ .ids-tab-group > .ids-tab-group__container > .ids-tab-group__header {
122
132
  display: flex;
123
133
  justify-content: center;
124
134
  align-items: flex-start;
125
- list-style-type: none;
135
+ list-style: none;
126
136
  margin: 0;
127
137
  }
128
- .ids-tab-group .ids-tab-group__container .ids-tab-group__header .ids-tab {
138
+ .ids-tab-group > .ids-tab-group__container > .ids-tab-group__header > .ids-tab {
129
139
  display: flex;
130
140
  align-items: center;
131
141
  cursor: pointer;
132
142
  position: relative;
133
143
  border-style: solid;
134
144
  }
135
- .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 {
145
+ .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 {
136
146
  outline-style: solid;
137
147
  }
138
- .ids-tab-group .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab__label {
148
+ .ids-tab-group > .ids-tab-group__container > .ids-tab-group__header > .ids-tab.ids-tab__label {
139
149
  display: inline-block;
140
150
  text-overflow: ellipsis;
141
151
  overflow: hidden;
142
152
  white-space: nowrap;
143
153
  }
144
- .ids-tab-group .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab-disabled {
154
+ .ids-tab-group > .ids-tab-group__container > .ids-tab-group__header > .ids-tab.ids-tab-disabled {
145
155
  pointer-events: none;
146
156
  user-select: none;
147
157
  }
148
- .ids-tab-group .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active > .ids-tab__indicator .ids-tab__line {
158
+ .ids-tab-group > .ids-tab-group__container > .ids-tab-group__header > .ids-tab.ids-tab--active > .ids-tab__indicator .ids-tab__line {
149
159
  opacity: 1;
150
160
  }
151
161
  .ids-tab-group.ids-tab-group-compact {
152
162
  padding: var(--ids-comp-tab-container-size-padding-y-compact) var(--ids-comp-tab-container-size-padding-x-compact);
153
163
  gap: var(--ids-comp-tab-container-size-gap-compact);
154
164
  }
155
- .ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-bottom {
165
+ .ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-bottom > .ids-tab-group__container {
156
166
  border-bottom-width: var(--ids-comp-tab-item-active-indicator-size-width-compact);
157
167
  }
158
- .ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-bottom .ids-tab__indicator {
168
+ .ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-bottom > .ids-tab-group__container .ids-tab__indicator {
159
169
  bottom: calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-compact) + var(--ids-comp-tab-item-size-border-width-compact)));
160
170
  }
161
- .ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-bottom .ids-tab__indicator .ids-tab__line {
171
+ .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 {
162
172
  border-bottom-width: var(--ids-comp-tab-item-active-indicator-size-width-compact);
163
173
  }
164
- .ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-top {
174
+ .ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-top > .ids-tab-group__container {
165
175
  border-top-width: var(--ids-comp-tab-item-active-indicator-size-width-compact);
166
176
  }
167
- .ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab__indicator {
177
+ .ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-top > .ids-tab-group__container .ids-tab__indicator {
168
178
  top: calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-compact) + var(--ids-comp-tab-item-size-border-width-compact)));
169
179
  }
170
- .ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab__indicator .ids-tab__line {
180
+ .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 {
171
181
  border-top-width: var(--ids-comp-tab-item-active-indicator-size-width-compact);
172
182
  }
173
183
  .ids-tab-group.ids-tab-group-compact.ids-tab-group-vertical.ids-tab-group-indicator-left .ids-tab__indicator {
@@ -216,22 +226,22 @@
216
226
  padding: var(--ids-comp-tab-container-size-padding-y-comfortable) var(--ids-comp-tab-container-size-padding-x-comfortable);
217
227
  gap: var(--ids-comp-tab-container-size-gap-comfortable);
218
228
  }
219
- .ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-bottom {
229
+ .ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-bottom > .ids-tab-group__container {
220
230
  border-bottom-width: var(--ids-comp-tab-item-active-indicator-size-width-comfortable);
221
231
  }
222
- .ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-bottom .ids-tab__indicator {
232
+ .ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-bottom > .ids-tab-group__container .ids-tab__indicator {
223
233
  bottom: calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-comfortable) + var(--ids-comp-tab-item-size-border-width-comfortable)));
224
234
  }
225
- .ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-bottom .ids-tab__indicator .ids-tab__line {
235
+ .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 {
226
236
  border-bottom-width: var(--ids-comp-tab-item-active-indicator-size-width-comfortable);
227
237
  }
228
- .ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-top {
238
+ .ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-top > .ids-tab-group__container {
229
239
  border-top-width: var(--ids-comp-tab-item-active-indicator-size-width-comfortable);
230
240
  }
231
- .ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab__indicator {
241
+ .ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-top > .ids-tab-group__container .ids-tab__indicator {
232
242
  top: calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-comfortable) + var(--ids-comp-tab-item-size-border-width-comfortable)));
233
243
  }
234
- .ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab__indicator .ids-tab__line {
244
+ .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 {
235
245
  border-top-width: var(--ids-comp-tab-item-active-indicator-size-width-comfortable);
236
246
  }
237
247
  .ids-tab-group.ids-tab-group-comfortable.ids-tab-group-vertical.ids-tab-group-indicator-left .ids-tab__indicator {
@@ -280,22 +290,22 @@
280
290
  padding: var(--ids-comp-tab-container-size-padding-y-spacious) var(--ids-comp-tab-container-size-padding-x-spacious);
281
291
  gap: var(--ids-comp-tab-container-size-gap-spacious);
282
292
  }
283
- .ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-bottom {
293
+ .ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-bottom > .ids-tab-group__container {
284
294
  border-bottom-width: var(--ids-comp-tab-item-active-indicator-size-width-spacious);
285
295
  }
286
- .ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-bottom .ids-tab__indicator {
296
+ .ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-bottom > .ids-tab-group__container .ids-tab__indicator {
287
297
  bottom: calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-spacious) + var(--ids-comp-tab-item-size-border-width-spacious)));
288
298
  }
289
- .ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-bottom .ids-tab__indicator .ids-tab__line {
299
+ .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 {
290
300
  border-bottom-width: var(--ids-comp-tab-item-active-indicator-size-width-spacious);
291
301
  }
292
- .ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-top {
302
+ .ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-top > .ids-tab-group__container {
293
303
  border-top-width: var(--ids-comp-tab-item-active-indicator-size-width-spacious);
294
304
  }
295
- .ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab__indicator {
305
+ .ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-top > .ids-tab-group__container .ids-tab__indicator {
296
306
  top: calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-spacious) + var(--ids-comp-tab-item-size-border-width-spacious)));
297
307
  }
298
- .ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab__indicator .ids-tab__line {
308
+ .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 {
299
309
  border-top-width: var(--ids-comp-tab-item-active-indicator-size-width-spacious);
300
310
  }
301
311
  .ids-tab-group.ids-tab-group-spacious.ids-tab-group-vertical.ids-tab-group-indicator-left .ids-tab__indicator {
@@ -344,22 +354,22 @@
344
354
  padding: var(--ids-comp-tab-container-size-padding-y-dense) var(--ids-comp-tab-container-size-padding-x-dense);
345
355
  gap: var(--ids-comp-tab-container-size-gap-dense);
346
356
  }
347
- .ids-tab-group.ids-tab-group-dense.ids-tab-group-horizontal.ids-tab-group-indicator-bottom {
357
+ .ids-tab-group.ids-tab-group-dense.ids-tab-group-horizontal.ids-tab-group-indicator-bottom > .ids-tab-group__container {
348
358
  border-bottom-width: var(--ids-comp-tab-item-active-indicator-size-width-dense);
349
359
  }
350
- .ids-tab-group.ids-tab-group-dense.ids-tab-group-horizontal.ids-tab-group-indicator-bottom .ids-tab__indicator {
360
+ .ids-tab-group.ids-tab-group-dense.ids-tab-group-horizontal.ids-tab-group-indicator-bottom > .ids-tab-group__container .ids-tab__indicator {
351
361
  bottom: calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-dense) + var(--ids-comp-tab-item-size-border-width-dense)));
352
362
  }
353
- .ids-tab-group.ids-tab-group-dense.ids-tab-group-horizontal.ids-tab-group-indicator-bottom .ids-tab__indicator .ids-tab__line {
363
+ .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 {
354
364
  border-bottom-width: var(--ids-comp-tab-item-active-indicator-size-width-dense);
355
365
  }
356
- .ids-tab-group.ids-tab-group-dense.ids-tab-group-horizontal.ids-tab-group-indicator-top {
366
+ .ids-tab-group.ids-tab-group-dense.ids-tab-group-horizontal.ids-tab-group-indicator-top > .ids-tab-group__container {
357
367
  border-top-width: var(--ids-comp-tab-item-active-indicator-size-width-dense);
358
368
  }
359
- .ids-tab-group.ids-tab-group-dense.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab__indicator {
369
+ .ids-tab-group.ids-tab-group-dense.ids-tab-group-horizontal.ids-tab-group-indicator-top > .ids-tab-group__container .ids-tab__indicator {
360
370
  top: calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-dense) + var(--ids-comp-tab-item-size-border-width-dense)));
361
371
  }
362
- .ids-tab-group.ids-tab-group-dense.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab__indicator .ids-tab__line {
372
+ .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 {
363
373
  border-top-width: var(--ids-comp-tab-item-active-indicator-size-width-dense);
364
374
  }
365
375
  .ids-tab-group.ids-tab-group-dense.ids-tab-group-vertical.ids-tab-group-indicator-left .ids-tab__indicator {
@@ -418,8 +428,8 @@
418
428
  .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab > .ids-icon {
419
429
  color: var(--ids-comp-tab-item-standard-unselected-fg-icon-surface-default);
420
430
  }
421
- .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab > .ids-tab__indicator {
422
- color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-default);
431
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab > .ids-tab__indicator > .ids-tab__line {
432
+ border-color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-default);
423
433
  }
424
434
  .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab:hover {
425
435
  background-color: var(--ids-comp-tab-item-standard-unselected-bg-surface-hovered);
@@ -429,8 +439,8 @@
429
439
  .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab:hover > .ids-icon {
430
440
  color: var(--ids-comp-tab-item-standard-unselected-fg-icon-surface-hovered);
431
441
  }
432
- .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab:hover > .ids-tab__indicator {
433
- color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-hovered);
442
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab:hover > .ids-tab__indicator > .ids-tab__line {
443
+ border-color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-hovered);
434
444
  }
435
445
  .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 {
436
446
  background-color: var(--ids-comp-tab-item-standard-unselected-bg-surface-focused);
@@ -441,8 +451,8 @@
441
451
  .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 {
442
452
  color: var(--ids-comp-tab-item-standard-unselected-fg-icon-surface-focused);
443
453
  }
444
- .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 {
445
- color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-focused);
454
+ .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 {
455
+ border-color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-focused);
446
456
  }
447
457
  .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab:active {
448
458
  background-color: var(--ids-comp-tab-item-standard-unselected-bg-surface-pressed);
@@ -452,8 +462,8 @@
452
462
  .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab:active > .ids-icon {
453
463
  color: var(--ids-comp-tab-item-standard-unselected-fg-icon-surface-pressed);
454
464
  }
455
- .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab:active > .ids-tab__indicator {
456
- color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-pressed);
465
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab:active > .ids-tab__indicator > .ids-tab__line {
466
+ border-color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-pressed);
457
467
  }
458
468
  .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab-disabled {
459
469
  background-color: var(--ids-comp-tab-item-standard-unselected-bg-surface-disabled);
@@ -463,8 +473,8 @@
463
473
  .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab-disabled > .ids-icon {
464
474
  color: var(--ids-comp-tab-item-standard-unselected-fg-icon-surface-disabled);
465
475
  }
466
- .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab-disabled > .ids-tab__indicator {
467
- color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-disabled);
476
+ .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 {
477
+ border-color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-disabled);
468
478
  }
469
479
  .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active {
470
480
  background-color: var(--ids-comp-tab-item-standard-selected-bg-surface-default);
@@ -474,8 +484,8 @@
474
484
  .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active > .ids-icon {
475
485
  color: var(--ids-comp-tab-item-standard-selected-fg-icon-surface-default);
476
486
  }
477
- .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active > .ids-tab__indicator {
478
- color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-default);
487
+ .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 {
488
+ border-color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-default);
479
489
  }
480
490
  .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:hover {
481
491
  background-color: var(--ids-comp-tab-item-standard-selected-bg-surface-hovered);
@@ -485,8 +495,8 @@
485
495
  .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:hover > .ids-icon {
486
496
  color: var(--ids-comp-tab-item-standard-selected-fg-icon-surface-hovered);
487
497
  }
488
- .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:hover > .ids-tab__indicator {
489
- color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-hovered);
498
+ .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 {
499
+ border-color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-hovered);
490
500
  }
491
501
  .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 {
492
502
  background-color: var(--ids-comp-tab-item-standard-selected-bg-surface-focused);
@@ -496,8 +506,8 @@
496
506
  .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 {
497
507
  color: var(--ids-comp-tab-item-standard-selected-fg-icon-surface-focused);
498
508
  }
499
- .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 {
500
- color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-focused);
509
+ .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 {
510
+ border-color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-focused);
501
511
  }
502
512
  .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:active {
503
513
  background-color: var(--ids-comp-tab-item-standard-selected-bg-surface-pressed);
@@ -507,8 +517,8 @@
507
517
  .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:active > .ids-icon {
508
518
  color: var(--ids-comp-tab-item-standard-selected-fg-icon-surface-pressed);
509
519
  }
510
- .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:active > .ids-tab__indicator {
511
- color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-pressed);
520
+ .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 {
521
+ border-color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-pressed);
512
522
  }
513
523
  .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active.ids-tab-disabled {
514
524
  background-color: var(--ids-comp-tab-item-standard-unselected-bg-surface-disabled);
@@ -518,8 +528,8 @@
518
528
  .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 {
519
529
  color: var(--ids-comp-tab-item-standard-unselected-fg-icon-surface-disabled);
520
530
  }
521
- .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 {
522
- color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-disabled);
531
+ .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 {
532
+ border-color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-disabled);
523
533
  }
524
534
  .ids-tab-group.ids-tab-group-light {
525
535
  background-color: var(--ids-comp-tab-container-color-bg-default);
@@ -535,8 +545,8 @@
535
545
  .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab > .ids-icon {
536
546
  color: var(--ids-comp-tab-item-standard-unselected-fg-icon-light-default);
537
547
  }
538
- .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab > .ids-tab__indicator {
539
- color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-default);
548
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab > .ids-tab__indicator > .ids-tab__line {
549
+ border-color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-default);
540
550
  }
541
551
  .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab:hover {
542
552
  background-color: var(--ids-comp-tab-item-standard-unselected-bg-light-hovered);
@@ -546,8 +556,8 @@
546
556
  .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab:hover > .ids-icon {
547
557
  color: var(--ids-comp-tab-item-standard-unselected-fg-icon-light-hovered);
548
558
  }
549
- .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab:hover > .ids-tab__indicator {
550
- color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-hovered);
559
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab:hover > .ids-tab__indicator > .ids-tab__line {
560
+ border-color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-hovered);
551
561
  }
552
562
  .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 {
553
563
  background-color: var(--ids-comp-tab-item-standard-unselected-bg-light-focused);
@@ -558,8 +568,8 @@
558
568
  .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 {
559
569
  color: var(--ids-comp-tab-item-standard-unselected-fg-icon-light-focused);
560
570
  }
561
- .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 {
562
- color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-focused);
571
+ .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 {
572
+ border-color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-focused);
563
573
  }
564
574
  .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab:active {
565
575
  background-color: var(--ids-comp-tab-item-standard-unselected-bg-light-pressed);
@@ -569,8 +579,8 @@
569
579
  .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab:active > .ids-icon {
570
580
  color: var(--ids-comp-tab-item-standard-unselected-fg-icon-light-pressed);
571
581
  }
572
- .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab:active > .ids-tab__indicator {
573
- color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-pressed);
582
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab:active > .ids-tab__indicator > .ids-tab__line {
583
+ border-color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-pressed);
574
584
  }
575
585
  .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab-disabled {
576
586
  background-color: var(--ids-comp-tab-item-standard-unselected-bg-light-disabled);
@@ -580,8 +590,8 @@
580
590
  .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab-disabled > .ids-icon {
581
591
  color: var(--ids-comp-tab-item-standard-unselected-fg-icon-light-disabled);
582
592
  }
583
- .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab-disabled > .ids-tab__indicator {
584
- color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-disabled);
593
+ .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 {
594
+ border-color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-disabled);
585
595
  }
586
596
  .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active {
587
597
  background-color: var(--ids-comp-tab-item-standard-selected-bg-light-default);
@@ -591,8 +601,8 @@
591
601
  .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active > .ids-icon {
592
602
  color: var(--ids-comp-tab-item-standard-selected-fg-icon-light-default);
593
603
  }
594
- .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active > .ids-tab__indicator {
595
- color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-default);
604
+ .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 {
605
+ border-color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-default);
596
606
  }
597
607
  .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:hover {
598
608
  background-color: var(--ids-comp-tab-item-standard-selected-bg-light-hovered);
@@ -602,8 +612,8 @@
602
612
  .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:hover > .ids-icon {
603
613
  color: var(--ids-comp-tab-item-standard-selected-fg-icon-light-hovered);
604
614
  }
605
- .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:hover > .ids-tab__indicator {
606
- color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-hovered);
615
+ .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 {
616
+ border-color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-hovered);
607
617
  }
608
618
  .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 {
609
619
  background-color: var(--ids-comp-tab-item-standard-selected-bg-light-focused);
@@ -613,8 +623,8 @@
613
623
  .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 {
614
624
  color: var(--ids-comp-tab-item-standard-selected-fg-icon-light-focused);
615
625
  }
616
- .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 {
617
- color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-focused);
626
+ .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 {
627
+ border-color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-focused);
618
628
  }
619
629
  .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:active {
620
630
  background-color: var(--ids-comp-tab-item-standard-selected-bg-light-pressed);
@@ -624,8 +634,8 @@
624
634
  .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:active > .ids-icon {
625
635
  color: var(--ids-comp-tab-item-standard-selected-fg-icon-light-pressed);
626
636
  }
627
- .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:active > .ids-tab__indicator {
628
- color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-pressed);
637
+ .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 {
638
+ border-color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-pressed);
629
639
  }
630
640
  .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active.ids-tab-disabled {
631
641
  background-color: var(--ids-comp-tab-item-standard-unselected-bg-light-disabled);
@@ -635,8 +645,8 @@
635
645
  .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 {
636
646
  color: var(--ids-comp-tab-item-standard-unselected-fg-icon-light-disabled);
637
647
  }
638
- .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 {
639
- color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-disabled);
648
+ .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 {
649
+ border-color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-disabled);
640
650
  }
641
651
  .ids-tab-group.ids-tab-group-primary {
642
652
  background-color: var(--ids-comp-tab-container-color-bg-default);
@@ -652,8 +662,8 @@
652
662
  .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab > .ids-icon {
653
663
  color: var(--ids-comp-tab-item-standard-unselected-fg-icon-primary-default);
654
664
  }
655
- .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab > .ids-tab__indicator {
656
- color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-default);
665
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab > .ids-tab__indicator > .ids-tab__line {
666
+ border-color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-default);
657
667
  }
658
668
  .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab:hover {
659
669
  background-color: var(--ids-comp-tab-item-standard-unselected-bg-primary-hovered);
@@ -663,8 +673,8 @@
663
673
  .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab:hover > .ids-icon {
664
674
  color: var(--ids-comp-tab-item-standard-unselected-fg-icon-primary-hovered);
665
675
  }
666
- .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab:hover > .ids-tab__indicator {
667
- color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-hovered);
676
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab:hover > .ids-tab__indicator > .ids-tab__line {
677
+ border-color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-hovered);
668
678
  }
669
679
  .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 {
670
680
  background-color: var(--ids-comp-tab-item-standard-unselected-bg-primary-focused);
@@ -675,8 +685,8 @@
675
685
  .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 {
676
686
  color: var(--ids-comp-tab-item-standard-unselected-fg-icon-primary-focused);
677
687
  }
678
- .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 {
679
- color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-focused);
688
+ .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 {
689
+ border-color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-focused);
680
690
  }
681
691
  .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab:active {
682
692
  background-color: var(--ids-comp-tab-item-standard-unselected-bg-primary-pressed);
@@ -686,8 +696,8 @@
686
696
  .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab:active > .ids-icon {
687
697
  color: var(--ids-comp-tab-item-standard-unselected-fg-icon-primary-pressed);
688
698
  }
689
- .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab:active > .ids-tab__indicator {
690
- color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-pressed);
699
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab:active > .ids-tab__indicator > .ids-tab__line {
700
+ border-color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-pressed);
691
701
  }
692
702
  .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab-disabled {
693
703
  background-color: var(--ids-comp-tab-item-standard-unselected-bg-primary-disabled);
@@ -697,8 +707,8 @@
697
707
  .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab-disabled > .ids-icon {
698
708
  color: var(--ids-comp-tab-item-standard-unselected-fg-icon-primary-disabled);
699
709
  }
700
- .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab-disabled > .ids-tab__indicator {
701
- color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-disabled);
710
+ .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 {
711
+ border-color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-disabled);
702
712
  }
703
713
  .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active {
704
714
  background-color: var(--ids-comp-tab-item-standard-selected-bg-primary-default);
@@ -708,8 +718,8 @@
708
718
  .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active > .ids-icon {
709
719
  color: var(--ids-comp-tab-item-standard-selected-fg-icon-primary-default);
710
720
  }
711
- .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active > .ids-tab__indicator {
712
- color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-default);
721
+ .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 {
722
+ border-color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-default);
713
723
  }
714
724
  .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:hover {
715
725
  background-color: var(--ids-comp-tab-item-standard-selected-bg-primary-hovered);
@@ -719,8 +729,8 @@
719
729
  .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:hover > .ids-icon {
720
730
  color: var(--ids-comp-tab-item-standard-selected-fg-icon-primary-hovered);
721
731
  }
722
- .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:hover > .ids-tab__indicator {
723
- color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-hovered);
732
+ .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 {
733
+ border-color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-hovered);
724
734
  }
725
735
  .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 {
726
736
  background-color: var(--ids-comp-tab-item-standard-selected-bg-primary-focused);
@@ -730,8 +740,8 @@
730
740
  .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 {
731
741
  color: var(--ids-comp-tab-item-standard-selected-fg-icon-primary-focused);
732
742
  }
733
- .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 {
734
- color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-focused);
743
+ .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 {
744
+ border-color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-focused);
735
745
  }
736
746
  .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:active {
737
747
  background-color: var(--ids-comp-tab-item-standard-selected-bg-primary-pressed);
@@ -741,8 +751,8 @@
741
751
  .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:active > .ids-icon {
742
752
  color: var(--ids-comp-tab-item-standard-selected-fg-icon-primary-pressed);
743
753
  }
744
- .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active:active > .ids-tab__indicator {
745
- color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-pressed);
754
+ .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 {
755
+ border-color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-pressed);
746
756
  }
747
757
  .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab.ids-tab--active.ids-tab-disabled {
748
758
  background-color: var(--ids-comp-tab-item-standard-unselected-bg-primary-disabled);
@@ -752,6 +762,6 @@
752
762
  .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 {
753
763
  color: var(--ids-comp-tab-item-standard-unselected-fg-icon-primary-disabled);
754
764
  }
755
- .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 {
756
- color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-disabled);
765
+ .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 {
766
+ border-color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-disabled);
757
767
  }