@i-cell/ids-styles 0.0.5 → 0.0.7

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 (34) hide show
  1. package/dist/accessibility.css +11 -0
  2. package/dist/accessibility.min.css +1 -0
  3. package/dist/accessibility.plugin.js +20 -0
  4. package/dist/action-item/action-item.css +6 -0
  5. package/dist/action-item/action-item.min.css +1 -1
  6. package/dist/action-item/action-item.plugin.js +2 -0
  7. package/dist/avatar/avatar.css +6 -0
  8. package/dist/avatar/avatar.min.css +1 -1
  9. package/dist/avatar/avatar.plugin.js +2 -0
  10. package/dist/button/button.css +6 -0
  11. package/dist/button/button.min.css +1 -1
  12. package/dist/button/button.plugin.js +2 -0
  13. package/dist/checkbox/checkbox.css +5 -0
  14. package/dist/checkbox/checkbox.min.css +1 -1
  15. package/dist/checkbox/checkbox.plugin.js +5 -0
  16. package/dist/components.css +291 -112
  17. package/dist/components.min.css +1 -1
  18. package/dist/components.plugin.js +250 -113
  19. package/dist/icon-button/icon-button.css +6 -0
  20. package/dist/icon-button/icon-button.min.css +1 -1
  21. package/dist/icon-button/icon-button.plugin.js +2 -0
  22. package/dist/paginator/paginator.css +51 -8
  23. package/dist/paginator/paginator.min.css +1 -1
  24. package/dist/paginator/paginator.plugin.js +39 -9
  25. package/dist/segmented-control/segmented-control-toggle.css +102 -56
  26. package/dist/segmented-control/segmented-control-toggle.min.css +1 -1
  27. package/dist/segmented-control/segmented-control-toggle.plugin.js +98 -56
  28. package/dist/segmented-control/segmented-control.css +102 -48
  29. package/dist/segmented-control/segmented-control.min.css +1 -1
  30. package/dist/segmented-control/segmented-control.plugin.js +98 -48
  31. package/dist/tag/tag.css +7 -0
  32. package/dist/tag/tag.min.css +1 -1
  33. package/dist/tag/tag.plugin.js +2 -0
  34. package/package.json +2 -2
package/dist/segmented-control/segmented-control.css CHANGED
@@ -16,6 +16,12 @@
16
16
  outline-style: solid;
17
17
  outline-offset: 2px;
18
18
  }
19
+ .ids-segmented-control .ids-segmented-control-item > button:not(:disabled) {
20
+ cursor: pointer;
21
+ }
22
+ .ids-segmented-control .ids-segmented-control-item > button:disabled {
23
+ cursor: not-allowed;
24
+ }
19
25
  .ids-segmented-control.ids-segmented-control-compact {
20
26
  padding: var(--ids-comp-segmented-control-container-size-padding-y-compact) var(--ids-comp-segmented-control-container-size-padding-x-compact);
21
27
  gap: var(--ids-comp-segmented-control-container-size-gap-compact);
@@ -170,6 +176,7 @@
170
176
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button {
171
177
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-primary-default);
172
178
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-default);
179
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-primary-default);
173
180
  }
174
181
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button .ids-icon {
175
182
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-default);
@@ -177,6 +184,7 @@
177
184
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
178
185
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-primary-active);
179
186
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-active);
187
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-primary-active);
180
188
  }
181
189
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) .ids-icon {
182
190
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-active);
@@ -184,6 +192,7 @@
184
192
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:hover {
185
193
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-primary-hovered);
186
194
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-hovered);
195
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-primary-hovered);
187
196
  }
188
197
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:hover .ids-icon {
189
198
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-hovered);
@@ -191,6 +200,7 @@
191
200
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:active {
192
201
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-primary-pressed);
193
202
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-pressed);
203
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-primary-pressed);
194
204
  }
