@planningcenter/tapestry 4.0.0-rc.4 → 4.0.0-rc.5

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,228 +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
- .tds-button-group{
965
- display:inline-flex;
966
- }
967
- .tds-button-group > .tds-btn{
968
- --tds-button-group-item-z-index:1;
969
-
970
- z-index:var(--tds-button-group-item-z-index);
971
- border-radius:0;
972
- }
973
- :is(.tds-button-group > .tds-btn):not(:first-child){
974
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
975
- }
976
- :is(.tds-button-group > .tds-btn):hover{
977
- --tds-button-group-item-z-index:2;
978
- }
979
- :is(.tds-button-group > .tds-btn):focus-visible{
980
- --tds-button-group-item-z-index:5;
981
- }
982
- .tds-button-group > .tds-btn:first-child{
983
- border-start-start-radius:var(--tds-btn-border-radius);
984
- border-end-start-radius:var(--tds-btn-border-radius);
985
- }
986
- .tds-button-group > .tds-btn:last-child{
987
- border-start-end-radius:var(--tds-btn-border-radius);
988
- border-end-end-radius:var(--tds-btn-border-radius);
989
- }
990
-
991
769
  @layer t-critical{
992
770
  tds-page-header:not(.hydrated){
993
771
  display:none;
@@ -1266,145 +1044,11 @@
1266
1044
  }
1267
1045
  }
1268
1046
 
