@i-cell/ids-styles 0.0.15-beta.9 → 0.0.15

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 (76) hide show
  1. package/dist/accordion/accordion.css +184 -45
  2. package/dist/accordion/accordion.min.css +1 -1
  3. package/dist/accordion/accordion.plugin.js +194 -55
  4. package/dist/avatar/avatar.css +23 -11
  5. package/dist/avatar/avatar.min.css +1 -1
  6. package/dist/avatar/avatar.plugin.js +23 -12
  7. package/dist/button/button.css +788 -656
  8. package/dist/button/button.min.css +1 -1
  9. package/dist/button/button.plugin.js +792 -693
  10. package/dist/card/card.css +61 -35
  11. package/dist/card/card.min.css +1 -1
  12. package/dist/card/card.plugin.js +181 -126
  13. package/dist/checkbox/checkbox.css +57 -29
  14. package/dist/checkbox/checkbox.min.css +1 -1
  15. package/dist/checkbox/checkbox.plugin.js +78 -53
  16. package/dist/checkbox/pseudo-checkbox.css +53 -25
  17. package/dist/checkbox/pseudo-checkbox.min.css +1 -1
  18. package/dist/checkbox/pseudo-checkbox.plugin.js +72 -43
  19. package/dist/components.css +2284 -1615
  20. package/dist/components.min.css +1 -1
  21. package/dist/components.plugin.js +2619 -1969
  22. package/dist/dialog/dialog.css +12 -1
  23. package/dist/dialog/dialog.min.css +1 -1
  24. package/dist/dialog/dialog.plugin.js +11 -4
  25. package/dist/divider/divider.css +0 -3
  26. package/dist/divider/divider.min.css +1 -1
  27. package/dist/divider/divider.plugin.js +1 -1
  28. package/dist/form-elements/form-field/form-field.css +84 -60
  29. package/dist/form-elements/form-field/form-field.min.css +1 -1
  30. package/dist/form-elements/form-field/form-field.plugin.js +84 -60
  31. package/dist/form-elements/message/message.css +21 -12
  32. package/dist/form-elements/message/message.min.css +1 -1
  33. package/dist/form-elements/message/message.plugin.js +21 -4
  34. package/dist/icon/icon.css +3 -2
  35. package/dist/icon/icon.min.css +1 -1
  36. package/dist/icon/icon.plugin.js +3 -2
  37. package/dist/icon-button/icon-button.css +133 -82
  38. package/dist/icon-button/icon-button.min.css +1 -1
  39. package/dist/icon-button/icon-button.plugin.js +256 -182
  40. package/dist/menu-item/menu-item.css +184 -0
  41. package/dist/menu-item/menu-item.min.css +1 -0
  42. package/dist/menu-item/menu-item.plugin.js +181 -0
  43. package/dist/option/option.css +13 -0
  44. package/dist/option/option.min.css +1 -1
  45. package/dist/option/option.plugin.js +13 -1
  46. package/dist/overlay-panel/overlay-panel.css +125 -0
  47. package/dist/overlay-panel/overlay-panel.min.css +1 -0
  48. package/dist/overlay-panel/overlay-panel.plugin.js +125 -0
  49. package/dist/paginator/paginator.css +133 -23
  50. package/dist/paginator/paginator.min.css +1 -1
  51. package/dist/paginator/paginator.plugin.js +113 -41
  52. package/dist/radio/radio.css +49 -49
  53. package/dist/radio/radio.min.css +1 -1
  54. package/dist/radio/radio.plugin.js +56 -61
  55. package/dist/segmented-control/segmented-control-toggle.css +37 -25
  56. package/dist/segmented-control/segmented-control-toggle.min.css +1 -1
  57. package/dist/segmented-control/segmented-control-toggle.plugin.js +46 -45
  58. package/dist/segmented-control/segmented-control.css +37 -25
  59. package/dist/segmented-control/segmented-control.min.css +1 -1
  60. package/dist/segmented-control/segmented-control.plugin.js +87 -75
  61. package/dist/snackbar/snackbar.css +12 -0
  62. package/dist/snackbar/snackbar.min.css +1 -1
  63. package/dist/snackbar/snackbar.plugin.js +28 -4
  64. package/dist/switch/switch.css +44 -56
  65. package/dist/switch/switch.min.css +1 -1
  66. package/dist/switch/switch.plugin.js +55 -74
  67. package/dist/tag/tag.css +230 -199
  68. package/dist/tag/tag.min.css +1 -1
  69. package/dist/tag/tag.plugin.js +228 -195
  70. package/package.json +4 -4
  71. package/dist/action-item/action-item.css +0 -185
  72. package/dist/action-item/action-item.min.css +0 -1
  73. package/dist/action-item/action-item.plugin.js +0 -176
  74. package/dist/action-panel/action-panel.css +0 -91
  75. package/dist/action-panel/action-panel.min.css +0 -1
  76. package/dist/action-panel/action-panel.plugin.js +0 -91
