@planningcenter/tapestry 4.0.0-rc.13 → 4.0.0-rc.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -677,48 +677,6 @@
677
677
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
678
678
  }
679
679
 
680
- .tds-button-group{
681
- display:inline-flex;
682
- }
683
- .tds-button-group > .tds-btn{
684
- --tds-button-group-item-z-index:1;
685
-
686
- position:relative;
687
- z-index:var(--tds-button-group-item-z-index);
688
- border-radius:0;
689
- }
690
- :is(.tds-button-group > .tds-btn):not(:first-child){
691
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
692
- }
693
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
694
- position:absolute;
695
- inset-block:calc(var(--tds-btn-border-width) * -1);
696
- width:var(--tds-btn-border-width);
697
- pointer-events:none;
698
- content:"";
699
- background-color:var(--t-border-color-white);
700
- }
701
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
702
- inset-inline-start:calc(var(--tds-btn-border-width) * -1);
703
- }
704
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
705
- inset-inline-end:calc(var(--tds-btn-border-width) * -1);
706
- }
707
- :is(.tds-button-group > .tds-btn):hover{
708
- --tds-button-group-item-z-index:2;
709
- }
710
- :is(.tds-button-group > .tds-btn):focus-visible{
711
- --tds-button-group-item-z-index:5;
712
- }
713
- .tds-button-group > .tds-btn:first-child{
714
- border-start-start-radius:var(--tds-btn-border-radius);
715
- border-end-start-radius:var(--tds-btn-border-radius);
716
- }
717
- .tds-button-group > .tds-btn:last-child{
718
- border-start-end-radius:var(--tds-btn-border-radius);
719
- border-end-end-radius:var(--tds-btn-border-radius);
720
- }
721
-
722
680
  @layer t-critical{
723
681
  tds-page-header:not(.hydrated){
724
682
  display:none;
@@ -996,6 +954,201 @@
996
954
  }
997
955
  }
998
956
 
957
+ .tds-checkbox{
958
+ --tds-checkbox-font-size:var(--t-font-size-md);
959
+ --tds-checkbox-cursor:pointer;
960
+ --tds-checkbox-line-height:1.4;
961
+ --tds-checkbox-transition-property:background-color, border-color;
962
+
963
+ --tds-checkbox-input-size:var(--t-element-size-md);
964
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
965
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
966
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
967
+
968
+ --tds-checkbox-input-icon:none;
969
+ --tds-checkbox-input-icon-visibility:hidden;
970
+ --tds-checkbox-input-icon-opacity:0;
971
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
972
+
973
+ --tds-checkbox-label-color:var(--t-form-color);
974
+
975
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
976
+ --tds-checkbox-description-line-height:1.35;
977
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
978
+ --tds-checkbox-description-invalid-icon-display:none;
979
+
980
+ position:relative;
981
+ display:inline-grid;
982
+ grid-template-columns:auto;
983
+ grid-auto-columns:1fr;
984
+ gap:var(--t-spacing-fourth) 0;
985
+ line-height:var(--tds-checkbox-line-height);
986
+ -webkit-user-select:none;
987
+ -moz-user-select:none;
988
+ user-select:none;
989
+ }
990
+
991
+ .tds-checkbox label{
992
+ grid-area:1 / 2;
993
+ padding-inline-start:var(--t-spacing-1);
994
+ font-size:var(--tds-checkbox-font-size);
995
+ font-weight:var(--t-font-weight-normal);
996
+ color:var(--tds-checkbox-label-color);
997
+ cursor:var(--tds-checkbox-cursor);
998
+ }
999
+
1000
+ .tds-checkbox tds-indeterminate{
1001
+ display:flex;
1002
+ }
1003
+
1004
+ .tds-checkbox input[type="checkbox"]{
1005
+ position:relative;
1006
+ width:1em;
1007
+ height:1em;
1008
+ margin:calc((1lh - 1em) / 2) 0 0;
1009
+ font-size:var(--tds-checkbox-font-size);
1010
+ line-height:inherit;
1011
+ -webkit-appearance:none;
1012
+ -moz-appearance:none;
1013
+ appearance:none;
1014
+ cursor:var(--tds-checkbox-cursor);
1015
+ background-color:var(--tds-checkbox-input-background-color);
1016
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1017
+ border-radius:var(--tds-checkbox-input-border-radius);
1018
+ transition-timing-function:var(--t-ease-in-out);
1019
+ transition-duration:var(--t-duration-200);
1020
+ transition-property:var(--tds-checkbox-transition-property);
1021
+ }
1022
+
1023
+ :is(.tds-checkbox input[type="checkbox"])::before{
1024
+ position:absolute;
1025
+ top:50%;
1026
+ left:50%;
1027
+ visibility:var(--tds-checkbox-input-icon-visibility);
1028
+ width:100%;
1029
+ height:100%;
1030
+ content:"";
1031
+ background-color:var(--tds-checkbox-input-icon-fill);
1032
+ border-radius:var(--tds-checkbox-input-border-radius);
1033
+ opacity:var(--tds-checkbox-input-icon-opacity);
1034
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
1035
+ mask-image:var(--tds-checkbox-input-icon);
1036
+ -webkit-mask-repeat:no-repeat;
1037
+ mask-repeat:no-repeat;
1038
+ -webkit-mask-size:contain;
1039
+ mask-size:contain;
1040
+ transform:translate(-50%, -50%);
1041
+ }
1042
+
1043
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1044
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1045
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1046
+ }
1047
+
1048
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1049
+ outline:var(--t-focus-ring-outline);
1050
+ outline-offset:var(--t-focus-ring-offset);
1051
+ }
1052
+
1053
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
1054
+ pointer-events:none;
1055
+ }
1056
+
1057
+ @media (prefers-reduced-motion: reduce){
1058
+
1059
+ .tds-checkbox input[type="checkbox"]{
1060
+ --tds-checkbox-transition-property:none;
1061
+ }
1062
+ }
1063
+
1064
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1065
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
1066
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1067
+ --tds-checkbox-input-icon-visibility:visible;
1068
+ --tds-checkbox-input-icon-opacity:1;
1069
+ }
1070
+
1071
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1072
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1073
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1074
+ }
1075
+
1076
+ .tds-checkbox:has(input:checked){
1077
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1078
+ }
1079
+
1080
+ .tds-checkbox:has(input:indeterminate){
1081
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1082
+ }
1083
+
1084
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1085
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1086
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
1087
+ --tds-checkbox-description-invalid-icon-display:inline-block;
1088
+ }
1089
+
1090
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1091
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1092
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1093
+ }
1094
+
1095
+ :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{
1096
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1097
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1098
+ }
1099
+
1100
+ :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){
1101
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1102
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1103
+ }
1104
+
1105
+ .tds-checkbox:has(input:required) label::after{
1106
+ margin-left:.25ch;
1107
+ color:var(--t-text-color-status-error);
1108
+ content:"*";
1109
+ }
1110
+
1111
+ .tds-checkbox:has(input:disabled){
1112
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1113
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1114
+
1115
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
1116
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
1117
+ --tds-checkbox-cursor:not-allowed;
1118
+ }
1119
+
1120
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1121
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1122
+ }
1123
+
1124
+ .tds-checkbox-description{
1125
+ display:flex;
1126
+ grid-area:2 / 2;
1127
+ gap:var(--t-spacing-half);
1128
+ align-items:flex-start;
1129
+ padding-inline-start:var(--t-spacing-1);
1130
+ margin:0;
1131
+ font-size:var(--tds-checkbox-description-font-size);
1132
+ line-height:var(--tds-checkbox-description-line-height);
1133
+ color:var(--tds-checkbox-description-color);
1134
+ cursor:text;
1135
+ }
1136
+
1137
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1138
+ display:var(--tds-checkbox-description-invalid-icon-display);
1139
+ flex-shrink:0;
1140
+ margin-top:calc(.5lh - .5em);
1141
+ line-height:var(--tds-checkbox-description-line-height);
1142
+ }
1143
+
1144
+ .tds-checkbox--sm{
1145
+ --tds-checkbox-line-height:1.35;
1146
+ --tds-checkbox-input-size:var(--t-element-size-sm);
1147
+ --tds-checkbox-font-size:var(--t-font-size-sm);
1148
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
1149
+ --tds-checkbox-description-line-height:1.3;
1150
+ }
1151
+
999
1152
  .tds-checkbox-group{
1000
1153
  --tds-checkbox-group-font-size:var(--t-font-size-md);
1001
1154
  --tds-checkbox-group-line-height:1.4;
@@ -1071,15 +1224,38 @@
1071
1224
  }