1269
- .tds-dropdown-popover{
1270
- min-inline-size:10rem;
1271
- max-inline-size:24rem;
1272
- padding:var(--t-spacing-1);
1273
- overflow:auto;
1274
- overscroll-behavior:none;
1275
- -webkit-user-select:none;
1276
- -moz-user-select:none;
1277
- user-select:none;
1278
- outline:0;
1279
- scrollbar-color:#0004 var(--t-surface-color-card);
1280
- scrollbar-width:thin;
1281
- background:var(--t-surface-color-card);
1282
- background-clip:padding-box;
1283
- border:1px solid var(--t-border-color);
1284
- border-radius:var(--t-border-radius);
1285
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1286
- }
1287
- .tds-dropdown-popover[data-entering]{
1288
- animation:tds-dropdown-popover var(--t-duration-300) var(--t-ease-out);
1289
- }
1290
- .tds-dropdown-popover[data-exiting]{
1291
- animation:tds-dropdown-popover var(--t-duration-200) var(--t-ease-in) reverse;
1292
- }
1293
- .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
1294
- will-change:opacity, transform;
1295
- }
1296
- @keyframes tds-dropdown-popover{
1297
- from{
1298
- opacity:0;
1299
- transform:translateY(-8px);
1300
- }
1301
- }
1302
- @media (prefers-reduced-motion: reduce){
1303
- .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
1304
- animation:none;
1305
- }
1306
- }
1307
- .tds-dropdown-popover [role="menu"]{
1308
- outline:0;
1309
- }
1310
- .tds-dropdown-item{
1311
- --tds-dropdown-item-color:var(--t-text-color);
1312
- --tds-dropdown-item-row-gap:0;
1313
- --tds-dropdown-item-column-gap:var(--t-spacing-1);
1314
-
1315
- display:flex;
1316
- row-gap:var(--tds-dropdown-item-row-gap);
1317
- -moz-column-gap:var(--tds-dropdown-item-column-gap);
1318
- column-gap:var(--tds-dropdown-item-column-gap);
1319
- align-items:center;
1320
- padding-block:var(--t-spacing-1);
1321
- padding-inline:var(--t-spacing-2);
1322
- font-size:1rem;
1323
- color:var(--tds-dropdown-item-color);
1324
- text-decoration:none;
1325
- cursor:default;
1326
- outline:0;
1327
- border-radius:var(--t-border-radius);
1328
- }
1329
- .tds-dropdown-item[data-hovered]:not([data-disabled]),.tds-dropdown-item[data-focus-visible]{
1330
- background:var(--t-fill-color-neutral-070);
1331
- }
1332
- .tds-dropdown-item[data-pressed]:not([data-disabled]){
1333
- background:var(--t-fill-color-neutral-060);
1334
- }
1335
- .tds-dropdown-item[data-disabled]{
1336
- --tds-dropdown-item-color:var(--t-form-color-disabled);
1337
-
1338
- cursor:not-allowed;
1339
- }
1340
- .tds-dropdown-item--destructive{
1341
- --tds-dropdown-item-color:var(--t-text-color-status-error);
1342
- }
1343
- .tds-dropdown-item--staff-only{
1344
- --tds-dropdown-item-color:var(--t-fill-color-product-staff);
1345
- }
1346
- a.tds-dropdown-item:is(:hover, :active){
1347
- color:var(--tds-dropdown-item-color);
1348
- }
1349
- .tds-dropdown-item [slot="prefix"],
1350
- .tds-dropdown-item [slot="suffix"]{
1351
- flex-shrink:0;
1352
- }
1353
- .tds-dropdown-item [slot="label"]{
1354
- flex:1;
1355
- min-width:0;
1356
- overflow:hidden;
1357
- text-overflow:ellipsis;
1358
- white-space:nowrap;
1359
- }
1360
- .tds-dropdown-item [slot="description"]{
1361
- font-size:var(--t-font-size-sm);
1362
- color:var(--t-text-color-secondary);
1363
- }
1364
- .tds-dropdown-item:has([slot="description"]){
1365
- --tds-dropdown-item-row-gap:var(--t-spacing-half);
1366
- --tds-dropdown-item-column-gap:0;
1367
-
1368
- display:grid;
1369
- grid-template-areas:"prefix label suffix" ". description .";
1370
- grid-template-columns:auto 1fr auto;
1371
- }
1372
- .tds-dropdown-item:has([slot="description"]) [slot="prefix"]{
1373
- grid-area:prefix;
1374
- margin-inline-end:var(--t-spacing-1);
1375
- }
1376
- .tds-dropdown-item:has([slot="description"]) [slot="label"]{
1377
- grid-area:label;
1378
- }
1379
- .tds-dropdown-item:has([slot="description"]) [slot="description"]{
1380
- grid-area:description;
1381
- }
1382
- .tds-dropdown-item:has([slot="description"]) [slot="suffix"]{
1383
- grid-area:suffix;
1384
- margin-inline-start:var(--t-spacing-1);
1385
- }
1386
- .tds-dropdown-section:not(:first-child){
1387
- margin-block-start:var(--t-spacing-half);
1388
- }
1389
- .tds-dropdown-section-label{
1390
- padding-block:var(--t-spacing-1);
1391
- padding-inline:var(--t-spacing-1);
1392
- font-size:var(--t-font-size-sm);
1393
- font-weight:var(--t-font-weight-semibold);
1394
- color:var(--t-text-color-secondary);
1395
- }
1396
- .tds-dropdown-separator{
1397
- margin-block:var(--t-spacing-half);
1398
- margin-inline:0;
1399
- border:0;
1400
- border-top:1px solid var(--t-border-color);
1401
- }
1402
-
1403
-
1404
- @media (prefers-reduced-motion: no-preference){
1405
-
1406
- :root{
1407
- interpolate-size:allow-keywords;
1047
+
1048
+ @media (prefers-reduced-motion: no-preference){
1049
+
1050
+ :root{
1051
+ interpolate-size:allow-keywords;
1408
1052
  }
1409
1053
  }
1410
1054
 
@@ -1762,417 +1406,655 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1762
1406
  flex-direction:column;
1763
1407
  }
1764
1408
 
1765
- .tds-combo-box{
1766
- --tds-combo-box-button-offset:4px;
1767
- }
1768
-
1769
- .tds-combo-box[data-open] .tds-combo-box-button > svg{
1770
- transform:rotate(.5turn);
1771
- }
1772
-
1773
- .tds-combo-box--lg{
1774
- --tds-combo-box-button-offset:5px;
1775
- }
1776
-
1777
- .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
1778
- display:none;
1779
- }
1409
+ .tds-checkbox-group{
1410
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1411
+ --tds-checkbox-group-line-height:1.4;
1412
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1780
1413
 
1781
- .tds-combo-box-input{
1414
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1415
+ --tds-checkbox-group-description-line-height:1.35;
1416
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1417
+ --tds-checkbox-group-description-invalid-icon-display:none;
1782
1418
  display:flex;
1783
- flex:1;
1784
- align-items:center;
1785
- padding-block:var(--tds-field-padding-block);
1786
- padding-inline:var(--tds-field-padding-inline);
1787
- font-family:inherit;
1788
- font-size:inherit;
1789
- color:inherit;
1790
- outline:0;
1791
- background:transparent;
1419
+ flex-direction:column;
1420
+ gap:0;
1421
+ padding:0;
1422
+ margin:0;
1423
+
1424
+ font-size:var(--tds-checkbox-group-font-size);
1425
+ line-height:var(--tds-checkbox-group-line-height);
1792
1426
  border:0;
1793
1427
  }
1794
1428
 
1795
- .tds-combo-box-input:has( + .tds-combo-box-button){
1796
- padding-inline-end:0;
1429
+ .tds-checkbox-group legend{
1430
+ float:left;
1431
+ padding:0;
1432
+ margin:0;
1797
1433
  }
1798
1434
 
1799
- .tds-combo-box-input::-moz-placeholder{
1800
- color:var(--tds-field-placeholder-color);
1801
- -moz-user-select:none;
1802
- user-select:none;
1435
+ .tds-checkbox-group[aria-invalid="true"]{
1436
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1437
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1803
1438
  }
1804
1439
 
1805
- .tds-combo-box-input::placeholder{
1806
- color:var(--tds-field-placeholder-color);
1807
- -webkit-user-select:none;
1808
- -moz-user-select:none;
1809
- user-select:none;
1810
- }
1440
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1441
+ margin-left:.25ch;
1442
+ color:var(--t-text-color-status-error);
1443
+ content:"*";
1444
+ }
1811
1445
 
1812
- .tds-combo-box-button{
1813
- flex-shrink:0;
1814
- align-self:center;
1815
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
1816
- block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
1817
- padding:0;
1818
- margin-inline-end:var(--tds-combo-box-button-offset);
1446
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1447
+ content:none;
1448
+ }
1449
+
1450
+ .tds-checkbox-group-fields{
1451
+ display:flex;
1452
+ flex-direction:column;
1453
+ gap:var(--tds-checkbox-group-gap);
1454
+ align-items:flex-start;
1455
+ margin-top:var(--t-spacing-1);
1819
1456
  }
1820
1457
 
1821
- .tds-combo-box-button > svg{
1822
- inline-size:var(--tds-field-font-size);
1823
- block-size:var(--tds-field-font-size);
1824
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
1458
+ .tds-checkbox-group-description{
1459
+ display:flex;
1460
+ gap:var(--t-spacing-half);
1461
+ align-items:flex-start;
1462
+ margin:var(--t-spacing-fourth) 0 0;
1463
+ font-size:var(--tds-checkbox-group-description-font-size);
1464
+ line-height:var(--tds-checkbox-group-description-line-height);
1465
+ color:var(--tds-checkbox-group-description-color);
1466
+ cursor:text;
1467
+ }
1468
+
1469
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1470
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1471
+ flex-shrink:0;
1472
+ margin-top:calc(.5lh - .5em);
1473
+ line-height:var(--tds-checkbox-group-description-line-height);
1825
1474
  }
1826
1475
 
1827
- .tds-combo-box-popover{
1828
- width:var(--trigger-width);
1829
- max-block-size:inherit;
1830
- padding:var(--t-spacing-1);
1831
- overflow:auto;
1832
- scroll-behavior:smooth;
1833
- overscroll-behavior:none;
1834
- -webkit-user-select:none;
1835
- -moz-user-select:none;
1836
- user-select:none;
1837
- outline:0;
1838
- scrollbar-color:#0004 var(--t-surface-color-card);
1839
- scrollbar-width:thin;
1840
- background:var(--t-surface-color-card);
1841
- background-clip:padding-box;
1842
- border:1px solid var(--t-border-color);
1843
- border-radius:var(--t-border-radius);
1844
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1476
+ .tds-checkbox-group--sm{
1477
+ --tds-checkbox-group-line-height:1.35;
1478
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1479
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1480
+ --tds-checkbox-group-description-line-height:1.3;
1845
1481
  }
1846
1482
 
1847
- .tds-combo-box-popover[data-entering]{
1848
- animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
1849
- }
1483
+ .tds-checkbox{
1484
+ --tds-checkbox-font-size:var(--t-font-size-md);
1485
+ --tds-checkbox-cursor:pointer;
1486
+ --tds-checkbox-line-height:1.4;
1487
+ --tds-checkbox-transition-property:background-color, border-color;
1850
1488
 
1851
- .tds-combo-box-popover[data-exiting]{
1852
- animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
1853
- }
1489
+ --tds-checkbox-input-size:var(--t-element-size-md);
1490
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1491
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
1492
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
1854
1493
 
1855
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1856
- will-change:opacity, transform;
1857
- }
1494
+ --tds-checkbox-input-icon:none;
1495
+ --tds-checkbox-input-icon-visibility:hidden;
1496
+ --tds-checkbox-input-icon-opacity:0;
1497
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1858
1498
 
1859
- @keyframes tds-combo-box-popover{
1860
- from{
1861
- opacity:0;
1862
- transform:translateY(-8px);
1863
- }
1864
- }
1865
-
1866
- @media (prefers-reduced-motion: reduce){
1867
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1868
- animation:none;
1869
- }
1870
-
1871
- .tds-combo-box-button > svg{
1872
- transition:none;
1873
- }
1874
- }
1499
+ --tds-checkbox-label-color:var(--t-form-color);
1875
1500
 
1876
- .tds-combo-box-list{
1877
- padding:0;
1878
- margin:0;
1879
- }
1501
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
1502
+ --tds-checkbox-description-line-height:1.35;
1503
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
1504
+ --tds-checkbox-description-invalid-icon-display:none;
1880
1505
 
1881
- .tds-combo-box-list-item{
1882
- display:block;
1883
- padding-block:var(--t-spacing-1);
1884
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1885
- overflow:hidden;
1886
- text-overflow:ellipsis;
1887
- font-size:1rem;
1888
- color:var(--t-text-color);
1889
- white-space:nowrap;
1890
- cursor:default;
1891
- border-radius:var(--t-border-radius);
1506
+ position:relative;
1507
+ display:inline-grid;
1508
+ grid-template-columns:auto;
1509
+ grid-auto-columns:1fr;
1510
+ gap:var(--t-spacing-fourth) 0;
1511
+ line-height:var(--tds-checkbox-line-height);
1512
+ -webkit-user-select:none;
1513
+ -moz-user-select:none;
1514
+ user-select:none;
1892
1515
  }
1893
1516
 
1894
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
1895
- background:var(--t-fill-color-neutral-070);
1517
+ .tds-checkbox label{
1518
+ grid-area:1 / 2;
1519
+ padding-inline-start:var(--t-spacing-1);
1520
+ font-size:var(--tds-checkbox-font-size);
1521
+ font-weight:var(--t-font-weight-normal);
1522
+ color:var(--tds-checkbox-label-color);
1523
+ cursor:var(--tds-checkbox-cursor);
1896
1524
  }
1897
1525
 
1898
- .tds-combo-box-list-item[data-selected]{
1899
- background:var(--t-fill-color-button-interaction-ghost-active);
1526
+ .tds-checkbox tds-indeterminate{
1527
+ display:flex;
1900
1528
  }
1901
1529
 
1902
- .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
1903
- background:var(--t-fill-color-neutral-060);
1530
+ .tds-checkbox input[type="checkbox"]{
1531
+ position:relative;
1532
+ width:1em;
1533
+ height:1em;
1534
+ margin:calc((1lh - 1em) / 2) 0 0;
1535
+ font-size:var(--tds-checkbox-font-size);
1536
+ line-height:inherit;
1537
+ -webkit-appearance:none;
1538
+ -moz-appearance:none;
1539
+ appearance:none;
1540
+ cursor:var(--tds-checkbox-cursor);
1541
+ background-color:var(--tds-checkbox-input-background-color);
1542
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1543
+ border-radius:var(--tds-checkbox-input-border-radius);
1544
+ transition-timing-function:var(--t-ease-in-out);
1545
+ transition-duration:var(--t-duration-200);
1546
+ transition-property:var(--tds-checkbox-transition-property);
1904
1547
  }
1905
1548
 
1906
- .tds-combo-box-list-item[data-disabled]{
1907
- color:var(--t-form-color-disabled);
1908
- cursor:not-allowed;
1909
- }
1549
+ :is(.tds-checkbox input[type="checkbox"])::before{
1550
+ position:absolute;
1551
+ top:50%;
1552
+ left:50%;
1553
+ visibility:var(--tds-checkbox-input-icon-visibility);
1554
+ width:100%;
1555
+ height:100%;
1556
+ content:"";
1557
+ background-color:var(--tds-checkbox-input-icon-fill);
1558
+ border-radius:var(--tds-checkbox-input-border-radius);
1559
+ opacity:var(--tds-checkbox-input-icon-opacity);
1560
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
1561
+ mask-image:var(--tds-checkbox-input-icon);
1562
+ -webkit-mask-repeat:no-repeat;
1563
+ mask-repeat:no-repeat;
1564
+ -webkit-mask-size:contain;
1565
+ mask-size:contain;
1566
+ transform:translate(-50%, -50%);
1567
+ }
1910
1568
 
1911
- .tds-combo-box-list-item[data-disabled][data-hovered]{
1912
- background:transparent;
1569
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1570
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1571
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1913
1572
  }
1914
1573
 
1915
- .tds-combo-box-empty-state{
1916
- position:relative;
1917
- min-block-size:var(--t-spacing-3);
1918
- padding-block:var(--t-spacing-1);
1919
- padding-inline:var(--t-spacing-2);
1920
- font-size:var(--t-font-size-md);
1921
- color:var(--t-text-color-secondary);
1922
- }
1574
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1575
+ outline:var(--t-focus-ring-outline);
1576
+ outline-offset:var(--t-focus-ring-offset);
1577
+ }
1923
1578
 
1924
- .tds-combo-box-load-more{
1925
- position:relative;
1926
- min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
1927
- }
1579
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
1580
+ pointer-events:none;
1581
+ }
1928
1582
 
1929
- .tds-combo-box-empty-state,
1930
- .tds-combo-box-load-more{
1931
- --tds-loading-spinner-visibility:visible;
1932
- --tds-loading-spinner-animation-play-state:running;
1933
- }
1583
+ @media (prefers-reduced-motion: reduce){
1934
1584
 
1935
- .tds-combo-box-list-section:not(:first-child){
1936
- margin-block-start:var(--t-spacing-half);
1585
+ .tds-checkbox input[type="checkbox"]{
1586
+ --tds-checkbox-transition-property:none;
1937
1587
  }
1938
-
1939
- .tds-combo-box-section-header{
1940
- padding-block:var(--t-spacing-1);
1941
- padding-inline:var(--t-spacing-1);
1942
- font-size:var(--t-font-size-sm);
1943
- font-weight:var(--t-font-weight-semibold);
1944
- color:var(--t-text-color-secondary);
1945
- }
1946
-
1947
-
1948
- :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{
1949
- -webkit-appearance:none;
1950
- appearance:none;
1951
1588
  }
1952
1589
 
1953
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1954
- inline-size:1em;
1955
- block-size:2em;
1590
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1591
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
1592
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1593
+ --tds-checkbox-input-icon-visibility:visible;
1594
+ --tds-checkbox-input-icon-opacity:1;
1595
+ }
1596
+
1597
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1598
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1599
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1956
1600
  }
1957
1601
 
1958
- @supports (field-sizing: content){
1959
- .tds-input--auto-width{
1960
- inline-size:-moz-fit-content;
1961
- inline-size:fit-content;
1962
- min-inline-size:min(100%, 122px);
1602
+ .tds-checkbox:has(input:checked){
1603
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1963
1604
  }
1964
1605
 
1965
- .tds-input--auto-width input{
1966
- field-sizing:content;
1967
- inline-size:auto;
1606
+ .tds-checkbox:has(input:indeterminate){
1607
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1968
1608
  }
1969
- }
1970
-
1971
- .tds-checkbox-group{
1972
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1973
- --tds-checkbox-group-line-height:1.4;
1974
- --tds-checkbox-group-gap:var(--t-spacing-1);
1975
1609
 
1976
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1977
- --tds-checkbox-group-description-line-height:1.35;
1978
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1979
- --tds-checkbox-group-description-invalid-icon-display:none;
1980
- display:flex;
1981
- flex-direction:column;
1982
- gap:0;
1983
- padding:0;
1984
- margin:0;
1610
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1611
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1612
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
1613
+ --tds-checkbox-description-invalid-icon-display:inline-block;
1614
+ }
1985
1615
 
1986
- font-size:var(--tds-checkbox-group-font-size);
1987
- line-height:var(--tds-checkbox-group-line-height);
1988
- border:0;
1989
- }
1616
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1617
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1618
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1619
+ }
1990
1620
 
1991
- .tds-checkbox-group legend{
1992
- float:left;
1993
- padding:0;
1994
- margin:0;
1995
- }
1621
+ :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{
1622
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1623
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1624
+ }
1996
1625
 
1997
- .tds-checkbox-group[aria-invalid="true"]{
1998
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1999
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
2000
- }
1626
+ :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){
1627
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1628
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1629
+ }
2001
1630
 
