@planningcenter/tapestry 3.8.1-rc.0 → 3.8.1-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1128,6 +1128,302 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1128
1128
  flex-direction:column;
1129
1129
  }
1130
1130
 
1131
+ .tds-checkbox{
1132
+ --tds-checkbox-font-size:var(--t-font-size-md);
1133
+ --tds-checkbox-cursor:pointer;
1134
+ --tds-checkbox-line-height:1.4;
1135
+ --tds-checkbox-transition-property:background-color, border-color;
1136
+
1137
+ --tds-checkbox-input-size:var(--t-element-size-md);
1138
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1139
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
1140
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
1141
+
1142
+ --tds-checkbox-input-icon:none;
1143
+ --tds-checkbox-input-icon-visibility:hidden;
1144
+ --tds-checkbox-input-icon-opacity:0;
1145
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1146
+
1147
+ --tds-checkbox-label-color:var(--t-form-color);
1148
+
1149
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
1150
+ --tds-checkbox-description-line-height:1.35;
1151
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
1152
+ --tds-checkbox-description-invalid-icon-display:none;
1153
+
1154
+ position:relative;
1155
+ display:inline-grid;
1156
+ grid-template-columns:auto;
1157
+ grid-auto-columns:1fr;
1158
+ gap:var(--t-spacing-fourth) 0;
1159
+ line-height:var(--tds-checkbox-line-height);
1160
+ -webkit-user-select:none;
1161
+ -moz-user-select:none;
1162
+ user-select:none;
1163
+ }
1164
+
1165
+ .tds-checkbox label{
1166
+ grid-area:1 / 2;
1167
+ padding-inline-start:var(--t-spacing-1);
1168
+ font-size:var(--tds-checkbox-font-size);
1169
+ font-weight:var(--t-font-weight-normal);
1170
+ color:var(--tds-checkbox-label-color);
1171
+ cursor:var(--tds-checkbox-cursor);
1172
+ }
1173
+
1174
+ .tds-checkbox tds-indeterminate{
1175
+ display:flex;
1176
+ }
1177
+
1178
+ .tds-checkbox input[type="checkbox"]{
1179
+ position:relative;
1180
+ width:1em;
1181
+ height:1em;
1182
+ margin:calc((1lh - 1em) / 2) 0 0;
1183
+ font-size:var(--tds-checkbox-font-size);
1184
+ line-height:inherit;
1185
+ -webkit-appearance:none;
1186
+ -moz-appearance:none;
1187
+ appearance:none;
1188
+ cursor:var(--tds-checkbox-cursor);
1189
+ background-color:var(--tds-checkbox-input-background-color);
1190
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1191
+ border-radius:var(--tds-checkbox-input-border-radius);
1192
+ transition-timing-function:var(--t-ease-in-out);
1193
+ transition-duration:var(--t-duration-200);
1194
+ transition-property:var(--tds-checkbox-transition-property);
1195
+ }
1196
+
1197
+ :is(.tds-checkbox input[type="checkbox"])::before{
1198
+ position:absolute;
1199
+ top:50%;
1200
+ left:50%;
1201
+ visibility:var(--tds-checkbox-input-icon-visibility);
1202
+ width:100%;
1203
+ height:100%;
1204
+ content:"";
1205
+ background-color:var(--tds-checkbox-input-icon-fill);
1206
+ border-radius:var(--tds-checkbox-input-border-radius);
1207
+ opacity:var(--tds-checkbox-input-icon-opacity);
1208
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
1209
+ mask-image:var(--tds-checkbox-input-icon);
1210
+ -webkit-mask-repeat:no-repeat;
1211
+ mask-repeat:no-repeat;
1212
+ -webkit-mask-size:contain;
1213
+ mask-size:contain;
1214
+ transform:translate(-50%, -50%);
1215
+ }
1216
+
1217
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1218
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1219
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1220
+ }
1221
+
1222
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1223
+ outline:var(--t-focus-ring-outline);
1224
+ outline-offset:var(--t-focus-ring-offset);
1225
+ }
1226
+
1227
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
1228
+ pointer-events:none;
1229
+ }
1230
+
1231
+ @media (prefers-reduced-motion: reduce){
1232
+
1233
+ .tds-checkbox input[type="checkbox"]{
1234
+ --tds-checkbox-transition-property:none;
1235
+ }
1236
+ }
1237
+
1238
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1239
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
1240
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1241
+ --tds-checkbox-input-icon-visibility:visible;
1242
+ --tds-checkbox-input-icon-opacity:1;
1243
+ }
1244
+
1245
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1246
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1247
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1248
+ }
1249
+
1250
+ .tds-checkbox:has(input:checked){
1251
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1252
+ }
1253
+
1254
+ .tds-checkbox:has(input:indeterminate){
1255
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1256
+ }
1257
+
1258
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1259
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1260
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
1261
+ --tds-checkbox-description-invalid-icon-display:inline-block;
1262
+ }
1263
+
1264
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1265
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1266
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1267
+ }
1268
+
1269
+ :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{
1270
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1271
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1272
+ }
1273
+
1274
+ :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){
1275
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1276
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1277
+ }
1278
+
1279
+ .tds-checkbox:has(input:required) label::after{
1280
+ margin-left:.25ch;
1281
+ color:var(--t-text-color-status-error);
1282
+ content:"*";
1283
+ }
1284
+
1285
+ .tds-checkbox:has(input:disabled){
1286
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1287
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1288
+
1289
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
1290
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
1291
+ --tds-checkbox-cursor:not-allowed;
1292
+ }
1293
+
1294
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1295
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1296
+ }
1297
+
1298
+ .tds-checkbox-description{
1299
+ display:flex;
1300
+ grid-area:2 / 2;
1301
+ gap:var(--t-spacing-half);
1302
+ align-items:flex-start;
1303
+ padding-inline-start:var(--t-spacing-1);
1304
+ margin:0;
1305
+ font-size:var(--tds-checkbox-description-font-size);
1306
+ line-height:var(--tds-checkbox-description-line-height);
1307
+ color:var(--tds-checkbox-description-color);
1308
+ cursor:text;
1309
+ }
1310
+
1311
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1312
+ display:var(--tds-checkbox-description-invalid-icon-display);
1313
+ flex-shrink:0;
1314
+ margin-top:calc(.5lh - .5em);
1315
+ line-height:var(--tds-checkbox-description-line-height);
1316
+ }
1317
+
1318
+ .tds-checkbox--sm{
1319
+ --tds-checkbox-line-height:1.35;
1320
+ --tds-checkbox-input-size:var(--t-element-size-sm);
1321
+ --tds-checkbox-font-size:var(--t-font-size-sm);
1322
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
1323
+ --tds-checkbox-description-line-height:1.3;
1324
+ }
1325
+
1326
+ .tds-button-group{
1327
+ display:inline-flex;
1328
+ }
1329
+ .tds-button-group > .tds-btn{
1330
+ --tds-button-group-item-z-index:1;
1331
+
1332
+ z-index:var(--tds-button-group-item-z-index);
1333
+ border-radius:0;
1334
+ }
1335
+ :is(.tds-button-group > .tds-btn):not(:first-child){
1336
+ margin-inline-start: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
+
1353
+ .tds-checkbox-group{
1354
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1355
+ --tds-checkbox-group-line-height:1.4;
1356
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1357
+
1358
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1359
+ --tds-checkbox-group-description-line-height:1.35;
1360
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1361
+ --tds-checkbox-group-description-invalid-icon-display:none;
1362
+ display:flex;
1363
+ flex-direction:column;
1364
+ gap:0;
1365
+ padding:0;
1366
+ margin:0;
1367
+
1368
+ font-size:var(--tds-checkbox-group-font-size);
1369
+ line-height:var(--tds-checkbox-group-line-height);
1370
+ border:0;
1371
+ }
1372
+
1373
+ .tds-checkbox-group legend{
1374
+ float:left;
1375
+ padding:0;
1376
+ margin:0;
1377
+ }
1378
+
1379
+ .tds-checkbox-group[aria-invalid="true"]{
1380
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1381
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1382
+ }
1383
+
1384
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1385
+ margin-left:.25ch;
1386
+ color:var(--t-text-color-status-error);
1387
+ content:"*";
1388
+ }
1389
+
1390
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1391
+ content:none;
1392
+ }
1393
+
1394
+ .tds-checkbox-group-fields{
1395
+ display:flex;
1396
+ flex-direction:column;
1397
+ gap:var(--tds-checkbox-group-gap);
1398
+ align-items:flex-start;
1399
+ margin-top:var(--t-spacing-1);
1400
+ }
1401
+
1402
+ .tds-checkbox-group-description{
1403
+ display:flex;
1404
+ gap:var(--t-spacing-half);
1405
+ align-items:flex-start;
1406
+ margin:var(--t-spacing-fourth) 0 0;
1407
+ font-size:var(--tds-checkbox-group-description-font-size);
1408
+ line-height:var(--tds-checkbox-group-description-line-height);
1409
+ color:var(--tds-checkbox-group-description-color);
1410
+ cursor:text;
1411
+ }
1412
+
1413
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1414
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1415
+ flex-shrink:0;
1416
+ margin-top:calc(.5lh - .5em);
1417
+ line-height:var(--tds-checkbox-group-description-line-height);
1418
+ }
1419
+
1420
+ .tds-checkbox-group--sm{
1421
+ --tds-checkbox-group-line-height:1.35;
1422
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1423
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1424
+ --tds-checkbox-group-description-line-height:1.3;
1425
+ }
1426
+
1131
1427
  @layer t-critical{
1132
1428
  tds-page-header:not(.hydrated){
1133
1429
  display:none;
@@ -1406,107 +1702,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1406
1702
  }
1407
1703
  }