1072
1225
 
1073
1226
 
1074
- @media (prefers-reduced-motion: no-preference){
1227
+ :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{
1228
+ -webkit-appearance:none;
1229
+ appearance:none;
1230
+ }
1075
1231
 
1076
- :root{
1077
- interpolate-size:allow-keywords;
1078
- }
1232
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1233
+ inline-size:1em;
1234
+ block-size:2em;
1235
+ }
1236
+ @supports (field-sizing: content){
1237
+ .tds-input--auto-width{
1238
+ inline-size:-moz-fit-content;
1239
+ inline-size:fit-content;
1240
+ min-inline-size:min(100%, 122px);
1079
1241
  }
1080
1242
 
1081
- @layer tds-component{
1082
- tds-sidenav,
1243
+ .tds-input--auto-width input{
1244
+ field-sizing:content;
1245
+ inline-size:auto;
1246
+ }
1247
+ }
1248
+
1249
+
1250
+ @media (prefers-reduced-motion: no-preference){
1251
+
1252
+ :root{
1253
+ interpolate-size:allow-keywords;
1254
+ }
1255
+ }
1256
+
1257
+ @layer tds-component{
1258
+ tds-sidenav,
1083
1259
  .tds-sidenav{
1084
1260
  --tds-sidenav-indent:12px;
1085
1261
  --tds-sidenav-item-depth:0;
@@ -1432,222 +1608,273 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1432
1608
  flex-direction:column;
1433
1609
  }
1434
1610
 
1435
- .tds-checkbox{
1436
- --tds-checkbox-font-size:var(--t-font-size-md);
1437
- --tds-checkbox-cursor:pointer;
1438
- --tds-checkbox-line-height:1.4;
1439
- --tds-checkbox-transition-property:background-color, border-color;
1440
-
1441
- --tds-checkbox-input-size:var(--t-element-size-md);
1442
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1443
- --tds-checkbox-input-border-color:var(--t-form-border-color);
1444
- --tds-checkbox-input-background-color:var(--t-form-background-color);
1445
-
1446
- --tds-checkbox-input-icon:none;
1447
- --tds-checkbox-input-icon-visibility:hidden;
1448
- --tds-checkbox-input-icon-opacity:0;
1449
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1450
-
1451
- --tds-checkbox-label-color:var(--t-form-color);
1452
-
1453
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
1454
- --tds-checkbox-description-line-height:1.35;
1455
- --tds-checkbox-description-color:var(--t-text-color-secondary);
1456
- --tds-checkbox-description-invalid-icon-display:none;
1457
-
1458
- position:relative;
1459
- display:inline-grid;
1460
- grid-template-columns:auto;
1461
- grid-auto-columns:1fr;
1462
- gap:var(--t-spacing-fourth) 0;
1463
- line-height:var(--tds-checkbox-line-height);
1464
- -webkit-user-select:none;
1465
- -moz-user-select:none;
1466
- user-select:none;
1611
+ .tds-button-group{
1612
+ display:inline-flex;
1467
1613
  }
1614
+ .tds-button-group > .tds-btn{
1615
+ --tds-button-group-item-z-index:1;
1468
1616
 
1469
- .tds-checkbox label{
1470
- grid-area:1 / 2;
1471
- padding-inline-start:var(--t-spacing-1);
1472
- font-size:var(--tds-checkbox-font-size);
1473
- font-weight:var(--t-font-weight-normal);
1474
- color:var(--tds-checkbox-label-color);
1475
- cursor:var(--tds-checkbox-cursor);
1476
- }
1477
-
1478
- .tds-checkbox tds-indeterminate{
1479
- display:flex;
1480
- }
1481
-
1482
- .tds-checkbox input[type="checkbox"]{
1483
1617
  position:relative;
1484
- width:1em;
1485
- height:1em;
1486
- margin:calc((1lh - 1em) / 2) 0 0;
1487
- font-size:var(--tds-checkbox-font-size);
1488
- line-height:inherit;
1489
- -webkit-appearance:none;
1490
- -moz-appearance:none;
1491
- appearance:none;
1492
- cursor:var(--tds-checkbox-cursor);
1493
- background-color:var(--tds-checkbox-input-background-color);
1494
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1495
- border-radius:var(--tds-checkbox-input-border-radius);
1496
- transition-timing-function:var(--t-ease-in-out);
1497
- transition-duration:var(--t-duration-200);
1498
- transition-property:var(--tds-checkbox-transition-property);
1618
+ z-index:var(--tds-button-group-item-z-index);
1619
+ border-radius:0;
1499
1620
  }
1500
-
1501
- :is(.tds-checkbox input[type="checkbox"])::before{
1502
- position:absolute;
1503
- top:50%;
1504
- left:50%;
1505
- visibility:var(--tds-checkbox-input-icon-visibility);
1506
- width:100%;
1507
- height:100%;
1508
- content:"";
1509
- background-color:var(--tds-checkbox-input-icon-fill);
1510
- border-radius:var(--tds-checkbox-input-border-radius);
1511
- opacity:var(--tds-checkbox-input-icon-opacity);
1512
- -webkit-mask-image:var(--tds-checkbox-input-icon);
1513
- mask-image:var(--tds-checkbox-input-icon);
1514
- -webkit-mask-repeat:no-repeat;
1515
- mask-repeat:no-repeat;
1516
- -webkit-mask-size:contain;
1517
- mask-size:contain;
1518
- transform:translate(-50%, -50%);
1519
- }
1520
-
1521
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1522
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1523
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1621
+ :is(.tds-button-group > .tds-btn):not(:first-child){
1622
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1524
1623
  }
1525
-
1526
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1527
- outline:var(--t-focus-ring-outline);
1528
- outline-offset:var(--t-focus-ring-offset);
1624
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1625
+ position:absolute;
1626
+ inset-block:calc(var(--tds-btn-border-width) * -1);
1627
+ width:var(--tds-btn-border-width);
1628
+ pointer-events:none;
1629
+ content:"";
1630
+ background-color:var(--t-border-color-white);
1631
+ }
1632
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1633
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1634
+ }
1635
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1636
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1637
+ }
1638
+ :is(.tds-button-group > .tds-btn):hover{
1639
+ --tds-button-group-item-z-index:2;
1529
1640
  }
1530
-
1531
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1532
- pointer-events:none;
1641
+ :is(.tds-button-group > .tds-btn):focus-visible{
1642
+ --tds-button-group-item-z-index:5;
1533
1643
  }
1534
-
1535
- @media (prefers-reduced-motion: reduce){
1536
-
1537
- .tds-checkbox input[type="checkbox"]{
1538
- --tds-checkbox-transition-property:none;
1644
+ .tds-button-group > .tds-btn:first-child{
1645
+ border-start-start-radius:var(--tds-btn-border-radius);
1646
+ border-end-start-radius:var(--tds-btn-border-radius);
1539
1647
  }
1540
- }
1541
-
1542
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1543
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
1544
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1545
- --tds-checkbox-input-icon-visibility:visible;
1546
- --tds-checkbox-input-icon-opacity:1;
1648
+ .tds-button-group > .tds-btn:last-child{
1649
+ border-start-end-radius:var(--tds-btn-border-radius);
1650
+ border-end-end-radius:var(--tds-btn-border-radius);
1547
1651
  }
1548
1652
 
1549
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1550
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1551
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1552
- }
1653
+ .tds-modal-overlay{
1654
+ position:fixed;
1655
+ inset:0;
1656
+ z-index:1000;
1657
+ display:flex;
1658
+ align-items:center;
1659
+ justify-content:center;
1660
+ background:hsl(0 0% 0% / 40%);
1661
+ }
1553
1662
 
1554
- .tds-checkbox:has(input:checked){
1555
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1663
+ .tds-modal-overlay[data-entering]{
1664
+ animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1556
1665
  }
1557
1666
 
1558
- .tds-checkbox:has(input:indeterminate){
1559
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1667
+ .tds-modal-overlay[data-exiting]{
1668
+ animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1560
1669
  }
1561
1670
 
1562
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1563
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1564
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1565
- --tds-checkbox-description-invalid-icon-display:inline-block;
1671
+ @keyframes tds-modal-overlay-fade{
1672
+ from{
1673
+ opacity:0;
1566
1674
  }
1675
+ }
1567
1676
 
1568
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1569
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1570
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1571
- }
1572
-
1573
- :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{
1574
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1575
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1576
- }
1577
-
1578
- :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){
1579
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1580
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1581
- }
1677
+ .tds-modal-frame{
1678
+ --tds-modal-width:600px;
1582
1679
 
1583
- .tds-checkbox:has(input:required) label::after{
1584
- margin-left:.25ch;
1585
- color:var(--t-text-color-status-error);
1586
- content:"*";
1587
- }
1680
+ display:flex;
1681
+ justify-content:center;
1682
+ width:min(var(--tds-modal-width), calc(100% - 48px));
1683
+ }
1588
1684
 
1589
- .tds-checkbox:has(input:disabled){
1590
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1591
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1685
+ .tds-modal-frame[data-entering]{
1686
+ animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1687
+ }
1592
1688
 
1593
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1594
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1595
- --tds-checkbox-cursor:not-allowed;
1689
+ .tds-modal-frame[data-exiting]{
1690
+ animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1596
1691
  }
1597
1692
 
1598
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1599
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1600
- }
1693
+ .tds-modal-frame--sm{
1694
+ --tds-modal-width:400px;
1695
+ }
1601
1696
 
1602
- .tds-checkbox-description{
1603
- display:flex;
1604
- grid-area:2 / 2;
1605
- gap:var(--t-spacing-half);
1606
- align-items:flex-start;
1607
- padding-inline-start:var(--t-spacing-1);
1608
- margin:0;
1609
- font-size:var(--tds-checkbox-description-font-size);
1610
- line-height:var(--tds-checkbox-description-line-height);
1611
- color:var(--tds-checkbox-description-color);
1612
- cursor:text;
1697
+ .tds-modal-frame--lg{
1698
+ --tds-modal-width:800px;
1613
1699
  }
1614
1700
 
1615
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1616
- display:var(--tds-checkbox-description-invalid-icon-display);
1617
- flex-shrink:0;
1618
- margin-top:calc(.5lh - .5em);
1619
- line-height:var(--tds-checkbox-description-line-height);
1620
- }
1701
+ .tds-modal-frame--xl{
1702
+ --tds-modal-width:1000px;
1703
+ }
1621
1704
 
1622
- .tds-checkbox--sm{
1623
- --tds-checkbox-line-height:1.35;
1624
- --tds-checkbox-input-size:var(--t-element-size-sm);
1625
- --tds-checkbox-font-size:var(--t-font-size-sm);
1626
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1627
- --tds-checkbox-description-line-height:1.3;
1705
+ @keyframes tds-modal-zoom{
1706
+ from{
1707
+ opacity:0;
1708
+ scale:.96;
1709
+ }
1628
1710
  }
1629
1711
 
1712
+ @media (prefers-reduced-motion: reduce){
1713
+ .tds-modal-overlay[data-entering],
1714
+ .tds-modal-overlay[data-exiting],
1715
+ .tds-modal-frame[data-entering],
1716
+ .tds-modal-frame[data-exiting]{
1717
+ animation:none;
1718
+ }
1719
+ }
1630
1720
 
1631
- :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{
1632
- -webkit-appearance:none;
1633
- appearance:none;
1721
+ .tds-modal{
1722
+ display:flex;
1723
+ flex-direction:column;
1724
+ width:100%;
1725
+ padding-block:var(--t-spacing-3);
1726
+ padding-inline:0;
1727
+ background:var(--t-surface-color-card);
1728
+
1729
+ border:0;
1730
+ border-radius:var(--t-border-radius-lg);
1731
+ box-shadow:0 4px 18px 0 #0003;
1732
+ }
1733
+
1734
+ .tds-modal:focus{
1735
+ outline:none;
1736
+ }
1737
+
1738
+ .tds-modal-header{
1739
+ display:grid;
1740
+ grid-template-columns:1fr auto;
1741
+ -moz-column-gap:var(--t-spacing-2);
1742
+ column-gap:var(--t-spacing-2);
1743
+ padding-block:0;
1744
+ padding-inline:var(--t-spacing-4);
1745
+ }
1746
+
1747
+ .tds-modal-title{
1748
+ grid-row:1;
1749
+ grid-column:1;
1750
+ margin:0;
1751
+ font-size:var(--t-font-size-2xl);
1752
+ font-weight:var(--t-font-weight-medium);
1753
+ line-height:140%;
1754
+ color:var(--t-text-color-headline);
1755
+ }
1756
+
1757
+ .tds-modal-subtitle{
1758
+ grid-row:2;
1759
+ grid-column:1;
1760
+ margin:0;
1761
+ font-size:var(--t-font-size-md);
1762
+ font-weight:var(--t-font-weight-medium);
1763
+ line-height:140%;
1764
+ color:var(--t-text-color-secondary);
1765
+ }
1766
+
1767
+ .tds-modal-close{
1768
+ grid-row:1;
1769
+ grid-column:2;
1770
+ align-self:center;
1771
+ color:var(--t-icon-color-dim);
1772
+ }
1773
+
1774
+ .tds-modal-body{
1775
+ padding-block:var(--t-spacing-3);
1776
+ padding-inline:var(--t-spacing-4);
1777
+ }
1778
+
1779
+ .tds-modal-body--full-width{
1780
+ padding-inline:0;
1781
+ }
1782
+
1783
+ .tds-modal-footer{
1784
+ display:flex;
1785
+ gap:var(--t-spacing-2);
1786
+ align-items:center;
1787
+ justify-content:flex-end;
1788
+ padding-block-start:var(--t-spacing-3);
1789
+ padding-inline:var(--t-spacing-4);
1790
+ border-top:1px solid var(--t-border-color);
1791
+ }
1792
+
1793
+ .tds-modal-footer > [slot="start"]{
1794
+ margin-inline-end:auto;
1795
+ }
1796
+
1797
+ .tds-radio-group{
1798
+ --tds-radio-group-font-size:var(--t-font-size-md);
1799
+ --tds-radio-group-line-height:1.4;
1800
+ --tds-radio-group-gap:var(--t-spacing-1);
1801
+
1802
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1803
+ --tds-radio-group-description-line-height:1.35;
1804
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1805
+ --tds-radio-group-description-invalid-icon-display:none;
1806
+ display:flex;
1807
+ flex-direction:column;
1808
+ gap:0;
1809
+ padding:0;
1810
+ margin:0;
1811
+
1812
+ font-size:var(--tds-radio-group-font-size);
1813
+ line-height:var(--tds-radio-group-line-height);
1814
+ border:0;
1815
+ }
1816
+
1817
+ .tds-radio-group legend{
1818
+ float:left;
1819
+ padding:0;
1820
+ margin:0;
1821
+ }
1822
+
1823
+ .tds-radio-group[aria-invalid="true"]{
1824
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1825
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1826
+ }
1827
+
1828
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1829
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1634
1830
  }
1635
1831
 
1636
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1637
- inline-size:1em;
1638
- block-size:2em;
1832
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1833
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1834
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1835
+ }
1836
+
1837
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1838
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1839
+ }
1840
+
1841
+ .tds-radio-group:has(input:required) legend::after{
1842
+ margin-left:.25ch;
1843
+ color:var(--t-text-color-status-error);
1844
+ content:"*";
1639
1845
  }
