@planningcenter/tapestry 3.7.0-rc.0 → 3.7.0

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.
@@ -766,201 +766,6 @@
766
766
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
767
767
  }
768
768
 
769
- .tds-checkbox{
770
- --tds-checkbox-font-size:var(--t-font-size-md);
771
- --tds-checkbox-cursor:pointer;
772
- --tds-checkbox-line-height:1.4;
773
- --tds-checkbox-transition-property:background-color, border-color;
774
-
775
- --tds-checkbox-input-size:var(--t-element-size-md);
776
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
777
- --tds-checkbox-input-border-color:var(--t-form-border-color);
778
- --tds-checkbox-input-background-color:var(--t-form-background-color);
779
-
780
- --tds-checkbox-input-icon:none;
781
- --tds-checkbox-input-icon-visibility:hidden;
782
- --tds-checkbox-input-icon-opacity:0;
783
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
784
-
785
- --tds-checkbox-label-color:var(--t-form-color);
786
-
787
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
788
- --tds-checkbox-description-line-height:1.35;
789
- --tds-checkbox-description-color:var(--t-text-color-secondary);
790
- --tds-checkbox-description-invalid-icon-display:none;
791
-
792
- position:relative;
793
- display:inline-grid;
794
- grid-template-columns:auto;
795
- grid-auto-columns:1fr;
796
- gap:var(--t-spacing-fourth) 0;
797
- line-height:var(--tds-checkbox-line-height);
798
- -webkit-user-select:none;
799
- -moz-user-select:none;
800
- user-select:none;
801
- }
802
-
803
- .tds-checkbox label{
804
- grid-area:1 / 2;
805
- padding-inline-start:var(--t-spacing-1);
806
- font-size:var(--tds-checkbox-font-size);
807
- font-weight:var(--t-font-weight-normal);
808
- color:var(--tds-checkbox-label-color);
809
- cursor:var(--tds-checkbox-cursor);
810
- }
811
-
812
- .tds-checkbox tds-indeterminate{
813
- display:flex;
814
- }
815
-
816
- .tds-checkbox input[type="checkbox"]{
817
- position:relative;
818
- width:1em;
819
- height:1em;
820
- margin:calc((1lh - 1em) / 2) 0 0;
821
- font-size:var(--tds-checkbox-font-size);
822
- line-height:inherit;
823
- -webkit-appearance:none;
824
- -moz-appearance:none;
825
- appearance:none;
826
- cursor:var(--tds-checkbox-cursor);
827
- background-color:var(--tds-checkbox-input-background-color);
828
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
829
- border-radius:var(--tds-checkbox-input-border-radius);
830
- transition-timing-function:var(--t-ease-in-out);
831
- transition-duration:var(--t-duration-200);
832
- transition-property:var(--tds-checkbox-transition-property);
833
- }
834
-
835
- :is(.tds-checkbox input[type="checkbox"])::before{
836
- position:absolute;
837
- top:50%;
838
- left:50%;
839
- visibility:var(--tds-checkbox-input-icon-visibility);
840
- width:100%;
841
- height:100%;
842
- content:"";
843
- background-color:var(--tds-checkbox-input-icon-fill);
844
- border-radius:var(--tds-checkbox-input-border-radius);
845
- opacity:var(--tds-checkbox-input-icon-opacity);
846
- -webkit-mask-image:var(--tds-checkbox-input-icon);
847
- mask-image:var(--tds-checkbox-input-icon);
848
- -webkit-mask-repeat:no-repeat;
849
- mask-repeat:no-repeat;
850
- -webkit-mask-size:contain;
851
- mask-size:contain;
852
- transform:translate(-50%, -50%);
853
- }
854
-
855
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
856
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
857
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
858
- }
859
-
860
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
861
- outline:var(--t-focus-ring-outline);
862
- outline-offset:var(--t-focus-ring-offset);
863
- }
864
-
865
- :is(.tds-checkbox input[type="checkbox"]):disabled{
866
- pointer-events:none;
867
- }
868
-
869
- @media (prefers-reduced-motion: reduce){
870
-
871
- .tds-checkbox input[type="checkbox"]{
872
- --tds-checkbox-transition-property:none;
873
- }
874
- }
875
-
876
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
877
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
878
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
879
- --tds-checkbox-input-icon-visibility:visible;
880
- --tds-checkbox-input-icon-opacity:1;
881
- }
882
-
883
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
884
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
885
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
886
- }
887
-
888
- .tds-checkbox:has(input:checked){
889
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
890
- }
891
-
892
- .tds-checkbox:has(input:indeterminate){
893
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
894
- }
895
-
896
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
897
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
898
- --tds-checkbox-description-color:var(--t-text-color-status-error);
899
- --tds-checkbox-description-invalid-icon-display:inline-block;
900
- }
901
-
902
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
903
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
904
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
905
- }
906
-
907
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
908
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
909
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
910
- }
911
-
912
- :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
913
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
914
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
915
- }
916
-
917
- .tds-checkbox:has(input:required) label::after{
918
- margin-left:.25ch;
919
- color:var(--t-text-color-status-error);
920
- content:"*";
921
- }
922
-
923
- .tds-checkbox:has(input:disabled){
924
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
925
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
926
-
927
- --tds-checkbox-label-color:var(--t-form-color-disabled);
928
- --tds-checkbox-description-color:var(--t-form-color-disabled);
929
- --tds-checkbox-cursor:not-allowed;
930
- }
931
-
932
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
933
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
934
- }
935
-
936
- .tds-checkbox-description{
937
- display:flex;
938
- grid-area:2 / 2;
939
- gap:var(--t-spacing-half);
940
- align-items:flex-start;
941
- padding-inline-start:var(--t-spacing-1);
942
- margin:0;
943
- font-size:var(--tds-checkbox-description-font-size);
944
- line-height:var(--tds-checkbox-description-line-height);
945
- color:var(--tds-checkbox-description-color);
946
- cursor:text;
947
- }
948
-
949
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
950
- display:var(--tds-checkbox-description-invalid-icon-display);
951
- flex-shrink:0;
952
- margin-top:calc(.5lh - .5em);
953
- line-height:var(--tds-checkbox-description-line-height);
954
- }
955
-
956
- .tds-checkbox--sm{
957
- --tds-checkbox-line-height:1.35;
958
- --tds-checkbox-input-size:var(--t-element-size-sm);
959
- --tds-checkbox-font-size:var(--t-font-size-sm);
960
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
961
- --tds-checkbox-description-line-height:1.3;
962
- }
963
-
964
769
  @layer t-critical{
965
770
  tds-page-header:not(.hydrated){
966
771
  display:none;
@@ -1239,111 +1044,37 @@
1239
1044
  }
1240
1045
  }