1408
1704
 
1409
- .tds-button-group{
1410
- display:inline-flex;
1411
- }
1412
- .tds-button-group > .tds-btn{
1413
- --tds-button-group-item-z-index:1;
1414
-
1415
- z-index:var(--tds-button-group-item-z-index);
1416
- border-radius:0;
1417
- }
1418
- :is(.tds-button-group > .tds-btn):not(:first-child){
1419
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1420
- }
1421
- :is(.tds-button-group > .tds-btn):hover{
1422
- --tds-button-group-item-z-index:2;
1423
- }
1424
- :is(.tds-button-group > .tds-btn):focus-visible{
1425
- --tds-button-group-item-z-index:5;
1426
- }
1427
- .tds-button-group > .tds-btn:first-child{
1428
- border-start-start-radius:var(--tds-btn-border-radius);
1429
- border-end-start-radius:var(--tds-btn-border-radius);
1430
- }
1431
- .tds-button-group > .tds-btn:last-child{
1432
- border-start-end-radius:var(--tds-btn-border-radius);
1433
- border-end-end-radius:var(--tds-btn-border-radius);
1434
- }
1435
-
1436
- .tds-checkbox-group{
1437
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1438
- --tds-checkbox-group-line-height:1.4;
1439
- --tds-checkbox-group-gap:var(--t-spacing-1);
1440
-
1441
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1442
- --tds-checkbox-group-description-line-height:1.35;
1443
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1444
- --tds-checkbox-group-description-invalid-icon-display:none;
1445
- display:flex;
1446
- flex-direction:column;
1447
- gap:0;
1448
- padding:0;
1449
- margin:0;
1450
-
1451
- font-size:var(--tds-checkbox-group-font-size);
1452
- line-height:var(--tds-checkbox-group-line-height);
1453
- border:0;
1454
- }
1455
-
1456
- .tds-checkbox-group legend{
1457
- float:left;
1458
- padding:0;
1459
- margin:0;
1460
- }
1461
-
1462
- .tds-checkbox-group[aria-invalid="true"]{
1463
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1464
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1465
- }
1466
-
1467
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1468
- margin-left:.25ch;
1469
- color:var(--t-text-color-status-error);
1470
- content:"*";
1471
- }
1472
-
1473
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1474
- content:none;
1475
- }
1476
-
1477
- .tds-checkbox-group-fields{
1478
- display:flex;
1479
- flex-direction:column;
1480
- gap:var(--tds-checkbox-group-gap);
1481
- align-items:flex-start;
1482
- margin-top:var(--t-spacing-1);
1483
- }
1484
-
1485
- .tds-checkbox-group-description{
1486
- display:flex;
1487
- gap:var(--t-spacing-half);
1488
- align-items:flex-start;
1489
- margin:var(--t-spacing-fourth) 0 0;
1490
- font-size:var(--tds-checkbox-group-description-font-size);
1491
- line-height:var(--tds-checkbox-group-description-line-height);
1492
- color:var(--tds-checkbox-group-description-color);
1493
- cursor:text;
1494
- }
1495
-
1496
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1497
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1498
- flex-shrink:0;
1499
- margin-top:calc(.5lh - .5em);
1500
- line-height:var(--tds-checkbox-group-description-line-height);
1501
- }
1502
-
1503
- .tds-checkbox-group--sm{
1504
- --tds-checkbox-group-line-height:1.35;
1505
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1506
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1507
- --tds-checkbox-group-description-line-height:1.3;
1508
- }
1509
-
1510
1705
  .tds-combo-box{
1511
1706
  --tds-combo-box-button-offset:4px;
1512
1707
  }