1640
- @supports (field-sizing: content){
1641
- .tds-input--auto-width{
1642
- inline-size:-moz-fit-content;
1643
- inline-size:fit-content;
1644
- min-inline-size:min(100%, 122px);
1645
- }
1646
1846
 
1647
- .tds-input--auto-width input{
1648
- field-sizing:content;
1649
- inline-size:auto;
1847
+ .tds-radio-group-fields{
1848
+ display:flex;
1849
+ flex-direction:column;
1850
+ gap:var(--tds-radio-group-gap);
1851
+ align-items:flex-start;
1852
+ margin-top:var(--t-spacing-1);
1853
+ }
1854
+
1855
+ .tds-radio-group-description{
1856
+ display:flex;
1857
+ gap:var(--t-spacing-half);
1858
+ align-items:flex-start;
1859
+ margin:var(--t-spacing-fourth) 0 0;
1860
+ font-size:var(--tds-radio-group-description-font-size);
1861
+ line-height:var(--tds-radio-group-description-line-height);
1862
+ color:var(--tds-radio-group-description-color);
1863
+ cursor:text;
1864
+ }
1865
+
1866
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1867
+ display:var(--tds-radio-group-description-invalid-icon-display);
1868
+ flex-shrink:0;
1869
+ margin-top:calc(.5lh - .5em);
1870
+ line-height:var(--tds-radio-group-description-line-height);
1650
1871
  }
1872
+
1873
+ .tds-radio-group--sm{
1874
+ --tds-radio-group-line-height:1.35;
1875
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1876
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1877
+ --tds-radio-group-description-line-height:1.3;
1651
1878
  }
1652
1879
 
1653
1880
  .tds-input:has(textarea){
@@ -1755,65 +1982,198 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1755
1982
  }
1756
1983
  }