2002
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1631
+ .tds-checkbox:has(input:required) label::after{
2003
1632
  margin-left:.25ch;
2004
1633
  color:var(--t-text-color-status-error);
2005
1634
  content:"*";
2006
1635
  }
2007
1636
 
2008
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
2009
- content:none;
2010
- }
1637
+ .tds-checkbox:has(input:disabled){
1638
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1639
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
2011
1640
 
2012
- .tds-checkbox-group-fields{
2013
- display:flex;
2014
- flex-direction:column;
2015
- gap:var(--tds-checkbox-group-gap);
2016
- align-items:flex-start;
2017
- margin-top:var(--t-spacing-1);
2018
- }
1641
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
1642
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
1643
+ --tds-checkbox-cursor:not-allowed;
1644
+ }
2019
1645
 
2020
- .tds-checkbox-group-description{
1646
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1647
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1648
+ }
1649
+
1650
+ .tds-checkbox-description{
2021
1651
  display:flex;
1652
+ grid-area:2 / 2;
2022
1653
  gap:var(--t-spacing-half);
2023
1654
  align-items:flex-start;
2024
- margin:var(--t-spacing-fourth) 0 0;
2025
- font-size:var(--tds-checkbox-group-description-font-size);
2026
- line-height:var(--tds-checkbox-group-description-line-height);
2027
- color:var(--tds-checkbox-group-description-color);
1655
+ padding-inline-start:var(--t-spacing-1);
1656
+ margin:0;
1657
+ font-size:var(--tds-checkbox-description-font-size);
1658
+ line-height:var(--tds-checkbox-description-line-height);
1659
+ color:var(--tds-checkbox-description-color);
2028
1660
  cursor:text;
2029
1661
  }