@@ -87,9 +87,12 @@
87
87
  padding: var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-padding-y-compact) var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-padding-x-compact);
88
88
  gap: var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-compact);
89
89
  }
90
- .ids-form-field.ids-form-field-compact > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
90
+ .ids-form-field.ids-form-field-compact > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon > .ids-icon {
91
91
  height: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-size-height-compact);
92
92
  width: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-size-width-compact);
93
+ font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-typography-font-size-compact);
94
+ font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-typography-font-weight-compact);
95
+ line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-typography-line-height-compact);
93
96
  }
94
97
  .ids-form-field.ids-form-field-compact > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
95
98
  font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-typography-font-family-compact);
@@ -120,9 +123,12 @@
120
123
  letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-typography-letter-spacing-compact);
121
124
  line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-typography-line-height-compact);
122
125
  }
123
- .ids-form-field.ids-form-field-compact > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
126
+ .ids-form-field.ids-form-field-compact > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon > .ids-icon {
124
127
  height: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-size-height-compact);
125
128
  width: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-size-width-compact);
129
+ font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-typography-font-size-compact);
130
+ font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-typography-font-weight-compact);
131
+ line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-typography-line-height-compact);
126
132
  }
127
133
  .ids-form-field.ids-form-field-compact > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__action {
128
134
  padding: 0px var(--ids-comp-forms-form-field-standard-field-wrapper-action-size-padding-right-compact) 0px var(--ids-comp-forms-form-field-standard-field-wrapper-action-size-padding-left-compact);
@@ -153,9 +159,12 @@
153
159
  padding: var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-padding-y-comfortable) var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-padding-x-comfortable);
154
160
  gap: var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-comfortable);
155
161
  }
156
- .ids-form-field.ids-form-field-comfortable > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
162
+ .ids-form-field.ids-form-field-comfortable > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon > .ids-icon {
157
163
  height: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-size-height-comfortable);
158
164
  width: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-size-width-comfortable);
165
+ font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-typography-font-size-comfortable);
166
+ font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-typography-font-weight-comfortable);
167
+ line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-typography-line-height-comfortable);
159
168
  }
160
169
  .ids-form-field.ids-form-field-comfortable > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
161
170
  font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-typography-font-family-comfortable);
@@ -186,9 +195,12 @@
186
195
  letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-typography-letter-spacing-comfortable);
187
196
  line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-typography-line-height-comfortable);
188
197
  }
189
- .ids-form-field.ids-form-field-comfortable > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
198
+ .ids-form-field.ids-form-field-comfortable > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon > .ids-icon {
190
199
  height: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-size-height-comfortable);
191
200
  width: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-size-width-comfortable);
201
+ font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-typography-font-size-comfortable);
202
+ font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-typography-font-weight-comfortable);
203
+ line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-typography-line-height-comfortable);
192
204
  }