195
205
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:active .ids-icon {
196
206
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-pressed);
@@ -198,6 +208,7 @@
198
208
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:focus {
199
209
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-primary-focused);
200
210
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-focused);
211
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-primary-focused);
201
212
  }
202
213
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:focus .ids-icon {
203
214
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-focused);
@@ -205,6 +216,7 @@
205
216
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:disabled {
206
217
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-primary-disabled);
207
218
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-disabled);
219
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-primary-disabled);
208
220
  }
209
221
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:disabled .ids-icon {
210
222
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-disabled);
@@ -215,45 +227,51 @@
215
227
  }
216
228
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button {
217
229
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-primary-default);
218
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-default);
230
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-primary-default);
231
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-primary-default);
219
232
  }
220
233
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button .ids-icon {
221
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-default);
234
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-primary-default);
222
235
  }
223
236
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
224
237
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-primary-active);
225
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-active);
238
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-primary-active);
239
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-primary-active);
226
240
  }
227
241
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) .ids-icon {
228
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-active);
242
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-primary-active);
229
243
  }
230
244
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:hover {
231
245
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-primary-hovered);
232
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-hovered);
246
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-primary-hovered);
247
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-primary-hovered);
233
248
  }
234
249
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:hover .ids-icon {
235
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-hovered);
250
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-primary-hovered);
236
251
  }
237
252
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:active {
238
253
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-primary-pressed);
239
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-pressed);
254
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-primary-pressed);
255
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-primary-pressed);
240
256
  }
241
257
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:active .ids-icon {
242
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-pressed);
258
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-primary-pressed);
243
259
  }
244
260
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:focus {
245
261
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-primary-focused);
246
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-focused);
262
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-primary-focused);
263
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-primary-focused);
247
264
  }
248
265
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:focus .ids-icon {
249
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-focused);
266
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-primary-focused);
250
267
  }
251
268
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled {
252
269
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-primary-disabled);
253
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-disabled);
270
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-primary-disabled);
271
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-primary-disabled);
254
272
  }
255
273
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled .ids-icon {
256
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-disabled);
274
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-primary-disabled);
257
275
  }
258
276
  .ids-segmented-control.ids-segmented-control-surface .ids-segmented-control-item > button:focus {
259
277
  outline-color: var(--ids-comp-segmented-control-focused-outline-color-dark-focused);
@@ -265,6 +283,7 @@
265
283
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button {
266
284
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-surface-default);
267
285
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-default);
286
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-surface-default);
268
287
  }
269
288
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button .ids-icon {
270
289
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-default);
@@ -272,6 +291,7 @@
272
291
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
273
292
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-surface-active);
274
293
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-active);
294
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-surface-active);
275
295
  }
276
296
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) .ids-icon {
277
297
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-active);
@@ -279,6 +299,7 @@
279
299
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:hover {
280
300
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-surface-hovered);
281
301
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-hovered);
302
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-surface-hovered);
282
303
  }
283
304
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:hover .ids-icon {
284
305
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-hovered);
@@ -286,6 +307,7 @@
286
307
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:active {
287
308
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-surface-pressed);
288
309
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-pressed);
310
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-surface-pressed);
289
311
  }
290
312
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:active .ids-icon {
291
313
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-pressed);
@@ -293,6 +315,7 @@
293
315
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:focus {
294
316
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-surface-focused);
295
317
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-focused);
318
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-surface-focused);
296
319
  }
297
320
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:focus .ids-icon {
298
321
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-focused);
@@ -300,6 +323,7 @@
300
323
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:disabled {
301
324
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-surface-disabled);
302
325
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-disabled);
326
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-surface-disabled);
303
327
  }
304
328
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:disabled .ids-icon {
305
329
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-disabled);
@@ -310,45 +334,51 @@
310
334
  }
311
335
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button {
312
336
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-surface-default);
313
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-default);
337
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-surface-default);
338
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-surface-default);
314
339
  }
