klun-ui 0.1.23 → 0.2.2

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 (20) hide show
  1. package/CHANGELOG.md +109 -0
  2. package/README.md +41 -15
  3. package/dist/{chunk-UMR3IWCQ.cjs → chunk-T7O3RMWL.cjs} +501 -497
  4. package/dist/chunk-T7O3RMWL.cjs.map +1 -0
  5. package/dist/{chunk-T3IFNMYU.js → chunk-UJOMGMCV.js} +502 -498
  6. package/dist/chunk-UJOMGMCV.js.map +1 -0
  7. package/dist/index.cjs +158 -158
  8. package/dist/index.d.cts +217 -205
  9. package/dist/index.d.ts +217 -205
  10. package/dist/index.js +1 -1
  11. package/dist/styles.css +240 -98
  12. package/dist/templates/index.cjs +2583 -94
  13. package/dist/templates/index.cjs.map +1 -1
  14. package/dist/templates/index.d.cts +142 -1
  15. package/dist/templates/index.d.ts +142 -1
  16. package/dist/templates/index.js +2480 -13
  17. package/dist/templates/index.js.map +1 -1
  18. package/package.json +3 -2
  19. package/dist/chunk-T3IFNMYU.js.map +0 -1
  20. package/dist/chunk-UMR3IWCQ.cjs.map +0 -1
package/dist/styles.css CHANGED
@@ -1043,6 +1043,119 @@
1043
1043
  --klun-radius-4xl: 32px;
1044
1044
  }
1045
1045
 
1046
+ /* src/styles/tokens/density.css */
1047
+ :root,
1048
+ [data-density=default] {
1049
+ --klun-control-h-2xs: 24px;
1050
+ --klun-control-h-xs: 28px;
1051
+ --klun-control-h-sm: 32px;
1052
+ --klun-control-h-md: 36px;
1053
+ --klun-control-h-lg: 40px;
1054
+ --klun-control-h-xl: 48px;
1055
+ --klun-control-px-2xs: 8px;
1056
+ --klun-control-px-xs: 10px;
1057
+ --klun-control-px-sm: 12px;
1058
+ --klun-control-px-md: 14px;
1059
+ --klun-control-px-lg: 16px;
1060
+ --klun-control-px-xl: 20px;
1061
+ --klun-field-px-xs: 8px;
1062
+ --klun-field-px-sm: 10px;
1063
+ --klun-field-px-md: 12px;
1064
+ --klun-field-px-lg: 14px;
1065
+ --klun-field-pad-xs: 6px 8px;
1066
+ --klun-field-pad-sm: 8px 10px;
1067
+ --klun-field-pad-md: 10px 12px;
1068
+ --klun-field-pad-lg: 12px 14px;
1069
+ }
1070
+ [data-density=compact] {
1071
+ --klun-control-h-2xs: 22px;
1072
+ --klun-control-h-xs: 24px;
1073
+ --klun-control-h-sm: 28px;
1074
+ --klun-control-h-md: 32px;
1075
+ --klun-control-h-lg: 36px;
1076
+ --klun-control-h-xl: 40px;
1077
+ --klun-control-px-2xs: 7px;
1078
+ --klun-control-px-xs: 8px;
1079
+ --klun-control-px-sm: 10px;
1080
+ --klun-control-px-md: 12px;
1081
+ --klun-control-px-lg: 14px;
1082
+ --klun-control-px-xl: 17px;
1083
+ --klun-field-px-xs: 7px;
1084
+ --klun-field-px-sm: 8px;
1085
+ --klun-field-px-md: 10px;
1086
+ --klun-field-px-lg: 12px;
1087
+ --klun-field-pad-xs: 5px 7px;
1088
+ --klun-field-pad-sm: 7px 8px;
1089
+ --klun-field-pad-md: 8px 10px;
1090
+ --klun-field-pad-lg: 10px 12px;
1091
+ }
1092
+ [data-density=compact] .klun-checkbox--small {
1093
+ --_box: 16px;
1094
+ }
1095
+ [data-density=compact] .klun-checkbox--medium {
1096
+ --_box: 18px;
1097
+ }
1098
+ [data-density=compact] .klun-checkbox--large {
1099
+ --_box: 22px;
1100
+ }
1101
+ [data-density=compact] .klun-radio--small {
1102
+ --_box: 14px;
1103
+ }
1104
+ [data-density=compact] .klun-radio--medium {
1105
+ --_box: 18px;
1106
+ }
1107
+ [data-density=compact] .klun-radio--large {
1108
+ --_box: 22px;
1109
+ }
1110
+ [data-density=compact] .klun-switch--small {
1111
+ --_track-w: 30px;
1112
+ --_track-h: 16px;
1113
+ --_thumb: 12px;
1114
+ }
1115
+ [data-density=compact] .klun-switch--medium {
1116
+ --_track-w: 34px;
1117
+ --_track-h: 18px;
1118
+ --_thumb: 14px;
1119
+ }
1120
+ [data-density=compact] .klun-switch--large {
1121
+ --_track-w: 40px;
1122
+ --_track-h: 22px;
1123
+ --_thumb: 18px;
1124
+ }
1125
+ [data-density=default] .klun-checkbox--small {
1126
+ --_box: 18px;
1127
+ }
1128
+ [data-density=default] .klun-checkbox--medium {
1129
+ --_box: 20px;
1130
+ }
1131
+ [data-density=default] .klun-checkbox--large {
1132
+ --_box: 24px;
1133
+ }
1134
+ [data-density=default] .klun-radio--small {
1135
+ --_box: 16px;
1136
+ }
1137
+ [data-density=default] .klun-radio--medium {
1138
+ --_box: 20px;
1139
+ }
1140
+ [data-density=default] .klun-radio--large {
1141
+ --_box: 24px;
1142
+ }
1143
+ [data-density=default] .klun-switch--small {
1144
+ --_track-w: 32px;
1145
+ --_track-h: 18px;
1146
+ --_thumb: 14px;
1147
+ }
1148
+ [data-density=default] .klun-switch--medium {
1149
+ --_track-w: 36px;
1150
+ --_track-h: 20px;
1151
+ --_thumb: 16px;
1152
+ }
1153
+ [data-density=default] .klun-switch--large {
1154
+ --_track-w: 44px;
1155
+ --_track-h: 24px;
1156
+ --_thumb: 20px;
1157
+ }
1158
+
1046
1159
  /* src/styles/tokens/motion.css */