1241
1046
 
1242
- .tds-checkbox-group{
1243
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1244
- --tds-checkbox-group-line-height:1.4;
1245
- --tds-checkbox-group-gap:var(--t-spacing-1);
1246
-
1247
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1248
- --tds-checkbox-group-description-line-height:1.35;
1249
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1250
- --tds-checkbox-group-description-invalid-icon-display:none;
1251
- display:flex;
1252
- flex-direction:column;
1253
- gap:0;
1254
- padding:0;
1255
- margin:0;
1047
+ .tds-date-picker{
1048
+ --tds-date-picker-button-offset:4px;
1049
+ }
1256
1050
 
1257
- font-size:var(--tds-checkbox-group-font-size);
1258
- line-height:var(--tds-checkbox-group-line-height);
1259
- border:0;
1051
+ .tds-date-picker--lg{
1052
+ --tds-date-picker-button-offset:5px;
1260
1053
  }
1261
1054
 
1262
- .tds-checkbox-group legend{
1263
- float:left;
1264
- padding:0;
1265
- margin:0;
1266
- }
1055
+ .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-button[data-focused]){
1056
+ outline-color:transparent;
1057
+ outline-offset:0;
1058
+ border-color:var(--tds-field-border-color);
1059
+ }
1267
1060
 
1268
- .tds-checkbox-group[aria-invalid="true"]{
1269
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1270
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1271
- }
1061
+ .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]) .tds-date-picker-button{
1062
+ display:none;
1063
+ }
1272
1064
 
1273
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1274
- margin-left:.25ch;
1275
- color:var(--t-text-color-status-error);
1276
- content:"*";
1277
- }
1065
+ .tds-date-picker-input{
1066
+ flex:1;
1067
+ padding-block:var(--tds-field-padding-block);
1068
+ padding-inline:var(--tds-field-padding-inline);
1069
+ overflow:auto clip;
1070
+ font-variant-numeric:tabular-nums;
1071
+ text-wrap:nowrap;
1072
+ scrollbar-width:none;
1073
+ }
1278
1074
 
1279
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1280
- content:none;
1281
- }
1282
-
1283
- .tds-checkbox-group-fields{
1284
- display:flex;
1285
- flex-direction:column;
1286
- gap:var(--tds-checkbox-group-gap);
1287
- align-items:flex-start;
1288
- margin-top:var(--t-spacing-1);
1289
- }
1290
-
1291
- .tds-checkbox-group-description{
1292
- display:flex;
1293
- gap:var(--t-spacing-half);
1294
- align-items:flex-start;
1295
- margin:var(--t-spacing-fourth) 0 0;
1296
- font-size:var(--tds-checkbox-group-description-font-size);
1297
- line-height:var(--tds-checkbox-group-description-line-height);
1298
- color:var(--tds-checkbox-group-description-color);
1299
- cursor:text;
1300
- }
1301
-
1302
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1303
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1304
- flex-shrink:0;
1305
- margin-top:calc(.5lh - .5em);
1306
- line-height:var(--tds-checkbox-group-description-line-height);
1307
- }
1308
-
1309
- .tds-checkbox-group--sm{
1310
- --tds-checkbox-group-line-height:1.35;
1311
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1312
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1313
- --tds-checkbox-group-description-line-height:1.3;
1314
- }
1315
-
1316
- .tds-date-picker{
1317
- --tds-date-picker-button-offset:4px;
1318
- }
1319
-
1320
- .tds-date-picker--lg{
1321
- --tds-date-picker-button-offset:5px;
1322
- }
1323
-
1324
- .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-button[data-focused]){
1325
- outline-color:transparent;
1326
- outline-offset:0;
1327
- border-color:var(--tds-field-border-color);
1328
- }
1329
-
1330
- .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]) .tds-date-picker-button{
1331
- display:none;
1332
- }
1333
-
1334
- .tds-date-picker-input{
1335
- flex:1;
1336
- padding-block:var(--tds-field-padding-block);
1337
- padding-inline:var(--tds-field-padding-inline);
1338
- overflow:auto clip;
1339
- font-variant-numeric:tabular-nums;
1340
- text-wrap:nowrap;
1341
- scrollbar-width:none;
1342
- }
1343
-
1344
- .tds-date-picker-input:has( + .tds-date-picker-button){
1345
- padding-inline-end:0;
1346
- }
1075
+ .tds-date-picker-input:has( + .tds-date-picker-button){
1076
+ padding-inline-end:0;
1077
+ }
1347
1078
 
1348
1079
  .tds-date-picker-button{
1349
1080
  flex-shrink:0;
@@ -1669,11 +1400,148 @@
1669
1400
  --tds-date-picker-popover-font-size:var(--t-font-size-lg);
1670
1401
  }
1671
1402
 