193
205
  .ids-form-field.ids-form-field-comfortable > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__action {
194
206
  padding: 0px var(--ids-comp-forms-form-field-standard-field-wrapper-action-size-padding-right-comfortable) 0px var(--ids-comp-forms-form-field-standard-field-wrapper-action-size-padding-left-comfortable);
@@ -219,9 +231,12 @@
219
231
  padding: var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-padding-y-spacious) var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-padding-x-spacious);
220
232
  gap: var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-spacious);
221
233
  }
222
- .ids-form-field.ids-form-field-spacious > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
234
+ .ids-form-field.ids-form-field-spacious > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon > .ids-icon {
223
235
  height: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-size-height-spacious);
224
236
  width: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-size-width-spacious);
237
+ font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-typography-font-size-spacious);
238
+ font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-typography-font-weight-spacious);
239
+ line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-typography-line-height-spacious);
225
240
  }
226
241
  .ids-form-field.ids-form-field-spacious > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
227
242
  font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-typography-font-family-spacious);
@@ -252,9 +267,12 @@
252
267
  letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-typography-letter-spacing-spacious);
253
268
  line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-typography-line-height-spacious);
254
269
  }
255
- .ids-form-field.ids-form-field-spacious > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
270
+ .ids-form-field.ids-form-field-spacious > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon > .ids-icon {
256
271
  height: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-size-height-spacious);
257
272
  width: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-size-width-spacious);
273
+ font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-typography-font-size-spacious);
274
+ font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-typography-font-weight-spacious);
275
+ line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-typography-line-height-spacious);
258
276
  }
259
277
  .ids-form-field.ids-form-field-spacious > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__action {
260
278
  padding: 0px var(--ids-comp-forms-form-field-standard-field-wrapper-action-size-padding-right-spacious) 0px var(--ids-comp-forms-form-field-standard-field-wrapper-action-size-padding-left-spacious);
@@ -285,9 +303,12 @@
285
303
  padding: var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-padding-y-dense) var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-padding-x-dense);
286
304
  gap: var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-dense);
287
305
  }
288
- .ids-form-field.ids-form-field-dense > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
306
+ .ids-form-field.ids-form-field-dense > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon > .ids-icon {
289
307
  height: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-size-height-dense);
290
308
  width: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-size-width-dense);
309
+ font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-typography-font-size-dense);
310
+ font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-typography-font-weight-dense);
311
+ line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-typography-line-height-dense);
291
312
  }
292
313
  .ids-form-field.ids-form-field-dense > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
293
314
  font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-typography-font-family-dense);
@@ -318,9 +339,12 @@
318
339
  letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-typography-letter-spacing-dense);
319
340
  line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-typography-line-height-dense);
320
341
  }
321
- .ids-form-field.ids-form-field-dense > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
342
+ .ids-form-field.ids-form-field-dense > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon > .ids-icon {
322
343
  height: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-size-height-dense);
323
344
  width: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-size-width-dense);
345
+ font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-typography-font-size-dense);
346
+ font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-typography-font-weight-dense);
347
+ line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-typography-line-height-dense);
324
348
  }
325
349
  .ids-form-field.ids-form-field-dense > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__action {
326
350
  padding: 0px var(--ids-comp-forms-form-field-standard-field-wrapper-action-size-padding-right-dense) 0px var(--ids-comp-forms-form-field-standard-field-wrapper-action-size-padding-left-dense);
@@ -333,7 +357,7 @@
333
357
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-default);
334
358
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-default);
335
359
  }
336
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
360
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon > .ids-icon {
337
361
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-surface-default);
338
362
  }
339
363
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
@@ -348,7 +372,7 @@
348
372
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
349
373
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-surface-default);
350
374
  }
351
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
375
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon > .ids-icon {
352
376
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-surface-default);
353
377
  }
354
378
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__action {
@@ -359,7 +383,7 @@
359
383
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-hovered);
360
384
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-hovered);
361
385
  }
362
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
386
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon > .ids-icon {
363
387
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-surface-hovered);
364
388
  }