1047
1160
  :root {
1048
1161
  --klun-duration-100: 100ms;
@@ -1123,25 +1236,31 @@ body {
1123
1236
  --_on-accent: var(--klun-static-static-white);
1124
1237
  --_focus: var(--klun-shadow-button-error-focus);
1125
1238
  }
1239
+ .klun-button--tiny {
1240
+ height: var(--klun-control-h-xs, 28px);
1241
+ padding: 0 var(--klun-control-px-xs, 10px);
1242
+ border-radius: var(--klun-radius-md);
1243
+ gap: 4px;
1244
+ }
1126
1245
  .klun-button--xsmall {
1127
- height: 32px;
1128
- padding: 0 12px;
1246
+ height: var(--klun-control-h-sm, 32px);
1247
+ padding: 0 var(--klun-control-px-sm, 12px);
1129
1248
  border-radius: var(--klun-radius-md);
1130
1249
  gap: 4px;
1131
1250
  }
1132
1251
  .klun-button--small {
1133
- height: 36px;
1134
- padding: 0 14px;
1252
+ height: var(--klun-control-h-md, 36px);
1253
+ padding: 0 var(--klun-control-px-md, 14px);
1135
1254
  border-radius: var(--klun-radius-md);
1136
1255
  }
1137
1256
  .klun-button--medium {
1138
- height: 40px;
1139
- padding: 0 16px;
1257
+ height: var(--klun-control-h-lg, 40px);
1258
+ padding: 0 var(--klun-control-px-lg, 16px);
1140
1259
  border-radius: var(--klun-radius-lg);
1141
1260
  }
1142
1261
  .klun-button--large {
1143
- height: 48px;
1144
- padding: 0 20px;
1262
+ height: var(--klun-control-h-xl, 48px);
1263
+ padding: 0 var(--klun-control-px-xl, 20px);
1145
1264
  border-radius: var(--klun-radius-xl);
1146
1265
  gap: 8px;
1147
1266
  font: var(--klun-text-label-md);
@@ -1237,27 +1356,33 @@ body {
1237
1356
  --_on-accent: var(--klun-static-static-white);
1238
1357
  --_focus: var(--klun-shadow-button-error-focus);
1239
1358
  }
1359
+ .klun-icon-button--tiny {
1360
+ width: var(--klun-control-h-2xs, 24px);
1361
+ height: var(--klun-control-h-2xs, 24px);
1362
+ border-radius: var(--klun-radius-md);
1363
+ font-size: 16px;
1364
+ }
1240
1365
  .klun-icon-button--xsmall {
1241
- width: 28px;
1242
- height: 28px;
1366
+ width: var(--klun-control-h-xs, 28px);
1367
+ height: var(--klun-control-h-xs, 28px);
1243
1368
  border-radius: var(--klun-radius-md);
1244
1369
  font-size: 18px;
1245
1370
  }
1246
1371
  .klun-icon-button--small {
1247
- width: 32px;
1248
- height: 32px;
1372
+ width: var(--klun-control-h-sm, 32px);
1373
+ height: var(--klun-control-h-sm, 32px);
1249
1374
  border-radius: var(--klun-radius-md);
1250
1375
  font-size: 20px;
1251
1376
  }
1252
1377
  .klun-icon-button--medium {
1253
- width: 36px;
1254
- height: 36px;
1378
+ width: var(--klun-control-h-md, 36px);
1379
+ height: var(--klun-control-h-md, 36px);
1255
1380
  border-radius: var(--klun-radius-lg);
1256
1381
  font-size: 20px;
1257
1382
  }
1258
1383
  .klun-icon-button--large {
1259
- width: 40px;
1260
- height: 40px;
1384
+ width: var(--klun-control-h-lg, 40px);
1385
+ height: var(--klun-control-h-lg, 40px);
1261
1386
  border-radius: var(--klun-radius-lg);
1262
1387
  font-size: 20px;
1263
1388
  }
@@ -1466,13 +1591,13 @@ body {
1466
1591
  opacity var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
1467
1592
  }
1468
1593
  .klun-compact-button--small {
1469
- height: 24px;
1470
- min-width: 24px;
1594
+ height: var(--klun-control-h-2xs, 24px);
1595
+ min-width: var(--klun-control-h-2xs, 24px);
1471
1596
  font-size: 16px;
1472
1597
  }
1473
1598
  .klun-compact-button--medium {
1474
- height: 32px;
1475
- min-width: 32px;
1599
+ height: var(--klun-control-h-sm, 32px);
1600
+ min-width: var(--klun-control-h-sm, 32px);
1476
1601
  font-size: 18px;
1477
1602
  }
1478
1603
  .klun-compact-button--has-label {
@@ -1650,18 +1775,18 @@ body {
1650
1775
  color: var(--klun-text-strong-950);
1651
1776
  }
1652
1777
  .klun-button-group--small .klun-button-group__item {
1653
- height: 32px;
1654
- padding: 0 12px;
1778
+ height: var(--klun-control-h-sm, 32px);
1779
+ padding: 0 var(--klun-control-px-sm, 12px);
1655
1780
  font: var(--klun-text-label-sm);
1656
1781
  }
1657
1782
  .klun-button-group--medium .klun-button-group__item {
1658
- height: 36px;
1659
- padding: 0 14px;
1783
+ height: var(--klun-control-h-md, 36px);
1784
+ padding: 0 var(--klun-control-px-md, 14px);
1660
1785
  font: var(--klun-text-label-sm);
1661
1786
  }
1662
1787
  .klun-button-group--large .klun-button-group__item {
1663
- height: 40px;
1664
- padding: 0 16px;
1788
+ height: var(--klun-control-h-lg, 40px);
1789
+ padding: 0 var(--klun-control-px-lg, 16px);
1665
1790
  font: var(--klun-text-label-md);
1666
1791
  }
1667
1792
  .klun-button-group--small .klun-button-group__item--icon-only {
@@ -1713,16 +1838,16 @@ body {
1713
1838
  box-shadow var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
1714
1839
  }
1715
1840
  .klun-copy-button--sm {
1716
- height: 28px;
1717
- min-width: 28px;
1841
+ height: var(--klun-control-h-xs, 28px);
1842
+ min-width: var(--klun-control-h-xs, 28px);
1718
1843
  }
1719
1844
  .klun-copy-button--md {
1720
- height: 32px;
1721
- min-width: 32px;
1845
+ height: var(--klun-control-h-sm, 32px);
1846
+ min-width: var(--klun-control-h-sm, 32px);
1722
1847
  }
1723
1848
  .klun-copy-button--lg {
1724
- height: 40px;
1725
- min-width: 40px;
1849
+ height: var(--klun-control-h-lg, 40px);
1850
+ min-width: var(--klun-control-h-lg, 40px);
1726
1851
  }
1727
1852
  .klun-copy-button--has-label {
1728
1853
  min-width: auto;
@@ -2114,8 +2239,8 @@ body {
2114
2239
  display: inline-flex;
2115
2240
  align-items: center;
2116
2241
  justify-content: center;
2117
- width: 32px;
2118
- height: 32px;
2242
+ width: var(--klun-control-h-sm, 32px);
2243
+ height: var(--klun-control-h-sm, 32px);
2119
2244
  margin-left: 4px;
2120
2245
  border: none;
2121
2246
  cursor: pointer;
@@ -2134,7 +2259,7 @@ body {
2134
2259
  display: inline-flex;
2135
2260
  align-items: center;
2136
2261
  gap: 6px;
2137
- height: 32px;
2262
+ height: var(--klun-control-h-sm, 32px);
2138
2263
  padding: 0 12px;
2139
2264
  border: none;
2140
2265
  cursor: pointer;
@@ -4193,8 +4318,8 @@ body {
4193
4318
  display: inline-flex;
4194
4319
  align-items: center;
4195
4320
  gap: 6px;
4196
- height: 36px;
4197
- padding: 0 12px;
4321
+ height: var(--klun-control-h-sm, 32px);
4322
+ padding: 0 var(--klun-control-px-sm, 12px);
4198
4323
  border: none;
4199
4324
  border-radius: var(--klun-radius-lg);
4200
4325
  background: var(--klun-bg-white-0);
@@ -4228,8 +4353,8 @@ body {
4228
4353
  display: inline-flex;
4229
4354
  align-items: center;
4230
4355
  justify-content: center;
4231
- width: 28px;
4232
- height: 28px;
4356
+ width: var(--klun-control-h-xs, 28px);
4357
+ height: var(--klun-control-h-xs, 28px);
4233
4358
  border: none;
4234
4359
  border-radius: var(--klun-radius-md);
4235
4360
  background: transparent;
@@ -4391,7 +4516,7 @@ body {
4391
4516
  display: inline-flex;
4392
4517
  align-items: center;
4393
4518
  gap: 6px;
4394
- height: 32px;
4519
+ height: var(--klun-control-h-sm, 32px);
4395
4520
  padding: 0 8px 0 10px;
4396
4521
  border: none;
4397
4522
  border-radius: var(--klun-radius-md);
@@ -4445,8 +4570,8 @@ body {
4445
4570
  display: inline-flex;
4446
4571
  align-items: center;
4447
4572
  justify-content: center;
4448
- min-width: 32px;
4449
- height: 32px;
4573
+ min-width: var(--klun-control-h-sm, 32px);
4574
+ height: var(--klun-control-h-sm, 32px);
4450
4575
  padding: 0 6px;
4451
4576
  border: none;
4452
4577
  border-radius: var(--klun-radius-md);
@@ -4683,7 +4808,7 @@ body {
4683
4808
  display: flex;
4684
4809
  align-items: center;
4685
4810
  gap: 6px;
4686
- height: 32px;
4811
+ height: var(--klun-control-h-sm, 32px);
4687
4812
  padding-left: var(--klun-tree-indent, 6px);
4688
4813
  padding-right: 8px;
4689
4814
  border-radius: var(--klun-radius-md);
@@ -6421,22 +6546,22 @@ body {
6421
6546
  transition: background var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease), box-shadow var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
6422
6547
  }
6423
6548
  .klun-compact-select--xsmall .klun-compact-select__trigger {
6424
- height: 28px;
6425
- padding: 0 8px;
6549
+ height: var(--klun-control-h-xs, 28px);
6550
+ padding: 0 var(--klun-control-px-2xs, 8px);
6426
6551
  gap: 4px;
6427
6552
  border-radius: var(--klun-radius-md);
6428
6553
  font: var(--klun-text-label-xs);
6429
6554
  }
6430
6555
  .klun-compact-select--small .klun-compact-select__trigger {
6431
- height: 32px;
6432
- padding: 0 10px;
6556
+ height: var(--klun-control-h-sm, 32px);
6557
+ padding: 0 var(--klun-control-px-xs, 10px);
6433
6558
  gap: 6px;
6434
6559
  border-radius: var(--klun-radius-md);
6435
6560
  font: var(--klun-text-label-sm);
6436
6561
  }
6437
6562
  .klun-compact-select--medium .klun-compact-select__trigger {
6438
- height: 36px;
6439
- padding: 0 12px;
6563
+ height: var(--klun-control-h-md, 36px);
6564
+ padding: 0 var(--klun-control-px-sm, 12px);
6440
6565
  gap: 6px;
6441
6566
  border-radius: var(--klun-radius-lg);
6442
6567
  font: var(--klun-text-label-sm);
@@ -6539,15 +6664,15 @@ body {
6539
6664
  cursor: pointer;
6540
6665
  }
6541
6666
  .klun-compact-select-for-input--small .klun-compact-select-for-input__trigger {
6542
- height: 36px;
6667
+ height: var(--klun-control-h-md, 36px);
6543
6668
  font: var(--klun-text-paragraph-sm);
6544
6669
  }
6545
6670
  .klun-compact-select-for-input--medium .klun-compact-select-for-input__trigger {
6546
- height: 40px;
6671
+ height: var(--klun-control-h-lg, 40px);
6547
6672
  font: var(--klun-text-paragraph-sm);
6548
6673
  }
6549
6674
  .klun-compact-select-for-input--large .klun-compact-select-for-input__trigger {
6550
- height: 48px;
6675
+ height: var(--klun-control-h-xl, 48px);
6551
6676
  font: var(--klun-text-paragraph-md);
6552
6677
  }
6553
6678
  .klun-compact-select-for-input--leading {
@@ -6623,17 +6748,17 @@ body {
6623
6748
  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
6624
6749
  }
6625
6750
  .klun-counter-input--small {
6626
- height: 32px;
6751
+ height: var(--klun-control-h-sm, 32px);
6627
6752
  border-radius: var(--klun-radius-md);
6628
6753
  font: var(--klun-text-label-sm);
6629
6754
  }
6630
6755
  .klun-counter-input--medium {
6631
- height: 36px;
6756
+ height: var(--klun-control-h-md, 36px);
6632
6757
  border-radius: var(--klun-radius-lg);
6633
6758
  font: var(--klun-text-label-md);
6634
6759
  }
6635
6760
  .klun-counter-input--large {
6636
- height: 40px;
6761
+ height: var(--klun-control-h-lg, 40px);
6637
6762
  border-radius: var(--klun-radius-lg);
6638
6763
  font: var(--klun-text-label-md);
6639
6764
  }
@@ -7240,21 +7365,27 @@ body {
7240
7365
  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
7241
7366
  transition: box-shadow var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
7242
7367
  }
7368
+ .klun-input--xsmall {
7369
+ height: var(--klun-control-h-sm, 32px);
7370
+ padding: 0 var(--klun-field-px-xs, 8px);
7371
+ border-radius: var(--klun-radius-md);
7372
+ font: var(--klun-text-paragraph-sm);
7373
+ }
7243
7374
  .klun-input--small {
7244
- height: 36px;
7245
- padding: 0 10px;
7375
+ height: var(--klun-control-h-md, 36px);
7376
+ padding: 0 var(--klun-field-px-sm, 10px);
7246
7377
  border-radius: var(--klun-radius-lg);
7247
7378
  font: var(--klun-text-paragraph-sm);
7248
7379
  }
7249
7380
  .klun-input--medium {
7250
- height: 40px;
7251
- padding: 0 12px;
7381
+ height: var(--klun-control-h-lg, 40px);
7382
+ padding: 0 var(--klun-field-px-md, 12px);
7252
7383
  border-radius: var(--klun-radius-lg);
7253
7384
  font: var(--klun-text-paragraph-sm);
7254
7385
  }
7255
7386
  .klun-input--large {
7256
- height: 48px;
7257
- padding: 0 14px;
7387
+ height: var(--klun-control-h-xl, 48px);
7388
+ padding: 0 var(--klun-field-px-lg, 14px);
7258
7389
  border-radius: var(--klun-radius-xl);
7259
7390
  font: var(--klun-text-paragraph-md);
7260
7391
  }
@@ -7711,21 +7842,27 @@ body {
7711
7842
  cursor: pointer;
7712
7843
  transition: box-shadow var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
7713
7844
  }
7845
+ .klun-select--xsmall .klun-select__trigger {
7846
+ height: var(--klun-control-h-sm, 32px);
7847
+ padding: 0 var(--klun-field-px-xs, 8px);
7848
+ border-radius: var(--klun-radius-md);
7849
+ font: var(--klun-text-paragraph-sm);
7850
+ }
7714
7851
  .klun-select--small .klun-select__trigger {
7715
- height: 36px;
7716
- padding: 0 10px;
7852
+ height: var(--klun-control-h-md, 36px);
7853
+ padding: 0 var(--klun-field-px-sm, 10px);
7717
7854
  border-radius: var(--klun-radius-lg);
7718
7855
  font: var(--klun-text-paragraph-sm);
7719
7856
  }
7720
7857
  .klun-select--medium .klun-select__trigger {
7721
- height: 40px;
7722
- padding: 0 12px;
7858
+ height: var(--klun-control-h-lg, 40px);
7859
+ padding: 0 var(--klun-field-px-md, 12px);
7723
7860
  border-radius: var(--klun-radius-lg);
7724
7861
  font: var(--klun-text-paragraph-sm);
7725
7862
  }
7726
7863
  .klun-select--large .klun-select__trigger {
7727
- height: 48px;
7728
- padding: 0 14px;
7864
+ height: var(--klun-control-h-xl, 48px);
7865
+ padding: 0 var(--klun-field-px-lg, 14px);
7729
7866
  border-radius: var(--klun-radius-xl);
7730
7867
  font: var(--klun-text-paragraph-md);
7731
7868
  }
@@ -7814,20 +7951,20 @@ body {
7814
7951
  transition: box-shadow var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
7815
7952
  }
7816
7953
  .klun-select-menu__trigger--small {
7817
- height: 36px;
7818
- padding: 0 10px;
7954
+ height: var(--klun-control-h-md, 36px);
7955
+ padding: 0 var(--klun-field-px-sm, 10px);
7819
7956
  border-radius: var(--klun-radius-lg);
7820
7957
  font: var(--klun-text-paragraph-sm);
7821
7958
  }
7822
7959
  .klun-select-menu__trigger--medium {
7823
- height: 40px;
7824
- padding: 0 12px;
7960
+ height: var(--klun-control-h-lg, 40px);
7961
+ padding: 0 var(--klun-field-px-md, 12px);
7825
7962
  border-radius: var(--klun-radius-lg);
7826
7963
  font: var(--klun-text-paragraph-sm);
7827
7964
  }
7828
7965
  .klun-select-menu__trigger--large {
7829
- height: 48px;
7830
- padding: 0 14px;
7966
+ height: var(--klun-control-h-xl, 48px);
7967
+ padding: 0 var(--klun-field-px-lg, 14px);
7831
7968
  border-radius: var(--klun-radius-xl);
7832
7969
  font: var(--klun-text-paragraph-md);
7833
7970
  }
@@ -7908,7 +8045,7 @@ body {
7908
8045
  align-items: center;
7909
8046
  gap: 10px;
7910
8047
  width: 100%;
7911
- min-height: 36px;
8048
+ min-height: var(--klun-control-h-md, 36px);
7912
8049
  padding: 7px 10px;
7913
8050
  border: none;
7914
8051
  border-radius: var(--klun-radius-md);
@@ -8064,18 +8201,23 @@ body {
8064
8201
  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
8065
8202
  transition: box-shadow var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
8066
8203
  }
8204
+ .klun-textarea--xsmall {
8205
+ --_pad: var(--klun-field-pad-xs, 6px 8px);
8206
+ --_radius: var(--klun-radius-md);
8207
+ --_font: var(--klun-text-paragraph-sm);
8208
+ }
8067
8209
  .klun-textarea--small {
8068
- --_pad: 8px 10px;
8210
+ --_pad: var(--klun-field-pad-sm, 8px 10px);
8069
8211
  --_radius: var(--klun-radius-lg);
8070
8212
  --_font: var(--klun-text-paragraph-sm);
8071
8213
  }
8072
8214
  .klun-textarea--medium {
8073
- --_pad: 10px 12px;
8215
+ --_pad: var(--klun-field-pad-md, 10px 12px);
8074
8216
  --_radius: var(--klun-radius-xl);
8075
8217
  --_font: var(--klun-text-paragraph-sm);
8076
8218
  }
8077
8219
  .klun-textarea--large {
8078
- --_pad: 12px 14px;
8220
+ --_pad: var(--klun-field-pad-lg, 12px 14px);
8079
8221
  --_radius: var(--klun-radius-xl);
8080
8222
  --_font: var(--klun-text-paragraph-md);
8081
8223
  }
@@ -8114,8 +8256,8 @@ body {
8114
8256
  display: inline-flex;
8115
8257
  align-items: center;
8116
8258
  gap: 4px;
8117
- height: 40px;
8118
- padding: 0 12px;
8259
+ height: var(--klun-control-h-lg, 40px);
8260
+ padding: 0 var(--klun-control-px-sm, 12px);
8119
8261
  border-radius: var(--klun-radius-lg);
8120
8262
  background: var(--klun-bg-white-0);
8121
8263
  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
@@ -8728,11 +8870,11 @@ body {
8728
8870
  display: none;
8729
8871
  }
8730
8872
  .klun-horizontal-filter--small .klun-horizontal-filter__item {
8731
- height: 30px;
8873
+ height: var(--klun-control-h-xs, 28px);
8732
8874
  font: var(--klun-text-label-xs);
8733
8875
  }
8734
8876
  .klun-horizontal-filter--medium .klun-horizontal-filter__item {
8735
- height: 36px;
8877
+ height: var(--klun-control-h-md, 36px);
8736
8878
  font: var(--klun-text-label-sm);
8737
8879
  }
8738
8880
  .klun-horizontal-filter__item {
@@ -8805,8 +8947,8 @@ body {
8805
8947
  align-items: center;
8806
8948
  gap: 10px;
8807
8949
  width: 100%;
8808
- height: 40px;
8809
- padding: 0 12px 0 var(--klun-menu-indent, 12px);
8950
+ height: var(--klun-control-h-lg, 40px);
8951
+ padding: 0 var(--klun-control-px-sm, 12px) 0 var(--klun-menu-indent, 12px);
8810
8952
  justify-content: flex-start;
8811
8953
  border: none;
8812
8954
  border-radius: var(--klun-radius-lg);
@@ -8999,9 +9141,9 @@ body {
8999
9141
  display: inline-flex;
9000
9142
  align-items: center;
9001
9143
  justify-content: center;
9002
- min-width: 36px;
9003
- height: 36px;
9004
- padding: 0 8px;
9144
+ min-width: var(--klun-control-h-md, 36px);
9145
+ height: var(--klun-control-h-md, 36px);
9146
+ padding: 0 var(--klun-control-px-2xs, 8px);
9005
9147
  border: none;
9006
9148
  border-radius: var(--klun-radius-lg);
9007
9149
  cursor: pointer;
@@ -9040,8 +9182,8 @@ body {
9040
9182
  justify-content: center;
9041
9183
  gap: 6px;
9042
9184
  flex: 1;
9043
- height: 32px;
9044
- padding: 0 14px;
9185
+ height: var(--klun-control-h-sm, 32px);
9186
+ padding: 0 var(--klun-control-px-md, 14px);
9045
9187
  border: none;
9046
9188
  border-radius: var(--klun-radius-md);
9047
9189
  cursor: pointer;
@@ -9146,7 +9288,7 @@ body {
9146
9288
  border-bottom: 1px solid var(--klun-stroke-soft-200);
9147
9289
  }
9148
9290
  .klun-tabs--underline .klun-tabs__tab {
9149
- height: 40px;
9291
+ height: var(--klun-control-h-lg, 40px);
9150
9292
  padding: 0 2px;
9151
9293
  }
9152
9294
  .klun-tabs--underline .klun-tabs__tab[aria-selected=true] {
@@ -9168,8 +9310,8 @@ body {
9168
9310
  background: var(--klun-bg-weak-50);
9169
9311
  }
9170
9312
  .klun-tabs--pill .klun-tabs__tab {
9171
- height: 32px;
9172
- padding: 0 12px;
9313
+ height: var(--klun-control-h-sm, 32px);
9314
+ padding: 0 var(--klun-control-px-sm, 12px);
9173
9315
  border-radius: var(--klun-radius-md);
9174
9316
  }
9175
9317
  .klun-tabs--pill .klun-tabs__tab[aria-selected=true] {
@@ -9385,7 +9527,7 @@ body {
9385
9527
  align-items: center;
9386
9528
  gap: 12px;
9387
9529
  width: 100%;
9388
- height: 40px;
9530
+ height: var(--klun-control-h-lg, 40px);
9389
9531
  padding: 0 10px;
9390
9532
  border: none;
9391
9533
  border-radius: var(--klun-radius-md);
@@ -9807,8 +9949,8 @@ body {
9807
9949
  align-items: center;
9808
9950
  gap: 10px;
9809
9951
  width: 100%;
9810
- height: 36px;
9811
- padding: 0 10px;
9952
+ height: var(--klun-control-h-md, 36px);
9953
+ padding: 0 var(--klun-control-px-xs, 10px);
9812
9954
  border: none;
9813
9955
  border-radius: var(--klun-radius-md);
9814
9956
  cursor: pointer;
@@ -9897,8 +10039,8 @@ body {
9897
10039
  display: inline-flex;
9898
10040
  align-items: center;
9899
10041
  justify-content: center;
9900
- width: 32px;
9901
- height: 32px;
10042
+ width: var(--klun-control-h-sm, 32px);
10043
+ height: var(--klun-control-h-sm, 32px);
9902
10044
  border: none;
9903
10045
  border-radius: 8px;
9904
10046
  background: transparent;
@@ -10155,7 +10297,7 @@ body {
10155
10297
  margin-top: 12px;
10156
10298
  }
10157
10299
  .klun-popconfirm__cancel {
10158
- height: 32px;
10300
+ height: var(--klun-control-h-sm, 32px);
10159
10301
  padding: 0 12px;
10160
10302
  border: none;
10161
10303
  border-radius: var(--klun-radius-lg);
@@ -10173,7 +10315,7 @@ body {
10173
10315
  display: inline-flex;
10174
10316
  align-items: center;
10175
10317
  gap: 6px;
10176
- height: 32px;
10318
+ height: var(--klun-control-h-sm, 32px);
10177
10319
  padding: 0 14px;
10178
10320
  border: none;
10179
10321
  border-radius: var(--klun-radius-lg);