@i-cell/ids-styles 0.0.40 → 0.0.42

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/button/button.css +116 -44
  2. package/dist/button/button.min.css +1 -1
  3. package/dist/button/button.plugin.js +116 -44
  4. package/dist/components.css +136 -64
  5. package/dist/components.min.css +1 -1
  6. package/dist/components.plugin.js +136 -64
  7. package/dist/icon-button/icon-button.css +20 -20
  8. package/dist/icon-button/icon-button.min.css +1 -1
  9. package/dist/icon-button/icon-button.plugin.js +20 -20
  10. package/package.json +2 -2
package/dist/components.css CHANGED
@@ -817,10 +817,10 @@
817
817
  .ids-button:active {
818
818
  outline-style: none;
819
819
  }
820
- .ids-button:not(:disabled) {
820
+ .ids-button:not(:is(:disabled, .ids-button-disabled)) {
821
821
  cursor: pointer;
822
822
  }
823
- .ids-button:disabled {
823
+ .ids-button:is(:disabled, .ids-button-disabled) {
824
824
  cursor: not-allowed;
825
825
  }
826
826
  .ids-button > .ids-icon {
@@ -959,12 +959,12 @@
959
959
  .ids-button.ids-button-filled.ids-button-primary:active > .ids-icon {
960
960
  color: var(--ids-comp-button-filled-color-fg-icon-primary-pressed);
961
961
  }
962
- .ids-button.ids-button-filled.ids-button-primary:disabled {
962
+ .ids-button.ids-button-filled.ids-button-primary:is(:disabled, .ids-button-disabled) {
963
963
  color: var(--ids-comp-button-filled-color-fg-label-primary-disabled);
964
964
  background: var(--ids-comp-button-filled-color-bg-primary-disabled);
965
965
  border-color: var(--ids-comp-button-filled-color-border-primary-disabled);
966
966
  }
967
- .ids-button.ids-button-filled.ids-button-primary:disabled > .ids-icon {
967
+ .ids-button.ids-button-filled.ids-button-primary:is(:disabled, .ids-button-disabled) > .ids-icon {
968
968
  color: var(--ids-comp-button-filled-color-fg-icon-primary-disabled);
969
969
  }
970
970
  .ids-button.ids-button-filled.ids-button-secondary {
@@ -1000,12 +1000,12 @@
1000
1000
  .ids-button.ids-button-filled.ids-button-secondary:active > .ids-icon {
1001
1001
  color: var(--ids-comp-button-filled-color-fg-icon-secondary-pressed);
1002
1002
  }
1003
- .ids-button.ids-button-filled.ids-button-secondary:disabled {
1003
+ .ids-button.ids-button-filled.ids-button-secondary:is(:disabled, .ids-button-disabled) {
1004
1004
  color: var(--ids-comp-button-filled-color-fg-label-secondary-disabled);
1005
1005
  background: var(--ids-comp-button-filled-color-bg-secondary-disabled);
1006
1006
  border-color: var(--ids-comp-button-filled-color-border-secondary-disabled);
1007
1007
  }
1008
- .ids-button.ids-button-filled.ids-button-secondary:disabled > .ids-icon {
1008
+ .ids-button.ids-button-filled.ids-button-secondary:is(:disabled, .ids-button-disabled) > .ids-icon {
1009
1009
  color: var(--ids-comp-button-filled-color-fg-icon-secondary-disabled);
1010
1010
  }
1011
1011
  .ids-button.ids-button-filled.ids-button-brand {
@@ -1041,12 +1041,12 @@
1041
1041
  .ids-button.ids-button-filled.ids-button-brand:active > .ids-icon {
1042
1042
  color: var(--ids-comp-button-filled-color-fg-icon-brand-pressed);
1043
1043
  }
1044
- .ids-button.ids-button-filled.ids-button-brand:disabled {
1044
+ .ids-button.ids-button-filled.ids-button-brand:is(:disabled, .ids-button-disabled) {
1045
1045
  color: var(--ids-comp-button-filled-color-fg-label-brand-disabled);
1046
1046
  background: var(--ids-comp-button-filled-color-bg-brand-disabled);
1047
1047
  border-color: var(--ids-comp-button-filled-color-border-brand-disabled);
1048
1048
  }
1049
- .ids-button.ids-button-filled.ids-button-brand:disabled > .ids-icon {
1049
+ .ids-button.ids-button-filled.ids-button-brand:is(:disabled, .ids-button-disabled) > .ids-icon {
1050
1050
  color: var(--ids-comp-button-filled-color-fg-icon-brand-disabled);
1051
1051
  }
1052
1052
  .ids-button.ids-button-filled.ids-button-error {
@@ -1082,6 +1082,14 @@
1082
1082
  .ids-button.ids-button-filled.ids-button-error:active > .ids-icon {
1083
1083
  color: var(--ids-comp-button-filled-color-fg-icon-error-pressed);
1084
1084
  }
1085
+ .ids-button.ids-button-filled.ids-button-error:is(:disabled, .ids-button-disabled) {
1086
+ color: var(--ids-comp-button-filled-color-fg-label-error-disabled);
1087
+ background: var(--ids-comp-button-filled-color-bg-error-disabled);
1088
+ border-color: var(--ids-comp-button-filled-color-border-error-disabled);
1089
+ }
1090
+ .ids-button.ids-button-filled.ids-button-error:is(:disabled, .ids-button-disabled) > .ids-icon {
1091
+ color: var(--ids-comp-button-filled-color-fg-icon-error-disabled);
1092
+ }
1085
1093
  .ids-button.ids-button-filled.ids-button-success {
1086
1094
  color: var(--ids-comp-button-filled-color-fg-label-success-default);
1087
1095
  background: var(--ids-comp-button-filled-color-bg-success-default);
@@ -1115,6 +1123,14 @@
1115
1123
  .ids-button.ids-button-filled.ids-button-success:active > .ids-icon {
1116
1124
  color: var(--ids-comp-button-filled-color-fg-icon-success-pressed);
1117
1125
  }
1126
+ .ids-button.ids-button-filled.ids-button-success:is(:disabled, .ids-button-disabled) {
1127
+ color: var(--ids-comp-button-filled-color-fg-label-success-disabled);
1128
+ background: var(--ids-comp-button-filled-color-bg-success-disabled);
1129
+ border-color: var(--ids-comp-button-filled-color-border-success-disabled);
1130
+ }
1131
+ .ids-button.ids-button-filled.ids-button-success:is(:disabled, .ids-button-disabled) > .ids-icon {
1132
+ color: var(--ids-comp-button-filled-color-fg-icon-success-disabled);
1133
+ }
1118
1134
  .ids-button.ids-button-filled.ids-button-warning {
1119
1135
  color: var(--ids-comp-button-filled-color-fg-label-warning-default);
1120
1136
  background: var(--ids-comp-button-filled-color-bg-warning-default);
@@ -1148,6 +1164,14 @@
1148
1164
  .ids-button.ids-button-filled.ids-button-warning:active > .ids-icon {
1149
1165
  color: var(--ids-comp-button-filled-color-fg-icon-warning-pressed);
1150
1166
  }
1167
+ .ids-button.ids-button-filled.ids-button-warning:is(:disabled, .ids-button-disabled) {
1168
+ color: var(--ids-comp-button-filled-color-fg-label-warning-disabled);
1169
+ background: var(--ids-comp-button-filled-color-bg-warning-disabled);
1170
+ border-color: var(--ids-comp-button-filled-color-border-warning-disabled);
1171
+ }
1172
+ .ids-button.ids-button-filled.ids-button-warning:is(:disabled, .ids-button-disabled) > .ids-icon {
1173
+ color: var(--ids-comp-button-filled-color-fg-icon-warning-disabled);
1174
+ }
1151
1175
  .ids-button.ids-button-filled.ids-button-light {
1152
1176
  color: var(--ids-comp-button-filled-color-fg-label-light-default);
1153
1177
  background: var(--ids-comp-button-filled-color-bg-light-default);
@@ -1181,12 +1205,12 @@
1181
1205
  .ids-button.ids-button-filled.ids-button-light:active > .ids-icon {
1182
1206
  color: var(--ids-comp-button-filled-color-fg-icon-light-pressed);
1183
1207
  }
1184
- .ids-button.ids-button-filled.ids-button-light:disabled {
1208
+ .ids-button.ids-button-filled.ids-button-light:is(:disabled, .ids-button-disabled) {
1185
1209
  color: var(--ids-comp-button-filled-color-fg-label-light-disabled);
1186
1210
  background: var(--ids-comp-button-filled-color-bg-light-disabled);
1187
1211
  border-color: var(--ids-comp-button-filled-color-border-light-disabled);
1188
1212
  }
1189
- .ids-button.ids-button-filled.ids-button-light:disabled > .ids-icon {
1213
+ .ids-button.ids-button-filled.ids-button-light:is(:disabled, .ids-button-disabled) > .ids-icon {
1190
1214
  color: var(--ids-comp-button-filled-color-fg-icon-light-disabled);
1191
1215
  }
1192
1216
  .ids-button.ids-button-filled.ids-button-light-fixed {
@@ -1222,12 +1246,12 @@
1222
1246
  .ids-button.ids-button-filled.ids-button-light-fixed:active > .ids-icon {
1223
1247
  color: var(--ids-comp-button-filled-color-fg-icon-light-fixed-pressed);
1224
1248
  }
1225
- .ids-button.ids-button-filled.ids-button-light-fixed:disabled {
1249
+ .ids-button.ids-button-filled.ids-button-light-fixed:is(:disabled, .ids-button-disabled) {
1226
1250
  color: var(--ids-comp-button-filled-color-fg-label-light-fixed-disabled);
1227
1251
  background: var(--ids-comp-button-filled-color-bg-light-fixed-disabled);
1228
1252
  border-color: var(--ids-comp-button-filled-color-border-light-fixed-disabled);
1229
1253
  }
1230
- .ids-button.ids-button-filled.ids-button-light-fixed:disabled > .ids-icon {
1254
+ .ids-button.ids-button-filled.ids-button-light-fixed:is(:disabled, .ids-button-disabled) > .ids-icon {
1231
1255
  color: var(--ids-comp-button-filled-color-fg-icon-light-fixed-disabled);
1232
1256
  }
1233
1257
  .ids-button.ids-button-filled.ids-button-dark {
@@ -1263,12 +1287,12 @@
1263
1287
  .ids-button.ids-button-filled.ids-button-dark:active > .ids-icon {
1264
1288
  color: var(--ids-comp-button-filled-color-fg-icon-dark-pressed);
1265
1289
  }
1266
- .ids-button.ids-button-filled.ids-button-dark:disabled {
1290
+ .ids-button.ids-button-filled.ids-button-dark:is(:disabled, .ids-button-disabled) {
1267
1291
  color: var(--ids-comp-button-filled-color-fg-label-dark-disabled);
1268
1292
  background: var(--ids-comp-button-filled-color-bg-dark-disabled);
1269
1293
  border-color: var(--ids-comp-button-filled-color-border-dark-disabled);
1270
1294
  }
1271
- .ids-button.ids-button-filled.ids-button-dark:disabled > .ids-icon {
1295
+ .ids-button.ids-button-filled.ids-button-dark:is(:disabled, .ids-button-disabled) > .ids-icon {
1272
1296
  color: var(--ids-comp-button-filled-color-fg-icon-dark-disabled);
1273
1297
  }
1274
1298
  .ids-button.ids-button-filled.ids-button-surface {
@@ -1304,12 +1328,12 @@
1304
1328
  .ids-button.ids-button-filled.ids-button-surface:active > .ids-icon {
1305
1329
  color: var(--ids-comp-button-filled-color-fg-icon-surface-pressed);
1306
1330
  }
1307
- .ids-button.ids-button-filled.ids-button-surface:disabled {
1331
+ .ids-button.ids-button-filled.ids-button-surface:is(:disabled, .ids-button-disabled) {
1308
1332
  color: var(--ids-comp-button-filled-color-fg-label-surface-disabled);
1309
1333
  background: var(--ids-comp-button-filled-color-bg-surface-disabled);
1310
1334
  border-color: var(--ids-comp-button-filled-color-border-surface-disabled);
1311
1335
  }
1312
- .ids-button.ids-button-filled.ids-button-surface:disabled > .ids-icon {
1336
+ .ids-button.ids-button-filled.ids-button-surface:is(:disabled, .ids-button-disabled) > .ids-icon {
1313
1337
  color: var(--ids-comp-button-filled-color-fg-icon-surface-disabled);
1314
1338
  }
1315
1339
  .ids-button.ids-button-outlined.ids-button-primary {
@@ -1345,12 +1369,12 @@
1345
1369
  .ids-button.ids-button-outlined.ids-button-primary:active > .ids-icon {
1346
1370
  color: var(--ids-comp-button-outlined-color-fg-icon-primary-pressed);
1347
1371
  }
1348
- .ids-button.ids-button-outlined.ids-button-primary:disabled {
1372
+ .ids-button.ids-button-outlined.ids-button-primary:is(:disabled, .ids-button-disabled) {
1349
1373
  color: var(--ids-comp-button-outlined-color-fg-label-primary-disabled);
1350
1374
  background: var(--ids-comp-button-outlined-color-bg-primary-disabled);
1351
1375
  border-color: var(--ids-comp-button-outlined-color-border-primary-disabled);
1352
1376
  }
1353
- .ids-button.ids-button-outlined.ids-button-primary:disabled > .ids-icon {
1377
+ .ids-button.ids-button-outlined.ids-button-primary:is(:disabled, .ids-button-disabled) > .ids-icon {
1354
1378
  color: var(--ids-comp-button-outlined-color-fg-icon-primary-disabled);
1355
1379
  }
1356
1380
  .ids-button.ids-button-outlined.ids-button-secondary {
@@ -1386,12 +1410,12 @@
1386
1410
  .ids-button.ids-button-outlined.ids-button-secondary:active > .ids-icon {
1387
1411
  color: var(--ids-comp-button-outlined-color-fg-icon-secondary-pressed);
1388
1412
  }
1389
- .ids-button.ids-button-outlined.ids-button-secondary:disabled {
1413
+ .ids-button.ids-button-outlined.ids-button-secondary:is(:disabled, .ids-button-disabled) {
1390
1414
  color: var(--ids-comp-button-outlined-color-fg-label-secondary-disabled);
1391
1415
  background: var(--ids-comp-button-outlined-color-bg-secondary-disabled);
1392
1416
  border-color: var(--ids-comp-button-outlined-color-border-secondary-disabled);
1393
1417
  }
1394
- .ids-button.ids-button-outlined.ids-button-secondary:disabled > .ids-icon {
1418
+ .ids-button.ids-button-outlined.ids-button-secondary:is(:disabled, .ids-button-disabled) > .ids-icon {
1395
1419
  color: var(--ids-comp-button-outlined-color-fg-icon-secondary-disabled);
1396
1420
  }
1397
1421
  .ids-button.ids-button-outlined.ids-button-brand {
@@ -1427,12 +1451,12 @@
1427
1451
  .ids-button.ids-button-outlined.ids-button-brand:active > .ids-icon {
1428
1452
  color: var(--ids-comp-button-outlined-color-fg-icon-brand-pressed);
1429
1453
  }
1430
- .ids-button.ids-button-outlined.ids-button-brand:disabled {
1454
+ .ids-button.ids-button-outlined.ids-button-brand:is(:disabled, .ids-button-disabled) {
1431
1455
  color: var(--ids-comp-button-outlined-color-fg-label-brand-disabled);
1432
1456
  background: var(--ids-comp-button-outlined-color-bg-brand-disabled);
1433
1457
  border-color: var(--ids-comp-button-outlined-color-border-brand-disabled);
1434
1458
  }
1435
- .ids-button.ids-button-outlined.ids-button-brand:disabled > .ids-icon {
1459
+ .ids-button.ids-button-outlined.ids-button-brand:is(:disabled, .ids-button-disabled) > .ids-icon {
1436
1460
  color: var(--ids-comp-button-outlined-color-fg-icon-brand-disabled);
1437
1461
  }
1438
1462
  .ids-button.ids-button-outlined.ids-button-error {
@@ -1468,6 +1492,14 @@
1468
1492
  .ids-button.ids-button-outlined.ids-button-error:active > .ids-icon {
1469
1493
  color: var(--ids-comp-button-outlined-color-fg-icon-error-pressed);
1470
1494
  }
1495
+ .ids-button.ids-button-outlined.ids-button-error:is(:disabled, .ids-button-disabled) {
1496
+ color: var(--ids-comp-button-outlined-color-fg-label-error-disabled);
1497
+ background: var(--ids-comp-button-outlined-color-bg-error-disabled);
1498
+ border-color: var(--ids-comp-button-outlined-color-border-error-disabled);
1499
+ }
1500
+ .ids-button.ids-button-outlined.ids-button-error:is(:disabled, .ids-button-disabled) > .ids-icon {
1501
+ color: var(--ids-comp-button-outlined-color-fg-icon-error-disabled);
1502
+ }
1471
1503
  .ids-button.ids-button-outlined.ids-button-success {
1472
1504
  color: var(--ids-comp-button-outlined-color-fg-label-success-default);
1473
1505
  background: var(--ids-comp-button-outlined-color-bg-success-default);
@@ -1501,6 +1533,14 @@
1501
1533
  .ids-button.ids-button-outlined.ids-button-success:active > .ids-icon {
1502
1534
  color: var(--ids-comp-button-outlined-color-fg-icon-success-pressed);
1503
1535
  }
1536
+ .ids-button.ids-button-outlined.ids-button-success:is(:disabled, .ids-button-disabled) {
1537
+ color: var(--ids-comp-button-outlined-color-fg-label-success-disabled);
1538
+ background: var(--ids-comp-button-outlined-color-bg-success-disabled);
1539
+ border-color: var(--ids-comp-button-outlined-color-border-success-disabled);
1540
+ }
1541
+ .ids-button.ids-button-outlined.ids-button-success:is(:disabled, .ids-button-disabled) > .ids-icon {
1542
+ color: var(--ids-comp-button-outlined-color-fg-icon-success-disabled);
1543
+ }
1504
1544
  .ids-button.ids-button-outlined.ids-button-warning {
1505
1545
  color: var(--ids-comp-button-outlined-color-fg-label-warning-default);
1506
1546
  background: var(--ids-comp-button-outlined-color-bg-warning-default);
@@ -1534,6 +1574,14 @@
1534
1574
  .ids-button.ids-button-outlined.ids-button-warning:active > .ids-icon {
1535
1575
  color: var(--ids-comp-button-outlined-color-fg-icon-warning-pressed);
1536
1576
  }
1577
+ .ids-button.ids-button-outlined.ids-button-warning:is(:disabled, .ids-button-disabled) {
1578
+ color: var(--ids-comp-button-outlined-color-fg-label-warning-disabled);
1579
+ background: var(--ids-comp-button-outlined-color-bg-warning-disabled);
1580
+ border-color: var(--ids-comp-button-outlined-color-border-warning-disabled);
1581
+ }
1582
+ .ids-button.ids-button-outlined.ids-button-warning:is(:disabled, .ids-button-disabled) > .ids-icon {
1583
+ color: var(--ids-comp-button-outlined-color-fg-icon-warning-disabled);
1584
+ }
1537
1585
  .ids-button.ids-button-outlined.ids-button-light {
1538
1586
  color: var(--ids-comp-button-outlined-color-fg-label-light-default);
1539
1587
  background: var(--ids-comp-button-outlined-color-bg-light-default);
@@ -1567,12 +1615,12 @@
1567
1615
  .ids-button.ids-button-outlined.ids-button-light:active > .ids-icon {
1568
1616
  color: var(--ids-comp-button-outlined-color-fg-icon-light-pressed);
1569
1617
  }
1570
- .ids-button.ids-button-outlined.ids-button-light:disabled {
1618
+ .ids-button.ids-button-outlined.ids-button-light:is(:disabled, .ids-button-disabled) {
1571
1619
  color: var(--ids-comp-button-outlined-color-fg-label-light-disabled);
1572
1620
  background: var(--ids-comp-button-outlined-color-bg-light-disabled);
1573
1621
  border-color: var(--ids-comp-button-outlined-color-border-light-disabled);
1574
1622
  }
1575
- .ids-button.ids-button-outlined.ids-button-light:disabled > .ids-icon {
1623
+ .ids-button.ids-button-outlined.ids-button-light:is(:disabled, .ids-button-disabled) > .ids-icon {
1576
1624
  color: var(--ids-comp-button-outlined-color-fg-icon-light-disabled);
1577
1625
  }
1578
1626
  .ids-button.ids-button-outlined.ids-button-light-fixed {
@@ -1608,12 +1656,12 @@
1608
1656
  .ids-button.ids-button-outlined.ids-button-light-fixed:active > .ids-icon {
1609
1657
  color: var(--ids-comp-button-outlined-color-fg-icon-light-fixed-pressed);
1610
1658
  }
1611
- .ids-button.ids-button-outlined.ids-button-light-fixed:disabled {
1659
+ .ids-button.ids-button-outlined.ids-button-light-fixed:is(:disabled, .ids-button-disabled) {
1612
1660
  color: var(--ids-comp-button-outlined-color-fg-label-light-fixed-disabled);
1613
1661
  background: var(--ids-comp-button-outlined-color-bg-light-fixed-disabled);
1614
1662
  border-color: var(--ids-comp-button-outlined-color-border-light-fixed-disabled);
1615
1663
  }
1616
- .ids-button.ids-button-outlined.ids-button-light-fixed:disabled > .ids-icon {
1664
+ .ids-button.ids-button-outlined.ids-button-light-fixed:is(:disabled, .ids-button-disabled) > .ids-icon {
1617
1665
  color: var(--ids-comp-button-outlined-color-fg-icon-light-fixed-disabled);
1618
1666
  }
1619
1667
  .ids-button.ids-button-outlined.ids-button-dark {
@@ -1649,12 +1697,12 @@
1649
1697
  .ids-button.ids-button-outlined.ids-button-dark:active > .ids-icon {
1650
1698
  color: var(--ids-comp-button-outlined-color-fg-icon-dark-pressed);
1651
1699
  }
1652
- .ids-button.ids-button-outlined.ids-button-dark:disabled {
1700
+ .ids-button.ids-button-outlined.ids-button-dark:is(:disabled, .ids-button-disabled) {
1653
1701
  color: var(--ids-comp-button-outlined-color-fg-label-dark-disabled);
1654
1702
  background: var(--ids-comp-button-outlined-color-bg-dark-disabled);
1655
1703
  border-color: var(--ids-comp-button-outlined-color-border-dark-disabled);
1656
1704
  }
1657
- .ids-button.ids-button-outlined.ids-button-dark:disabled > .ids-icon {
1705
+ .ids-button.ids-button-outlined.ids-button-dark:is(:disabled, .ids-button-disabled) > .ids-icon {
1658
1706
  color: var(--ids-comp-button-outlined-color-fg-icon-dark-disabled);
1659
1707
  }
1660
1708
  .ids-button.ids-button-outlined.ids-button-surface {
@@ -1690,12 +1738,12 @@
1690
1738
  .ids-button.ids-button-outlined.ids-button-surface:active > .ids-icon {
1691
1739
  color: var(--ids-comp-button-outlined-color-fg-icon-surface-pressed);
1692
1740
  }
1693
- .ids-button.ids-button-outlined.ids-button-surface:disabled {
1741
+ .ids-button.ids-button-outlined.ids-button-surface:is(:disabled, .ids-button-disabled) {
1694
1742
  color: var(--ids-comp-button-outlined-color-fg-label-surface-disabled);
1695
1743
  background: var(--ids-comp-button-outlined-color-bg-surface-disabled);
1696
1744
  border-color: var(--ids-comp-button-outlined-color-border-surface-disabled);
1697
1745
  }
1698
- .ids-button.ids-button-outlined.ids-button-surface:disabled > .ids-icon {
1746
+ .ids-button.ids-button-outlined.ids-button-surface:is(:disabled, .ids-button-disabled) > .ids-icon {
1699
1747
  color: var(--ids-comp-button-outlined-color-fg-icon-surface-disabled);
1700
1748
  }
1701
1749
  .ids-button.ids-button-text.ids-button-primary {
@@ -1731,12 +1779,12 @@
1731
1779
  .ids-button.ids-button-text.ids-button-primary:active > .ids-icon {
1732
1780
  color: var(--ids-comp-button-text-color-fg-icon-primary-pressed);
1733
1781
  }
1734
- .ids-button.ids-button-text.ids-button-primary:disabled {
1782
+ .ids-button.ids-button-text.ids-button-primary:is(:disabled, .ids-button-disabled) {
1735
1783
  color: var(--ids-comp-button-text-color-fg-label-primary-disabled);
1736
1784
  background: var(--ids-comp-button-text-color-bg-primary-disabled);
1737
1785
  border-color: var(--ids-comp-button-text-color-border-primary-default);
1738
1786
  }
1739
- .ids-button.ids-button-text.ids-button-primary:disabled > .ids-icon {
1787
+ .ids-button.ids-button-text.ids-button-primary:is(:disabled, .ids-button-disabled) > .ids-icon {
1740
1788
  color: var(--ids-comp-button-text-color-fg-icon-primary-disabled);
1741
1789
  }
1742
1790
  .ids-button.ids-button-text.ids-button-secondary {
@@ -1772,12 +1820,12 @@
1772
1820
  .ids-button.ids-button-text.ids-button-secondary:active > .ids-icon {
1773
1821
  color: var(--ids-comp-button-text-color-fg-icon-secondary-pressed);
1774
1822
  }
1775
- .ids-button.ids-button-text.ids-button-secondary:disabled {
1823
+ .ids-button.ids-button-text.ids-button-secondary:is(:disabled, .ids-button-disabled) {
1776
1824
  color: var(--ids-comp-button-text-color-fg-label-secondary-disabled);
1777
1825
  background: var(--ids-comp-button-text-color-bg-secondary-disabled);
1778
1826
  border-color: var(--ids-comp-button-text-color-border-secondary-default);
1779
1827
  }
1780
- .ids-button.ids-button-text.ids-button-secondary:disabled > .ids-icon {
1828
+ .ids-button.ids-button-text.ids-button-secondary:is(:disabled, .ids-button-disabled) > .ids-icon {
1781
1829
  color: var(--ids-comp-button-text-color-fg-icon-secondary-disabled);
1782
1830
  }
1783
1831
  .ids-button.ids-button-text.ids-button-brand {
@@ -1813,12 +1861,12 @@
1813
1861
  .ids-button.ids-button-text.ids-button-brand:active > .ids-icon {
1814
1862
  color: var(--ids-comp-button-text-color-fg-icon-brand-pressed);
1815
1863
  }
1816
- .ids-button.ids-button-text.ids-button-brand:disabled {
1864
+ .ids-button.ids-button-text.ids-button-brand:is(:disabled, .ids-button-disabled) {
1817
1865
  color: var(--ids-comp-button-text-color-fg-label-brand-disabled);
1818
1866
  background: var(--ids-comp-button-text-color-bg-brand-disabled);
1819
1867
  border-color: var(--ids-comp-button-text-color-border-brand-default);
1820
1868
  }
1821
- .ids-button.ids-button-text.ids-button-brand:disabled > .ids-icon {
1869
+ .ids-button.ids-button-text.ids-button-brand:is(:disabled, .ids-button-disabled) > .ids-icon {
1822
1870
  color: var(--ids-comp-button-text-color-fg-icon-brand-disabled);
1823
1871
  }
1824
1872
  .ids-button.ids-button-text.ids-button-error {
@@ -1854,6 +1902,14 @@
1854
1902
  .ids-button.ids-button-text.ids-button-error:active > .ids-icon {
1855
1903
  color: var(--ids-comp-button-text-color-fg-icon-error-pressed);
1856
1904
  }
1905
+ .ids-button.ids-button-text.ids-button-error:is(:disabled, .ids-button-disabled) {
1906
+ color: var(--ids-comp-button-text-color-fg-label-error-disabled);
1907
+ background: var(--ids-comp-button-text-color-bg-error-disabled);
1908
+ border-color: var(--ids-comp-button-text-color-border-error-default);
1909
+ }
1910
+ .ids-button.ids-button-text.ids-button-error:is(:disabled, .ids-button-disabled) > .ids-icon {
1911
+ color: var(--ids-comp-button-text-color-fg-icon-error-disabled);
1912
+ }
1857
1913
  .ids-button.ids-button-text.ids-button-success {
1858
1914
  color: var(--ids-comp-button-text-color-fg-label-success-default);
1859
1915
  background: var(--ids-comp-button-text-color-bg-success-default);
@@ -1887,6 +1943,14 @@
1887
1943
  .ids-button.ids-button-text.ids-button-success:active > .ids-icon {
1888
1944
  color: var(--ids-comp-button-text-color-fg-icon-success-pressed);
1889
1945
  }
1946
+ .ids-button.ids-button-text.ids-button-success:is(:disabled, .ids-button-disabled) {
1947
+ color: var(--ids-comp-button-text-color-fg-label-success-disabled);
1948
+ background: var(--ids-comp-button-text-color-bg-success-disabled);
1949
+ border-color: var(--ids-comp-button-text-color-border-success-default);
1950
+ }
1951
+ .ids-button.ids-button-text.ids-button-success:is(:disabled, .ids-button-disabled) > .ids-icon {
1952
+ color: var(--ids-comp-button-text-color-fg-icon-success-disabled);
1953
+ }
1890
1954
  .ids-button.ids-button-text.ids-button-warning {
1891
1955
  color: var(--ids-comp-button-text-color-fg-label-warning-default);
1892
1956
  background: var(--ids-comp-button-text-color-bg-warning-default);
@@ -1920,6 +1984,14 @@
1920
1984
  .ids-button.ids-button-text.ids-button-warning:active > .ids-icon {
1921
1985
  color: var(--ids-comp-button-text-color-fg-icon-warning-pressed);
1922
1986
  }
1987
+ .ids-button.ids-button-text.ids-button-warning:is(:disabled, .ids-button-disabled) {
1988
+ color: var(--ids-comp-button-text-color-fg-label-warning-disabled);
1989
+ background: var(--ids-comp-button-text-color-bg-warning-disabled);
1990
+ border-color: var(--ids-comp-button-text-color-border-warning-default);
1991
+ }
1992
+ .ids-button.ids-button-text.ids-button-warning:is(:disabled, .ids-button-disabled) > .ids-icon {
1993
+ color: var(--ids-comp-button-text-color-fg-icon-warning-disabled);
1994
+ }
1923
1995
  .ids-button.ids-button-text.ids-button-light {
1924
1996
  color: var(--ids-comp-button-text-color-fg-label-light-default);
1925
1997
  background: var(--ids-comp-button-text-color-bg-light-default);
@@ -1953,12 +2025,12 @@
1953
2025
  .ids-button.ids-button-text.ids-button-light:active > .ids-icon {
1954
2026
  color: var(--ids-comp-button-text-color-fg-icon-light-pressed);
1955
2027
  }
1956
- .ids-button.ids-button-text.ids-button-light:disabled {
2028
+ .ids-button.ids-button-text.ids-button-light:is(:disabled, .ids-button-disabled) {
1957
2029
  color: var(--ids-comp-button-text-color-fg-label-light-disabled);
1958
2030
  background: var(--ids-comp-button-text-color-bg-light-disabled);
1959
2031
  border-color: var(--ids-comp-button-text-color-border-light-default);
1960
2032
  }
1961
- .ids-button.ids-button-text.ids-button-light:disabled > .ids-icon {
2033
+ .ids-button.ids-button-text.ids-button-light:is(:disabled, .ids-button-disabled) > .ids-icon {
1962
2034
  color: var(--ids-comp-button-text-color-fg-icon-light-disabled);
1963
2035
  }
1964
2036
  .ids-button.ids-button-text.ids-button-light-fixed {
@@ -1994,12 +2066,12 @@
1994
2066
  .ids-button.ids-button-text.ids-button-light-fixed:active > .ids-icon {
1995
2067
  color: var(--ids-comp-button-text-color-fg-icon-light-fixed-pressed);
1996
2068
  }
1997
- .ids-button.ids-button-text.ids-button-light-fixed:disabled {
2069
+ .ids-button.ids-button-text.ids-button-light-fixed:is(:disabled, .ids-button-disabled) {
1998
2070
  color: var(--ids-comp-button-text-color-fg-label-light-fixed-disabled);
1999
2071
  background: var(--ids-comp-button-text-color-bg-light-fixed-disabled);
2000
2072
  border-color: var(--ids-comp-button-text-color-border-light-fixed-default);
2001
2073
  }
2002
- .ids-button.ids-button-text.ids-button-light-fixed:disabled > .ids-icon {
2074
+ .ids-button.ids-button-text.ids-button-light-fixed:is(:disabled, .ids-button-disabled) > .ids-icon {
2003
2075
  color: var(--ids-comp-button-text-color-fg-icon-light-fixed-disabled);
2004
2076
  }
2005
2077
  .ids-button.ids-button-text.ids-button-dark {
@@ -2035,12 +2107,12 @@
2035
2107
  .ids-button.ids-button-text.ids-button-dark:active > .ids-icon {
2036
2108
  color: var(--ids-comp-button-text-color-fg-icon-dark-pressed);
2037
2109
  }
2038
- .ids-button.ids-button-text.ids-button-dark:disabled {
2110
+ .ids-button.ids-button-text.ids-button-dark:is(:disabled, .ids-button-disabled) {
2039
2111
  color: var(--ids-comp-button-text-color-fg-label-dark-disabled);
2040
2112
  background: var(--ids-comp-button-text-color-bg-dark-disabled);
2041
2113
  border-color: var(--ids-comp-button-text-color-border-dark-default);
2042
2114
  }
2043
- .ids-button.ids-button-text.ids-button-dark:disabled > .ids-icon {
2115
+ .ids-button.ids-button-text.ids-button-dark:is(:disabled, .ids-button-disabled) > .ids-icon {
2044
2116
  color: var(--ids-comp-button-text-color-fg-icon-dark-disabled);
2045
2117
  }
2046
2118
  .ids-button.ids-button-text.ids-button-surface {
@@ -2076,12 +2148,12 @@
2076
2148
  .ids-button.ids-button-text.ids-button-surface:active > .ids-icon {
2077
2149
  color: var(--ids-comp-button-text-color-fg-icon-surface-pressed);
2078
2150
  }
2079
- .ids-button.ids-button-text.ids-button-surface:disabled {
2151
+ .ids-button.ids-button-text.ids-button-surface:is(:disabled, .ids-button-disabled) {
2080
2152
  color: var(--ids-comp-button-text-color-fg-label-surface-disabled);
2081
2153
  background: var(--ids-comp-button-text-color-bg-surface-disabled);
2082
2154
  border-color: var(--ids-comp-button-text-color-border-surface-default);
2083
2155
  }
2084
- .ids-button.ids-button-text.ids-button-surface:disabled > .ids-icon {
2156
+ .ids-button.ids-button-text.ids-button-surface:is(:disabled, .ids-button-disabled) > .ids-icon {
2085
2157
  color: var(--ids-comp-button-text-color-fg-icon-surface-disabled);
2086
2158
  }
2087
2159
 
@@ -7039,10 +7111,10 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7039
7111
  .ids-icon-button:active {
7040
7112
  outline-style: none;
7041
7113
  }
7042
- .ids-icon-button:not(:disabled) {
7114
+ .ids-icon-button:not(:is(:disabled, .ids-icon-button-disabled)) {
7043
7115
  cursor: pointer;
7044
7116
  }
7045
- .ids-icon-button:disabled {
7117
+ .ids-icon-button:is(:disabled, .ids-icon-button-disabled) {
7046
7118
  cursor: not-allowed;
7047
7119
  }
7048
7120
  .ids-icon-button > .ids-icon {
@@ -7137,7 +7209,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7137
7209
  color: var(--ids-comp-icon-button-filled-color-fg-primary-pressed);
7138
7210
  border-color: var(--ids-comp-icon-button-filled-color-border-primary-pressed);
7139
7211
  }
7140
- .ids-icon-button.ids-icon-button-filled.ids-icon-button-primary:disabled {
7212
+ .ids-icon-button.ids-icon-button-filled.ids-icon-button-primary:is(:disabled, .ids-icon-button-disabled) {
7141
7213
  background: var(--ids-comp-icon-button-filled-color-bg-primary-disabled);
7142
7214
  color: var(--ids-comp-icon-button-filled-color-fg-primary-disabled);
7143
7215
  border-color: var(--ids-comp-icon-button-filled-color-border-primary-disabled);
@@ -7163,7 +7235,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7163
7235
  color: var(--ids-comp-icon-button-filled-color-fg-secondary-pressed);
7164
7236
  border-color: var(--ids-comp-icon-button-filled-color-border-secondary-pressed);
7165
7237
  }
7166
- .ids-icon-button.ids-icon-button-filled.ids-icon-button-secondary:disabled {
7238
+ .ids-icon-button.ids-icon-button-filled.ids-icon-button-secondary:is(:disabled, .ids-icon-button-disabled) {
7167
7239
  background: var(--ids-comp-icon-button-filled-color-bg-secondary-disabled);
7168
7240
  color: var(--ids-comp-icon-button-filled-color-fg-secondary-disabled);
7169
7241
  border-color: var(--ids-comp-icon-button-filled-color-border-secondary-disabled);
@@ -7189,7 +7261,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7189
7261
  color: var(--ids-comp-icon-button-filled-color-fg-brand-pressed);
7190
7262
  border-color: var(--ids-comp-icon-button-filled-color-border-brand-pressed);
7191
7263
  }
7192
- .ids-icon-button.ids-icon-button-filled.ids-icon-button-brand:disabled {
7264
+ .ids-icon-button.ids-icon-button-filled.ids-icon-button-brand:is(:disabled, .ids-icon-button-disabled) {
7193
7265
  background: var(--ids-comp-icon-button-filled-color-bg-brand-disabled);
7194
7266
  color: var(--ids-comp-icon-button-filled-color-fg-brand-disabled);
7195
7267
  border-color: var(--ids-comp-icon-button-filled-color-border-brand-disabled);
@@ -7278,7 +7350,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7278
7350
  color: var(--ids-comp-icon-button-filled-color-fg-light-pressed);
7279
7351
  border-color: var(--ids-comp-icon-button-filled-color-border-light-pressed);
7280
7352
  }
7281
- .ids-icon-button.ids-icon-button-filled.ids-icon-button-light:disabled {
7353
+ .ids-icon-button.ids-icon-button-filled.ids-icon-button-light:is(:disabled, .ids-icon-button-disabled) {
7282
7354
  background: var(--ids-comp-icon-button-filled-color-bg-light-disabled);
7283
7355
  color: var(--ids-comp-icon-button-filled-color-fg-light-disabled);
7284
7356
  border-color: var(--ids-comp-icon-button-filled-color-border-light-disabled);
@@ -7304,7 +7376,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7304
7376
  color: var(--ids-comp-icon-button-filled-color-fg-dark-pressed);
7305
7377
  border-color: var(--ids-comp-icon-button-filled-color-border-dark-pressed);
7306
7378
  }
7307
- .ids-icon-button.ids-icon-button-filled.ids-icon-button-dark:disabled {
7379
+ .ids-icon-button.ids-icon-button-filled.ids-icon-button-dark:is(:disabled, .ids-icon-button-disabled) {
7308
7380
  background: var(--ids-comp-icon-button-filled-color-bg-dark-disabled);
7309
7381
  color: var(--ids-comp-icon-button-filled-color-fg-dark-disabled);
7310
7382
  border-color: var(--ids-comp-icon-button-filled-color-border-dark-disabled);
@@ -7330,7 +7402,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7330
7402
  color: var(--ids-comp-icon-button-filled-color-fg-surface-pressed);
7331
7403
  border-color: var(--ids-comp-icon-button-filled-color-border-surface-pressed);
7332
7404
  }
7333
- .ids-icon-button.ids-icon-button-filled.ids-icon-button-surface:disabled {
7405
+ .ids-icon-button.ids-icon-button-filled.ids-icon-button-surface:is(:disabled, .ids-icon-button-disabled) {
7334
7406
  background: var(--ids-comp-icon-button-filled-color-bg-surface-disabled);
7335
7407
  color: var(--ids-comp-icon-button-filled-color-fg-surface-disabled);
7336
7408
  border-color: var(--ids-comp-icon-button-filled-color-border-surface-disabled);
@@ -7356,7 +7428,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7356
7428
  color: var(--ids-comp-icon-button-outlined-color-fg-primary-pressed);
7357
7429
  border-color: var(--ids-comp-icon-button-outlined-color-border-primary-pressed);
7358
7430
  }
7359
- .ids-icon-button.ids-icon-button-outlined.ids-icon-button-primary:disabled {
7431
+ .ids-icon-button.ids-icon-button-outlined.ids-icon-button-primary:is(:disabled, .ids-icon-button-disabled) {
7360
7432
  background: var(--ids-comp-icon-button-outlined-color-bg-primary-disabled);
7361
7433
  color: var(--ids-comp-icon-button-outlined-color-fg-primary-disabled);
7362
7434
  border-color: var(--ids-comp-icon-button-outlined-color-border-primary-disabled);
@@ -7382,7 +7454,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7382
7454
  color: var(--ids-comp-icon-button-outlined-color-fg-secondary-pressed);
7383
7455
  border-color: var(--ids-comp-icon-button-outlined-color-border-secondary-pressed);
7384
7456
  }
7385
- .ids-icon-button.ids-icon-button-outlined.ids-icon-button-secondary:disabled {
7457
+ .ids-icon-button.ids-icon-button-outlined.ids-icon-button-secondary:is(:disabled, .ids-icon-button-disabled) {
7386
7458
  background: var(--ids-comp-icon-button-outlined-color-bg-secondary-disabled);
7387
7459
  color: var(--ids-comp-icon-button-outlined-color-fg-secondary-disabled);
7388
7460
  border-color: var(--ids-comp-icon-button-outlined-color-border-secondary-disabled);
@@ -7408,7 +7480,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7408
7480
  color: var(--ids-comp-icon-button-outlined-color-fg-brand-pressed);
7409
7481
  border-color: var(--ids-comp-icon-button-outlined-color-border-brand-pressed);
7410
7482
  }
7411
- .ids-icon-button.ids-icon-button-outlined.ids-icon-button-brand:disabled {
7483
+ .ids-icon-button.ids-icon-button-outlined.ids-icon-button-brand:is(:disabled, .ids-icon-button-disabled) {
7412
7484
  background: var(--ids-comp-icon-button-outlined-color-bg-brand-disabled);
7413
7485
  color: var(--ids-comp-icon-button-outlined-color-fg-brand-disabled);
7414
7486
  border-color: var(--ids-comp-icon-button-outlined-color-border-brand-disabled);
@@ -7497,7 +7569,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7497
7569
  color: var(--ids-comp-icon-button-outlined-color-fg-light-pressed);
7498
7570
  border-color: var(--ids-comp-icon-button-outlined-color-border-light-pressed);
7499
7571
  }
7500
- .ids-icon-button.ids-icon-button-outlined.ids-icon-button-light:disabled {
7572
+ .ids-icon-button.ids-icon-button-outlined.ids-icon-button-light:is(:disabled, .ids-icon-button-disabled) {
7501
7573
  background: var(--ids-comp-icon-button-outlined-color-bg-light-disabled);
7502
7574
  color: var(--ids-comp-icon-button-outlined-color-fg-light-disabled);
7503
7575
  border-color: var(--ids-comp-icon-button-outlined-color-border-light-disabled);
@@ -7523,7 +7595,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7523
7595
  color: var(--ids-comp-icon-button-outlined-color-fg-dark-pressed);
7524
7596
  border-color: var(--ids-comp-icon-button-outlined-color-border-dark-pressed);
7525
7597
  }
7526
- .ids-icon-button.ids-icon-button-outlined.ids-icon-button-dark:disabled {
7598
+ .ids-icon-button.ids-icon-button-outlined.ids-icon-button-dark:is(:disabled, .ids-icon-button-disabled) {
7527
7599
  background: var(--ids-comp-icon-button-outlined-color-bg-dark-disabled);
7528
7600
  color: var(--ids-comp-icon-button-outlined-color-fg-dark-disabled);
7529
7601
  border-color: var(--ids-comp-icon-button-outlined-color-border-dark-disabled);
@@ -7549,7 +7621,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7549
7621
  color: var(--ids-comp-icon-button-outlined-color-fg-surface-pressed);
7550
7622
  border-color: var(--ids-comp-icon-button-outlined-color-border-surface-pressed);
7551
7623
  }
7552
- .ids-icon-button.ids-icon-button-outlined.ids-icon-button-surface:disabled {
7624
+ .ids-icon-button.ids-icon-button-outlined.ids-icon-button-surface:is(:disabled, .ids-icon-button-disabled) {
7553
7625
  background: var(--ids-comp-icon-button-outlined-color-bg-surface-disabled);
7554
7626
  color: var(--ids-comp-icon-button-outlined-color-fg-surface-disabled);
7555
7627
  border-color: var(--ids-comp-icon-button-outlined-color-border-surface-disabled);
@@ -7574,7 +7646,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7574
7646
  background: var(--ids-comp-icon-button-standard-color-bg-primary-pressed);
7575
7647
  color: var(--ids-comp-icon-button-standard-color-fg-primary-pressed);
7576
7648
  }
7577
- .ids-icon-button.ids-icon-button-standard.ids-icon-button-primary:disabled {
7649
+ .ids-icon-button.ids-icon-button-standard.ids-icon-button-primary:is(:disabled, .ids-icon-button-disabled) {
7578
7650
  background: var(--ids-comp-icon-button-standard-color-bg-primary-disabled);
7579
7651
  color: var(--ids-comp-icon-button-standard-color-fg-primary-disabled);
7580
7652
  }
@@ -7595,7 +7667,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7595
7667
  background: var(--ids-comp-icon-button-standard-color-bg-secondary-pressed);
7596
7668
  color: var(--ids-comp-icon-button-standard-color-fg-secondary-pressed);
7597
7669
  }
7598
- .ids-icon-button.ids-icon-button-standard.ids-icon-button-secondary:disabled {
7670
+ .ids-icon-button.ids-icon-button-standard.ids-icon-button-secondary:is(:disabled, .ids-icon-button-disabled) {
7599
7671
  background: var(--ids-comp-icon-button-standard-color-bg-secondary-disabled);
7600
7672
  color: var(--ids-comp-icon-button-standard-color-fg-secondary-disabled);
7601
7673
  }
@@ -7616,7 +7688,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7616
7688
  background: var(--ids-comp-icon-button-standard-color-bg-brand-pressed);
7617
7689
  color: var(--ids-comp-icon-button-standard-color-fg-brand-pressed);
7618
7690
  }
7619
- .ids-icon-button.ids-icon-button-standard.ids-icon-button-brand:disabled {
7691
+ .ids-icon-button.ids-icon-button-standard.ids-icon-button-brand:is(:disabled, .ids-icon-button-disabled) {
7620
7692
  background: var(--ids-comp-icon-button-standard-color-bg-brand-disabled);
7621
7693
  color: var(--ids-comp-icon-button-standard-color-fg-brand-disabled);
7622
7694
  }
@@ -7688,7 +7760,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7688
7760
  background: var(--ids-comp-icon-button-standard-color-bg-light-pressed);
7689
7761
  color: var(--ids-comp-icon-button-standard-color-fg-light-pressed);
7690
7762
  }
7691
- .ids-icon-button.ids-icon-button-standard.ids-icon-button-light:disabled {
7763
+ .ids-icon-button.ids-icon-button-standard.ids-icon-button-light:is(:disabled, .ids-icon-button-disabled) {
7692
7764
  background: var(--ids-comp-icon-button-standard-color-bg-light-disabled);
7693
7765
  color: var(--ids-comp-icon-button-standard-color-fg-light-disabled);
7694
7766
  }
@@ -7709,7 +7781,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7709
7781
  background: var(--ids-comp-icon-button-standard-color-bg-dark-pressed);
7710
7782
  color: var(--ids-comp-icon-button-standard-color-fg-dark-pressed);
7711
7783
  }
7712
- .ids-icon-button.ids-icon-button-standard.ids-icon-button-dark:disabled {
7784
+ .ids-icon-button.ids-icon-button-standard.ids-icon-button-dark:is(:disabled, .ids-icon-button-disabled) {
7713
7785
  background: var(--ids-comp-icon-button-standard-color-bg-dark-disabled);
7714
7786
  color: var(--ids-comp-icon-button-standard-color-fg-dark-disabled);
7715
7787
  }
@@ -7730,7 +7802,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7730
7802
  background: var(--ids-comp-icon-button-standard-color-bg-surface-pressed);
7731
7803
  color: var(--ids-comp-icon-button-standard-color-fg-surface-pressed);
7732
7804
  }
7733
- .ids-icon-button.ids-icon-button-standard.ids-icon-button-surface:disabled {
7805
+ .ids-icon-button.ids-icon-button-standard.ids-icon-button-surface:is(:disabled, .ids-icon-button-disabled) {
7734
7806
  background: var(--ids-comp-icon-button-standard-color-bg-surface-disabled);
7735
7807
  color: var(--ids-comp-icon-button-standard-color-fg-surface-disabled);
7736
7808
  }