365
389
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
@@ -374,7 +398,7 @@
374
398
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
375
399
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-surface-hovered);
376
400
  }
377
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
401
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon > .ids-icon {
378
402
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-surface-hovered);
379
403
  }
380
404
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__action {
@@ -386,7 +410,7 @@
386
410
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-focused);
387
411
  outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused);
388
412
  }
389
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
413
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon > .ids-icon {
390
414
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-surface-focused);
391
415
  }
392
416
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
@@ -401,7 +425,7 @@
401
425
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
402
426
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-surface-focused);
403
427
  }
404
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
428
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon > .ids-icon {
405
429
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-surface-focused);
406
430
  }
407
431
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__action {
@@ -412,7 +436,7 @@
412
436
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-pressed);
413
437
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-pressed);
414
438
  }
415
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
439
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon > .ids-icon {
416
440
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-surface-pressed);
417
441
  }
418
442
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
@@ -427,7 +451,7 @@
427
451
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
428
452
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-surface-pressed);
429
453
  }
430
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
454
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon > .ids-icon {
431
455
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-surface-pressed);
432
456
  }
433
457
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__action {
@@ -441,7 +465,7 @@
441
465
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-error-default);
442
466
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-error-default);
443
467
  }
444
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
468
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon > .ids-icon {
445
469
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-surface-default);
446
470
  }
447
471
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
@@ -456,7 +480,7 @@
456
480
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
457
481
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-surface-default);
458
482
  }
459
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
483
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon > .ids-icon {
460
484
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-surface-default);
461
485
  }
462
486
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__action {
@@ -467,7 +491,7 @@
467
491
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-error-hovered);
468
492
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-error-hovered);
469
493
  }
470
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
494
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon > .ids-icon {
471
495
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-surface-hovered);
472
496
  }
473
497
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
@@ -482,7 +506,7 @@
482
506
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
483
507
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-surface-hovered);
484
508
  }
485
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
509
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon > .ids-icon {
486
510
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-surface-hovered);
487
511
  }
488
512
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__action {
@@ -494,7 +518,7 @@
494
518
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-error-focused);
495
519
  outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused);
496
520
  }
497
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
521
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon > .ids-icon {
498
522
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-surface-focused);
499
523
  }
500
524
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
@@ -509,7 +533,7 @@
509
533
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
510
534
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-surface-focused);
511
535
  }
512
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
536
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon > .ids-icon {
513
537
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-surface-focused);
514
538
  }
515
539
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__action {
@@ -520,7 +544,7 @@
520
544
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-error-pressed);
521
545
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-error-pressed);
522
546
  }
523
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
547
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon > .ids-icon {
524
548
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-surface-pressed);
525
549
  }
526
550
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
@@ -535,7 +559,7 @@
535
559
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
536
560
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-surface-pressed);
537
561
  }
538
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
562
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon > .ids-icon {
539
563
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-surface-pressed);
540
564
  }
541
565
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__action {
@@ -549,7 +573,7 @@
549
573
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-success-default);
550
574
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-success-default);
551
575
  }
552
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
576
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon > .ids-icon {
553
577
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-surface-default);
554
578
  }
555
579
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
@@ -564,7 +588,7 @@
564
588
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
565
589
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-surface-default);
566
590
  }
567
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
591
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon > .ids-icon {
568
592
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-surface-default);
569
593
  }
570
594
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__action {
@@ -575,7 +599,7 @@
575
599
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-success-hovered);
576
600
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-success-hovered);
577
601
  }
578
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
602
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon > .ids-icon {
579
603
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-surface-hovered);
580
604
  }
581
605
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
@@ -590,7 +614,7 @@
590
614
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
591
615
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-surface-hovered);
592
616
  }
593
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
617
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon > .ids-icon {
594
618
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-surface-hovered);
595
619
  }
596
620
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__action {
@@ -602,7 +626,7 @@
602
626
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-success-focused);
603
627
  outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused);
604
628
  }
605
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
629
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon > .ids-icon {
606
630
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-surface-focused);
607
631
  }
