@planningcenter/tapestry 4.0.0-rc.22 → 4.0.0-rc.23

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.
@@ -1039,6 +1039,317 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1039
1039
  flex-direction:column;
1040
1040
  }
1041
1041
 
1042
+ .tds-checkbox{
1043
+ --tds-checkbox-font-size:var(--t-font-size-md);
1044
+ --tds-checkbox-cursor:pointer;
1045
+ --tds-checkbox-line-height:1.4;
1046
+ --tds-checkbox-transition-property:background-color, border-color;
1047
+
1048
+ --tds-checkbox-input-size:var(--t-element-size-md);
1049
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1050
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
1051
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
1052
+
1053
+ --tds-checkbox-input-icon:none;
1054
+ --tds-checkbox-input-icon-visibility:hidden;
1055
+ --tds-checkbox-input-icon-opacity:0;
1056
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1057
+
1058
+ --tds-checkbox-label-color:var(--t-form-color);
1059
+
1060
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
1061
+ --tds-checkbox-description-line-height:1.35;
1062
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
1063
+ --tds-checkbox-description-invalid-icon-display:none;
1064
+
1065
+ position:relative;
1066
+ display:inline-grid;
1067
+ grid-template-columns:auto;
1068
+ grid-auto-columns:1fr;
1069
+ gap:var(--t-spacing-fourth) 0;
1070
+ line-height:var(--tds-checkbox-line-height);
1071
+ -webkit-user-select:none;
1072
+ -moz-user-select:none;
1073
+ user-select:none;
1074
+ }
1075
+
1076
+ .tds-checkbox label{
1077
+ grid-area:1 / 2;
1078
+ padding-inline-start:var(--t-spacing-1);
1079
+ font-size:var(--tds-checkbox-font-size);
1080
+ font-weight:var(--t-font-weight-normal);
1081
+ color:var(--tds-checkbox-label-color);
1082
+ cursor:var(--tds-checkbox-cursor);
1083
+ }
1084
+
1085
+ .tds-checkbox tds-indeterminate{
1086
+ display:flex;
1087
+ }
1088
+
1089
+ .tds-checkbox input[type="checkbox"]{
1090
+ position:relative;
1091
+ width:1em;
1092
+ height:1em;
1093
+ margin:calc((1lh - 1em) / 2) 0 0;
1094
+ font-size:var(--tds-checkbox-font-size);
1095
+ line-height:inherit;
1096
+ -webkit-appearance:none;
1097
+ -moz-appearance:none;
1098
+ appearance:none;
1099
+ cursor:var(--tds-checkbox-cursor);
1100
+ background-color:var(--tds-checkbox-input-background-color);
1101
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1102
+ border-radius:var(--tds-checkbox-input-border-radius);
1103
+ transition-timing-function:var(--t-ease-in-out);
1104
+ transition-duration:var(--t-duration-200);
1105
+ transition-property:var(--tds-checkbox-transition-property);
1106
+ }
1107
+
1108
+ :is(.tds-checkbox input[type="checkbox"])::before{
1109
+ position:absolute;
1110
+ top:50%;
1111
+ left:50%;
1112
+ visibility:var(--tds-checkbox-input-icon-visibility);
1113
+ width:100%;
1114
+ height:100%;
1115
+ content:"";
1116
+ background-color:var(--tds-checkbox-input-icon-fill);
1117
+ border-radius:var(--tds-checkbox-input-border-radius);
1118
+ opacity:var(--tds-checkbox-input-icon-opacity);
1119
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
1120
+ mask-image:var(--tds-checkbox-input-icon);
1121
+ -webkit-mask-repeat:no-repeat;
1122
+ mask-repeat:no-repeat;
1123
+ -webkit-mask-size:contain;
1124
+ mask-size:contain;
1125
+ transform:translate(-50%, -50%);
1126
+ }
1127
+
1128
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1129
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1130
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1131
+ }
1132
+
1133
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1134
+ outline:var(--t-focus-ring-outline);
1135
+ outline-offset:var(--t-focus-ring-offset);
1136
+ }
1137
+
1138
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
1139
+ pointer-events:none;
1140
+ }
1141
+
1142
+ @media (prefers-reduced-motion: reduce){
1143
+
1144
+ .tds-checkbox input[type="checkbox"]{
1145
+ --tds-checkbox-transition-property:none;
1146
+ }
1147
+ }
1148
+
1149
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1150
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
1151
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1152
+ --tds-checkbox-input-icon-visibility:visible;
1153
+ --tds-checkbox-input-icon-opacity:1;
1154
+ }
1155
+
1156
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1157
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1158
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1159
+ }
1160
+
1161
+ .tds-checkbox:has(input:checked){
1162
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1163
+ }
1164
+
1165
+ .tds-checkbox:has(input:indeterminate){
1166
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1167
+ }
1168
+
1169
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1170
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1171
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
1172
+ --tds-checkbox-description-invalid-icon-display:inline-block;
1173
+ }
1174
+
1175
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1176
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1177
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1178
+ }
1179
+
1180
+ :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{
1181
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1182
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1183
+ }
1184
+
1185
+ :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){
1186
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1187
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1188
+ }
1189
+
1190
+ .tds-checkbox:has(input:required) label::after{
1191
+ margin-left:.25ch;
1192
+ color:var(--t-text-color-status-error);
1193
+ content:"*";
1194
+ }
1195
+
1196
+ .tds-checkbox:has(input:disabled){
1197
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1198
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1199
+
1200
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
1201
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
1202
+ --tds-checkbox-cursor:not-allowed;
1203
+ }
1204
+
1205
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1206
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1207
+ }
1208
+
1209
+ .tds-checkbox-description{
1210
+ display:flex;
1211
+ grid-area:2 / 2;
1212
+ gap:var(--t-spacing-half);
1213
+ align-items:flex-start;
1214
+ padding-inline-start:var(--t-spacing-1);
1215
+ margin:0;
1216
+ font-size:var(--tds-checkbox-description-font-size);
1217
+ line-height:var(--tds-checkbox-description-line-height);
1218
+ color:var(--tds-checkbox-description-color);
1219
+ cursor:text;
1220
+ }
1221
+
1222
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1223
+ display:var(--tds-checkbox-description-invalid-icon-display);
1224
+ flex-shrink:0;
1225
+ margin-top:calc(.5lh - .5em);
1226
+ line-height:var(--tds-checkbox-description-line-height);
1227
+ }
1228
+
1229
+ .tds-checkbox--sm{
1230
+ --tds-checkbox-line-height:1.35;
1231
+ --tds-checkbox-input-size:var(--t-element-size-sm);
1232
+ --tds-checkbox-font-size:var(--t-font-size-sm);
1233
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
1234
+ --tds-checkbox-description-line-height:1.3;
1235
+ }
1236
+
1237
+ .tds-checkbox-group{
1238
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1239
+ --tds-checkbox-group-line-height:1.4;
1240
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1241
+
1242
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1243
+ --tds-checkbox-group-description-line-height:1.35;
1244
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1245
+ --tds-checkbox-group-description-invalid-icon-display:none;
1246
+ display:flex;
1247
+ flex-direction:column;
1248
+ gap:0;
1249
+ padding:0;
1250
+ margin:0;
1251
+
1252
+ font-size:var(--tds-checkbox-group-font-size);
1253
+ line-height:var(--tds-checkbox-group-line-height);
1254
+ border:0;
1255
+ }
1256
+
1257
+ .tds-checkbox-group legend{
1258
+ float:left;
1259
+ padding:0;
1260
+ margin:0;
1261
+ }
1262
+
1263
+ .tds-checkbox-group[aria-invalid="true"]{
1264
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1265
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1266
+ }
1267
+
1268
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1269
+ margin-left:.25ch;
1270
+ color:var(--t-text-color-status-error);
1271
+ content:"*";
1272
+ }
1273
+
1274
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1275
+ content:none;
1276
+ }
1277
+
1278
+ .tds-checkbox-group-fields{
1279
+ display:flex;
1280
+ flex-direction:column;
1281
+ gap:var(--tds-checkbox-group-gap);
1282
+ align-items:flex-start;
1283
+ margin-top:var(--t-spacing-1);
1284
+ }
1285
+
1286
+ .tds-checkbox-group-description{
1287
+ display:flex;
1288
+ gap:var(--t-spacing-half);
1289
+ align-items:flex-start;
1290
+ margin:var(--t-spacing-fourth) 0 0;
1291
+ font-size:var(--tds-checkbox-group-description-font-size);
1292
+ line-height:var(--tds-checkbox-group-description-line-height);
1293
+ color:var(--tds-checkbox-group-description-color);
1294
+ cursor:text;
1295
+ }
1296
+
1297
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1298
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1299
+ flex-shrink:0;
1300
+ margin-top:calc(.5lh - .5em);
1301
+ line-height:var(--tds-checkbox-group-description-line-height);
1302
+ }
1303
+
1304
+ .tds-checkbox-group--sm{
1305
+ --tds-checkbox-group-line-height:1.35;
1306
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1307
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1308
+ --tds-checkbox-group-description-line-height:1.3;
1309
+ }
1310
+
1311
+ .tds-button-group{
1312
+ display:inline-flex;
1313
+ }
1314
+ .tds-button-group > .tds-btn{
1315
+ --tds-button-group-item-z-index:1;
1316
+
1317
+ position:relative;
1318
+ z-index:var(--tds-button-group-item-z-index);
1319
+ border-radius:0;
1320
+ }
1321
+ :is(.tds-button-group > .tds-btn):not(:first-child){
1322
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1323
+ }
1324
+ :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{
1325
+ position:absolute;
1326
+ inset-block:calc(var(--tds-btn-border-width) * -1);
1327
+ width:var(--tds-btn-border-width);
1328
+ pointer-events:none;
1329
+ content:"";
1330
+ background-color:var(--t-border-color-white);
1331
+ }
1332
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1333
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1334
+ }
1335
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1336
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1337
+ }
1338
+ :is(.tds-button-group > .tds-btn):hover{
1339
+ --tds-button-group-item-z-index:2;
1340
+ }
1341
+ :is(.tds-button-group > .tds-btn):focus-visible{
1342
+ --tds-button-group-item-z-index:5;
1343
+ }
1344
+ .tds-button-group > .tds-btn:first-child{
1345
+ border-start-start-radius:var(--tds-btn-border-radius);
1346
+ border-end-start-radius:var(--tds-btn-border-radius);
1347
+ }
1348
+ .tds-button-group > .tds-btn:last-child{
1349
+ border-start-end-radius:var(--tds-btn-border-radius);
1350
+ border-end-end-radius:var(--tds-btn-border-radius);
1351
+ }
1352
+
1042
1353
  @layer t-critical{
1043
1354
  tds-page-header:not(.hydrated){
1044
1355
  display:none;
@@ -1314,49 +1625,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1314
1625
  opacity:0;
1315
1626
  transform:scale(1.75);
1316
1627
  }
1317
- }
1318
-
1319
- .tds-button-group{
1320
- display:inline-flex;
1321
- }
1322
- .tds-button-group > .tds-btn{
1323
- --tds-button-group-item-z-index:1;
1324
-
1325
- position:relative;
1326
- z-index:var(--tds-button-group-item-z-index);
1327
- border-radius:0;
1328
- }
1329
- :is(.tds-button-group > .tds-btn):not(:first-child){
1330
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1331
- }
1332
- :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{
1333
- position:absolute;
1334
- inset-block:calc(var(--tds-btn-border-width) * -1);
1335
- width:var(--tds-btn-border-width);
1336
- pointer-events:none;
1337
- content:"";
1338
- background-color:var(--t-border-color-white);
1339
- }
1340
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1341
- inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1342
- }
1343
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1344
- inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1345
- }
1346
- :is(.tds-button-group > .tds-btn):hover{
1347
- --tds-button-group-item-z-index:2;
1348
- }
1349
- :is(.tds-button-group > .tds-btn):focus-visible{
1350
- --tds-button-group-item-z-index:5;
1351
- }
1352
- .tds-button-group > .tds-btn:first-child{
1353
- border-start-start-radius:var(--tds-btn-border-radius);
1354
- border-end-start-radius:var(--tds-btn-border-radius);
1355
- }
1356
- .tds-button-group > .tds-btn:last-child{
1357
- border-start-end-radius:var(--tds-btn-border-radius);
1358
- border-end-end-radius:var(--tds-btn-border-radius);
1359
- }
1628
+ }
1360
1629
 