1672
- .tds-dropdown-popover{
1673
- min-inline-size:10rem;
1674
- max-inline-size:24rem;
1403
+ .tds-checkbox-group{
1404
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1405
+ --tds-checkbox-group-line-height:1.4;
1406
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1407
+
1408
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1409
+ --tds-checkbox-group-description-line-height:1.35;
1410
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1411
+ --tds-checkbox-group-description-invalid-icon-display:none;
1412
+ display:flex;
1413
+ flex-direction:column;
1414
+ gap:0;
1415
+ padding:0;
1416
+ margin:0;
1417
+
1418
+ font-size:var(--tds-checkbox-group-font-size);
1419
+ line-height:var(--tds-checkbox-group-line-height);
1420
+ border:0;
1421
+ }
1422
+
1423
+ .tds-checkbox-group legend{
1424
+ float:left;
1425
+ padding:0;
1426
+ margin:0;
1427
+ }
1428
+
1429
+ .tds-checkbox-group[aria-invalid="true"]{
1430
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1431
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1432
+ }
1433
+
1434
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1435
+ margin-left:.25ch;
1436
+ color:var(--t-text-color-status-error);
1437
+ content:"*";
1438
+ }
1439
+
1440
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1441
+ content:none;
1442
+ }
1443
+
1444
+ .tds-checkbox-group-fields{
1445
+ display:flex;
1446
+ flex-direction:column;
1447
+ gap:var(--tds-checkbox-group-gap);
1448
+ align-items:flex-start;
1449
+ margin-top:var(--t-spacing-1);
1450
+ }
1451
+
1452
+ .tds-checkbox-group-description{
1453
+ display:flex;
1454
+ gap:var(--t-spacing-half);
1455
+ align-items:flex-start;
1456
+ margin:var(--t-spacing-fourth) 0 0;
1457
+ font-size:var(--tds-checkbox-group-description-font-size);
1458
+ line-height:var(--tds-checkbox-group-description-line-height);
1459
+ color:var(--tds-checkbox-group-description-color);
1460
+ cursor:text;
1461
+ }
1462
+
1463
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1464
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1465
+ flex-shrink:0;
1466
+ margin-top:calc(.5lh - .5em);
1467
+ line-height:var(--tds-checkbox-group-description-line-height);
1468
+ }
1469
+
1470
+ .tds-checkbox-group--sm{
1471
+ --tds-checkbox-group-line-height:1.35;
1472
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1473
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1474
+ --tds-checkbox-group-description-line-height:1.3;
1475
+ }
1476
+
1477
+ .tds-combo-box{
1478
+ --tds-combo-box-button-offset:4px;
1479
+ }
1480
+
1481
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
1482
+ transform:rotate(.5turn);
1483
+ }
1484
+
1485
+ .tds-combo-box--lg{
1486
+ --tds-combo-box-button-offset:5px;
1487
+ }
1488
+
1489
+ .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
1490
+ display:none;
1491
+ }
1492
+
1493
+ .tds-combo-box-input{
1494
+ display:flex;
1495
+ flex:1;
1496
+ align-items:center;
1497
+ padding-block:var(--tds-field-padding-block);
1498
+ padding-inline:var(--tds-field-padding-inline);
1499
+ font-family:inherit;
1500
+ font-size:inherit;
1501
+ color:inherit;
1502
+ outline:0;
1503
+ background:transparent;
1504
+ border:0;
1505
+ }
1506
+
1507
+ .tds-combo-box-input:has( + .tds-combo-box-button){
1508
+ padding-inline-end:0;
1509
+ }
1510
+
1511
+ .tds-combo-box-input::-moz-placeholder{
1512
+ color:var(--tds-field-placeholder-color);
1513
+ -moz-user-select:none;
1514
+ user-select:none;
1515
+ }
1516
+
1517
+ .tds-combo-box-input::placeholder{
1518
+ color:var(--tds-field-placeholder-color);
1519
+ -webkit-user-select:none;
1520
+ -moz-user-select:none;
1521
+ user-select:none;
1522
+ }
1523
+
1524
+ .tds-combo-box-button{
1525
+ flex-shrink:0;
1526
+ align-self:center;
1527
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
1528
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
1529
+ padding:0;
1530
+ margin-inline-end:var(--tds-combo-box-button-offset);
1531
+ }
1532
+
1533
+ .tds-combo-box-button > svg{
1534
+ inline-size:var(--tds-field-font-size);
1535
+ block-size:var(--tds-field-font-size);
1536
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
1537
+ }
1538
+
1539
+ .tds-combo-box-popover{
1540
+ width:var(--trigger-width);
1541
+ max-block-size:inherit;
1675
1542
  padding:var(--t-spacing-1);
1676
1543
  overflow:auto;
1544
+ scroll-behavior:smooth;
1677
1545
  overscroll-behavior:none;
1678
1546
  -webkit-user-select:none;
1679
1547
  -moz-user-select:none;
@@ -1687,49 +1555,168 @@
1687
1555
  border-radius:var(--t-border-radius);
1688
1556
  box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1689
1557
  }