@@ -1732,9 +1927,13 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1732
1927
  }
1733
1928
  .tds-dropdown-item{
1734
1929
  --tds-dropdown-item-color:var(--t-text-color);
1930
+ --tds-dropdown-item-row-gap:0;
1931
+ --tds-dropdown-item-column-gap:var(--t-spacing-1);
1735
1932
 
1736
1933
  display:flex;
1737
- gap:var(--t-spacing-1);
1934
+ row-gap:var(--tds-dropdown-item-row-gap);
1935
+ -moz-column-gap:var(--tds-dropdown-item-column-gap);
1936
+ column-gap:var(--tds-dropdown-item-column-gap);
1738
1937
  align-items:center;
1739
1938
  padding-block:var(--t-spacing-1);
1740
1939
  padding-inline:var(--t-spacing-2);
@@ -1781,12 +1980,16 @@ a.tds-dropdown-item:is(:hover, :active){
1781
1980
  color:var(--t-text-color-secondary);
1782
1981
  }
1783
1982
  .tds-dropdown-item:has([slot="description"]){
1983
+ --tds-dropdown-item-row-gap:var(--t-spacing-half);
1984
+ --tds-dropdown-item-column-gap:0;
1985
+
1784
1986
  display:grid;
1785
- grid-template-areas:"prefix label suffix" "prefix description suffix";
1987
+ grid-template-areas:"prefix label suffix" ". description .";
1786
1988
  grid-template-columns:auto 1fr auto;
1787
1989
  }
1788
1990
  .tds-dropdown-item:has([slot="description"]) [slot="prefix"]{
1789
1991
  grid-area:prefix;
1992
+ margin-inline-end:var(--t-spacing-1);
1790
1993
  }
1791
1994
  .tds-dropdown-item:has([slot="description"]) [slot="label"]{
1792
1995
  grid-area:label;
@@ -1796,6 +1999,7 @@ a.tds-dropdown-item:is(:hover, :active){
1796
1999
  }
1797
2000
  .tds-dropdown-item:has([slot="description"]) [slot="suffix"]{
1798
2001
  grid-area:suffix;
2002
+ margin-inline-start:var(--t-spacing-1);
1799
2003
  }
1800
2004
  .tds-dropdown-section:not(:first-child){
1801
2005
  margin-block-start:var(--t-spacing-half);
@@ -1814,224 +2018,264 @@ a.tds-dropdown-item:is(:hover, :active){
1814
2018
  border-top:1px solid var(--t-border-color);
1815
2019
  }
1816
2020
 
1817
- .tds-checkbox{
1818
- --tds-checkbox-font-size:var(--t-font-size-md);
1819
- --tds-checkbox-cursor:pointer;
1820
- --tds-checkbox-line-height:1.4;
1821
- --tds-checkbox-transition-property:background-color, border-color;
2021
+ .tds-modal{
2022
+ --tds-modal-width:600px;
2023
+ --tds-modal-opacity:0;
2024
+ --tds-modal-backdrop-opacity:0;
2025
+ --tds-modal-scale:.96;
2026
+ --tds-modal-transition-duration:var(--t-duration-200);
2027
+ --tds-modal-transition-timing-function:var(--t-ease-in);
2028
+ --tds-modal-transition:opacity var(--tds-modal-transition-duration) var(--tds-modal-transition-timing-function), scale var(--tds-modal-transition-duration) var(--tds-modal-transition-timing-function);
2029
+ --tds-modal-backdrop-transition:opacity var(--tds-modal-transition-duration) var(--tds-modal-transition-timing-function);
1822
2030
 
1823
- --tds-checkbox-input-size:var(--t-element-size-md);
1824
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1825
- --tds-checkbox-input-border-color:var(--t-form-border-color);
1826
- --tds-checkbox-input-background-color:var(--t-form-background-color);
2031
+ flex-direction:column;
2032
+ width:min(var(--tds-modal-width), calc(100% - 48px));
2033
+ padding-block:var(--t-spacing-3);
2034
+ padding-inline:0;
2035
+ background:var(--t-surface-color-card);
1827
2036
 
1828
- --tds-checkbox-input-icon:none;
1829
- --tds-checkbox-input-icon-visibility:hidden;
1830
- --tds-checkbox-input-icon-opacity:0;
1831
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
2037
+ border:0;
2038
+ border-radius:var(--t-border-radius-lg);
2039
+ box-shadow:0 4px 18px 0 #0003;
1832
2040
 
1833
- --tds-checkbox-label-color:var(--t-form-color);
2041
+ opacity:var(--tds-modal-opacity);
2042
+ scale:var(--tds-modal-scale);
2043
+ transition:var(--tds-modal-transition);
2044
+ }
1834
2045
 
1835
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
1836
- --tds-checkbox-description-line-height:1.35;
1837
- --tds-checkbox-description-color:var(--t-text-color-secondary);
1838
- --tds-checkbox-description-invalid-icon-display:none;
2046
+ .tds-modal[open]{
2047
+ --tds-modal-opacity:1;
2048
+ --tds-modal-backdrop-opacity:1;
2049
+ --tds-modal-scale:1;
2050
+ --tds-modal-transition-duration:var(--t-duration-300);
2051
+ --tds-modal-transition-timing-function:var(--t-ease-out);
2052
+
2053
+ display:flex;
2054
+ }
2055
+
2056
+ .tds-modal::backdrop{
2057
+ background:hsl(0 0% 0% / 40%);
2058
+ opacity:var(--tds-modal-backdrop-opacity);
2059
+ transition:var(--tds-modal-backdrop-transition);
2060
+ }
2061
+
2062
+ @starting-style{
2063
+ .tds-modal[open]{
2064
+ --tds-modal-opacity:0;
2065
+ --tds-modal-scale:.96;
2066
+ }
2067
+
2068
+ .tds-modal[open]::backdrop{
2069
+ --tds-modal-backdrop-opacity:0;
2070
+ }
2071
+ }
2072
+
2073
+ @media (prefers-reduced-motion: reduce){
2074
+ .tds-modal{
2075
+ --tds-modal-transition:none;
2076
+ --tds-modal-backdrop-transition:none;
2077
+ }
2078
+ }
2079
+
2080
+ .tds-modal--sm{
2081
+ --tds-modal-width:400px;
2082
+ }
2083
+
2084
+ .tds-modal--lg{
2085
+ --tds-modal-width:800px;
2086
+ }
2087
+
2088
+ .tds-modal--xl{
2089
+ --tds-modal-width:1000px;
2090
+ }
2091
+
2092
+ .tds-modal-header{
2093
+ display:grid;
2094
+ grid-template-columns:1fr auto;
2095
+ -moz-column-gap:var(--t-spacing-2);
2096
+ column-gap:var(--t-spacing-2);
2097
+ padding-block:0;
2098
+ padding-inline:var(--t-spacing-4);
2099
+ }
2100
+
2101
+ .tds-modal-title{
2102
+ grid-row:1;
2103
+ grid-column:1;
2104
+ margin:0;
2105
+ font-size:var(--t-font-size-2xl);
2106
+ font-weight:var(--t-font-weight-medium);
2107
+ line-height:140%;
2108
+ color:var(--t-text-color-headline);
2109
+ }
2110
+
2111
+ .tds-modal-subtitle{
2112
+ grid-row:2;
2113
+ grid-column:1;
2114
+ margin:0;
2115
+ font-size:var(--t-font-size-md);
2116
+ font-weight:var(--t-font-weight-medium);
2117
+ line-height:140%;
2118
+ color:var(--t-text-color-secondary);
2119
+ }
1839
2120
 
1840
- position:relative;
1841
- display:inline-grid;
1842
- grid-template-columns:auto;
1843
- grid-auto-columns:1fr;
1844
- gap:var(--t-spacing-fourth) 0;
1845
- line-height:var(--tds-checkbox-line-height);
1846
- -webkit-user-select:none;
1847
- -moz-user-select:none;
1848
- user-select:none;
2121
+ .tds-modal-close{
2122
+ grid-row:1;
2123
+ grid-column:2;
2124
+ align-self:center;
2125
+ color:var(--t-icon-color-dim);
1849
2126
  }
1850
2127
 
1851
- .tds-checkbox label{
1852
- grid-area:1 / 2;
1853
- padding-inline-start:var(--t-spacing-1);
1854
- font-size:var(--tds-checkbox-font-size);
1855
- font-weight:var(--t-font-weight-normal);
1856
- color:var(--tds-checkbox-label-color);
1857
- cursor:var(--tds-checkbox-cursor);
1858
- }
2128
+ .tds-modal-body{
2129
+ padding-block:var(--t-spacing-3);
2130
+ padding-inline:var(--t-spacing-4);
2131
+ }
1859
2132
 
1860
- .tds-checkbox tds-indeterminate{
1861
- display:flex;
1862
- }
2133
+ .tds-modal-body--full-width{
2134
+ padding-inline:0;
2135
+ }
1863
2136
 
1864
- .tds-checkbox input[type="checkbox"]{
1865
- position:relative;
1866
- width:1em;
1867
- height:1em;
1868
- margin:calc((1lh - 1em) / 2) 0 0;
1869
- font-size:var(--tds-checkbox-font-size);
1870
- line-height:inherit;
1871
- -webkit-appearance:none;
1872
- -moz-appearance:none;
1873
- appearance:none;
1874
- cursor:var(--tds-checkbox-cursor);
1875
- background-color:var(--tds-checkbox-input-background-color);
1876
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1877
- border-radius:var(--tds-checkbox-input-border-radius);
1878
- transition-timing-function:var(--t-ease-in-out);
1879
- transition-duration:var(--t-duration-200);
1880
- transition-property:var(--tds-checkbox-transition-property);
1881
- }
2137
+ .tds-modal-footer{
2138
+ display:flex;
2139
+ gap:var(--t-spacing-2);
2140
+ align-items:center;
2141
+ justify-content:flex-end;
2142
+ padding-block-start:var(--t-spacing-3);
2143
+ padding-inline:var(--t-spacing-4);
2144
+ border-top:1px solid var(--t-border-color);
2145
+ }
1882
2146
 
1883
- :is(.tds-checkbox input[type="checkbox"])::before{
1884
- position:absolute;
1885
- top:50%;
1886
- left:50%;
1887
- visibility:var(--tds-checkbox-input-icon-visibility);
1888
- width:100%;
1889
- height:100%;
1890
- content:"";
1891
- background-color:var(--tds-checkbox-input-icon-fill);
1892
- border-radius:var(--tds-checkbox-input-border-radius);
1893
- opacity:var(--tds-checkbox-input-icon-opacity);
1894
- -webkit-mask-image:var(--tds-checkbox-input-icon);
1895
- mask-image:var(--tds-checkbox-input-icon);
1896
- -webkit-mask-repeat:no-repeat;
1897
- mask-repeat:no-repeat;
1898
- -webkit-mask-size:contain;
1899
- mask-size:contain;
1900
- transform:translate(-50%, -50%);
1901
- }
2147
+ .tds-modal-footer > [slot="start"]{
2148
+ margin-inline-end:auto;
2149
+ }
1902
2150
 
1903
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1904
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1905
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1906
- }
1907
2151
 
1908
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1909
- outline:var(--t-focus-ring-outline);
1910
- outline-offset:var(--t-focus-ring-offset);
2152
+ :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{
2153
+ -webkit-appearance:none;
2154
+ appearance:none;
1911
2155
  }
1912
2156
 
1913
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1914
- pointer-events:none;
2157
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
2158
+ inline-size:1em;
2159
+ block-size:2em;
1915
2160
  }
1916
2161
 
1917
- @media (prefers-reduced-motion: reduce){
1918
-
1919
- .tds-checkbox input[type="checkbox"]{
1920
- --tds-checkbox-transition-property:none;
2162
+ @supports (field-sizing: content){
2163
+ .tds-input--auto-width{
2164
+ inline-size:-moz-fit-content;
2165
+ inline-size:fit-content;
2166
+ min-inline-size:min(100%, 122px);
1921
2167
  }
1922
- }
1923
2168
 
1924
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1925
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
1926
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1927
- --tds-checkbox-input-icon-visibility:visible;
1928
- --tds-checkbox-input-icon-opacity:1;
2169
+ .tds-input--auto-width input{
2170
+ field-sizing:content;
2171
+ inline-size:auto;
1929
2172
  }
2173
+ }
1930
2174
 
1931
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1932
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1933
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1934
- }
2175
+ .tds-input:has(textarea){
2176
+ --tds-input-padding-block:6px;
2177
+ --tds-input-resizer-size:var(--t-element-size-sm);
2178
+ --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
2179
+ }
1935
2180
 
1936
- .tds-checkbox:has(input:checked){
1937
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1938
- }
2181
+ @supports (x: attr(x type(*))){
1939
2182
 
1940
- .tds-checkbox:has(input:indeterminate){
1941
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
2183
+ .tds-input textarea{
2184
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
2185
+ }
1942
2186
  }
1943
2187
 
1944
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1945
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1946
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1947
- --tds-checkbox-description-invalid-icon-display:inline-block;
1948
- }
2188
+ .tds-input.tds-textarea--resize-vertical textarea{
2189
+ resize:vertical;
2190
+ }
1949
2191
 
1950
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1951
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1952
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
2192
+ .tds-input.tds-textarea--resize-none textarea{
2193
+ resize:none;
1953
2194
  }
1954
2195
 
1955
- :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{
1956
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1957
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
2196
+ .tds-input.tds-textarea--resize-auto textarea{
2197
+ resize:vertical;
1958
2198
  }
1959
2199
 
1960
- :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){
1961
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1962
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
2200
+ @supports (field-sizing: content){
2201
+ .tds-input.tds-textarea--resize-auto textarea{
2202
+ field-sizing:content;
2203
+ resize:none;
1963
2204
  }
1964
-
1965
- .tds-checkbox:has(input:required) label::after{
1966
- margin-left:.25ch;
1967
- color:var(--t-text-color-status-error);
1968
- content:"*";
1969
2205
  }
1970
2206
 
1971
- .tds-checkbox:has(input:disabled){
1972
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1973
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
2207
+ .tds-input textarea{
2208
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2209
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
2210
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2211
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2212
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2213
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2214
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2215
+ --tds-input-scrollbar-thumb-border-radius:999px;
2216
+ --tds-input-scrollbar-thumb-border-width:3px;
2217
+ --tds-input-scrollbar-track-margin-block:.125rem;
2218
+ scrollbar-color:initial;
2219
+ transition-timing-function:var(--t-ease-in-out);
2220
+ transition-duration:var(--t-duration-200);
2221
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2222
+ }
1974
2223
 
1975
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1976
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1977
- --tds-checkbox-cursor:not-allowed;
1978
- }
2224
+ @media (pointer: fine){
2225
+ :is(.tds-input textarea)::-webkit-scrollbar{
2226
+ width:12px;
2227
+ height:12px;
2228
+ cursor:default;
2229
+ }
1979
2230
 
1980
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1981
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
2231
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2232
+ cursor:default;
2233
+ background:var(--tds-input-scrollbar-thumb-color);
2234
+ background-clip:content-box;
2235
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2236
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1982
2237
  }
1983
2238
 
1984
- .tds-checkbox-description{
1985
- display:flex;
1986
- grid-area:2 / 2;
1987
- gap:var(--t-spacing-half);
1988
- align-items:flex-start;
1989
- padding-inline-start:var(--t-spacing-1);
1990
- margin:0;
1991
- font-size:var(--tds-checkbox-description-font-size);
1992
- line-height:var(--tds-checkbox-description-line-height);
1993
- color:var(--tds-checkbox-description-color);
1994
- cursor:text;
1995
- }
2239
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2240
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2241
+ }
1996
2242
 
1997
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1998
- display:var(--tds-checkbox-description-invalid-icon-display);
1999
- flex-shrink:0;
2000
- margin-top:calc(.5lh - .5em);
2001
- line-height:var(--tds-checkbox-description-line-height);
2002
- }
2243
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2244
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2245
+ }
2003
2246
 
2004
- .tds-checkbox--sm{
2005
- --tds-checkbox-line-height:1.35;
2006
- --tds-checkbox-input-size:var(--t-element-size-sm);
2007
- --tds-checkbox-font-size:var(--t-font-size-sm);
2008
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
2009
- --tds-checkbox-description-line-height:1.3;
2010
- }
2247
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2248
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2249
+ }
2011
2250
 