1361
1630
  .tds-dropdown-popover{
1362
1631
  min-inline-size:10rem;
@@ -1505,296 +1774,27 @@ a.tds-dropdown-item:is(:hover, :active){
1505
1774
  border-top:1px solid var(--t-border-color);
1506
1775
  }
1507
1776
 
1508
- .tds-checkbox-group{
1509
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1510
- --tds-checkbox-group-line-height:1.4;
1511
- --tds-checkbox-group-gap:var(--t-spacing-1);
1512
-
1513
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1514
- --tds-checkbox-group-description-line-height:1.35;
1515
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1516
- --tds-checkbox-group-description-invalid-icon-display:none;
1517
- display:flex;
1518
- flex-direction:column;
1519
- gap:0;
1520
- padding:0;
1521
- margin:0;
1522
-
1523
- font-size:var(--tds-checkbox-group-font-size);
1524
- line-height:var(--tds-checkbox-group-line-height);
1525
- border:0;
1526
- }
1527
-
1528
- .tds-checkbox-group legend{
1529
- float:left;
1530
- padding:0;
1531
- margin:0;
1532
- }
1533
-
1534
- .tds-checkbox-group[aria-invalid="true"]{
1535
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1536
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1537
- }
1538
-
1539
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1540
- margin-left:.25ch;
1541
- color:var(--t-text-color-status-error);
1542
- content:"*";
1543
- }
1544
-
1545
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1546
- content:none;
1547
- }
1548
-
1549
- .tds-checkbox-group-fields{
1550
- display:flex;
1551
- flex-direction:column;
1552
- gap:var(--tds-checkbox-group-gap);
1553
- align-items:flex-start;
1554
- margin-top:var(--t-spacing-1);
1555
- }
1556
-
1557
- .tds-checkbox-group-description{
1558
- display:flex;
1559
- gap:var(--t-spacing-half);
1560
- align-items:flex-start;
1561
- margin:var(--t-spacing-fourth) 0 0;
1562
- font-size:var(--tds-checkbox-group-description-font-size);
1563
- line-height:var(--tds-checkbox-group-description-line-height);
1564
- color:var(--tds-checkbox-group-description-color);
1565
- cursor:text;
1566
- }
1567
-
1568
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1569
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1570
- flex-shrink:0;
1571
- margin-top:calc(.5lh - .5em);
1572
- line-height:var(--tds-checkbox-group-description-line-height);
1573
- }
1574
-
1575
- .tds-checkbox-group--sm{
1576
- --tds-checkbox-group-line-height:1.35;
1577
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1578
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1579
- --tds-checkbox-group-description-line-height:1.3;
1580
- }
1581
-
1582
-
1583
- :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{
1584
- -webkit-appearance:none;
1585
- appearance:none;
1586
- }
1587
-
1588
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1589
- inline-size:1em;
1590
- block-size:2em;
1591
- }
1592
- @supports (field-sizing: content){
1593
- .tds-input--auto-width{
1594
- inline-size:-moz-fit-content;
1595
- inline-size:fit-content;
1596
- min-inline-size:min(100%, 122px);
1597
- }
1598
-
1599
- .tds-input--auto-width input{
1600
- field-sizing:content;
1601
- inline-size:auto;
1602
- }
1603
- }
1604
-
1605
- .tds-checkbox{
1606
- --tds-checkbox-font-size:var(--t-font-size-md);
1607
- --tds-checkbox-cursor:pointer;
1608
- --tds-checkbox-line-height:1.4;
1609
- --tds-checkbox-transition-property:background-color, border-color;
1610
-
1611
- --tds-checkbox-input-size:var(--t-element-size-md);
1612
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1613
- --tds-checkbox-input-border-color:var(--t-form-border-color);
1614
- --tds-checkbox-input-background-color:var(--t-form-background-color);
1615
-
1616
- --tds-checkbox-input-icon:none;
1617
- --tds-checkbox-input-icon-visibility:hidden;
1618
- --tds-checkbox-input-icon-opacity:0;
1619
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1620
-
1621
- --tds-checkbox-label-color:var(--t-form-color);
1622
-
1623
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
1624
- --tds-checkbox-description-line-height:1.35;
1625
- --tds-checkbox-description-color:var(--t-text-color-secondary);
1626
- --tds-checkbox-description-invalid-icon-display:none;
1627
-
1628
- position:relative;
1629
- display:inline-grid;
1630
- grid-template-columns:auto;
1631
- grid-auto-columns:1fr;
1632
- gap:var(--t-spacing-fourth) 0;
1633
- line-height:var(--tds-checkbox-line-height);
1634
- -webkit-user-select:none;
1635
- -moz-user-select:none;
1636
- user-select:none;
1637
- }
1638
-
1639
- .tds-checkbox label{
1640
- grid-area:1 / 2;
1641
- padding-inline-start:var(--t-spacing-1);
1642
- font-size:var(--tds-checkbox-font-size);
1643
- font-weight:var(--t-font-weight-normal);
1644
- color:var(--tds-checkbox-label-color);
1645
- cursor:var(--tds-checkbox-cursor);
1646
- }
1647
-
1648
- .tds-checkbox tds-indeterminate{
1649
- display:flex;
1650
- }
1651
-
1652
- .tds-checkbox input[type="checkbox"]{
1653
- position:relative;
1654
- width:1em;
1655
- height:1em;
1656
- margin:calc((1lh - 1em) / 2) 0 0;
1657
- font-size:var(--tds-checkbox-font-size);
1658
- line-height:inherit;
1659
- -webkit-appearance:none;
1660
- -moz-appearance:none;
1661
- appearance:none;
1662
- cursor:var(--tds-checkbox-cursor);
1663
- background-color:var(--tds-checkbox-input-background-color);
1664
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1665
- border-radius:var(--tds-checkbox-input-border-radius);
1666
- transition-timing-function:var(--t-ease-in-out);
1667
- transition-duration:var(--t-duration-200);
1668
- transition-property:var(--tds-checkbox-transition-property);
1669
- }
1670
-
1671
- :is(.tds-checkbox input[type="checkbox"])::before{
1672
- position:absolute;
1673
- top:50%;
1674
- left:50%;
1675
- visibility:var(--tds-checkbox-input-icon-visibility);
1676
- width:100%;
1677
- height:100%;
1678
- content:"";
1679
- background-color:var(--tds-checkbox-input-icon-fill);
1680
- border-radius:var(--tds-checkbox-input-border-radius);
1681
- opacity:var(--tds-checkbox-input-icon-opacity);
1682
- -webkit-mask-image:var(--tds-checkbox-input-icon);
1683
- mask-image:var(--tds-checkbox-input-icon);
1684
- -webkit-mask-repeat:no-repeat;
1685
- mask-repeat:no-repeat;
1686
- -webkit-mask-size:contain;
1687
- mask-size:contain;
1688
- transform:translate(-50%, -50%);
1689
- }
1690
-
1691
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1692
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1693
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1694
- }
1695
-
1696
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1697
- outline:var(--t-focus-ring-outline);
1698
- outline-offset:var(--t-focus-ring-offset);
1699
- }
1700
-
1701
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1702
- pointer-events:none;
1703
- }
1704
-
1705
- @media (prefers-reduced-motion: reduce){
1706
-
1707
- .tds-checkbox input[type="checkbox"]{
1708
- --tds-checkbox-transition-property:none;
1709
- }
1710
- }
1711
-
1712
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1713
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
1714
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1715
- --tds-checkbox-input-icon-visibility:visible;
1716
- --tds-checkbox-input-icon-opacity:1;
1717
- }
1718
-
1719
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1720
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1721
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1722
- }
1723
-
1724
- .tds-checkbox:has(input:checked){
1725
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1726
- }
1727
-
1728
- .tds-checkbox:has(input:indeterminate){
1729
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1730
- }
1731
-
1732
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1733
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1734
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1735
- --tds-checkbox-description-invalid-icon-display:inline-block;
1736
- }
1737
-
1738
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1739
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1740
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1741
- }
1742
-
1743
- :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{
1744
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1745
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1746
- }
1747
-
1748
- :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){
1749
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1750
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1751
- }
1752
-
1753
- .tds-checkbox:has(input:required) label::after{
1754
- margin-left:.25ch;
1755
- color:var(--t-text-color-status-error);
1756
- content:"*";
1757
- }
1758
-
1759
- .tds-checkbox:has(input:disabled){
1760
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1761
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1762
-
1763
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1764
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1765
- --tds-checkbox-cursor:not-allowed;
1766
- }
1767
1777
 