2030
1662
 
2031
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
2032
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1663
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1664
+ display:var(--tds-checkbox-description-invalid-icon-display);
2033
1665
  flex-shrink:0;
2034
1666
  margin-top:calc(.5lh - .5em);
2035
- line-height:var(--tds-checkbox-group-description-line-height);
1667
+ line-height:var(--tds-checkbox-description-line-height);
2036
1668
  }
2037
1669
 
2038
- .tds-checkbox-group--sm{
2039
- --tds-checkbox-group-line-height:1.35;
2040
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
2041
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
2042
- --tds-checkbox-group-description-line-height:1.3;
1670
+ .tds-checkbox--sm{
1671
+ --tds-checkbox-line-height:1.35;
1672
+ --tds-checkbox-input-size:var(--t-element-size-sm);
1673
+ --tds-checkbox-font-size:var(--t-font-size-sm);
1674
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
1675
+ --tds-checkbox-description-line-height:1.3;
2043
1676
  }
2044
1677
 
2045
- .tds-radio{
2046
- --tds-radio-font-size:var(--t-font-size-md);
2047
- --tds-radio-cursor:pointer;
2048
- --tds-radio-line-height:1.4;
2049
- --tds-radio-transition-property:border-width;
1678
+ .tds-combo-box{
1679
+ --tds-combo-box-button-offset:4px;
1680
+ }
2050
1681
 
2051
- --tds-radio-input-size:var(--t-element-size-md);
2052
- --tds-radio-input-border-radius:var(--t-border-radius-round);
2053
- --tds-radio-input-border-color:var(--t-form-border-color);
2054
- --tds-radio-input-border-width:var(--t-form-border-width);
2055
- --tds-radio-input-background-color:var(--t-form-background-color);
1682
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
1683
+ transform:rotate(.5turn);
1684
+ }
2056
1685
 
2057
- --tds-radio-label-color:var(--t-form-color);
1686
+ .tds-combo-box--lg{
1687
+ --tds-combo-box-button-offset:5px;
1688
+ }
2058
1689
 
2059
- --tds-radio-description-font-size:var(--t-font-size-sm);
2060
- --tds-radio-description-line-height:1.35;
2061
- --tds-radio-description-color:var(--t-text-color-secondary);
1690
+ .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
1691
+ display:none;
1692
+ }
2062
1693
 
2063
- position:relative;
2064
- display:inline-grid;
2065
- grid-template-columns:auto;
2066
- grid-auto-columns:1fr;
2067
- gap:var(--t-spacing-fourth) 0;
2068
- line-height:var(--tds-radio-line-height);
1694
+ .tds-combo-box-input{
1695
+ display:flex;
1696
+ flex:1;
1697
+ align-items:center;
1698
+ padding-block:var(--tds-field-padding-block);
1699
+ padding-inline:var(--tds-field-padding-inline);
1700
+ font-family:inherit;
1701
+ font-size:inherit;
1702
+ color:inherit;
1703
+ outline:0;
1704
+ background:transparent;
1705
+ border:0;
1706
+ }
1707
+
1708
+ .tds-combo-box-input:has( + .tds-combo-box-button){
1709
+ padding-inline-end:0;
1710
+ }
1711
+
1712
+ .tds-combo-box-input::-moz-placeholder{
1713
+ color:var(--tds-field-placeholder-color);
1714
+ -moz-user-select:none;
1715
+ user-select:none;
1716
+ }
1717
+
1718
+ .tds-combo-box-input::placeholder{
1719
+ color:var(--tds-field-placeholder-color);
1720
+ -webkit-user-select:none;
1721
+ -moz-user-select:none;
1722
+ user-select:none;
1723
+ }
1724
+
1725
+ .tds-combo-box-button{
1726
+ flex-shrink:0;
1727
+ align-self:center;
1728
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
1729
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
1730
+ padding:0;
1731
+ margin-inline-end:var(--tds-combo-box-button-offset);
1732
+ }
1733
+
1734
+ .tds-combo-box-button > svg{
1735
+ inline-size:var(--tds-field-font-size);
1736
+ block-size:var(--tds-field-font-size);
1737
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
1738
+ }
1739
+
1740
+ .tds-combo-box-popover{
1741
+ width:var(--trigger-width);
1742
+ max-block-size:inherit;
1743
+ padding:var(--t-spacing-1);
1744
+ overflow:auto;
1745
+ scroll-behavior:smooth;
1746
+ overscroll-behavior:none;
2069
1747
  -webkit-user-select:none;
2070
1748
  -moz-user-select:none;
2071
1749
  user-select:none;
1750
+ outline:0;
1751
+ scrollbar-color:#0004 var(--t-surface-color-card);
1752
+ scrollbar-width:thin;
1753
+ background:var(--t-surface-color-card);
1754
+ background-clip:padding-box;
1755
+ border:1px solid var(--t-border-color);
1756
+ border-radius:var(--t-border-radius);
1757
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
2072
1758
  }
2073
1759
 
2074
- .tds-radio label{
2075
- grid-area:1 / 2;
2076
- padding-inline-start:var(--t-spacing-1);
2077
- font-size:var(--tds-radio-font-size);
2078
- font-weight:var(--t-font-weight-normal);
2079
- color:var(--tds-radio-label-color);
2080
- cursor:var(--tds-radio-cursor);
1760
+ .tds-combo-box-popover[data-entering]{
1761
+ animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
2081
1762
  }
2082
1763
 
2083
- .tds-radio input[type="radio"]{
2084
- position:relative;
2085
- width:1em;
2086
- height:1em;
2087
- margin:calc((1lh - 1em) / 2) 0 0;
2088
- font-size:var(--tds-radio-font-size);
2089
- line-height:inherit;
2090
- -webkit-appearance:none;
2091
- -moz-appearance:none;
2092
- appearance:none;
2093
- cursor:var(--tds-radio-cursor);
2094
- background-color:var(--tds-radio-input-background-color);
2095
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
2096
- border-radius:var(--tds-radio-input-border-radius);
2097
- transition-timing-function:var(--t-ease-in-out);
2098
- transition-duration:var(--t-duration-200);
2099
- transition-property:var(--tds-radio-transition-property);
1764
+ .tds-combo-box-popover[data-exiting]{
1765
+ animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
2100
1766
  }
2101
1767
 
2102
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
2103
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2104
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
2105
- }
1768
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1769
+ will-change:opacity, transform;
1770
+ }
2106
1771
 
2107
- :is(.tds-radio input[type="radio"]):focus-visible{
2108
- outline:var(--t-focus-ring-outline);
2109
- outline-offset:var(--t-focus-ring-offset);
2110
- }
1772
+ @keyframes tds-combo-box-popover{
1773
+ from{
1774
+ opacity:0;
1775
+ transform:translateY(-8px);
1776
+ }
1777
+ }
2111
1778
 