1757
1984
 
1758
- .tds-toggle-switch{
1759
- --tds-toggle-switch-font-size:var(--t-font-size-md);
1760
- --tds-toggle-switch-cursor:pointer;
1761
- --tds-toggle-switch-display:inline-grid;
1762
- --tds-toggle-switch-line-height:1.4;
1985
+ .tds-radio{
1986
+ --tds-radio-font-size:var(--t-font-size-md);
1987
+ --tds-radio-cursor:pointer;
1988
+ --tds-radio-line-height:1.4;
1989
+ --tds-radio-transition-property:border-width;
1763
1990
 
1764
- --tds-toggle-switch-label-color:var(--t-form-color);
1991
+ --tds-radio-input-size:var(--t-element-size-md);
1992
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
1993
+ --tds-radio-input-border-color:var(--t-form-border-color);
1994
+ --tds-radio-input-border-width:var(--t-form-border-width);
1995
+ --tds-radio-input-background-color:var(--t-form-background-color);
1765
1996
 
1766
- --tds-toggle-switch-track-width:var(--t-container-size-md);
1767
- --tds-toggle-switch-track-outline:none;
1768
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
1769
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1770
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1997
+ --tds-radio-label-color:var(--t-form-color);
1771
1998
 
1772
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1773
- --tds-toggle-switch-thumb-transform:translateX(0);
1774
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1999
+ --tds-radio-description-font-size:var(--t-font-size-sm);
2000
+ --tds-radio-description-line-height:1.35;
2001
+ --tds-radio-description-color:var(--t-text-color-secondary);
1775
2002
 
1776
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1777
- --tds-toggle-switch-description-line-height:1.35;
1778
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1779
2003
  position:relative;
1780
-
1781
- display:var(--tds-toggle-switch-display);
2004
+ display:inline-grid;
1782
2005
  grid-template-columns:auto;
1783
2006
  grid-auto-columns:1fr;
1784
2007
  gap:var(--t-spacing-fourth) 0;
2008
+ line-height:var(--tds-radio-line-height);
1785
2009
  -webkit-user-select:none;
1786
2010
  -moz-user-select:none;
1787
2011
  user-select:none;
1788
2012
  }
1789
2013
 
1790
- .tds-toggle-switch input[type="checkbox"]{
1791
- position:absolute;
1792
- width:var(--tds-toggle-switch-track-width);
1793
- height:var(--tds-toggle-switch-track-height);
1794
- margin:0;
2014
+ .tds-radio label{
2015
+ grid-area:1 / 2;
2016
+ padding-inline-start:var(--t-spacing-1);
2017
+ font-size:var(--tds-radio-font-size);
2018
+ font-weight:var(--t-font-weight-normal);
2019
+ color:var(--tds-radio-label-color);
2020
+ cursor:var(--tds-radio-cursor);
2021
+ }
2022
+
2023
+ .tds-radio input[type="radio"]{
2024
+ position:relative;
2025
+ width:1em;
2026
+ height:1em;
2027
+ margin:calc((1lh - 1em) / 2) 0 0;
2028
+ font-size:var(--tds-radio-font-size);
2029
+ line-height:inherit;
1795
2030
  -webkit-appearance:none;
1796
2031
  -moz-appearance:none;
1797
2032
  appearance:none;
1798
- cursor:var(--tds-toggle-switch-cursor);
1799
- outline:var(--tds-toggle-switch-track-outline);
1800
- outline-offset:var(--t-focus-ring-offset);
1801
- background-color:transparent;
1802
- border:0;
1803
- border-radius:var(--t-border-radius-round);
2033
+ cursor:var(--tds-radio-cursor);
2034
+ background-color:var(--tds-radio-input-background-color);
2035
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
2036
+ border-radius:var(--tds-radio-input-border-radius);
2037
+ transition-timing-function:var(--t-ease-in-out);
2038
+ transition-duration:var(--t-duration-200);
2039
+ transition-property:var(--tds-radio-transition-property);
1804
2040
  }
1805
2041
 
1806
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1807
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2042
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
2043
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2044
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1808
2045
  }
1809
2046
 
1810
- .tds-toggle-switch label{
1811
- display:inline-flex;
1812
- grid-area:1 / 2;
1813
- padding-inline-start:var(--t-spacing-1);
1814
- margin-top:-.09375em;
1815
- font-size:var(--tds-toggle-switch-font-size);
1816
- font-weight:var(--t-font-weight-normal);
2047
+ :is(.tds-radio input[type="radio"]):focus-visible{
2048
+ outline:var(--t-focus-ring-outline);
2049
+ outline-offset:var(--t-focus-ring-offset);
2050
+ }
2051
+
2052
+ :is(.tds-radio input[type="radio"]):disabled{
2053
+ pointer-events:none;
2054
+ }
2055
+
2056
+ @media (prefers-reduced-motion: reduce){
2057
+
2058
+ .tds-radio input[type="radio"]{
2059
+ --tds-radio-transition-property:none;
2060
+ }
2061
+ }
2062
+
2063
+ .tds-radio:has(input:checked){
2064
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2065
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
2066
+ --tds-radio-input-border-width:4px;
2067
+ }
2068
+
2069
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
2070
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2071
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2072
+ }
2073
+
2074
+ .tds-radio:has(input:user-invalid){
2075
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2076
+ }
2077
+
2078
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2079
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2080
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2081
+ }
2082
+
2083
+ .tds-radio:has(input:disabled){
2084
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2085
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2086
+
2087
+ --tds-radio-label-color:var(--t-form-color-disabled);
2088
+ --tds-radio-description-color:var(--t-form-color-disabled);
2089
+ --tds-radio-cursor:not-allowed;
2090
+ }
2091
+
2092
+ .tds-radio:has(input:disabled) input:checked{
2093
+ --tds-radio-input-background-color:var(--t-form-background-color);
2094
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2095
+ }
2096
+
2097
+ .tds-radio-description{
2098
+ display:flex;
2099
+ grid-area:2 / 2;
2100
+ gap:var(--t-spacing-half);
2101
+ align-items:flex-start;
2102
+ padding-inline-start:var(--t-spacing-1);
2103
+ margin:0;
2104
+ font-size:var(--tds-radio-description-font-size);
2105
+ line-height:var(--tds-radio-description-line-height);
2106
+ color:var(--tds-radio-description-color);
2107
+ cursor:text;
2108
+ }
2109
+
2110
+ .tds-radio--sm{
2111
+ --tds-radio-line-height:1.35;
2112
+ --tds-radio-input-size:var(--t-element-size-sm);
2113
+ --tds-radio-font-size:var(--t-font-size-sm);
2114
+ --tds-radio-description-font-size:var(--t-font-size-xs);
2115
+ --tds-radio-description-line-height:1.3;
2116
+ }
2117
+
2118
+ .tds-toggle-switch{
2119
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
2120
+ --tds-toggle-switch-cursor:pointer;
2121
+ --tds-toggle-switch-display:inline-grid;
2122
+ --tds-toggle-switch-line-height:1.4;
2123
+
2124
+ --tds-toggle-switch-label-color:var(--t-form-color);
2125
+
2126
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
2127
+ --tds-toggle-switch-track-outline:none;
2128
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
2129
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
2130
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
2131
+
2132
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
2133
+ --tds-toggle-switch-thumb-transform:translateX(0);
2134
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
2135
+
2136
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
2137
+ --tds-toggle-switch-description-line-height:1.35;
2138
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
2139
+ position:relative;
2140
+
2141
+ display:var(--tds-toggle-switch-display);
2142
+ grid-template-columns:auto;
2143
+ grid-auto-columns:1fr;
2144
+ gap:var(--t-spacing-fourth) 0;
2145
+ -webkit-user-select:none;
2146
+ -moz-user-select:none;
2147
+ user-select:none;
2148
+ }
2149
+
2150
+ .tds-toggle-switch input[type="checkbox"]{
2151
+ position:absolute;
2152
+ width:var(--tds-toggle-switch-track-width);
2153
+ height:var(--tds-toggle-switch-track-height);
2154
+ margin:0;
2155
+ -webkit-appearance:none;
2156
+ -moz-appearance:none;
2157
+ appearance:none;
2158
+ cursor:var(--tds-toggle-switch-cursor);
2159
+ outline:var(--tds-toggle-switch-track-outline);
2160
+ outline-offset:var(--t-focus-ring-offset);
2161
+ background-color:transparent;
2162
+ border:0;
2163
+ border-radius:var(--t-border-radius-round);
2164
+ }
2165
+
2166
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2167
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2168
+ }
2169
+
2170
+ .tds-toggle-switch label{
2171
+ display:inline-flex;
2172
+ grid-area:1 / 2;
2173
+ padding-inline-start:var(--t-spacing-1);
2174
+ margin-top:-.09375em;
2175
+ font-size:var(--tds-toggle-switch-font-size);
2176
+ font-weight:var(--t-font-weight-normal);
1817
2177
  line-height:var(--tds-toggle-switch-line-height);
1818
2178
  color:var(--tds-toggle-switch-label-color);
1819
2179
  cursor:var(--tds-toggle-switch-cursor);
@@ -1878,528 +2238,168 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1878
2238
  margin:0;
1879
2239
  font-size:var(--tds-toggle-switch-description-font-size);
1880
2240
  line-height:var(--tds-toggle-switch-description-line-height);
1881
- color:var(--tds-toggle-switch-description-color);
1882
- cursor:text;
1883
- }
1884
-
1885
- .tds-toggle-switch--sm{
1886
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1887
- --tds-toggle-switch-line-height:1.35;
1888
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1889
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1890
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1891
- --tds-toggle-switch-description-line-height:1.3;
1892
- }
1893
-
1894
- .tds-toggle-switch--hide-label{
1895
- --tds-toggle-switch-display:inline-flex;
1896
- }
1897
-
1898
- .tds-radio-group{
1899
- --tds-radio-group-font-size:var(--t-font-size-md);
1900
- --tds-radio-group-line-height:1.4;
1901
- --tds-radio-group-gap:var(--t-spacing-1);
1902
-
1903
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1904
- --tds-radio-group-description-line-height:1.35;
1905
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1906
- --tds-radio-group-description-invalid-icon-display:none;
1907
- display:flex;
1908
- flex-direction:column;
1909
- gap:0;
1910
- padding:0;
1911
- margin:0;
1912
-
1913
- font-size:var(--tds-radio-group-font-size);
1914
- line-height:var(--tds-radio-group-line-height);
1915
- border:0;
1916
- }
1917
-
1918
- .tds-radio-group legend{
1919
- float:left;
1920
- padding:0;
1921
- margin:0;
1922
- }
1923
-
1924
- .tds-radio-group[aria-invalid="true"]{
1925
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1926
- --tds-radio-group-description-invalid-icon-display:inline-block;
1927
- }
1928
-
1929
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1930
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1931
- }
1932
-
1933
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1934
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1935
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1936
- }
1937
-
1938
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1939
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1940
- }
1941
-
1942
- .tds-radio-group:has(input:required) legend::after{
1943
- margin-left:.25ch;
1944
- color:var(--t-text-color-status-error);
1945
- content:"*";
1946
- }
1947
-
1948
- .tds-radio-group-fields{
1949
- display:flex;
1950
- flex-direction:column;
1951
- gap:var(--tds-radio-group-gap);
1952
- align-items:flex-start;
1953
- margin-top:var(--t-spacing-1);
1954
- }
1955
-
1956
- .tds-radio-group-description{
1957
- display:flex;
1958
- gap:var(--t-spacing-half);
1959
- align-items:flex-start;
1960
- margin:var(--t-spacing-fourth) 0 0;
1961
- font-size:var(--tds-radio-group-description-font-size);
1962
- line-height:var(--tds-radio-group-description-line-height);
1963
- color:var(--tds-radio-group-description-color);
1964
- cursor:text;
1965
- }
1966
-
1967
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1968
- display:var(--tds-radio-group-description-invalid-icon-display);
1969
- flex-shrink:0;
1970
- margin-top:calc(.5lh - .5em);
1971
- line-height:var(--tds-radio-group-description-line-height);
1972
- }
1973
-
1974
- .tds-radio-group--sm{
1975
- --tds-radio-group-line-height:1.35;
1976
- --tds-radio-group-font-size:var(--t-font-size-sm);
1977
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1978
- --tds-radio-group-description-line-height:1.3;
1979
- }
1980
-
1981
- .tds-dropdown-popover{
1982
- min-inline-size:10rem;
1983
- max-inline-size:24rem;
1984
- padding:var(--t-spacing-1);
1985
- overflow:auto;
1986
- overscroll-behavior:none;
1987
- -webkit-user-select:none;
1988
- -moz-user-select:none;
1989
- user-select:none;
1990
- outline:0;
1991
- scrollbar-color:#0004 var(--t-surface-color-card);
1992
- scrollbar-width:thin;
1993
- background:var(--t-surface-color-card);
1994
- background-clip:padding-box;
1995
- border:1px solid var(--t-border-color);
1996
- border-radius:var(--t-border-radius);
1997
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1998
- }
1999
- .tds-dropdown-popover[data-entering]{
2000
- animation:tds-dropdown-popover var(--t-duration-300) var(--t-ease-out);
2001
- }
2002
- .tds-dropdown-popover[data-exiting]{
2003
- animation:tds-dropdown-popover var(--t-duration-200) var(--t-ease-in) reverse;
2004
- }
2005
- .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
2006
- will-change:opacity, transform;
2007
- }
2008
-
2009
- @keyframes tds-dropdown-popover{
2010
- from{
2011
- opacity:0;
2012
- transform:translateY(-8px);
2013
- }
2014
- }
2015
-
2016
- @media (prefers-reduced-motion: reduce){
2017
- .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
2018
- animation:none;
2019
- }
2020
- }
2021
-
2022
- .tds-dropdown-popover [role="menu"]{
2023
- outline:0;
2024
- }
2025
- .tds-dropdown-item{
2026
- --tds-dropdown-item-color:var(--t-text-color);
2027
- --tds-dropdown-item-row-gap:0;
2028
- --tds-dropdown-item-column-gap:var(--t-spacing-1);
2029
-
2030
- display:flex;
2031
- row-gap:var(--tds-dropdown-item-row-gap);
2032
- -moz-column-gap:var(--tds-dropdown-item-column-gap);
2033
- column-gap:var(--tds-dropdown-item-column-gap);
2034
- align-items:center;
2035
- padding-block:var(--t-spacing-1);
2036
- padding-inline:var(--t-spacing-2);
2037
- font-size:1rem;
2038
- color:var(--tds-dropdown-item-color);
2039
- text-decoration:none;
2040
- cursor:default;
2041
- outline:0;
2042
- border-radius:var(--t-border-radius);
2043
- }
2044
- .tds-dropdown-item[data-hovered]:not([data-disabled]),.tds-dropdown-item[data-focus-visible]{
2045
- background:var(--t-fill-color-neutral-070);
2046
- }
2047
- .tds-dropdown-item[data-pressed]:not([data-disabled]){
2048
- background:var(--t-fill-color-neutral-060);
2049
- }
2050
- .tds-dropdown-item[data-disabled]{
2051
- --tds-dropdown-item-color:var(--t-form-color-disabled);
2052
-
2053
- cursor:not-allowed;
2054
- }
2055
-
2056
- .tds-dropdown-item--destructive{
2057
- --tds-dropdown-item-color:var(--t-text-color-status-error);
2058
- }
2059
-
2060
- .tds-dropdown-item--staff-only{
2061
- --tds-dropdown-item-color:var(--t-fill-color-product-staff);
2062
- }
2063
- a.tds-dropdown-item:is(:hover, :active){
2064
- color:var(--tds-dropdown-item-color);
2065
- }
2066
- .tds-dropdown-item [slot="prefix"],
2067
- .tds-dropdown-item [slot="suffix"]{
2068
- flex-shrink:0;
2069
- }
2070
-
2071
- .tds-dropdown-item [slot="label"]{
2072
- flex:1;
2073
- min-width:0;
2074
- overflow:hidden;
2075
- text-overflow:ellipsis;
2076
- white-space:nowrap;
2077
- }
2078
-
2079
- .tds-dropdown-item [slot="description"]{
2080
- font-size:var(--t-font-size-sm);
2081
- color:var(--t-text-color-secondary);
2082
- }
2083
-
2084
- .tds-dropdown-item:has([slot="description"]){
2085
- --tds-dropdown-item-row-gap:var(--t-spacing-half);
2086
- --tds-dropdown-item-column-gap:0;
2087
-
2088
- display:grid;
2089
- grid-template-areas:"prefix label suffix" ". description .";
2090
- grid-template-columns:auto 1fr auto;
2091
- }
2092
-
2093
- .tds-dropdown-item:has([slot="description"]) [slot="prefix"]{
2094
- grid-area:prefix;
2095
- margin-inline-end:var(--t-spacing-1);
2096
- }
2097
-
2098
- .tds-dropdown-item:has([slot="description"]) [slot="label"]{
2099
- grid-area:label;
2100
- }
2101
-
2102
- .tds-dropdown-item:has([slot="description"]) [slot="description"]{
2103
- grid-area:description;
2104
- }
2105
-
2106
- .tds-dropdown-item:has([slot="description"]) [slot="suffix"]{
2107
- grid-area:suffix;
2108
- margin-inline-start:var(--t-spacing-1);
2109
- }
2110
- .tds-dropdown-section:not(:first-child){
2111
- margin-block-start:var(--t-spacing-half);
2112
- }
2113
-
2114
- .tds-dropdown-section-label{
2115
- padding-block:var(--t-spacing-1);
2116
- padding-inline:var(--t-spacing-1);
2117
- font-size:var(--t-font-size-sm);
2118
- font-weight:var(--t-font-weight-semibold);
2119
- color:var(--t-text-color-secondary);
2120
- }
2121
- .tds-dropdown-separator{
2122
- margin-block:var(--t-spacing-half);
2123
- margin-inline:0;
2124
- border:0;
2125
- border-top:1px solid var(--t-border-color);
2126
- }
2127
-
2128
- .tds-modal-overlay{
2129
- position:fixed;
2130
- inset:0;
2131
- z-index:1000;
2132
- display:flex;
2133
- align-items:center;
2134
- justify-content:center;
2135
- background:hsl(0 0% 0% / 40%);
2136
- }
2137
-
2138
- .tds-modal-overlay[data-entering]{
2139
- animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
2140
- }
2141
-
2142
- .tds-modal-overlay[data-exiting]{
2143
- animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
2144
- }
2145
-
2146
- @keyframes tds-modal-overlay-fade{
2147
- from{
2148
- opacity:0;
2149
- }
2150
- }
2151
-
2152
- .tds-modal-frame{
2153
- --tds-modal-width:600px;
2154
-
2155
- display:flex;
2156
- justify-content:center;
2157
- width:min(var(--tds-modal-width), calc(100% - 48px));
2158
- }
2159
-
2160
- .tds-modal-frame[data-entering]{
2161
- animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
2162
- }
2163
-
2164
- .tds-modal-frame[data-exiting]{
2165
- animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
2166
- }
2167
-
2168
- .tds-modal-frame--sm{
2169
- --tds-modal-width:400px;
2170
- }
2171
-
2172
- .tds-modal-frame--lg{
2173
- --tds-modal-width:800px;
2174
- }
2175
-
2176
- .tds-modal-frame--xl{
2177
- --tds-modal-width:1000px;
2178
- }
2179
-
2180
- @keyframes tds-modal-zoom{
2181
- from{
2182
- opacity:0;
2183
- scale:.96;
2184
- }
2185
- }
2186
-
2187
- @media (prefers-reduced-motion: reduce){
2188
- .tds-modal-overlay[data-entering],
2189
- .tds-modal-overlay[data-exiting],
2190
- .tds-modal-frame[data-entering],
2191
- .tds-modal-frame[data-exiting]{
2192
- animation:none;
2193
- }
2194
- }
2195
-
2196
- .tds-modal{
2197
- display:flex;
2198
- flex-direction:column;
2199
- width:100%;
2200
- padding-block:var(--t-spacing-3);
2201
- padding-inline:0;
2202
- background:var(--t-surface-color-card);
2203
-
2204
- border:0;
2205
- border-radius:var(--t-border-radius-lg);
2206
- box-shadow:0 4px 18px 0 #0003;
2207
- }
2208
-
2209
- .tds-modal:focus{
2210
- outline:none;
2211
- }
2212
-
2213
- .tds-modal-header{
2214
- display:grid;
2215
- grid-template-columns:1fr auto;
2216
- -moz-column-gap:var(--t-spacing-2);
2217
- column-gap:var(--t-spacing-2);
2218
- padding-block:0;
2219
- padding-inline:var(--t-spacing-4);
2220
- }
2221
-
2222
- .tds-modal-title{
2223
- grid-row:1;
2224
- grid-column:1;
2225
- margin:0;
2226
- font-size:var(--t-font-size-2xl);
2227
- font-weight:var(--t-font-weight-medium);
2228
- line-height:140%;
2229
- color:var(--t-text-color-headline);
2230
- }
2231
-
2232
- .tds-modal-subtitle{
2233
- grid-row:2;
2234
- grid-column:1;
2235
- margin:0;
2236
- font-size:var(--t-font-size-md);
2237
- font-weight:var(--t-font-weight-medium);
2238
- line-height:140%;
2239
- color:var(--t-text-color-secondary);
2240
- }
2241
-
2242
- .tds-modal-close{
2243
- grid-row:1;
2244
- grid-column:2;
2245
- align-self:center;
2246
- color:var(--t-icon-color-dim);
2247
- }
2248
-
2249
- .tds-modal-body{
2250
- padding-block:var(--t-spacing-3);
2251
- padding-inline:var(--t-spacing-4);
2252
- }
2253
-
2254
- .tds-modal-body--full-width{
2255
- padding-inline:0;
2241
+ color:var(--tds-toggle-switch-description-color);
2242
+ cursor:text;
2256
2243
  }