1690
- .tds-dropdown-popover[data-entering]{
1691
- animation:tds-dropdown-popover var(--t-duration-300) var(--t-ease-out);
1558
+
1559
+ .tds-combo-box-popover[data-entering]{
1560
+ animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
1692
1561
  }
1693
- .tds-dropdown-popover[data-exiting]{
1694
- animation:tds-dropdown-popover var(--t-duration-200) var(--t-ease-in) reverse;
1562
+
1563
+ .tds-combo-box-popover[data-exiting]{
1564
+ animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
1695
1565
  }
1696
- .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
1566
+
1567
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1697
1568
  will-change:opacity, transform;
1698
1569
  }
1699
- @keyframes tds-dropdown-popover{
1570
+
1571
+ @keyframes tds-combo-box-popover{
1700
1572
  from{
1701
1573
  opacity:0;
1702
1574
  transform:translateY(-8px);
1703
1575
  }
1704
1576
  }
1577
+
1705
1578
  @media (prefers-reduced-motion: reduce){
1706
- .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
1579
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1707
1580
  animation:none;
1708
1581
  }
1582
+
1583
+ .tds-combo-box-button > svg{
1584
+ transition:none;
1585
+ }
1709
1586
  }
1710
- .tds-dropdown-popover [role="menu"]{
1711
- outline:0;
1587
+
1588
+ .tds-combo-box-list{
1589
+ padding:0;
1590
+ margin:0;
1712
1591
  }
1713
- .tds-dropdown-item{
1714
- --tds-dropdown-item-color:var(--t-text-color);
1715
1592
 
1716
- display:flex;
1717
- gap:var(--t-spacing-1);
1718
- align-items:center;
1593
+ .tds-combo-box-list-item{
1594
+ display:block;
1719
1595
  padding-block:var(--t-spacing-1);
1720
- padding-inline:var(--t-spacing-2);
1596
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1597
+ overflow:hidden;
1598
+ text-overflow:ellipsis;
1721
1599
  font-size:1rem;
1722
- color:var(--tds-dropdown-item-color);
1723
- text-decoration:none;
1600
+ color:var(--t-text-color);
1601
+ white-space:nowrap;
1724
1602
  cursor:default;
1725
- outline:0;
1726
1603
  border-radius:var(--t-border-radius);
1727
1604
  }
1728
- .tds-dropdown-item[data-hovered]:not([data-disabled]),.tds-dropdown-item[data-focus-visible]{
1605
+
1606
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
1729
1607
  background:var(--t-fill-color-neutral-070);
1730
1608
  }
1731
- .tds-dropdown-item[data-pressed]:not([data-disabled]){
1732
- background:var(--t-fill-color-neutral-060);
1609
+
1610
+ .tds-combo-box-list-item[data-selected]{
1611
+ background:var(--t-fill-color-button-interaction-ghost-active);
1612
+ }
1613
+
1614
+ .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
1615
+ background:var(--t-fill-color-neutral-060);
1616
+ }
1617
+
1618
+ .tds-combo-box-list-item[data-disabled]{
1619
+ color:var(--t-form-color-disabled);
1620
+ cursor:not-allowed;
1621
+ }
1622
+
1623
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
1624
+ background:transparent;
1625
+ }
1626
+
1627
+ .tds-combo-box-empty-state{
1628
+ position:relative;
1629
+ min-block-size:var(--t-spacing-3);
1630
+ padding-block:var(--t-spacing-1);
1631
+ padding-inline:var(--t-spacing-2);
1632
+ font-size:var(--t-font-size-md);
1633
+ color:var(--t-text-color-secondary);
1634
+ }
1635
+
1636
+ .tds-combo-box-load-more{
1637
+ position:relative;
1638
+ min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
1639
+ }
1640
+
1641
+ .tds-combo-box-empty-state,
1642
+ .tds-combo-box-load-more{
1643
+ --tds-loading-spinner-visibility:visible;
1644
+ --tds-loading-spinner-animation-play-state:running;
1645
+ }
1646
+
1647
+ .tds-combo-box-list-section:not(:first-child){
1648
+ margin-block-start:var(--t-spacing-half);
1649
+ }
1650
+
1651
+ .tds-combo-box-section-header{
1652
+ padding-block:var(--t-spacing-1);
1653
+ padding-inline:var(--t-spacing-1);
1654
+ font-size:var(--t-font-size-sm);
1655
+ font-weight:var(--t-font-weight-semibold);
1656
+ color:var(--t-text-color-secondary);
1657
+ }
1658
+
1659
+ .tds-dropdown-popover{
1660
+ min-inline-size:10rem;
1661
+ max-inline-size:24rem;
1662
+ padding:var(--t-spacing-1);
1663
+ overflow:auto;
1664
+ overscroll-behavior:none;
1665
+ -webkit-user-select:none;
1666
+ -moz-user-select:none;
1667
+ user-select:none;
1668
+ outline:0;
1669
+ scrollbar-color:#0004 var(--t-surface-color-card);
1670
+ scrollbar-width:thin;
1671
+ background:var(--t-surface-color-card);
1672
+ background-clip:padding-box;
1673
+ border:1px solid var(--t-border-color);
1674
+ border-radius:var(--t-border-radius);
1675
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1676
+ }
1677
+ .tds-dropdown-popover[data-entering]{
1678
+ animation:tds-dropdown-popover var(--t-duration-300) var(--t-ease-out);
1679
+ }
1680
+ .tds-dropdown-popover[data-exiting]{
1681
+ animation:tds-dropdown-popover var(--t-duration-200) var(--t-ease-in) reverse;
1682
+ }
1683
+ .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
1684
+ will-change:opacity, transform;
1685
+ }
1686
+ @keyframes tds-dropdown-popover{
1687
+ from{
1688
+ opacity:0;
1689
+ transform:translateY(-8px);
1690
+ }
1691
+ }
1692
+ @media (prefers-reduced-motion: reduce){
1693
+ .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
1694
+ animation:none;
1695
+ }
1696
+ }
1697
+ .tds-dropdown-popover [role="menu"]{
1698
+ outline:0;
1699
+ }
1700
+ .tds-dropdown-item{
1701
+ --tds-dropdown-item-color:var(--t-text-color);
1702
+
1703
+ display:flex;
1704
+ gap:var(--t-spacing-1);
1705
+ align-items:center;
1706
+ padding-block:var(--t-spacing-1);
1707
+ padding-inline:var(--t-spacing-2);
1708
+ font-size:1rem;
1709
+ color:var(--tds-dropdown-item-color);
1710
+ text-decoration:none;
1711
+ cursor:default;
1712
+ outline:0;
1713
+ border-radius:var(--t-border-radius);
1714
+ }
1715
+ .tds-dropdown-item[data-hovered]:not([data-disabled]),.tds-dropdown-item[data-focus-visible]{
1716
+ background:var(--t-fill-color-neutral-070);
1717
+ }
1718
+ .tds-dropdown-item[data-pressed]:not([data-disabled]){
1719
+ background:var(--t-fill-color-neutral-060);
1733
1720
  }