2112
- :is(.tds-radio input[type="radio"]):disabled{
2113
- pointer-events:none;
1779
+ @media (prefers-reduced-motion: reduce){
1780
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1781
+ animation:none;
2114
1782
  }
2115
1783
 
2116
- @media (prefers-reduced-motion: reduce){
1784
+ .tds-combo-box-button > svg{
1785
+ transition:none;
1786
+ }
1787
+ }
2117
1788
 
2118
- .tds-radio input[type="radio"]{
2119
- --tds-radio-transition-property:none;
1789
+ .tds-combo-box-list{
1790
+ padding:0;
1791
+ margin:0;
1792
+ }
1793
+
1794
+ .tds-combo-box-list-item{
1795
+ display:block;
1796
+ padding-block:var(--t-spacing-1);
1797
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1798
+ overflow:hidden;
1799
+ text-overflow:ellipsis;
1800
+ font-size:1rem;
1801
+ color:var(--t-text-color);
1802
+ white-space:nowrap;
1803
+ cursor:default;
1804
+ border-radius:var(--t-border-radius);
1805
+ }
1806
+
1807
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
1808
+ background:var(--t-fill-color-neutral-070);
2120
1809
  }
2121
- }
2122
1810
 
2123
- .tds-radio:has(input:checked){
2124
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2125
- --tds-radio-input-border-color:var(--t-border-color-control-info);
2126
- --tds-radio-input-border-width:4px;
1811
+ .tds-combo-box-list-item[data-selected]{
1812
+ background:var(--t-fill-color-button-interaction-ghost-active);
2127
1813
  }
2128
1814
 
2129
- .tds-radio:has(input:checked) input:hover:not(:disabled){
2130
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2131
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2132
- }
1815
+ .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
1816
+ background:var(--t-fill-color-neutral-060);
1817
+ }
2133
1818
 
2134
- .tds-radio:has(input:user-invalid){
2135
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1819
+ .tds-combo-box-list-item[data-disabled]{
1820
+ color:var(--t-form-color-disabled);
1821
+ cursor:not-allowed;
2136
1822
  }
2137
1823
 
2138
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2139
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2140
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1824
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
1825
+ background:transparent;
2141
1826
  }
2142
1827
 
2143
- .tds-radio:has(input:disabled){
2144
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2145
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1828
+ .tds-combo-box-empty-state{
1829
+ position:relative;
1830
+ min-block-size:var(--t-spacing-3);
1831
+ padding-block:var(--t-spacing-1);
1832
+ padding-inline:var(--t-spacing-2);
1833
+ font-size:var(--t-font-size-md);
1834
+ color:var(--t-text-color-secondary);
1835
+ }
2146
1836
 
2147
- --tds-radio-label-color:var(--t-form-color-disabled);
2148
- --tds-radio-description-color:var(--t-form-color-disabled);
2149
- --tds-radio-cursor:not-allowed;
1837
+ .tds-combo-box-load-more{
1838
+ position:relative;
1839
+ min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
1840
+ }
1841
+
1842
+ .tds-combo-box-empty-state,
1843
+ .tds-combo-box-load-more{
1844
+ --tds-loading-spinner-visibility:visible;
1845
+ --tds-loading-spinner-animation-play-state:running;
1846
+ }
1847
+
1848
+ .tds-combo-box-list-section:not(:first-child){
1849
+ margin-block-start:var(--t-spacing-half);
2150
1850
  }
2151
1851
 
2152
- .tds-radio:has(input:disabled) input:checked{
2153
- --tds-radio-input-background-color:var(--t-form-background-color);
2154
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1852
+ .tds-combo-box-section-header{
1853
+ padding-block:var(--t-spacing-1);
1854
+ padding-inline:var(--t-spacing-1);
1855
+ font-size:var(--t-font-size-sm);
1856
+ font-weight:var(--t-font-weight-semibold);
1857
+ color:var(--t-text-color-secondary);
1858
+ }
1859
+
1860
+ .tds-button-group{
1861
+ display:inline-flex;
1862
+ }
1863
+ .tds-button-group > .tds-btn{
1864
+ --tds-button-group-item-z-index:1;
1865
+
1866
+ position:relative;
1867
+ z-index:var(--tds-button-group-item-z-index);
1868
+ border-radius:0;
1869
+ }
1870
+ :is(.tds-button-group > .tds-btn):not(:first-child){
1871
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1872
+ }
1873
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--pill):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--pill):not(:last-child)::after{
1874
+ position:absolute;
1875
+ inset-block:calc(var(--tds-btn-border-width) * -1);
1876
+ width:var(--tds-btn-border-width);
1877
+ pointer-events:none;
1878
+ content:"";
1879
+ background-color:var(--t-border-color-white);
1880
+ }
1881
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--pill):not(:first-child)::before{
1882
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1883
+ }
1884
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--pill):not(:last-child)::after{
1885
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1886
+ }
1887
+ :is(.tds-button-group > .tds-btn):hover{
1888
+ --tds-button-group-item-z-index:2;
1889
+ }
1890
+ :is(.tds-button-group > .tds-btn):focus-visible{
1891
+ --tds-button-group-item-z-index:5;
1892
+ }
1893
+ .tds-button-group > .tds-btn:first-child{
1894
+ border-start-start-radius:var(--tds-btn-border-radius);
1895
+ border-end-start-radius:var(--tds-btn-border-radius);
1896
+ }
1897
+ .tds-button-group > .tds-btn:last-child{
1898
+ border-start-end-radius:var(--tds-btn-border-radius);
1899
+ border-end-end-radius:var(--tds-btn-border-radius);
1900
+ }
1901
+
1902
+ .tds-dropdown-popover{
1903
+ min-inline-size:10rem;
1904
+ max-inline-size:24rem;
1905
+ padding:var(--t-spacing-1);
1906
+ overflow:auto;
1907
+ overscroll-behavior:none;
1908
+ -webkit-user-select:none;
1909
+ -moz-user-select:none;
1910
+ user-select:none;
1911
+ outline:0;
1912
+ scrollbar-color:#0004 var(--t-surface-color-card);
1913
+ scrollbar-width:thin;
1914
+ background:var(--t-surface-color-card);
1915
+ background-clip:padding-box;
1916
+ border:1px solid var(--t-border-color);
1917
+ border-radius:var(--t-border-radius);
1918
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1919
+ }
1920
+ .tds-dropdown-popover[data-entering]{
1921
+ animation:tds-dropdown-popover var(--t-duration-300) var(--t-ease-out);
1922
+ }
1923
+ .tds-dropdown-popover[data-exiting]{
1924
+ animation:tds-dropdown-popover var(--t-duration-200) var(--t-ease-in) reverse;
1925
+ }
1926
+ .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
1927
+ will-change:opacity, transform;
1928
+ }
1929
+ @keyframes tds-dropdown-popover{
1930
+ from{
1931
+ opacity:0;
1932
+ transform:translateY(-8px);
1933
+ }
1934
+ }
1935
+ @media (prefers-reduced-motion: reduce){
1936
+ .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
1937
+ animation:none;
2155
1938
  }