2257
2244
 
2258
- .tds-modal-footer{
2259
- display:flex;
2260
- gap:var(--t-spacing-2);
2261
- align-items:center;
2262
- justify-content:flex-end;
2263
- padding-block-start:var(--t-spacing-3);
2264
- padding-inline:var(--t-spacing-4);
2265
- border-top:1px solid var(--t-border-color);
2245
+ .tds-toggle-switch--sm{
2246
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
2247
+ --tds-toggle-switch-line-height:1.35;
2248
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
2249
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2250
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2251
+ --tds-toggle-switch-description-line-height:1.3;
2266
2252
  }
2267
2253
 
2268
- .tds-modal-footer > [slot="start"]{
2269
- margin-inline-end:auto;
2254
+ .tds-toggle-switch--hide-label{
2255
+ --tds-toggle-switch-display:inline-flex;
2270
2256
  }
2271
2257
 
2272
- .tds-radio{
2273
- --tds-radio-font-size:var(--t-font-size-md);
2274
- --tds-radio-cursor:pointer;
2275
- --tds-radio-line-height:1.4;
2276
- --tds-radio-transition-property:border-width;
2277
-
2278
- --tds-radio-input-size:var(--t-element-size-md);
2279
- --tds-radio-input-border-radius:var(--t-border-radius-round);
2280
- --tds-radio-input-border-color:var(--t-form-border-color);
2281
- --tds-radio-input-border-width:var(--t-form-border-width);
2282
- --tds-radio-input-background-color:var(--t-form-background-color);
2283
-
2284
- --tds-radio-label-color:var(--t-form-color);
2285
-
2286
- --tds-radio-description-font-size:var(--t-font-size-sm);
2287
- --tds-radio-description-line-height:1.35;
2288
- --tds-radio-description-color:var(--t-text-color-secondary);
2289
-
2290
- position:relative;
2291
- display:inline-grid;
2292
- grid-template-columns:auto;
2293
- grid-auto-columns:1fr;
2294
- gap:var(--t-spacing-fourth) 0;
2295
- line-height:var(--tds-radio-line-height);
2258
+ .tds-dropdown-popover{
2259
+ min-inline-size:10rem;
2260
+ max-inline-size:24rem;
2261
+ padding:var(--t-spacing-1);
2262
+ overflow:auto;
2263
+ overscroll-behavior:none;
2296
2264
  -webkit-user-select:none;
2297
2265
  -moz-user-select:none;
2298
2266
  user-select:none;
2267
+ outline:0;
2268
+ scrollbar-color:#0004 var(--t-surface-color-card);
2269
+ scrollbar-width:thin;
2270
+ background:var(--t-surface-color-card);
2271
+ background-clip:padding-box;
2272
+ border:1px solid var(--t-border-color);
2273
+ border-radius:var(--t-border-radius);
2274
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
2299
2275
  }
2300
-
2301
- .tds-radio label{
2302
- grid-area:1 / 2;
2303
- padding-inline-start:var(--t-spacing-1);
2304
- font-size:var(--tds-radio-font-size);
2305
- font-weight:var(--t-font-weight-normal);
2306
- color:var(--tds-radio-label-color);
2307
- cursor:var(--tds-radio-cursor);
2276
+ .tds-dropdown-popover[data-entering]{
2277
+ animation:tds-dropdown-popover var(--t-duration-300) var(--t-ease-out);
2308
2278
  }
2309
-
2310
- .tds-radio input[type="radio"]{
2311
- position:relative;
2312
- width:1em;
2313
- height:1em;
2314
- margin:calc((1lh - 1em) / 2) 0 0;
2315
- font-size:var(--tds-radio-font-size);
2316
- line-height:inherit;
2317
- -webkit-appearance:none;
2318
- -moz-appearance:none;
2319
- appearance:none;
2320
- cursor:var(--tds-radio-cursor);
2321
- background-color:var(--tds-radio-input-background-color);
2322
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
2323
- border-radius:var(--tds-radio-input-border-radius);
2324
- transition-timing-function:var(--t-ease-in-out);
2325
- transition-duration:var(--t-duration-200);
2326
- transition-property:var(--tds-radio-transition-property);
2279
+ .tds-dropdown-popover[data-exiting]{
2280
+ animation:tds-dropdown-popover var(--t-duration-200) var(--t-ease-in) reverse;
2281
+ }
2282
+ .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
2283
+ will-change:opacity, transform;
2327
2284
  }
2328
2285
 
2329
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
2330
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2331
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
2332
- }
2333
-
2334
- :is(.tds-radio input[type="radio"]):focus-visible{
2335
- outline:var(--t-focus-ring-outline);
2336
- outline-offset:var(--t-focus-ring-offset);
2337
- }
2286
+ @keyframes tds-dropdown-popover{
2287
+ from{
2288
+ opacity:0;
2289
+ transform:translateY(-8px);
2290
+ }
2291
+ }
2338
2292
 
2339
- :is(.tds-radio input[type="radio"]):disabled{
2340
- pointer-events:none;
2293
+ @media (prefers-reduced-motion: reduce){
2294
+ .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
2295
+ animation:none;
2341
2296
  }
2297
+ }
2342
2298
 
2343
- @media (prefers-reduced-motion: reduce){
2299
+ .tds-dropdown-popover [role="menu"]{
2300
+ outline:0;
2301
+ }
2302
+ .tds-dropdown-item{
2303
+ --tds-dropdown-item-color:var(--t-text-color);
2304
+ --tds-dropdown-item-row-gap:0;
2305
+ --tds-dropdown-item-column-gap:var(--t-spacing-1);
2344
2306
 
2345
- .tds-radio input[type="radio"]{
2346
- --tds-radio-transition-property:none;
2307
+ display:flex;
2308
+ row-gap:var(--tds-dropdown-item-row-gap);
2309
+ -moz-column-gap:var(--tds-dropdown-item-column-gap);
2310
+ column-gap:var(--tds-dropdown-item-column-gap);
2311
+ align-items:center;
2312
+ padding-block:var(--t-spacing-1);
2313
+ padding-inline:var(--t-spacing-2);
2314
+ font-size:1rem;
2315
+ color:var(--tds-dropdown-item-color);
2316
+ text-decoration:none;
2317
+ cursor:default;
2318
+ outline:0;
2319
+ border-radius:var(--t-border-radius);
2320
+ }
2321
+ .tds-dropdown-item[data-hovered]:not([data-disabled]),.tds-dropdown-item[data-focus-visible]{
2322
+ background:var(--t-fill-color-neutral-070);
2347
2323
  }
2348
- }
2324
+ .tds-dropdown-item[data-pressed]:not([data-disabled]){
2325
+ background:var(--t-fill-color-neutral-060);
2326
+ }
2327
+ .tds-dropdown-item[data-disabled]{
2328
+ --tds-dropdown-item-color:var(--t-form-color-disabled);
2349
2329
 
2350
- .tds-radio:has(input:checked){
2351
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2352
- --tds-radio-input-border-color:var(--t-border-color-control-info);
2353
- --tds-radio-input-border-width:4px;
2330
+ cursor:not-allowed;
2354
2331
  }
2355
2332
 
2356
- .tds-radio:has(input:checked) input:hover:not(:disabled){
2357
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2358
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2359
- }
2333
+ .tds-dropdown-item--destructive{
2334
+ --tds-dropdown-item-color:var(--t-text-color-status-error);
2335
+ }
2360
2336
 
2361
- .tds-radio:has(input:user-invalid){
2362
- --tds-radio-input-border-color:var(--t-form-border-color-error);
2363
- }
2337
+ .tds-dropdown-item--staff-only{
2338
+ --tds-dropdown-item-color:var(--t-fill-color-product-staff);
2339
+ }
2340
+ a.tds-dropdown-item:is(:hover, :active){
2341
+ color:var(--tds-dropdown-item-color);
2342
+ }
2343
+ .tds-dropdown-item [slot="prefix"],
2344
+ .tds-dropdown-item [slot="suffix"]{
2345
+ flex-shrink:0;
2346
+ }
2364
2347
 
2365
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2366
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2367
- --tds-radio-input-background-color:var(--t-form-background-color-error);
2368
- }
2348
+ .tds-dropdown-item [slot="label"]{
2349
+ flex:1;
2350
+ min-width:0;
2351
+ overflow:hidden;
2352
+ text-overflow:ellipsis;
2353
+ white-space:nowrap;
2354
+ }
2369
2355
 
2370
- .tds-radio:has(input:disabled){
2371
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2372
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2356
+ .tds-dropdown-item [slot="description"]{
2357
+ font-size:var(--t-font-size-sm);
2358
+ color:var(--t-text-color-secondary);
2359
+ }
2373
2360
 
2374
- --tds-radio-label-color:var(--t-form-color-disabled);
2375
- --tds-radio-description-color:var(--t-form-color-disabled);
2376
- --tds-radio-cursor:not-allowed;
2377
- }
2361
+ .tds-dropdown-item:has([slot="description"]){
2362
+ --tds-dropdown-item-row-gap:var(--t-spacing-half);
2363
+ --tds-dropdown-item-column-gap:0;
2378
2364
 
2379
- .tds-radio:has(input:disabled) input:checked{
2380
- --tds-radio-input-background-color:var(--t-form-background-color);
2381
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2382
- }
2365
+ display:grid;
2366
+ grid-template-areas:"prefix label suffix" ". description .";
2367
+ grid-template-columns:auto 1fr auto;
2368
+ }
2383
2369
 
2384
- .tds-radio-description{
2385
- display:flex;
2386
- grid-area:2 / 2;
2387
- gap:var(--t-spacing-half);
2388
- align-items:flex-start;
2389
- padding-inline-start:var(--t-spacing-1);
2390
- margin:0;
2391
- font-size:var(--tds-radio-description-font-size);
2392
- line-height:var(--tds-radio-description-line-height);
2393
- color:var(--tds-radio-description-color);
2394
- cursor:text;
2370
+ .tds-dropdown-item:has([slot="description"]) [slot="prefix"]{
2371
+ grid-area:prefix;
2372
+ margin-inline-end:var(--t-spacing-1);
2395
2373
  }
2396
2374
 
2397
- .tds-radio--sm{
2398
- --tds-radio-line-height:1.35;
2399
- --tds-radio-input-size:var(--t-element-size-sm);
2400
- --tds-radio-font-size:var(--t-font-size-sm);
2401
- --tds-radio-description-font-size:var(--t-font-size-xs);
2402
- --tds-radio-description-line-height:1.3;
2375
+ .tds-dropdown-item:has([slot="description"]) [slot="label"]{
2376
+ grid-area:label;
2377
+ }
2378
+
2379
+ .tds-dropdown-item:has([slot="description"]) [slot="description"]{
2380
+ grid-area:description;
2381
+ }
2382
+
2383
+ .tds-dropdown-item:has([slot="description"]) [slot="suffix"]{
2384
+ grid-area:suffix;
2385
+ margin-inline-start:var(--t-spacing-1);
2386
+ }
2387
+ .tds-dropdown-section:not(:first-child){
2388
+ margin-block-start:var(--t-spacing-half);
2389
+ }
2390
+
2391
+ .tds-dropdown-section-label{
2392
+ padding-block:var(--t-spacing-1);
2393
+ padding-inline:var(--t-spacing-1);
2394
+ font-size:var(--t-font-size-sm);
2395
+ font-weight:var(--t-font-weight-semibold);
2396
+ color:var(--t-text-color-secondary);
2397
+ }
2398
+ .tds-dropdown-separator{
2399
+ margin-block:var(--t-spacing-half);
2400
+ margin-inline:0;
2401
+ border:0;
2402
+ border-top:1px solid var(--t-border-color);
2403
2403
  }
2404
2404
 
2405
2405
  .tds-input{
@@ -4251,9 +4251,16 @@ a.tds-dropdown-item:is(:hover, :active){
4251
4251
  --tds-search-input-clear-button-display:flex;
4252
4252
  }
4253
4253
 
4254
+ .tds-data-table-header-actions{
4255
+ display:flex;
4256
+ gap:var(--t-spacing-1-half);
4257
+ align-items:center;
4258
+ margin-block-end:var(--t-spacing-1-half);
4259
+ }
4254
4260
  .tds-data-table-results-count{
4255
- margin-block:0 var(--t-spacing-1-half);
4261
+ margin:0;
4256
4262
  font-size:var(--t-font-size-md);
4263
+ line-height:1;
4257
4264
  color:var(--t-text-color-secondary);
4258
4265
  }
4259
4266
  .tds-data-table-wrapper{