1734
1721
  .tds-dropdown-item[data-disabled]{
1735
1722
  --tds-dropdown-item-color:var(--t-form-color-disabled);
@@ -1794,6 +1781,225 @@ a.tds-dropdown-item:is(:hover, :active){
1794
1781
  border-top:1px solid var(--t-border-color);
1795
1782
  }
1796
1783
 
1784
+ .tds-checkbox{
1785
+ --tds-checkbox-font-size:var(--t-font-size-md);
1786
+ --tds-checkbox-cursor:pointer;
1787
+ --tds-checkbox-line-height:1.4;
1788
+ --tds-checkbox-transition-property:background-color, border-color;
1789
+
1790
+ --tds-checkbox-input-size:var(--t-element-size-md);
1791
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1792
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
1793
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
1794
+
1795
+ --tds-checkbox-input-icon:none;
1796
+ --tds-checkbox-input-icon-visibility:hidden;
1797
+ --tds-checkbox-input-icon-opacity:0;
1798
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1799
+
1800
+ --tds-checkbox-label-color:var(--t-form-color);
1801
+
1802
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
1803
+ --tds-checkbox-description-line-height:1.35;
1804
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
1805
+ --tds-checkbox-description-invalid-icon-display:none;
1806
+
1807
+ position:relative;
1808
+ display:inline-grid;
1809
+ grid-template-columns:auto;
1810
+ grid-auto-columns:1fr;
1811
+ gap:var(--t-spacing-fourth) 0;
1812
+ line-height:var(--tds-checkbox-line-height);
1813
+ -webkit-user-select:none;
1814
+ -moz-user-select:none;
1815
+ user-select:none;
1816
+ }
1817
+
1818
+ .tds-checkbox label{
1819
+ grid-area:1 / 2;
1820
+ padding-inline-start:var(--t-spacing-1);
1821
+ font-size:var(--tds-checkbox-font-size);
1822
+ font-weight:var(--t-font-weight-normal);
1823
+ color:var(--tds-checkbox-label-color);
1824
+ cursor:var(--tds-checkbox-cursor);
1825
+ }
1826
+
1827
+ .tds-checkbox tds-indeterminate{
1828
+ display:flex;
1829
+ }
1830
+
1831
+ .tds-checkbox input[type="checkbox"]{
1832
+ position:relative;
1833
+ width:1em;
1834
+ height:1em;
1835
+ margin:calc((1lh - 1em) / 2) 0 0;
1836
+ font-size:var(--tds-checkbox-font-size);
1837
+ line-height:inherit;
1838
+ -webkit-appearance:none;
1839
+ -moz-appearance:none;
1840
+ appearance:none;
1841
+ cursor:var(--tds-checkbox-cursor);
1842
+ background-color:var(--tds-checkbox-input-background-color);
1843
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1844
+ border-radius:var(--tds-checkbox-input-border-radius);
1845
+ transition-timing-function:var(--t-ease-in-out);
1846
+ transition-duration:var(--t-duration-200);
1847
+ transition-property:var(--tds-checkbox-transition-property);
1848
+ }
1849
+
1850
+ :is(.tds-checkbox input[type="checkbox"])::before{
1851
+ position:absolute;
1852
+ top:50%;
1853
+ left:50%;
1854
+ visibility:var(--tds-checkbox-input-icon-visibility);
1855
+ width:100%;
1856
+ height:100%;
1857
+ content:"";
1858
+ background-color:var(--tds-checkbox-input-icon-fill);
1859
+ border-radius:var(--tds-checkbox-input-border-radius);
1860
+ opacity:var(--tds-checkbox-input-icon-opacity);
1861
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
1862
+ mask-image:var(--tds-checkbox-input-icon);
1863
+ -webkit-mask-repeat:no-repeat;
1864
+ mask-repeat:no-repeat;
1865
+ -webkit-mask-size:contain;
1866
+ mask-size:contain;
1867
+ transform:translate(-50%, -50%);
1868
+ }
1869
+
1870
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1871
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1872
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1873
+ }
1874
+
1875
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1876
+ outline:var(--t-focus-ring-outline);
1877
+ outline-offset:var(--t-focus-ring-offset);
1878
+ }
1879
+
1880
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
1881
+ pointer-events:none;
1882
+ }
1883
+
1884
+ @media (prefers-reduced-motion: reduce){
1885
+
1886
+ .tds-checkbox input[type="checkbox"]{
1887
+ --tds-checkbox-transition-property:none;
1888
+ }
1889
+ }
1890
+
1891
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1892
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
1893
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1894
+ --tds-checkbox-input-icon-visibility:visible;
1895
+ --tds-checkbox-input-icon-opacity:1;
1896
+ }
1897
+
1898
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1899
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1900
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1901
+ }
1902
+
1903
+ .tds-checkbox:has(input:checked){
1904
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1905
+ }
1906
+
1907
+ .tds-checkbox:has(input:indeterminate){
1908
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1909
+ }
1910
+
1911
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1912
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1913
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
1914
+ --tds-checkbox-description-invalid-icon-display:inline-block;
1915
+ }
1916
+
1917
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1918
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1919
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1920
+ }
1921
+
1922
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
1923
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1924
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1925
+ }
1926
+
1927
+ :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
1928
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1929
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1930
+ }
1931
+
1932
+ .tds-checkbox:has(input:required) label::after{
1933
+ margin-left:.25ch;
1934
+ color:var(--t-text-color-status-error);
1935
+ content:"*";
1936
+ }
1937
+
1938
+ .tds-checkbox:has(input:disabled){
1939
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1940
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1941
+
1942
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
1943
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
1944
+ --tds-checkbox-cursor:not-allowed;
1945
+ }
1946
+
1947
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1948
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1949
+ }
1950
+
1951
+ .tds-checkbox-description{
1952
+ display:flex;
1953
+ grid-area:2 / 2;
1954
+ gap:var(--t-spacing-half);
1955
+ align-items:flex-start;
1956
+ padding-inline-start:var(--t-spacing-1);
1957
+ margin:0;
1958
+ font-size:var(--tds-checkbox-description-font-size);
1959
+ line-height:var(--tds-checkbox-description-line-height);
1960
+ color:var(--tds-checkbox-description-color);
1961
+ cursor:text;
1962
+ }
1963
+
1964
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1965
+ display:var(--tds-checkbox-description-invalid-icon-display);
1966
+ flex-shrink:0;
1967
+ margin-top:calc(.5lh - .5em);
1968
+ line-height:var(--tds-checkbox-description-line-height);
1969
+ }
1970
+
1971
+ .tds-checkbox--sm{
1972
+ --tds-checkbox-line-height:1.35;
1973
+ --tds-checkbox-input-size:var(--t-element-size-sm);
1974
+ --tds-checkbox-font-size:var(--t-font-size-sm);
1975
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
1976
+ --tds-checkbox-description-line-height:1.3;
1977
+ }
1978
+
1979
+
1980
+ :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1981
+ -webkit-appearance:none;
1982
+ appearance:none;
1983
+ }
1984
+
1985
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1986
+ inline-size:1em;
1987
+ block-size:2em;
1988
+ }
1989
+
1990
+ @supports (field-sizing: content){
1991
+ .tds-input--auto-width{
1992
+ inline-size:-moz-fit-content;
1993
+ inline-size:fit-content;
1994
+ min-inline-size:min(100%, 122px);
1995
+ }
1996
+
1997
+ .tds-input--auto-width input{
1998
+ field-sizing:content;
1999
+ inline-size:auto;
2000
+ }
2001
+ }
2002
+
1797
2003
  .tds-field{
1798
2004
  --tds-field-label-color:var(--t-text-color);
1799
2005
  --tds-field-label-cursor:default;
@@ -2016,50 +2222,25 @@ a.tds-dropdown-item:is(:hover, :active){
2016
2222
  color:var(--tds-field-color);
2017
2223
  }
2018
2224
 
2019
-
2020
- :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
2021
- -webkit-appearance:none;
2022
- appearance:none;
2023
- }
2024
-
2025
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
2026
- inline-size:1em;
2027
- block-size:2em;
2028
- }
2029
-
2030
- @supports (field-sizing: content){
2031
- .tds-input--auto-width{
2032
- inline-size:-moz-fit-content;
2033
- inline-size:fit-content;
2034
- min-inline-size:min(100%, 122px);
2035
- }
2036
-
2037
- .tds-input--auto-width input{
2038
- field-sizing:content;
2039
- inline-size:auto;
2040
- }
2041
- }
2042
-
2043
- .tds-combo-box{
2044
- --tds-combo-box-button-offset:4px;
2225
+ .tds-number-stepper{
2226
+ --tds-number-stepper-button-offset:4px;
2227
+ --tds-number-stepper-button-gap:2px;
2045
2228
  }
2046
2229
 
2047
- .tds-combo-box[data-open] .tds-combo-box-button > svg{
2048
- transform:rotate(.5turn);
2049
- }
2050
-
2051
- .tds-combo-box--lg{
2052
- --tds-combo-box-button-offset:5px;
2230
+ .tds-number-stepper--lg{
2231
+ --tds-number-stepper-button-offset:5px;
2232
+ --tds-number-stepper-button-gap:4px;
2053
2233
  }
2054
2234
 
2055
- .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
2235
+ .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
2056
2236
  display:none;
2057
2237
  }
2058
2238
 
2059
- .tds-combo-box-input{
2239
+ .tds-number-stepper-input{
2060
2240
  display:flex;
2061
2241
  flex:1;
2062
2242
  align-items:center;
2243
+ min-inline-size:0;
2063
2244
  padding-block:var(--tds-field-padding-block);
2064
2245
  padding-inline:var(--tds-field-padding-inline);
2065
2246
  font-family:inherit;
@@ -2070,157 +2251,27 @@ a.tds-dropdown-item:is(:hover, :active){
2070
2251
  border:0;
2071
2252
  }
2072
2253
 
2073
- .tds-combo-box-input:has( + .tds-combo-box-button){
2074
- padding-inline-end:0;
2075
- }
2076
-
2077
- .tds-combo-box-input::-moz-placeholder{
2078
- color:var(--tds-field-placeholder-color);
2079
- -moz-user-select:none;
2080
- user-select:none;
2081
- }
2082
-
2083
- .tds-combo-box-input::placeholder{
2084
- color:var(--tds-field-placeholder-color);
2085
- -webkit-user-select:none;
2086
- -moz-user-select:none;
2087
- user-select:none;
2088
- }
2089
-
2090
- .tds-combo-box-button{
2091
- flex-shrink:0;
2092
- align-self:center;
2093
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
2094
- block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
2095
- padding:0;
2096
- margin-inline-end:var(--tds-combo-box-button-offset);
2097
- }
2098
-
2099
- .tds-combo-box-button > svg{
2100
- inline-size:var(--tds-field-font-size);
2101
- block-size:var(--tds-field-font-size);
2102
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
2103
- }
2104
-
2105
- .tds-combo-box-popover{
2106
- width:var(--trigger-width);
2107
- max-block-size:inherit;
2108
- padding:var(--t-spacing-1);
2109
- overflow:auto;
2110
- scroll-behavior:smooth;
2111
- overscroll-behavior:none;
2112
- -webkit-user-select:none;
2113
- -moz-user-select:none;
2114
- user-select:none;
2115
- outline:0;
2116
- scrollbar-color:#0004 var(--t-surface-color-card);
2117
- scrollbar-width:thin;
2118
- background:var(--t-surface-color-card);
2119
- background-clip:padding-box;
2120
- border:1px solid var(--t-border-color);
2121
- border-radius:var(--t-border-radius);
2122
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
2123
- }
2124
-
2125
- .tds-combo-box-popover[data-entering]{
2126
- animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
2127
- }
2128
-
2129
- .tds-combo-box-popover[data-exiting]{
2130
- animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
2131
- }
2132
-
2133
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
2134
- will-change:opacity, transform;
2135
- }
2136
-
2137
- @keyframes tds-combo-box-popover{
2138
- from{
2139
- opacity:0;
2140
- transform:translateY(-8px);
2141
- }
2142
- }
2143
-
2144
- @media (prefers-reduced-motion: reduce){
2145
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
2146
- animation:none;
2147
- }
2148
-
2149
- .tds-combo-box-button > svg{
2150
- transition:none;
2151
- }
2152
- }
2153
-
2154
- .tds-combo-box-list{
2155
- padding:0;
2156
- margin:0;
2157
- }
2158
-
2159
- .tds-combo-box-list-item{
2160
- display:block;
2161
- padding-block:var(--t-spacing-1);
2162
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
2163
- overflow:hidden;
2164
- text-overflow:ellipsis;
2165
- font-size:1rem;
2166
- color:var(--t-text-color);
2167
- white-space:nowrap;
2168
- cursor:default;
2169
- border-radius:var(--t-border-radius);
2170
- }
2171
-
2172
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
2173
- background:var(--t-fill-color-neutral-070);
2174
- }
2175
-
2176
- .tds-combo-box-list-item[data-selected]{
2177
- background:var(--t-fill-color-button-interaction-ghost-active);
2178
- }
2179
-
2180
- .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
2181
- background:var(--t-fill-color-neutral-060);
2182
- }
2183
-
2184
- .tds-combo-box-list-item[data-disabled]{
2185
- color:var(--t-form-color-disabled);
2186
- cursor:not-allowed;
2187
- }
2188
-
2189
- .tds-combo-box-list-item[data-disabled][data-hovered]{
2190
- background:transparent;
2191
- }
2192
-
2193
- .tds-combo-box-empty-state{
2194
- position:relative;
2195
- min-block-size:var(--t-spacing-3);
2196
- padding-block:var(--t-spacing-1);
2197
- padding-inline:var(--t-spacing-2);
2198
- font-size:var(--t-font-size-md);
2199
- color:var(--t-text-color-secondary);
2200
- }
2201
-
2202
- .tds-combo-box-load-more{
2203
- position:relative;
2204
- min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
2205
- }
2254
+ .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
2255
+ margin:0;
2256
+ -webkit-appearance:none;
2257
+ appearance:none;
2258
+ }
2206
2259
 