1939
+ }
1940
+ .tds-dropdown-popover [role="menu"]{
1941
+ outline:0;
1942
+ }
1943
+ .tds-dropdown-item{
1944
+ --tds-dropdown-item-color:var(--t-text-color);
1945
+ --tds-dropdown-item-row-gap:0;
1946
+ --tds-dropdown-item-column-gap:var(--t-spacing-1);
2156
1947
 
2157
- .tds-radio-description{
2158
1948
  display:flex;
2159
- grid-area:2 / 2;
2160
- gap:var(--t-spacing-half);
2161
- align-items:flex-start;
2162
- padding-inline-start:var(--t-spacing-1);
2163
- margin:0;
2164
- font-size:var(--tds-radio-description-font-size);
2165
- line-height:var(--tds-radio-description-line-height);
2166
- color:var(--tds-radio-description-color);
2167
- cursor:text;
1949
+ row-gap:var(--tds-dropdown-item-row-gap);
1950
+ -moz-column-gap:var(--tds-dropdown-item-column-gap);
1951
+ column-gap:var(--tds-dropdown-item-column-gap);
1952
+ align-items:center;
1953
+ padding-block:var(--t-spacing-1);
1954
+ padding-inline:var(--t-spacing-2);
1955
+ font-size:1rem;
1956
+ color:var(--tds-dropdown-item-color);
1957
+ text-decoration:none;
1958
+ cursor:default;
1959
+ outline:0;
1960
+ border-radius:var(--t-border-radius);
1961
+ }
1962
+ .tds-dropdown-item[data-hovered]:not([data-disabled]),.tds-dropdown-item[data-focus-visible]{
1963
+ background:var(--t-fill-color-neutral-070);
1964
+ }
1965
+ .tds-dropdown-item[data-pressed]:not([data-disabled]){
1966
+ background:var(--t-fill-color-neutral-060);
1967
+ }
1968
+ .tds-dropdown-item[data-disabled]{
1969
+ --tds-dropdown-item-color:var(--t-form-color-disabled);
1970
+
1971
+ cursor:not-allowed;
1972
+ }
1973
+ .tds-dropdown-item--destructive{
1974
+ --tds-dropdown-item-color:var(--t-text-color-status-error);
1975
+ }
1976
+ .tds-dropdown-item--staff-only{
1977
+ --tds-dropdown-item-color:var(--t-fill-color-product-staff);
1978
+ }
1979
+ a.tds-dropdown-item:is(:hover, :active){
1980
+ color:var(--tds-dropdown-item-color);
2168
1981
  }
1982
+ .tds-dropdown-item [slot="prefix"],
1983
+ .tds-dropdown-item [slot="suffix"]{
1984
+ flex-shrink:0;
1985
+ }
1986
+ .tds-dropdown-item [slot="label"]{
1987
+ flex:1;
1988
+ min-width:0;
1989
+ overflow:hidden;
1990
+ text-overflow:ellipsis;
1991
+ white-space:nowrap;
1992
+ }
1993
+ .tds-dropdown-item [slot="description"]{
1994
+ font-size:var(--t-font-size-sm);
1995
+ color:var(--t-text-color-secondary);
1996
+ }
1997
+ .tds-dropdown-item:has([slot="description"]){
1998
+ --tds-dropdown-item-row-gap:var(--t-spacing-half);
1999
+ --tds-dropdown-item-column-gap:0;
2000
+
2001
+ display:grid;
2002
+ grid-template-areas:"prefix label suffix" ". description .";
2003
+ grid-template-columns:auto 1fr auto;
2004
+ }
2005
+ .tds-dropdown-item:has([slot="description"]) [slot="prefix"]{
2006
+ grid-area:prefix;
2007
+ margin-inline-end:var(--t-spacing-1);
2008
+ }
2009
+ .tds-dropdown-item:has([slot="description"]) [slot="label"]{
2010
+ grid-area:label;
2011
+ }
2012
+ .tds-dropdown-item:has([slot="description"]) [slot="description"]{
2013
+ grid-area:description;
2014
+ }
2015
+ .tds-dropdown-item:has([slot="description"]) [slot="suffix"]{
2016
+ grid-area:suffix;
2017
+ margin-inline-start:var(--t-spacing-1);
2018
+ }
2019
+ .tds-dropdown-section:not(:first-child){
2020
+ margin-block-start:var(--t-spacing-half);
2021
+ }
2022
+ .tds-dropdown-section-label{
2023
+ padding-block:var(--t-spacing-1);
2024
+ padding-inline:var(--t-spacing-1);
2025
+ font-size:var(--t-font-size-sm);
2026
+ font-weight:var(--t-font-weight-semibold);
2027
+ color:var(--t-text-color-secondary);
2028
+ }
2029
+ .tds-dropdown-separator{
2030
+ margin-block:var(--t-spacing-half);
2031
+ margin-inline:0;
2032
+ border:0;
2033
+ border-top:1px solid var(--t-border-color);
2034
+ }
2035
+
2036
+
2037
+ :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{
2038
+ -webkit-appearance:none;
2039
+ appearance:none;
2040
+ }
2041
+
2042
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
2043
+ inline-size:1em;
2044
+ block-size:2em;
2045
+ }
2046
+
2047
+ @supports (field-sizing: content){
2048
+ .tds-input--auto-width{
2049
+ inline-size:-moz-fit-content;
2050
+ inline-size:fit-content;
2051
+ min-inline-size:min(100%, 122px);
2052
+ }
2169
2053
 
2170
- .tds-radio--sm{
2171
- --tds-radio-line-height:1.35;
2172
- --tds-radio-input-size:var(--t-element-size-sm);
2173
- --tds-radio-font-size:var(--t-font-size-sm);
2174
- --tds-radio-description-font-size:var(--t-font-size-xs);
2175
- --tds-radio-description-line-height:1.3;
2054
+ .tds-input--auto-width input{
2055
+ field-sizing:content;
2056
+ inline-size:auto;
2057
+ }
2176
2058
  }
2177
2059
 
2178
2060
  .tds-modal-overlay{
@@ -2301,105 +2183,343 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2301
2183
  padding-inline:var(--t-spacing-4);
2302
2184
  }
2303
2185
 
2304
- .tds-modal-body--full-width{
2305
- padding-inline:0;
2306
- }
2186
+ .tds-modal-body--full-width{
2187
+ padding-inline:0;
2188
+ }
2189
+
2190
+ .tds-modal-footer{
2191
+ display:flex;
2192
+ gap:var(--t-spacing-2);
2193
+ align-items:center;
2194
+ justify-content:flex-end;
2195
+ padding-block-start:var(--t-spacing-3);
2196
+ padding-inline:var(--t-spacing-4);
2197
+ border-top:1px solid var(--t-border-color);
2198
+ }
2199
+
2200
+ .tds-modal-footer > [slot="start"]{
2201
+ margin-inline-end:auto;
2202
+ }
2203
+
2204
+ .tds-radio-group{
2205
+ --tds-radio-group-font-size:var(--t-font-size-md);
2206
+ --tds-radio-group-line-height:1.4;
2207
+ --tds-radio-group-gap:var(--t-spacing-1);
2208
+
2209
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
2210
+ --tds-radio-group-description-line-height:1.35;
2211
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
2212
+ --tds-radio-group-description-invalid-icon-display:none;
2213
+ display:flex;
2214
+ flex-direction:column;
2215
+ gap:0;
2216
+ padding:0;
2217
+ margin:0;
2218
+
2219
+ font-size:var(--tds-radio-group-font-size);
2220
+ line-height:var(--tds-radio-group-line-height);
2221
+ border:0;
2222
+ }
2223
+
2224
+ .tds-radio-group legend{
2225
+ float:left;
2226
+ padding:0;
2227
+ margin:0;
2228
+ }
2229
+
2230
+ .tds-radio-group[aria-invalid="true"]{
2231
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
2232
+ --tds-radio-group-description-invalid-icon-display:inline-block;
2233
+ }
2234
+
2235
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
2236
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2237
+ }
2238
+
2239
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2240
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2241
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2242
+ }
2243
+
2244
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2245
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2246
+ }
2247
+
2248
+ .tds-radio-group:has(input:required) legend::after{
2249
+ margin-left:.25ch;
2250
+ color:var(--t-text-color-status-error);
2251
+ content:"*";
2252
+ }
2253
+
2254
+ .tds-radio-group-fields{
2255
+ display:flex;
2256
+ flex-direction:column;
2257
+ gap:var(--tds-radio-group-gap);
2258
+ align-items:flex-start;
2259
+ margin-top:var(--t-spacing-1);
2260
+ }
2261
+
2262
+ .tds-radio-group-description{
2263
+ display:flex;
2264
+ gap:var(--t-spacing-half);
2265
+ align-items:flex-start;
2266
+ margin:var(--t-spacing-fourth) 0 0;
2267
+ font-size:var(--tds-radio-group-description-font-size);
2268
+ line-height:var(--tds-radio-group-description-line-height);
2269
+ color:var(--tds-radio-group-description-color);
2270
+ cursor:text;
2271
+ }
2272
+
2273
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2274
+ display:var(--tds-radio-group-description-invalid-icon-display);
2275
+ flex-shrink:0;
2276
+ margin-top:calc(.5lh - .5em);
2277
+ line-height:var(--tds-radio-group-description-line-height);
2278
+ }
2279
+
2280
+ .tds-radio-group--sm{
2281
+ --tds-radio-group-line-height:1.35;
2282
+ --tds-radio-group-font-size:var(--t-font-size-sm);
2283
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
2284
+ --tds-radio-group-description-line-height:1.3;
2285
+ }
2286
+
2287
+ .tds-input:has(textarea){
2288
+ --tds-input-padding-block:6px;
2289
+ --tds-input-resizer-size:var(--t-element-size-sm);
2290
+ --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
2291
+ }
2292
+
2293
+ @supports (x: attr(x type(*))){
2294
+
2295
+ .tds-input textarea{
2296
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
2297
+ }
2298
+ }
2299
+
2300
+ .tds-input.tds-textarea--resize-vertical textarea{
2301
+ resize:vertical;
2302
+ }
2303
+
2304
+ .tds-input.tds-textarea--resize-none textarea{
2305
+ resize:none;
2306
+ }
2307
+
2308
+ .tds-input.tds-textarea--resize-auto textarea{
2309
+ resize:vertical;
2310
+ }
2311
+
2312
+ @supports (field-sizing: content){
2313
+ .tds-input.tds-textarea--resize-auto textarea{
2314
+ field-sizing:content;
2315
+ resize:none;
2316
+ }
2317
+ }
2318
+
2319
+ .tds-input textarea{
2320
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2321
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
2322
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2323
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2324
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2325
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2326
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2327
+ --tds-input-scrollbar-thumb-border-radius:999px;
2328
+ --tds-input-scrollbar-thumb-border-width:3px;
2329
+ --tds-input-scrollbar-track-margin-block:.125rem;
2330
+ scrollbar-color:initial;
2331
+ transition-timing-function:var(--t-ease-in-out);
2332
+ transition-duration:var(--t-duration-200);
2333
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2334
+ }
2335
+
2336
+ @media (pointer: fine){
2337
+ :is(.tds-input textarea)::-webkit-scrollbar{
2338
+ width:12px;
2339
+ height:12px;
2340
+ cursor:default;
2341
+ }
2342
+
2343
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2344
+ cursor:default;
2345
+ background:var(--tds-input-scrollbar-thumb-color);
2346
+ background-clip:content-box;
2347
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2348
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2349
+ }
2350
+
2351
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2352
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2353
+ }
2354
+
2355
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2356
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2357
+ }
2358
+
2359
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2360
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2361
+ }
2362
+
2363
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
2364
+ background:var(--tds-input-scrollbar-surface-color);
2365
+ }
2366
+
2367
+ :is(.tds-input textarea)::-webkit-resizer{
2368
+ background:var(--tds-input-resizer-icon) no-repeat;
2369
+ background-position:right bottom;
2370
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2371
+ }
2372
+
2373
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
2374
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
2375
+ cursor:default;
2376
+ }
2377
+
2378
+ @supports (-moz-appearance: none){
2379
+ :is(.tds-input textarea){
2380
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2381
+ scrollbar-width:thin;
2382
+ }
2383
+
2384
+ @media (hover){
2385
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2386
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2387
+ }
2388
+ }
2389
+ }
2390
+ }
2391
+
2392
+ .tds-radio{
2393
+ --tds-radio-font-size:var(--t-font-size-md);
2394
+ --tds-radio-cursor:pointer;
2395
+ --tds-radio-line-height:1.4;
2396
+ --tds-radio-transition-property:border-width;
2397
+
2398
+ --tds-radio-input-size:var(--t-element-size-md);
2399
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
2400
+ --tds-radio-input-border-color:var(--t-form-border-color);
2401
+ --tds-radio-input-border-width:var(--t-form-border-width);
2402
+ --tds-radio-input-background-color:var(--t-form-background-color);
2403
+
2404
+ --tds-radio-label-color:var(--t-form-color);
2405
+
2406
+ --tds-radio-description-font-size:var(--t-font-size-sm);
2407
+ --tds-radio-description-line-height:1.35;
2408
+ --tds-radio-description-color:var(--t-text-color-secondary);
2409
+
2410
+ position:relative;
2411
+ display:inline-grid;
2412
+ grid-template-columns:auto;
2413
+ grid-auto-columns:1fr;
2414
+ gap:var(--t-spacing-fourth) 0;
2415
+ line-height:var(--tds-radio-line-height);
2416
+ -webkit-user-select:none;
2417
+ -moz-user-select:none;
2418
+ user-select:none;
2419
+ }
2420
+
2421
+ .tds-radio label{
2422
+ grid-area:1 / 2;
2423
+ padding-inline-start:var(--t-spacing-1);
2424
+ font-size:var(--tds-radio-font-size);
2425
+ font-weight:var(--t-font-weight-normal);
2426
+ color:var(--tds-radio-label-color);
2427
+ cursor:var(--tds-radio-cursor);
2428
+ }
2429
+
2430
+ .tds-radio input[type="radio"]{
2431
+ position:relative;
2432
+ width:1em;
2433
+ height:1em;
2434
+ margin:calc((1lh - 1em) / 2) 0 0;
2435
+ font-size:var(--tds-radio-font-size);
2436
+ line-height:inherit;
2437
+ -webkit-appearance:none;
2438
+ -moz-appearance:none;
2439
+ appearance:none;
2440
+ cursor:var(--tds-radio-cursor);
2441
+ background-color:var(--tds-radio-input-background-color);
2442
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
2443
+ border-radius:var(--tds-radio-input-border-radius);
2444
+ transition-timing-function:var(--t-ease-in-out);
2445
+ transition-duration:var(--t-duration-200);
2446
+ transition-property:var(--tds-radio-transition-property);
2447
+ }
2307
2448
 