608
632
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
@@ -617,7 +641,7 @@
617
641
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
618
642
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-surface-focused);
619
643
  }
620
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
644
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon > .ids-icon {
621
645
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-surface-focused);
622
646
  }
623
647
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__action {
@@ -628,7 +652,7 @@
628
652
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-success-pressed);
629
653
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-success-pressed);
630
654
  }
631
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
655
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon > .ids-icon {
632
656
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-surface-pressed);
633
657
  }
634
658
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
@@ -643,7 +667,7 @@
643
667
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
644
668
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-surface-pressed);
645
669
  }
646
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
670
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon > .ids-icon {
647
671
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-surface-pressed);
648
672
  }
649
673
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__action {
@@ -657,7 +681,7 @@
657
681
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-disabled);
658
682
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-disabled);
659
683
  }
660
- .ids-form-field.ids-form-field-surface.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
684
+ .ids-form-field.ids-form-field-surface.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon > .ids-icon {
661
685
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-surface-disabled);
662
686
  }
663
687
  .ids-form-field.ids-form-field-surface.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
@@ -672,7 +696,7 @@
672
696
  .ids-form-field.ids-form-field-surface.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
673
697
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-surface-disabled);
674
698
  }
675
- .ids-form-field.ids-form-field-surface.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
699
+ .ids-form-field.ids-form-field-surface.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon > .ids-icon {
676
700
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-surface-disabled);
677
701
  }
678
702
  .ids-form-field.ids-form-field-surface.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__action {
@@ -686,7 +710,7 @@
686
710
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-light-default);
687
711
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-light-default);
688
712
  }
689
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
713
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon > .ids-icon {
690
714
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-light-default);
691
715
  }
692
716
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
@@ -701,7 +725,7 @@
701
725
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
702
726
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-light-default);
703
727
  }
704
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
728
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon > .ids-icon {
705
729
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-light-default);
706
730
  }
707
731
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__action {
@@ -712,7 +736,7 @@
712
736
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-light-hovered);
713
737
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-light-hovered);
714
738
  }
715
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
739
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon > .ids-icon {
716
740
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-light-hovered);
717
741
  }
718
742
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
@@ -727,7 +751,7 @@
727
751
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
728
752
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-light-hovered);
729
753
  }
730
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
754
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon > .ids-icon {
731
755
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-light-hovered);
732
756
  }
733
757
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__action {
@@ -739,7 +763,7 @@
739
763
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-light-focused);
740
764
  outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-light-focused);
741
765
  }
742
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
766
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon > .ids-icon {
743
767
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-light-focused);
744
768
  }
745
769
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
@@ -754,7 +778,7 @@
754
778
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
755
779
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-light-focused);
756
780
  }
757
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
781
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon > .ids-icon {
758
782
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-light-focused);
759
783
  }
760
784
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__action {
@@ -765,7 +789,7 @@
765
789
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-light-pressed);
766
790
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-light-pressed);
767
791
  }
768
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
792
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon > .ids-icon {
769
793
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-light-pressed);
770
794
  }
771
795
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
@@ -780,7 +804,7 @@
780
804
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
781
805
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-light-pressed);
782
806
  }
783
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
807
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon > .ids-icon {
784
808
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-light-pressed);
785
809
  }
786
810
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__action {
@@ -794,7 +818,7 @@
794
818
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-light-error-default);
795
819
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-light-error-default);
796
820
  }
797
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
821
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon > .ids-icon {
798
822
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-light-default);
799
823
  }
800
824
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
@@ -809,7 +833,7 @@
809
833
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
810
834
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-light-default);
811
835
  }
812
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
836
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon > .ids-icon {
813
837
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-light-default);
814
838
  }
815
839
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__action {
@@ -820,7 +844,7 @@
820
844
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-light-error-hovered);
821
845
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-light-error-hovered);
822
846
  }
823
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
847
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon > .ids-icon {
824
848
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-light-hovered);
825
849
  }