2207
- .tds-combo-box-empty-state,
2208
- .tds-combo-box-load-more{
2209
- --tds-loading-spinner-visibility:visible;
2210
- --tds-loading-spinner-animation-play-state:running;
2260
+ .tds-number-stepper-button{
2261
+ flex-shrink:0;
2262
+ align-self:center;
2263
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
2264
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
2265
+ padding:0;
2211
2266
  }
2212
2267
 
2213
- .tds-combo-box-list-section:not(:first-child){
2214
- margin-block-start:var(--t-spacing-half);
2268
+ .tds-number-stepper-button + .tds-number-stepper-button{
2269
+ margin-inline-start:var(--tds-number-stepper-button-gap);
2215
2270
  }
2216
2271
 
2217
- .tds-combo-box-section-header{
2218
- padding-block:var(--t-spacing-1);
2219
- padding-inline:var(--t-spacing-1);
2220
- font-size:var(--t-font-size-sm);
2221
- font-weight:var(--t-font-weight-semibold);
2222
- color:var(--t-text-color-secondary);
2223
- }
2272
+ .tds-number-stepper-button:last-of-type{
2273
+ margin-inline-end:var(--tds-number-stepper-button-offset);
2274
+ }
2224
2275
 
2225
2276
  .tds-radio{
2226
2277
  --tds-radio-font-size:var(--t-font-size-md);
@@ -2355,6 +2406,89 @@ a.tds-dropdown-item:is(:hover, :active){
2355
2406
  --tds-radio-description-line-height:1.3;
2356
2407
  }
2357
2408
 
2409
+ .tds-radio-group{
2410
+ --tds-radio-group-font-size:var(--t-font-size-md);
2411
+ --tds-radio-group-line-height:1.4;
2412
+ --tds-radio-group-gap:var(--t-spacing-1);
2413
+
2414
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
2415
+ --tds-radio-group-description-line-height:1.35;
2416
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
2417
+ --tds-radio-group-description-invalid-icon-display:none;
2418
+ display:flex;
2419
+ flex-direction:column;
2420
+ gap:0;
2421
+ padding:0;
2422
+ margin:0;
2423
+
2424
+ font-size:var(--tds-radio-group-font-size);
2425
+ line-height:var(--tds-radio-group-line-height);
2426
+ border:0;
2427
+ }
2428
+
2429
+ .tds-radio-group legend{
2430
+ float:left;
2431
+ padding:0;
2432
+ margin:0;
2433
+ }
2434
+
2435
+ .tds-radio-group[aria-invalid="true"]{
2436
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
2437
+ --tds-radio-group-description-invalid-icon-display:inline-block;
2438
+ }
2439
+
2440
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
2441
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2442
+ }
2443
+
2444
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2445
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2446
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2447
+ }
2448
+
2449
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2450
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2451
+ }
2452
+
2453
+ .tds-radio-group:has(input:required) legend::after{
2454
+ margin-left:.25ch;
2455
+ color:var(--t-text-color-status-error);
2456
+ content:"*";
2457
+ }
2458
+
2459
+ .tds-radio-group-fields{
2460
+ display:flex;
2461
+ flex-direction:column;
2462
+ gap:var(--tds-radio-group-gap);
2463
+ align-items:flex-start;
2464
+ margin-top:var(--t-spacing-1);
2465
+ }
2466
+
2467
+ .tds-radio-group-description{
2468
+ display:flex;
2469
+ gap:var(--t-spacing-half);
2470
+ align-items:flex-start;
2471
+ margin:var(--t-spacing-fourth) 0 0;
2472
+ font-size:var(--tds-radio-group-description-font-size);
2473
+ line-height:var(--tds-radio-group-description-line-height);
2474
+ color:var(--tds-radio-group-description-color);
2475
+ cursor:text;
2476
+ }
2477
+
2478
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2479
+ display:var(--tds-radio-group-description-invalid-icon-display);
2480
+ flex-shrink:0;
2481
+ margin-top:calc(.5lh - .5em);
2482
+ line-height:var(--tds-radio-group-description-line-height);
2483
+ }
2484
+
2485
+ .tds-radio-group--sm{
2486
+ --tds-radio-group-line-height:1.35;
2487
+ --tds-radio-group-font-size:var(--t-font-size-sm);
2488
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
2489
+ --tds-radio-group-description-line-height:1.3;
2490
+ }
2491
+
2358
2492
  .tds-input:has(textarea){
2359
2493
  --tds-input-padding-block:6px;
2360
2494
  --tds-input-resizer-size:var(--t-element-size-sm);
@@ -2460,96 +2594,6 @@ a.tds-dropdown-item:is(:hover, :active){
2460
2594
  }
2461
2595
  }