2308
- .tds-modal-footer{
2309
- display:flex;
2310
- gap:var(--t-spacing-2);
2311
- align-items:center;
2312
- justify-content:flex-end;
2313
- padding-block-start:var(--t-spacing-3);
2314
- padding-inline:var(--t-spacing-4);
2315
- border-top:1px solid var(--t-border-color);
2316
- }
2449
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
2450
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2451
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
2452
+ }
2317
2453
 
2318
- .tds-modal-footer > [slot="start"]{
2319
- margin-inline-end:auto;
2320
- }
2454
+ :is(.tds-radio input[type="radio"]):focus-visible{
2455
+ outline:var(--t-focus-ring-outline);
2456
+ outline-offset:var(--t-focus-ring-offset);
2457
+ }
2321
2458
 
2322
- .tds-radio-group{
2323
- --tds-radio-group-font-size:var(--t-font-size-md);
2324
- --tds-radio-group-line-height:1.4;
2325
- --tds-radio-group-gap:var(--t-spacing-1);
2459
+ :is(.tds-radio input[type="radio"]):disabled{
2460
+ pointer-events:none;
2461
+ }
2326
2462
 
2327
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
2328
- --tds-radio-group-description-line-height:1.35;
2329
- --tds-radio-group-description-color:var(--t-text-color-secondary);
2330
- --tds-radio-group-description-invalid-icon-display:none;
2331
- display:flex;
2332
- flex-direction:column;
2333
- gap:0;
2334
- padding:0;
2335
- margin:0;
2463
+ @media (prefers-reduced-motion: reduce){
2336
2464
 
2337
- font-size:var(--tds-radio-group-font-size);
2338
- line-height:var(--tds-radio-group-line-height);
2339
- border:0;
2340
- }
2465
+ .tds-radio input[type="radio"]{
2466
+ --tds-radio-transition-property:none;
2467
+ }
2468
+ }
2341
2469
 