1768
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1769
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1778
+ :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{
1779
+ -webkit-appearance:none;
1780
+ appearance:none;
1770
1781
  }
1771
1782
 
1772
- .tds-checkbox-description{
1773
- display:flex;
1774
- grid-area:2 / 2;
1775
- gap:var(--t-spacing-half);
1776
- align-items:flex-start;
1777
- padding-inline-start:var(--t-spacing-1);
1778
- margin:0;
1779
- font-size:var(--tds-checkbox-description-font-size);
1780
- line-height:var(--tds-checkbox-description-line-height);
1781
- color:var(--tds-checkbox-description-color);
1782
- cursor:text;
1783
- }
1784
-
1785
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1786
- display:var(--tds-checkbox-description-invalid-icon-display);
1787
- flex-shrink:0;
1788
- margin-top:calc(.5lh - .5em);
1789
- line-height:var(--tds-checkbox-description-line-height);
1783
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1784
+ inline-size:1em;
1785
+ block-size:2em;
1786
+ }
1787
+ @supports (field-sizing: content){
1788
+ .tds-input--auto-width{
1789
+ inline-size:-moz-fit-content;
1790
+ inline-size:fit-content;
1791
+ min-inline-size:min(100%, 122px);
1790
1792
  }
1791
1793
 
1792
- .tds-checkbox--sm{
1793
- --tds-checkbox-line-height:1.35;
1794
- --tds-checkbox-input-size:var(--t-element-size-sm);
1795
- --tds-checkbox-font-size:var(--t-font-size-sm);
1796
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1797
- --tds-checkbox-description-line-height:1.3;
1794
+ .tds-input--auto-width input{
1795
+ field-sizing:content;
1796
+ inline-size:auto;
1797
+ }
1798
1798
  }
1799
1799
 
1800
1800
  .tds-modal-overlay{
@@ -1874,71 +1874,287 @@ a.tds-dropdown-item:is(:hover, :active){
1874
1874
  background:var(--t-surface-color-card);
1875
1875
 
1876
1876
  border:0;
1877
- border-radius:var(--t-border-radius-lg);
1878
- box-shadow:0 4px 18px 0 #0003;
1877
+ border-radius:var(--t-border-radius-lg);
1878
+ box-shadow:0 4px 18px 0 #0003;
1879
+ }
1880
+
1881
+ .tds-modal:focus{
1882
+ outline:none;
1883
+ }
1884
+
1885
+ .tds-modal-header{
1886
+ display:grid;
1887
+ grid-template-columns:1fr auto;
1888
+ -moz-column-gap:var(--t-spacing-2);
1889
+ column-gap:var(--t-spacing-2);
1890
+ padding-block:0;
1891
+ padding-inline:var(--t-spacing-4);
1892
+ }
1893
+
1894
+ .tds-modal-title{
1895
+ grid-row:1;
1896
+ grid-column:1;
1897
+ margin:0;
1898
+ font-size:var(--t-font-size-2xl);
1899
+ font-weight:var(--t-font-weight-medium);
1900
+ line-height:140%;
1901
+ color:var(--t-text-color-headline);
1902
+ }
1903
+
1904
+ .tds-modal-subtitle{
1905
+ grid-row:2;
1906
+ grid-column:1;
1907
+ margin:0;
1908
+ font-size:var(--t-font-size-md);
1909
+ font-weight:var(--t-font-weight-medium);
1910
+ line-height:140%;
1911
+ color:var(--t-text-color-secondary);
1912
+ }
1913
+
1914
+ .tds-modal-close{
1915
+ grid-row:1;
1916
+ grid-column:2;
1917
+ align-self:center;
1918
+ color:var(--t-icon-color-dim);
1919
+ }
1920
+
1921
+ .tds-modal-body{
1922
+ padding-block:var(--t-spacing-3);
1923
+ padding-inline:var(--t-spacing-4);
1924
+ }
1925
+
1926
+ .tds-modal-body--full-width{
1927
+ padding-inline:0;
1928
+ }
1929
+
1930
+ .tds-modal-footer{
1931
+ display:flex;
1932
+ gap:var(--t-spacing-2);
1933
+ align-items:center;
1934
+ justify-content:flex-end;
1935
+ padding-block-start:var(--t-spacing-3);
1936
+ padding-inline:var(--t-spacing-4);
1937
+ border-top:1px solid var(--t-border-color);
1938
+ }
1939
+
1940
+ .tds-modal-footer > [slot="start"]{
1941
+ margin-inline-end:auto;
1942
+ }
1943
+
1944
+ .tds-radio{
1945
+ --tds-radio-font-size:var(--t-font-size-md);
1946
+ --tds-radio-cursor:pointer;
1947
+ --tds-radio-line-height:1.4;
1948
+ --tds-radio-transition-property:border-width;
1949
+
1950
+ --tds-radio-input-size:var(--t-element-size-md);
1951
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
1952
+ --tds-radio-input-border-color:var(--t-form-border-color);
1953
+ --tds-radio-input-border-width:var(--t-form-border-width);
1954
+ --tds-radio-input-background-color:var(--t-form-background-color);
1955
+
1956
+ --tds-radio-label-color:var(--t-form-color);
1957
+
1958
+ --tds-radio-description-font-size:var(--t-font-size-sm);
1959
+ --tds-radio-description-line-height:1.35;
1960
+ --tds-radio-description-color:var(--t-text-color-secondary);
1961
+
1962
+ position:relative;
1963
+ display:inline-grid;
1964
+ grid-template-columns:auto;
1965
+ grid-auto-columns:1fr;
1966
+ gap:var(--t-spacing-fourth) 0;
1967
+ line-height:var(--tds-radio-line-height);
1968
+ -webkit-user-select:none;
1969
+ -moz-user-select:none;
1970
+ user-select:none;
1971
+ }
1972
+
1973
+ .tds-radio label{
1974
+ grid-area:1 / 2;
1975
+ padding-inline-start:var(--t-spacing-1);
1976
+ font-size:var(--tds-radio-font-size);
1977
+ font-weight:var(--t-font-weight-normal);
1978
+ color:var(--tds-radio-label-color);
1979
+ cursor:var(--tds-radio-cursor);
1980
+ }
1981
+
1982
+ .tds-radio input[type="radio"]{
1983
+ position:relative;
1984
+ width:1em;
1985
+ height:1em;
1986
+ margin:calc((1lh - 1em) / 2) 0 0;
1987
+ font-size:var(--tds-radio-font-size);
1988
+ line-height:inherit;
1989
+ -webkit-appearance:none;
1990
+ -moz-appearance:none;
1991
+ appearance:none;
1992
+ cursor:var(--tds-radio-cursor);
1993
+ background-color:var(--tds-radio-input-background-color);
1994
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1995
+ border-radius:var(--tds-radio-input-border-radius);
1996
+ transition-timing-function:var(--t-ease-in-out);
1997
+ transition-duration:var(--t-duration-200);
1998
+ transition-property:var(--tds-radio-transition-property);
1999
+ }
2000
+
2001
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
2002
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2003
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
2004
+ }
2005
+
2006
+ :is(.tds-radio input[type="radio"]):focus-visible{
2007
+ outline:var(--t-focus-ring-outline);
2008
+ outline-offset:var(--t-focus-ring-offset);
2009
+ }
2010
+
2011
+ :is(.tds-radio input[type="radio"]):disabled{
2012
+ pointer-events:none;
2013
+ }
2014
+
2015
+ @media (prefers-reduced-motion: reduce){
2016
+
2017
+ .tds-radio input[type="radio"]{
2018
+ --tds-radio-transition-property:none;
2019
+ }
2020
+ }
2021
+
2022
+ .tds-radio:has(input:checked){
2023
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2024
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
2025
+ --tds-radio-input-border-width:4px;
2026
+ }
2027
+
2028
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
2029
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2030
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2031
+ }
2032
+
2033
+ .tds-radio:has(input:user-invalid){
2034
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2035
+ }
2036
+
2037
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2038
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2039
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2040
+ }
2041
+
2042
+ .tds-radio:has(input:disabled){
2043
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2044
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2045
+
2046
+ --tds-radio-label-color:var(--t-form-color-disabled);
2047
+ --tds-radio-description-color:var(--t-form-color-disabled);
2048
+ --tds-radio-cursor:not-allowed;
2049
+ }
2050
+
2051
+ .tds-radio:has(input:disabled) input:checked{
2052
+ --tds-radio-input-background-color:var(--t-form-background-color);
2053
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2054
+ }
2055
+
2056
+ .tds-radio-description{
2057
+ display:flex;
2058
+ grid-area:2 / 2;
2059
+ gap:var(--t-spacing-half);
2060
+ align-items:flex-start;
2061
+ padding-inline-start:var(--t-spacing-1);
2062
+ margin:0;
2063
+ font-size:var(--tds-radio-description-font-size);
2064
+ line-height:var(--tds-radio-description-line-height);
2065
+ color:var(--tds-radio-description-color);
2066
+ cursor:text;
2067
+ }
2068
+
2069
+ .tds-radio--sm{
2070
+ --tds-radio-line-height:1.35;
2071
+ --tds-radio-input-size:var(--t-element-size-sm);
2072
+ --tds-radio-font-size:var(--t-font-size-sm);
2073
+ --tds-radio-description-font-size:var(--t-font-size-xs);
2074
+ --tds-radio-description-line-height:1.3;
2075
+ }
2076
+
2077
+ .tds-radio-group{
2078
+ --tds-radio-group-font-size:var(--t-font-size-md);
2079
+ --tds-radio-group-line-height:1.4;
2080
+ --tds-radio-group-gap:var(--t-spacing-1);
2081
+
2082
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
2083
+ --tds-radio-group-description-line-height:1.35;
2084
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
2085
+ --tds-radio-group-description-invalid-icon-display:none;
2086
+ display:flex;
2087
+ flex-direction:column;
2088
+ gap:0;
2089
+ padding:0;
2090
+ margin:0;
2091
+
2092
+ font-size:var(--tds-radio-group-font-size);
2093
+ line-height:var(--tds-radio-group-line-height);
2094
+ border:0;
1879
2095
  }