315
340
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button .ids-icon {
316
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-default);
341
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-surface-default);
317
342
  }
318
343
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
319
344
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-surface-active);
320
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-active);
345
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-surface-active);
346
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-surface-active);
321
347
  }
322
348
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) .ids-icon {
323
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-active);
349
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-surface-active);
324
350
  }
325
351
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:hover {
326
352
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-surface-hovered);
327
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-hovered);
353
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-surface-hovered);
354
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-surface-hovered);
328
355
  }
329
356
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:hover .ids-icon {
330
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-hovered);
357
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-surface-hovered);
331
358
  }
332
359
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:active {
333
360
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-surface-pressed);
334
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-pressed);
361
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-surface-pressed);
362
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-surface-pressed);
335
363
  }
336
364
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:active .ids-icon {
337
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-pressed);
365
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-surface-pressed);
338
366
  }
339
367
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:focus {
340
368
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-surface-focused);
341
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-focused);
369
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-surface-focused);
370
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-surface-focused);
342
371
  }
343
372
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:focus .ids-icon {
344
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-focused);
373
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-surface-focused);
345
374
  }
346
375
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled {
347
376
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-surface-disabled);
348
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-disabled);
377
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-surface-disabled);
378
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-surface-disabled);
349
379
  }
350
380
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled .ids-icon {
351
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-disabled);
381
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-surface-disabled);
352
382
  }
353
383
  .ids-segmented-control.ids-segmented-control-light .ids-segmented-control-item > button:focus {
354
384
  outline-color: var(--ids-comp-segmented-control-focused-outline-color-light-focused);
@@ -360,6 +390,7 @@
360
390
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button {
361
391
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-light-default);
362
392
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-default);
393
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-light-default);
363
394
  }
364
395
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button .ids-icon {
365
396
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-default);
@@ -367,6 +398,7 @@
367
398
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
368
399
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-light-active);
369
400
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-active);
401
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-light-active);
370
402
  }
371
403
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) .ids-icon {
372
404
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-active);
@@ -374,6 +406,7 @@
374
406
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:hover {
375
407
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-light-hovered);
376
408
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-hovered);
409
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-light-hovered);
377
410
  }
378
411
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:hover .ids-icon {
379
412
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-hovered);
@@ -381,6 +414,7 @@
381
414
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:active {
382
415
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-light-pressed);
383
416
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-pressed);
417
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-light-pressed);
384
418
  }
385
419
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:active .ids-icon {
386
420
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-pressed);
@@ -388,6 +422,7 @@
388
422
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:focus {
389
423
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-light-focused);
390
424
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-focused);
425
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-light-focused);
391
426
  }
392
427
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:focus .ids-icon {
393
428
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-focused);
@@ -395,6 +430,7 @@
395
430
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:disabled {
396
431
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-light-disabled);
397
432
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-disabled);
433
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-light-disabled);
398
434
  }
399
435
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:disabled .ids-icon {
400
436
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-disabled);
@@ -405,45 +441,51 @@
405
441
  }
406
442
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button {
407
443
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-light-default);
408
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-default);
444
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-light-default);
445
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-light-default);
409
446
  }
410
447
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button .ids-icon {
411
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-default);
448
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-light-default);
412
449
  }
413
450
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
414
451
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-light-active);
415
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-active);
452
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-light-active);
453
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-light-active);
416
454
  }
417
455
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) .ids-icon {
418
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-active);
456
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-light-active);
419
457
  }
420
458
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:hover {
421
459
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-light-hovered);
422
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-hovered);
460
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-light-hovered);
461
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-light-hovered);
423
462
  }
424
463
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:hover .ids-icon {
425
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-hovered);
464
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-light-hovered);
426
465
  }
427
466
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:active {
428
467
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-light-pressed);
429
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-pressed);
468
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-light-pressed);
469
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-light-pressed);
430
470
  }