2342
- .tds-radio-group legend{
2343
- float:left;
2344
- padding:0;
2345
- margin:0;
2470
+ .tds-radio:has(input:checked){
2471
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2472
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
2473
+ --tds-radio-input-border-width:4px;
2346
2474
  }
2347
2475
 
2348
- .tds-radio-group[aria-invalid="true"]{
2349
- --tds-radio-group-description-color:var(--t-text-color-status-error);
2350
- --tds-radio-group-description-invalid-icon-display:inline-block;
2476
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
2477
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2478
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2479
+ }
2480
+
2481
+ .tds-radio:has(input:user-invalid){
2482
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2351
2483
  }
2352
2484
 
2353
- .tds-radio-group[aria-invalid="true"] .tds-radio{
2354
- --tds-radio-input-border-color:var(--t-form-border-color-error);
2485
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2486
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2487
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2355
2488
  }
2356
2489
 
2357
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2358
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2359
- --tds-radio-input-background-color:var(--t-form-background-color-error);
2360
- }
2490
+ .tds-radio:has(input:disabled){
2491
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2492
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2361
2493
 
2362
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2363
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2364
- }
2494
+ --tds-radio-label-color:var(--t-form-color-disabled);
2495
+ --tds-radio-description-color:var(--t-form-color-disabled);
2496
+ --tds-radio-cursor:not-allowed;
2497
+ }
2365
2498
 
2366
- .tds-radio-group:has(input:required) legend::after{
2367
- margin-left:.25ch;
2368
- color:var(--t-text-color-status-error);
2369
- content:"*";
2499
+ .tds-radio:has(input:disabled) input:checked{
2500
+ --tds-radio-input-background-color:var(--t-form-background-color);
2501
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2370
2502
  }
2371
2503
 
2372
- .tds-radio-group-fields{
2373
- display:flex;
2374
- flex-direction:column;
2375
- gap:var(--tds-radio-group-gap);
2376
- align-items:flex-start;
2377
- margin-top:var(--t-spacing-1);
2378
- }
2379
-
2380
- .tds-radio-group-description{
2504
+ .tds-radio-description{
2381
2505
  display:flex;
2506
+ grid-area:2 / 2;
2382
2507
  gap:var(--t-spacing-half);
2383
2508
  align-items:flex-start;
2384
- margin:var(--t-spacing-fourth) 0 0;
2385
- font-size:var(--tds-radio-group-description-font-size);
2386
- line-height:var(--tds-radio-group-description-line-height);
2387
- color:var(--tds-radio-group-description-color);
2509
+ padding-inline-start:var(--t-spacing-1);
2510
+ margin:0;
2511
+ font-size:var(--tds-radio-description-font-size);
2512
+ line-height:var(--tds-radio-description-line-height);
2513
+ color:var(--tds-radio-description-color);
2388
2514
  cursor:text;
2389
2515
  }
2390
2516
 
2391
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2392
- display:var(--tds-radio-group-description-invalid-icon-display);
2393
- flex-shrink:0;
2394
- margin-top:calc(.5lh - .5em);
2395
- line-height:var(--tds-radio-group-description-line-height);
2396
- }
2397
-
2398
- .tds-radio-group--sm{
2399
- --tds-radio-group-line-height:1.35;
2400
- --tds-radio-group-font-size:var(--t-font-size-sm);
2401
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
2402
- --tds-radio-group-description-line-height:1.3;
2517
+ .tds-radio--sm{
2518
+ --tds-radio-line-height:1.35;
2519
+ --tds-radio-input-size:var(--t-element-size-sm);
2520
+ --tds-radio-font-size:var(--t-font-size-sm);
2521
+ --tds-radio-description-font-size:var(--t-font-size-xs);
2522
+ --tds-radio-description-line-height:1.3;
2403
2523
  }
2404
2524
 
2405
2525
  .tds-toggle-switch{
@@ -2542,111 +2662,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2542
2662
  --tds-toggle-switch-display:inline-flex;
2543
2663
  }
2544
2664
 
2545
- .tds-input:has(textarea){
2546
- --tds-input-padding-block:6px;
2547
- --tds-input-resizer-size:var(--t-element-size-sm);
2548
- --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
2549
- }
2550
-
2551
- @supports (x: attr(x type(*))){
2552
-
2553
- .tds-input textarea{
2554
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
2555
- }
2556
- }
2557
-
2558
- .tds-input.tds-textarea--resize-vertical textarea{
2559
- resize:vertical;
2560
- }
2561
-
2562
- .tds-input.tds-textarea--resize-none textarea{
2563
- resize:none;
2564
- }
2565
-
2566
- .tds-input.tds-textarea--resize-auto textarea{
2567
- resize:vertical;
2568
- }
2569
-
2570
- @supports (field-sizing: content){
2571
- .tds-input.tds-textarea--resize-auto textarea{
2572
- field-sizing:content;
2573
- resize:none;
2574
- }
2575
- }
2576
-
2577
- .tds-input textarea{
2578
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2579
- --tds-input-scrollbar-thumb-color-hidden:transparent;
2580
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2581
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2582
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2583
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2584
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2585
- --tds-input-scrollbar-thumb-border-radius:999px;
2586
- --tds-input-scrollbar-thumb-border-width:3px;
2587
- --tds-input-scrollbar-track-margin-block:.125rem;
2588
- scrollbar-color:initial;
2589
- transition-timing-function:var(--t-ease-in-out);
2590
- transition-duration:var(--t-duration-200);
2591
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2592
- }
2593
-
2594
- @media (pointer: fine){
2595
- :is(.tds-input textarea)::-webkit-scrollbar{
2596
- width:12px;
2597
- height:12px;
2598
- cursor:default;
2599
- }
2600
-
2601
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2602
- cursor:default;
2603
- background:var(--tds-input-scrollbar-thumb-color);
2604
- background-clip:content-box;
2605
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2606
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2607
- }
2608
-
2609
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2610
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2611
- }
2612
-
2613
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2614
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2615
- }
2616
-
2617
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2618
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2619
- }
2620
-
2621
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
2622
- background:var(--tds-input-scrollbar-surface-color);
2623
- }
2624
-
2625
- :is(.tds-input textarea)::-webkit-resizer{
2626
- background:var(--tds-input-resizer-icon) no-repeat;
2627
- background-position:right bottom;
2628
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2629
- }
2630
-
2631
- :is(.tds-input textarea)::-webkit-scrollbar-track{
2632
- margin-block:var(--tds-input-scrollbar-track-margin-block);
2633
- cursor:default;
2634
- }
2635
-
2636
- @supports (-moz-appearance: none){
2637
- :is(.tds-input textarea){
2638
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2639
- scrollbar-width:thin;
2640
- }
2641
-
2642
- @media (hover){
2643
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2644
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2645
- }
2646
- }
2647
- }
2648
- }
2649
-
2650
2665
  .tds-input{
2651
2666
  --tds-input-border-color:var(--t-form-border-color);
2652
2667
  --tds-input-border-color-hover:var(--t-form-border-color-hover);