2251
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
2252
+ background:var(--tds-input-scrollbar-surface-color);
2253
+ }
2012
2254
 
2013
- :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{
2014
- -webkit-appearance:none;
2015
- appearance:none;
2255
+ :is(.tds-input textarea)::-webkit-resizer{
2256
+ background:var(--tds-input-resizer-icon) no-repeat;
2257
+ background-position:right bottom;
2258
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2016
2259
  }
2017
2260
 
2018
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
2019
- inline-size:1em;
2020
- block-size:2em;
2261
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
2262
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
2263
+ cursor:default;
2021
2264
  }
2022
2265
 
2023
- @supports (field-sizing: content){
2024
- .tds-input--auto-width{
2025
- inline-size:-moz-fit-content;
2026
- inline-size:fit-content;
2027
- min-inline-size:min(100%, 122px);
2028
- }
2266
+ @supports (-moz-appearance: none){
2267
+ :is(.tds-input textarea){
2268
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2269
+ scrollbar-width:thin;
2270
+ }
2029
2271
 
2030
- .tds-input--auto-width input{
2031
- field-sizing:content;
2032
- inline-size:auto;
2272
+ @media (hover){
2273
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2274
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2275
+ }
2276
+ }
2277
+ }
2033
2278
  }
2034
- }
2035
2279
 