1880
2096
 
1881
- .tds-modal:focus{
1882
- outline:none;
2097
+ .tds-radio-group legend{
2098
+ float:left;
2099
+ padding:0;
2100
+ margin:0;
1883
2101
  }
1884
2102
 
1885
- .tds-modal-header{
1886
- display:grid;
1887
- grid-template-columns:1fr auto;
1888
- -moz-column-gap:var(--t-spacing-2);
1889
- column-gap:var(--t-spacing-2);
1890
- padding-block:0;
1891
- padding-inline:var(--t-spacing-4);
1892
- }
2103
+ .tds-radio-group[aria-invalid="true"]{
2104
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
2105
+ --tds-radio-group-description-invalid-icon-display:inline-block;
2106
+ }
1893
2107
 
1894
- .tds-modal-title{
1895
- grid-row:1;
1896
- grid-column:1;
1897
- margin:0;
1898
- font-size:var(--t-font-size-2xl);
1899
- font-weight:var(--t-font-weight-medium);
1900
- line-height:140%;
1901
- color:var(--t-text-color-headline);
1902
- }
2108
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
2109
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2110
+ }
1903
2111
 
1904
- .tds-modal-subtitle{
1905
- grid-row:2;
1906
- grid-column:1;
1907
- margin:0;
1908
- font-size:var(--t-font-size-md);
1909
- font-weight:var(--t-font-weight-medium);
1910
- line-height:140%;
1911
- color:var(--t-text-color-secondary);
1912
- }
2112
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2113
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2114
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2115
+ }
1913
2116
 