826
850
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
@@ -835,7 +859,7 @@
835
859
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
836
860
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-light-hovered);
837
861
  }
838
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
862
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon > .ids-icon {
839
863
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-light-hovered);
840
864
  }
841
865
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__action {
@@ -847,7 +871,7 @@
847
871
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-light-error-focused);
848
872
  outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-light-focused);
849
873
  }
850
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
874
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon > .ids-icon {
851
875
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-light-focused);
852
876
  }
853
877
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
@@ -862,7 +886,7 @@
862
886
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
863
887
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-light-focused);
864
888
  }
865
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
889
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon > .ids-icon {
866
890
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-light-focused);
867
891
  }
868
892
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__action {
@@ -873,7 +897,7 @@
873
897
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-light-error-pressed);
874
898
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-light-error-pressed);
875
899
  }
876
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
900
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon > .ids-icon {
877
901
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-light-pressed);
878
902
  }
879
903
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
@@ -888,7 +912,7 @@
888
912
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
889
913
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-light-pressed);
890
914
  }
891
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
915
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon > .ids-icon {
892
916
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-light-pressed);
893
917
  }
894
918
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__action {
@@ -902,7 +926,7 @@
902
926
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-light-success-default);
903
927
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-light-success-default);
904
928
  }
905
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
929
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon > .ids-icon {
906
930
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-light-default);
907
931
  }
908
932
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
@@ -917,7 +941,7 @@
917
941
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
918
942
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-light-default);
919
943
  }
920
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
944
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon > .ids-icon {
921
945
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-light-default);
922
946
  }
923
947
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__action {
@@ -928,7 +952,7 @@
928
952
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-light-success-hovered);
929
953
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-light-success-hovered);
930
954
  }
931
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
955
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon > .ids-icon {
932
956
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-light-hovered);
933
957
  }
934
958
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
@@ -943,7 +967,7 @@
943
967
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
944
968
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-light-hovered);
945
969
  }
946
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
970
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon > .ids-icon {
947
971
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-light-hovered);
948
972
  }
949
973
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__action {
@@ -955,7 +979,7 @@
955
979
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-light-success-focused);
956
980
  outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-light-focused);
957
981
  }
958
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
982
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon > .ids-icon {
959
983
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-light-focused);
960
984
  }
961
985
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
@@ -970,7 +994,7 @@
970
994
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
971
995
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-light-focused);
972
996
  }
973
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
997
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon > .ids-icon {
974
998
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-light-focused);
975
999
  }
976
1000
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__action {
@@ -981,7 +1005,7 @@
981
1005
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-light-success-pressed);
982
1006
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-light-success-pressed);
983
1007
  }
984
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
1008
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon > .ids-icon {
985
1009
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-light-pressed);
986
1010
  }
987
1011
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
@@ -996,7 +1020,7 @@
996
1020
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
997
1021
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-light-pressed);
998
1022
  }
999
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
1023
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon > .ids-icon {
1000
1024
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-light-pressed);
1001
1025
  }
1002
1026
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(.ids-form-field-control:active) > .ids-form-field__field-wrapper__action {
@@ -1010,7 +1034,7 @@
1010
1034
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-light-disabled);
1011
1035
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-light-disabled);
1012
1036
  }
1013
- .ids-form-field.ids-form-field-light.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon .ids-icon {
1037
+ .ids-form-field.ids-form-field-light.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon > .ids-icon {
1014
1038
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-light-disabled);
1015
1039
  }
1016
1040
  .ids-form-field.ids-form-field-light.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
@@ -1025,7 +1049,7 @@
1025
1049
  .ids-form-field.ids-form-field-light.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
1026
1050
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-light-disabled);
1027
1051
  }
1028
- .ids-form-field.ids-form-field-light.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon .ids-icon {
1052
+ .ids-form-field.ids-form-field-light.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon > .ids-icon {
1029
1053
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-light-disabled);
1030
1054
  }
1031
1055
  .ids-form-field.ids-form-field-light.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__action {