2036
2280
  .tds-radio{
2037
2281
  --tds-radio-font-size:var(--t-font-size-md);
@@ -2249,136 +2493,6 @@ a.tds-dropdown-item:is(:hover, :active){
2249
2493
  --tds-radio-group-description-line-height:1.3;
2250
2494
  }
2251
2495
 
2252
- .tds-modal{
2253
- --tds-modal-width:600px;
2254
- --tds-modal-opacity:0;
2255
- --tds-modal-backdrop-opacity:0;
2256
- --tds-modal-scale:.96;
2257
- --tds-modal-transition-duration:var(--t-duration-200);
2258
- --tds-modal-transition-timing-function:var(--t-ease-in);
2259
- --tds-modal-transition:opacity var(--tds-modal-transition-duration) var(--tds-modal-transition-timing-function), scale var(--tds-modal-transition-duration) var(--tds-modal-transition-timing-function);
2260
- --tds-modal-backdrop-transition:opacity var(--tds-modal-transition-duration) var(--tds-modal-transition-timing-function);
2261
-
2262
- flex-direction:column;
2263
- width:min(var(--tds-modal-width), calc(100% - 48px));
2264
- padding-block:var(--t-spacing-3);
2265
- padding-inline:0;
2266
- background:var(--t-surface-color-card);
2267
-
2268
- border:0;
2269
- border-radius:var(--t-border-radius-lg);
2270
- box-shadow:0 4px 18px 0 #0003;
2271
-
2272
- opacity:var(--tds-modal-opacity);
2273
- scale:var(--tds-modal-scale);
2274
- transition:var(--tds-modal-transition);
2275
- }
2276
-
2277
- .tds-modal[open]{
2278
- --tds-modal-opacity:1;
2279
- --tds-modal-backdrop-opacity:1;
2280
- --tds-modal-scale:1;
2281
- --tds-modal-transition-duration:var(--t-duration-300);
2282
- --tds-modal-transition-timing-function:var(--t-ease-out);
2283
-
2284
- display:flex;
2285
- }
2286
-
2287
- .tds-modal::backdrop{
2288
- background:hsl(0 0% 0% / 40%);
2289
- opacity:var(--tds-modal-backdrop-opacity);
2290
- transition:var(--tds-modal-backdrop-transition);
2291
- }
2292
-
2293
- @starting-style{
2294
- .tds-modal[open]{
2295
- --tds-modal-opacity:0;
2296
- --tds-modal-scale:.96;
2297
- }
2298
-
2299
- .tds-modal[open]::backdrop{
2300
- --tds-modal-backdrop-opacity:0;
2301
- }
2302
- }
2303
-
2304
- @media (prefers-reduced-motion: reduce){
2305
- .tds-modal{
2306
- --tds-modal-transition:none;
2307
- --tds-modal-backdrop-transition:none;
2308
- }
2309
- }
2310
-
2311
- .tds-modal--sm{
2312
- --tds-modal-width:400px;
2313
- }
2314
-
2315
- .tds-modal--lg{
2316
- --tds-modal-width:800px;
2317
- }
2318
-
2319
- .tds-modal--xl{
2320
- --tds-modal-width:1000px;
2321
- }
2322
-
2323
- .tds-modal-header{
2324
- display:grid;
2325
- grid-template-columns:1fr auto;
2326
- -moz-column-gap:var(--t-spacing-2);
2327
- column-gap:var(--t-spacing-2);
2328
- padding-block:0;
2329
- padding-inline:var(--t-spacing-4);
2330
- }
2331
-
2332
- .tds-modal-title{
2333
- grid-row:1;
2334
- grid-column:1;
2335
- margin:0;
2336
- font-size:var(--t-font-size-2xl);
2337
- font-weight:var(--t-font-weight-medium);
2338
- line-height:140%;
2339
- color:var(--t-text-color-headline);
2340
- }
2341
-
2342
- .tds-modal-subtitle{
2343
- grid-row:2;
2344
- grid-column:1;
2345
- margin:0;
2346
- font-size:var(--t-font-size-md);
2347
- font-weight:var(--t-font-weight-medium);
2348
- line-height:140%;
2349
- color:var(--t-text-color-secondary);
2350
- }
2351
-
2352
- .tds-modal-close{
2353
- grid-row:1;
2354
- grid-column:2;
2355
- align-self:center;
2356
- color:var(--t-icon-color-dim);
2357
- }
2358
-
2359
- .tds-modal-body{
2360
- padding-block:var(--t-spacing-3);
2361
- padding-inline:var(--t-spacing-4);
2362
- }
2363
-
2364
- .tds-modal-body--full-width{
2365
- padding-inline:0;
2366
- }
2367
-
2368
- .tds-modal-footer{
2369
- display:flex;
2370
- gap:var(--t-spacing-2);
2371
- align-items:center;
2372
- justify-content:flex-end;
2373
- padding-block-start:var(--t-spacing-3);
2374
- padding-inline:var(--t-spacing-4);
2375
- border-top:1px solid var(--t-border-color);
2376
- }
2377
-
2378
- .tds-modal-footer > [slot="start"]{
2379
- margin-inline-end:auto;
2380
- }
2381
-
2382
2496
  .tds-toggle-switch{
2383
2497
  --tds-toggle-switch-font-size:var(--t-font-size-md);
2384
2498
  --tds-toggle-switch-cursor:pointer;
@@ -2519,111 +2633,6 @@ a.tds-dropdown-item:is(:hover, :active){
2519
2633
  --tds-toggle-switch-display:inline-flex;
2520
2634
  }
2521
2635
 
2522
- .tds-input:has(textarea){
2523
- --tds-input-padding-block:6px;
2524
- --tds-input-resizer-size:var(--t-element-size-sm);
2525
- --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
2526
- }
2527
-
2528
- @supports (x: attr(x type(*))){
2529
-
2530
- .tds-input textarea{
2531
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
2532
- }
2533
- }
2534
-
2535
- .tds-input.tds-textarea--resize-vertical textarea{
2536
- resize:vertical;
2537
- }
2538
-
2539
- .tds-input.tds-textarea--resize-none textarea{
2540
- resize:none;
2541
- }
2542
-
2543
- .tds-input.tds-textarea--resize-auto textarea{
2544
- resize:vertical;
2545
- }
2546
-
2547
- @supports (field-sizing: content){
2548
- .tds-input.tds-textarea--resize-auto textarea{
2549
- field-sizing:content;
2550
- resize:none;
2551
- }
2552
- }
2553
-
2554
- .tds-input textarea{
2555
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2556
- --tds-input-scrollbar-thumb-color-hidden:transparent;
2557
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2558
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2559
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2560
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2561
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2562
- --tds-input-scrollbar-thumb-border-radius:999px;
2563
- --tds-input-scrollbar-thumb-border-width:3px;
2564
- --tds-input-scrollbar-track-margin-block:.125rem;
2565
- scrollbar-color:initial;
2566
- transition-timing-function:var(--t-ease-in-out);
2567
- transition-duration:var(--t-duration-200);
2568
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2569
- }
2570
-
2571
- @media (pointer: fine){
2572
- :is(.tds-input textarea)::-webkit-scrollbar{
2573
- width:12px;
2574
- height:12px;
2575
- cursor:default;
2576
- }
2577
-
2578
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2579
- cursor:default;
2580
- background:var(--tds-input-scrollbar-thumb-color);
2581
- background-clip:content-box;
2582
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2583
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2584
- }
2585
-
2586
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2587
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2588
- }
2589
-
2590
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2591
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2592
- }
2593
-
2594
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2595
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2596
- }
2597
-
2598
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
2599
- background:var(--tds-input-scrollbar-surface-color);
2600
- }
2601
-
2602
- :is(.tds-input textarea)::-webkit-resizer{
2603
- background:var(--tds-input-resizer-icon) no-repeat;
2604
- background-position:right bottom;
2605
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2606
- }
2607
-
2608
- :is(.tds-input textarea)::-webkit-scrollbar-track{
2609
- margin-block:var(--tds-input-scrollbar-track-margin-block);
2610
- cursor:default;
2611
- }
2612
-
2613
- @supports (-moz-appearance: none){
2614
- :is(.tds-input textarea){
2615
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2616
- scrollbar-width:thin;
2617
- }
2618
-
2619
- @media (hover){
2620
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2621
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2622
- }
2623
- }
2624
- }
2625
- }
2626
-
2627
2636
  .tds-loading-spinner{
2628
2637
  position:absolute;
2629
2638
  right:0;