1914
- .tds-modal-close{
1915
- grid-row:1;
1916
- grid-column:2;
1917
- align-self:center;
1918
- color:var(--t-icon-color-dim);
1919
- }
2117
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2118
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2119
+ }
1920
2120
 
1921
- .tds-modal-body{
1922
- padding-block:var(--t-spacing-3);
1923
- padding-inline:var(--t-spacing-4);
1924
- }
2121
+ .tds-radio-group:has(input:required) legend::after{
2122
+ margin-left:.25ch;
2123
+ color:var(--t-text-color-status-error);
2124
+ content:"*";
2125
+ }
1925
2126
 
1926
- .tds-modal-body--full-width{
1927
- padding-inline:0;
2127
+ .tds-radio-group-fields{
2128
+ display:flex;
2129
+ flex-direction:column;
2130
+ gap:var(--tds-radio-group-gap);
2131
+ align-items:flex-start;
2132
+ margin-top:var(--t-spacing-1);
1928
2133
  }
1929
2134
 
1930
- .tds-modal-footer{
2135
+ .tds-radio-group-description{
1931
2136
  display:flex;
1932
- gap:var(--t-spacing-2);
1933
- align-items:center;
1934
- justify-content:flex-end;
1935
- padding-block-start:var(--t-spacing-3);
1936
- padding-inline:var(--t-spacing-4);
1937
- border-top:1px solid var(--t-border-color);
2137
+ gap:var(--t-spacing-half);
2138
+ align-items:flex-start;
2139
+ margin:var(--t-spacing-fourth) 0 0;
2140
+ font-size:var(--tds-radio-group-description-font-size);
2141
+ line-height:var(--tds-radio-group-description-line-height);
2142
+ color:var(--tds-radio-group-description-color);
2143
+ cursor:text;
1938
2144
  }
1939
2145
 
1940
- .tds-modal-footer > [slot="start"]{
1941
- margin-inline-end:auto;
2146
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2147
+ display:var(--tds-radio-group-description-invalid-icon-display);
2148
+ flex-shrink:0;
2149
+ margin-top:calc(.5lh - .5em);
2150
+ line-height:var(--tds-radio-group-description-line-height);
2151
+ }
2152
+
2153
+ .tds-radio-group--sm{
2154
+ --tds-radio-group-line-height:1.35;
2155
+ --tds-radio-group-font-size:var(--t-font-size-sm);
2156
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
2157
+ --tds-radio-group-description-line-height:1.3;
1942
2158
  }
1943
2159
 
1944
2160
  .tds-input:has(textarea){
@@ -2046,220 +2262,133 @@ a.tds-dropdown-item:is(:hover, :active){
2046
2262
  }
2047
2263
  }
2048
2264
 
2049
- .tds-radio-group{
2050
- --tds-radio-group-font-size:var(--t-font-size-md);
2051
- --tds-radio-group-line-height:1.4;
2052
- --tds-radio-group-gap:var(--t-spacing-1);
2053
-
2054
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
2055
- --tds-radio-group-description-line-height:1.35;
2056
- --tds-radio-group-description-color:var(--t-text-color-secondary);
2057
- --tds-radio-group-description-invalid-icon-display:none;
2058
- display:flex;
2059
- flex-direction:column;
2060
- gap:0;
2061
- padding:0;
2062
- margin:0;
2063
-
2064
- font-size:var(--tds-radio-group-font-size);
2065
- line-height:var(--tds-radio-group-line-height);
2066
- border:0;
2067
- }
2068
-
2069
- .tds-radio-group legend{
2070
- float:left;
2071
- padding:0;
2072
- margin:0;
2073
- }
2074
-
2075
- .tds-radio-group[aria-invalid="true"]{
2076
- --tds-radio-group-description-color:var(--t-text-color-status-error);
2077
- --tds-radio-group-description-invalid-icon-display:inline-block;
2078
- }
2079
-
2080
- .tds-radio-group[aria-invalid="true"] .tds-radio{
2081
- --tds-radio-input-border-color:var(--t-form-border-color-error);
2082
- }
2083
-
2084
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2085
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2086
- --tds-radio-input-background-color:var(--t-form-background-color-error);
2087
- }
2088
-
2089
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2090
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2091
- }
2092
-
2093
- .tds-radio-group:has(input:required) legend::after{
2094
- margin-left:.25ch;
2095
- color:var(--t-text-color-status-error);
2096
- content:"*";
2097
- }
2098
-
2099
- .tds-radio-group-fields{
2100
- display:flex;
2101
- flex-direction:column;
2102
- gap:var(--tds-radio-group-gap);
2103
- align-items:flex-start;
2104
- margin-top:var(--t-spacing-1);
2105
- }
2265
+ .tds-search-input-control{
2266
+ --tds-search-input-outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2267
+ --tds-search-input-outline-offset:0;
2268
+ --tds-search-input-cursor:text;
2106
2269
 
2107
- .tds-radio-group-description{
2108
2270
  display:flex;
2109
- gap:var(--t-spacing-half);
2110
- align-items:flex-start;
2111
- margin:var(--t-spacing-fourth) 0 0;
2112
- font-size:var(--tds-radio-group-description-font-size);
2113
- line-height:var(--tds-radio-group-description-line-height);
2114
- color:var(--tds-radio-group-description-color);
2115
- cursor:text;
2271
+ gap:var(--tds-field-padding-inline);
2272
+ align-items:center;
2273
+ inline-size:100%;
2274
+ min-block-size:var(--tds-field-min-height);
2275
+ padding-inline:var(--tds-field-padding-inline);
2276
+ font-size:var(--tds-field-font-size);
2277
+ color:var(--tds-field-color);
2278
+ cursor:var(--tds-search-input-cursor);
2279
+ outline:var(--t-focus-ring-width) solid transparent;
2280
+ outline-color:var(--tds-search-input-outline-color);
2281
+ outline-offset:var(--tds-search-input-outline-offset);
2282
+ background-color:var(--tds-field-background-color);
2283
+ border:var(--t-form-border-width) solid var(--tds-field-border-color);
2284
+ border-radius:var(--t-form-border-radius);
2285
+ transition-timing-function:var(--t-ease-in-out);
2286
+ transition-duration:var(--t-duration-200);
2287
+ transition-property:background-color, border-color, outline-color, outline-offset;
2116
2288
  }
2117
2289
 
2118
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2119
- display:var(--tds-radio-group-description-invalid-icon-display);
2120
- flex-shrink:0;
2121
- margin-top:calc(.5lh - .5em);
2122
- line-height:var(--tds-radio-group-description-line-height);
2290
+ .tds-search-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
2291
+ border-color:var(--tds-field-border-color-hover);
2123
2292
  }