2462
2596
 
2463
- .tds-radio-group{
2464
- --tds-radio-group-font-size:var(--t-font-size-md);
2465
- --tds-radio-group-line-height:1.4;
2466
- --tds-radio-group-gap:var(--t-spacing-1);
2467
-
2468
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
2469
- --tds-radio-group-description-line-height:1.35;
2470
- --tds-radio-group-description-color:var(--t-text-color-secondary);
2471
- --tds-radio-group-description-invalid-icon-display:none;
2472
- display:flex;
2473
- flex-direction:column;
2474
- gap:0;
2475
- padding:0;
2476
- margin:0;
2477
-
2478
- font-size:var(--tds-radio-group-font-size);
2479
- line-height:var(--tds-radio-group-line-height);
2480
- border:0;
2481
- }
2482
-
2483
- .tds-radio-group legend{
2484
- float:left;
2485
- padding:0;
2486
- margin:0;
2487
- }
2488
-
2489
- .tds-radio-group[aria-invalid="true"]{
2490
- --tds-radio-group-description-color:var(--t-text-color-status-error);
2491
- --tds-radio-group-description-invalid-icon-display:inline-block;
2492
- }
2493
-
2494
- .tds-radio-group[aria-invalid="true"] .tds-radio{
2495
- --tds-radio-input-border-color:var(--t-form-border-color-error);
2496
- }
2497
-
2498
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2499
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2500
- --tds-radio-input-background-color:var(--t-form-background-color-error);
2501
- }
2502
-
2503
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2504
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2505
- }
2506
-
2507
- .tds-radio-group:has(input:required) legend::after{
2508
- margin-left:.25ch;
2509
- color:var(--t-text-color-status-error);
2510
- content:"*";
2511
- }
2512
-
2513
- .tds-radio-group-fields{
2514
- display:flex;
2515
- flex-direction:column;
2516
- gap:var(--tds-radio-group-gap);
2517
- align-items:flex-start;
2518
- margin-top:var(--t-spacing-1);
2519
- }
2520
-
2521
- .tds-radio-group-description{
2522
- display:flex;
2523
- gap:var(--t-spacing-half);
2524
- align-items:flex-start;
2525
- margin:var(--t-spacing-fourth) 0 0;
2526
- font-size:var(--tds-radio-group-description-font-size);
2527
- line-height:var(--tds-radio-group-description-line-height);
2528
- color:var(--tds-radio-group-description-color);
2529
- cursor:text;
2530
- }
2531
-
2532
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2533
- display:var(--tds-radio-group-description-invalid-icon-display);
2534
- flex-shrink:0;
2535
- margin-top:calc(.5lh - .5em);
2536
- line-height:var(--tds-radio-group-description-line-height);
2537
- }
2538
-
2539
- .tds-radio-group--sm{
2540
- --tds-radio-group-line-height:1.35;
2541
- --tds-radio-group-font-size:var(--t-font-size-sm);
2542
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
2543
- --tds-radio-group-description-line-height:1.3;
2544
- }
2545
-
2546
- .tds-time-field-input{
2547
- --tds-field-date-segment-padding-inline:1px;
2548
- padding-block:var(--tds-field-padding-block);
2549
- padding-inline:var(--tds-field-padding-inline);
2550
- font-variant-numeric:tabular-nums;
2551
- }
2552
-
2553
2597
  .tds-toggle-switch{
2554
2598
  --tds-toggle-switch-font-size:var(--t-font-size-md);
2555
2599
  --tds-toggle-switch-cursor:pointer;
@@ -2690,57 +2734,6 @@ a.tds-dropdown-item:is(:hover, :active){
2690
2734
  --tds-toggle-switch-display:inline-flex;
2691
2735
  }
2692
2736
 
2693
- .tds-number-stepper{
2694
- --tds-number-stepper-button-offset:4px;
2695
- --tds-number-stepper-button-gap:2px;
2696
- }
2697
-
2698
- .tds-number-stepper--lg{
2699
- --tds-number-stepper-button-offset:5px;
2700
- --tds-number-stepper-button-gap:4px;
2701
- }
2702
-
2703
- .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
2704
- display:none;
2705
- }
2706
-
2707
- .tds-number-stepper-input{
2708
- display:flex;
2709
- flex:1;
2710
- align-items:center;
2711
- min-inline-size:0;
2712
- padding-block:var(--tds-field-padding-block);
2713
- padding-inline:var(--tds-field-padding-inline);
2714
- font-family:inherit;
2715
- font-size:inherit;
2716
- color:inherit;
2717
- outline:0;
2718
- background:transparent;
2719
- border:0;
2720
- }
2721
-
2722
- .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
2723
- margin:0;
2724
- -webkit-appearance:none;
2725
- appearance:none;
2726
- }
2727
-
2728
- .tds-number-stepper-button{
2729
- flex-shrink:0;
2730
- align-self:center;
2731
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
2732
- block-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
2733
- padding:0;
2734
- }
2735
-
2736
- .tds-number-stepper-button + .tds-number-stepper-button{
2737
- margin-inline-start:var(--tds-number-stepper-button-gap);
2738
- }
2739
-
2740
- .tds-number-stepper-button:last-of-type{
2741
- margin-inline-end:var(--tds-number-stepper-button-offset);
2742
- }
2743
-
2744
2737
  .tds-select{
2745
2738
  --tds-select-border-color:var(--t-form-border-color);
2746
2739
  --tds-select-border-color-hover:var(--t-form-border-color-hover);
@@ -3180,6 +3173,13 @@ a.tds-dropdown-item:is(:hover, :active){
3180
3173
  }
3181
3174
  }
3182
3175
 
3176
+ .tds-time-field-input{
3177
+ --tds-field-date-segment-padding-inline:1px;
3178
+ padding-block:var(--tds-field-padding-block);
3179
+ padding-inline:var(--tds-field-padding-inline);
3180
+ font-variant-numeric:tabular-nums;
3181
+ }
3182
+
3183
3183
 
3184
3184
  @media (prefers-reduced-motion: no-preference){
3185
3185