431
471
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:active .ids-icon {
432
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-pressed);
472
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-light-pressed);
433
473
  }
434
474
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:focus {
435
475
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-light-focused);
436
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-focused);
476
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-light-focused);
477
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-light-focused);
437
478
  }
438
479
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:focus .ids-icon {
439
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-focused);
480
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-light-focused);
440
481
  }
441
482
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled {
442
483
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-light-disabled);
443
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-disabled);
484
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-light-disabled);
485
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-light-disabled);
444
486
  }
445
487
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled .ids-icon {
446
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-disabled);
488
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-light-disabled);
447
489
  }
448
490
  .ids-segmented-control.ids-segmented-control-dark .ids-segmented-control-item > button:focus {
449
491
  outline-color: var(--ids-comp-segmented-control-focused-outline-color-dark-focused);
@@ -455,6 +497,7 @@
455
497
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button {
456
498
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-dark-default);
457
499
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-default);
500
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-dark-default);
458
501
  }
459
502
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button .ids-icon {
460
503
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-default);
@@ -462,6 +505,7 @@
462
505
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
463
506
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-dark-active);
464
507
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-active);
508
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-dark-active);
465
509
  }
466
510
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) .ids-icon {
467
511
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-active);
@@ -469,6 +513,7 @@
469
513
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:hover {
470
514
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-dark-hovered);
471
515
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-hovered);
516
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-dark-hovered);
472
517
  }
473
518
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:hover .ids-icon {
474
519
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-hovered);
@@ -476,6 +521,7 @@
476
521
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:active {
477
522
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-dark-pressed);
478
523
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-pressed);
524
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-dark-pressed);
479
525
  }
480
526
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:active .ids-icon {
481
527
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-pressed);
@@ -483,6 +529,7 @@
483
529
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:focus {
484
530
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-dark-focused);
485
531
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-focused);
532
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-dark-focused);
486
533
  }
487
534
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:focus .ids-icon {
488
535
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-focused);
@@ -490,6 +537,7 @@
490
537
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:disabled {
491
538
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-dark-disabled);
492
539
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-disabled);
540
+ border-color: var(--ids-comp-segmented-control-button-filled-color-border-dark-disabled);
493
541
  }
494
542
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:disabled .ids-icon {
495
543
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-disabled);
@@ -500,43 +548,49 @@
500
548
  }
501
549
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button {
502
550
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-dark-default);
503
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-default);
551
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-dark-default);
552
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-dark-default);
504
553
  }
505
554
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button .ids-icon {
506
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-default);
555
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-default);
507
556
  }
508
557
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
509
558
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-dark-active);
510
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-active);
559
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-dark-active);
560
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-dark-active);
511
561
  }
512
562
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) .ids-icon {
513
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-active);
563
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-active);
514
564
  }
515
565
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:hover {
516
566
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-dark-hovered);
517
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-hovered);
567
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-dark-hovered);
568
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-dark-hovered);
518
569
  }
519
570
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:hover .ids-icon {
520
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-hovered);
571
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-hovered);
521
572
  }
522
573
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:active {
523
574
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-dark-pressed);
524
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-pressed);
575
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-dark-pressed);
576
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-dark-pressed);
525
577
  }
526
578
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:active .ids-icon {
527
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-pressed);
579
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-pressed);
528
580
  }
529
581
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:focus {
530
582
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-dark-focused);
531
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-focused);
583
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-dark-focused);
584
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-dark-focused);
532
585
  }
533
586
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:focus .ids-icon {
534
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-focused);
587
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-focused);
535
588
  }
536
589
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled {
537
590
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-dark-disabled);
538
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-disabled);
591
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-dark-disabled);
592
+ border-color: var(--ids-comp-segmented-control-button-outlined-color-border-dark-disabled);
539
593
  }
540
594
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled .ids-icon {
541
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-disabled);
595
+ color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-disabled);
542
596
  }