2124
2293
 
2125
- .tds-radio-group--sm{
2126
- --tds-radio-group-line-height:1.35;
2127
- --tds-radio-group-font-size:var(--t-font-size-sm);
2128
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
2129
- --tds-radio-group-description-line-height:1.3;
2130
- }
2131
-
2132
- .tds-radio{
2133
- --tds-radio-font-size:var(--t-font-size-md);
2134
- --tds-radio-cursor:pointer;
2135
- --tds-radio-line-height:1.4;
2136
- --tds-radio-transition-property:border-width;
2137
-
2138
- --tds-radio-input-size:var(--t-element-size-md);
2139
- --tds-radio-input-border-radius:var(--t-border-radius-round);
2140
- --tds-radio-input-border-color:var(--t-form-border-color);
2141
- --tds-radio-input-border-width:var(--t-form-border-width);
2142
- --tds-radio-input-background-color:var(--t-form-background-color);
2143
-
2144
- --tds-radio-label-color:var(--t-form-color);
2145
-
2146
- --tds-radio-description-font-size:var(--t-font-size-sm);
2147
- --tds-radio-description-line-height:1.35;
2148
- --tds-radio-description-color:var(--t-text-color-secondary);
2149
-
2150
- position:relative;
2151
- display:inline-grid;
2152
- grid-template-columns:auto;
2153
- grid-auto-columns:1fr;
2154
- gap:var(--t-spacing-fourth) 0;
2155
- line-height:var(--tds-radio-line-height);
2156
- -webkit-user-select:none;
2157
- -moz-user-select:none;
2158
- user-select:none;
2159
- }
2160
-
2161
- .tds-radio label{
2162
- grid-area:1 / 2;
2163
- padding-inline-start:var(--t-spacing-1);
2164
- font-size:var(--tds-radio-font-size);
2165
- font-weight:var(--t-font-weight-normal);
2166
- color:var(--tds-radio-label-color);
2167
- cursor:var(--tds-radio-cursor);
2168
- }
2294
+ .tds-search-input-control:has(input:focus){
2295
+ --tds-search-input-outline-color:var(--t-focus-ring-color);
2296
+ --tds-search-input-outline-offset:var(--t-focus-ring-offset);
2169
2297
 
2170
- .tds-radio input[type="radio"]{
2171
- position:relative;
2172
- width:1em;
2173
- height:1em;
2174
- margin:calc((1lh - 1em) / 2) 0 0;
2175
- font-size:var(--tds-radio-font-size);
2176
- line-height:inherit;
2298
+ border-color:var(--t-form-border-color-focus);
2299
+ }
2300
+
2301
+ .tds-search-input-control input{
2302
+ flex:1;
2303
+ min-inline-size:0;
2304
+ padding:0;
2305
+ overflow:hidden;
2306
+ text-overflow:ellipsis;
2307
+ font-family:inherit;
2308
+ font-size:inherit;
2309
+ color:inherit;
2310
+ white-space:nowrap;
2177
2311
  -webkit-appearance:none;
2178
2312
  -moz-appearance:none;
2179
2313
  appearance:none;
2180
- cursor:var(--tds-radio-cursor);
2181
- background-color:var(--tds-radio-input-background-color);
2182
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
2183
- border-radius:var(--tds-radio-input-border-radius);
2184
- transition-timing-function:var(--t-ease-in-out);
2185
- transition-duration:var(--t-duration-200);
2186
- transition-property:var(--tds-radio-transition-property);
2314
+ outline:0;
2315
+ background-color:transparent;
2316
+ border:0;
2187
2317
  }
2188
2318
 
2189
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
2190
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2191
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
2319
+ :is(.tds-search-input-control input)::-moz-placeholder{
2320
+ color:var(--tds-field-placeholder-color);
2321
+ -moz-user-select:none;
2322
+ user-select:none;
2192
2323
  }
2193
2324
 
2194
- :is(.tds-radio input[type="radio"]):focus-visible{
2195
- outline:var(--t-focus-ring-outline);
2196
- outline-offset:var(--t-focus-ring-offset);
2325
+ :is(.tds-search-input-control input)::placeholder{
2326
+ color:var(--tds-field-placeholder-color);
2327
+ -webkit-user-select:none;
2328
+ -moz-user-select:none;
2329
+ user-select:none;
2197
2330
  }
2198
2331
 
2199
- :is(.tds-radio input[type="radio"]):disabled{
2200
- pointer-events:none;
2332
+ :is(.tds-search-input-control input)::-webkit-search-decoration,:is(.tds-search-input-control input)::-webkit-search-cancel-button,:is(.tds-search-input-control input)::-webkit-search-results-button,:is(.tds-search-input-control input)::-webkit-search-results-decoration{
2333
+ -webkit-appearance:none;
2334
+ appearance:none;
2201
2335
  }
2202
2336
 
2203
- @media (prefers-reduced-motion: reduce){
2204
-
2205
- .tds-radio input[type="radio"]{
2206
- --tds-radio-transition-property:none;
2337
+ .tds-search-input-control .tds-search-input-icon{
2338
+ flex-shrink:0;
2339
+ inline-size:1em;
2340
+ color:var(--t-icon-color-dim);
2207
2341
  }
2208
- }
2209
2342
 
2210
- .tds-radio:has(input:checked){
2211
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2212
- --tds-radio-input-border-color:var(--t-border-color-control-info);
2213
- --tds-radio-input-border-width:4px;
2343
+ .tds-search-input-control .tds-search-input-clear-icon{
2344
+ inline-size:calc(var(--tds-field-font-size) * .8);
2345
+ block-size:calc(var(--tds-field-font-size) * .8);
2214
2346
  }
2215
2347
 
2216
- .tds-radio:has(input:checked) input:hover:not(:disabled){
2217
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2218
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2219
- }
2348
+ .tds-search-input-control .tds-btn{
2349
+ --tds-btn-color:var(--t-icon-color-dim);
2350
+ --tds-btn-padding-truncated-x:0;
2351
+ --tds-search-input-clear-button-visibility:hidden;
2220
2352
 
2221
- .tds-radio:has(input:user-invalid){
2222
- --tds-radio-input-border-color:var(--t-form-border-color-error);
2353
+ visibility:var(--tds-search-input-clear-button-visibility);
2354
+ flex-shrink:0;
2223
2355
  }
2224
2356
 
2225
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2226
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2227
- --tds-radio-input-background-color:var(--t-form-background-color-error);
2228
- }
2357
+ .tds-search-input-control:has(input:is(:user-invalid,[aria-invalid="true"])){
2358
+ --tds-field-background-color:var(--t-form-background-color-error);
2359
+ --tds-field-border-color:var(--t-form-border-color-error);
2360
+ --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
2361
+ }
2229
2362
 
2230
- .tds-radio:has(input:disabled){
2231
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2232
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2363
+ .tds-search-input-control:has(:disabled){
2364
+ --tds-field-border-color:var(--t-form-border-color-disabled);
2365
+ --tds-field-background-color:var(--t-form-background-color-disabled);
2366
+ --tds-field-color:var(--t-form-color-disabled);
2367
+ --tds-search-input-cursor:not-allowed;
2368
+ }
2233
2369
 
2234
- --tds-radio-label-color:var(--t-form-color-disabled);
2235
- --tds-radio-description-color:var(--t-form-color-disabled);
2236
- --tds-radio-cursor:not-allowed;
2370
+ .tds-search-input-control:has([readonly]){
2371
+ --tds-field-border-color:var(--t-form-border-color-readonly);
2372
+ --tds-field-border-color-hover:var(--t-form-border-color-readonly);
2373
+ --tds-field-background-color:var(--t-form-background-color-readonly);
2374
+ --tds-field-color:var(--t-form-color-readonly);
2237
2375
  }
2238
2376
 
2239
- .tds-radio:has(input:disabled) input:checked{
2240
- --tds-radio-input-background-color:var(--t-form-background-color);
2241
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2377
+ .tds-search-input-control:has([readonly]):has(input:focus){
2378
+ border-color:var(--t-form-border-color-hover);
2242
2379
  }
2243
2380
 
2244
- .tds-radio-description{
2245
- display:flex;
2246
- grid-area:2 / 2;
2247
- gap:var(--t-spacing-half);
2248
- align-items:flex-start;
2249
- padding-inline-start:var(--t-spacing-1);
2250
- margin:0;
2251
- font-size:var(--tds-radio-description-font-size);
2252
- line-height:var(--tds-radio-description-line-height);
2253
- color:var(--tds-radio-description-color);
2254
- cursor:text;
2381
+ @media (prefers-reduced-motion: reduce){
2382
+
2383
+ .tds-search-input-control{
2384
+ transition-property:none;
2255
2385
  }
2386
+ }
2256
2387
 
2257
- .tds-radio--sm{
2258
- --tds-radio-line-height:1.35;
2259
- --tds-radio-input-size:var(--t-element-size-sm);
2260
- --tds-radio-font-size:var(--t-font-size-sm);
2261
- --tds-radio-description-font-size:var(--t-font-size-xs);
2262
- --tds-radio-description-line-height:1.3;
2388
+ .tds-search-input-control--has-value:is(:hover, :has(input:focus)):not(
2389
+ :has(:disabled, [readonly])
2390
+ ) .tds-btn{
2391
+ --tds-search-input-clear-button-visibility:visible;
2263
2392
  }
2264
2393
 
2265
2394
  .tds-toggle-switch{
@@ -2402,135 +2531,6 @@ a.tds-dropdown-item:is(:hover, :active){
2402
2531
  --tds-toggle-switch-display:inline-flex;
2403
2532
  }
2404
2533
 
2405
- .tds-search-input-control{
2406
- --tds-search-input-outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2407
- --tds-search-input-outline-offset:0;
2408
- --tds-search-input-cursor:text;
2409
-
2410
- display:flex;
2411
- gap:var(--tds-field-padding-inline);
2412
- align-items:center;
2413
- inline-size:100%;
2414
- min-block-size:var(--tds-field-min-height);
2415
- padding-inline:var(--tds-field-padding-inline);
2416
- font-size:var(--tds-field-font-size);
2417
- color:var(--tds-field-color);
2418
- cursor:var(--tds-search-input-cursor);
2419
- outline:var(--t-focus-ring-width) solid transparent;
2420
- outline-color:var(--tds-search-input-outline-color);
2421
- outline-offset:var(--tds-search-input-outline-offset);
2422
- background-color:var(--tds-field-background-color);
2423
- border:var(--t-form-border-width) solid var(--tds-field-border-color);
2424
- border-radius:var(--t-form-border-radius);
2425
- transition-timing-function:var(--t-ease-in-out);
2426
- transition-duration:var(--t-duration-200);
2427
- transition-property:background-color, border-color, outline-color, outline-offset;
2428
- }
2429
-
2430
- .tds-search-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
2431
- border-color:var(--tds-field-border-color-hover);
2432
- }
2433
-
2434
- .tds-search-input-control:has(input:focus){
2435
- --tds-search-input-outline-color:var(--t-focus-ring-color);
2436
- --tds-search-input-outline-offset:var(--t-focus-ring-offset);
2437
-
2438
- border-color:var(--t-form-border-color-focus);
2439
- }
2440
-
2441
- .tds-search-input-control input{
2442
- flex:1;
2443
- min-inline-size:0;
2444
- padding:0;
2445
- overflow:hidden;
2446
- text-overflow:ellipsis;
2447
- font-family:inherit;
2448
- font-size:inherit;
2449
- color:inherit;
2450
- white-space:nowrap;
2451
- -webkit-appearance:none;
2452
- -moz-appearance:none;
2453
- appearance:none;
2454
- outline:0;
2455
- background-color:transparent;
2456
- border:0;
2457
- }
2458
-
2459
- :is(.tds-search-input-control input)::-moz-placeholder{
2460
- color:var(--tds-field-placeholder-color);
2461
- -moz-user-select:none;
2462
- user-select:none;
2463
- }
2464
-
2465
- :is(.tds-search-input-control input)::placeholder{
2466
- color:var(--tds-field-placeholder-color);
2467
- -webkit-user-select:none;
2468
- -moz-user-select:none;
2469
- user-select:none;
2470
- }
2471
-
2472
- :is(.tds-search-input-control input)::-webkit-search-decoration,:is(.tds-search-input-control input)::-webkit-search-cancel-button,:is(.tds-search-input-control input)::-webkit-search-results-button,:is(.tds-search-input-control input)::-webkit-search-results-decoration{
2473
- -webkit-appearance:none;
2474
- appearance:none;
2475
- }
2476
-
2477
- .tds-search-input-control .tds-search-input-icon{
2478
- flex-shrink:0;
2479
- inline-size:1em;
2480
- color:var(--t-icon-color-dim);
2481
- }
2482
-
2483
- .tds-search-input-control .tds-search-input-clear-icon{
2484
- inline-size:calc(var(--tds-field-font-size) * .8);
2485
- block-size:calc(var(--tds-field-font-size) * .8);
2486
- }
2487
-
2488
- .tds-search-input-control .tds-btn{
2489
- --tds-btn-color:var(--t-icon-color-dim);
2490
- --tds-btn-padding-truncated-x:0;
2491
- --tds-search-input-clear-button-visibility:hidden;
2492
-
2493
- visibility:var(--tds-search-input-clear-button-visibility);
2494
- flex-shrink:0;
2495
- }
2496
-
2497
- .tds-search-input-control:has(input:is(:user-invalid,[aria-invalid="true"])){
2498
- --tds-field-background-color:var(--t-form-background-color-error);
2499
- --tds-field-border-color:var(--t-form-border-color-error);
2500
- --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
2501
- }
2502
-
2503
- .tds-search-input-control:has(:disabled){
2504
- --tds-field-border-color:var(--t-form-border-color-disabled);
2505
- --tds-field-background-color:var(--t-form-background-color-disabled);
2506
- --tds-field-color:var(--t-form-color-disabled);
2507
- --tds-search-input-cursor:not-allowed;
2508
- }
2509
-
2510
- .tds-search-input-control:has([readonly]){
2511
- --tds-field-border-color:var(--t-form-border-color-readonly);
2512
- --tds-field-border-color-hover:var(--t-form-border-color-readonly);
2513
- --tds-field-background-color:var(--t-form-background-color-readonly);
2514
- --tds-field-color:var(--t-form-color-readonly);
2515
- }
2516
-
2517
- .tds-search-input-control:has([readonly]):has(input:focus){
2518
- border-color:var(--t-form-border-color-hover);
2519
- }
2520
-
2521
- @media (prefers-reduced-motion: reduce){
2522
-
2523
- .tds-search-input-control{
2524
- transition-property:none;
2525
- }
2526
- }
2527
-
2528
- .tds-search-input-control--has-value:is(:hover, :has(input:focus)):not(
2529
- :has(:disabled, [readonly])
2530
- ) .tds-btn{
2531
- --tds-search-input-clear-button-visibility:visible;
2532
- }
2533
-
2534
2534
  .tds-input{
2535
2535
  --tds-input-border-color:var(--t-form-border-color);
2536
2536
  --tds-input-border-color-hover:var(--t-form-border-color-hover);