@planningcenter/tapestry 3.7.0 → 3.8.0-qa-1049.1

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.
@@ -1044,6 +1044,870 @@
1044
1044
  }
1045
1045
  }
1046
1046
 
1047
+ .tds-checkbox{
1048
+ --tds-checkbox-font-size:var(--t-font-size-md);
1049
+ --tds-checkbox-cursor:pointer;
1050
+ --tds-checkbox-line-height:1.4;
1051
+ --tds-checkbox-transition-property:background-color, border-color;
1052
+
1053
+ --tds-checkbox-input-size:var(--t-element-size-md);
1054
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1055
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
1056
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
1057
+
1058
+ --tds-checkbox-input-icon:none;
1059
+ --tds-checkbox-input-icon-visibility:hidden;
1060
+ --tds-checkbox-input-icon-opacity:0;
1061
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1062
+
1063
+ --tds-checkbox-label-color:var(--t-form-color);
1064
+
1065
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
1066
+ --tds-checkbox-description-line-height:1.35;
1067
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
1068
+ --tds-checkbox-description-invalid-icon-display:none;
1069
+
1070
+ position:relative;
1071
+ display:inline-grid;
1072
+ grid-template-columns:auto;
1073
+ grid-auto-columns:1fr;
1074
+ gap:var(--t-spacing-fourth) 0;
1075
+ line-height:var(--tds-checkbox-line-height);
1076
+ -webkit-user-select:none;
1077
+ -moz-user-select:none;
1078
+ user-select:none;
1079
+ }
1080
+
1081
+ .tds-checkbox label{
1082
+ grid-area:1 / 2;
1083
+ padding-inline-start:var(--t-spacing-1);
1084
+ font-size:var(--tds-checkbox-font-size);
1085
+ font-weight:var(--t-font-weight-normal);
1086
+ color:var(--tds-checkbox-label-color);
1087
+ cursor:var(--tds-checkbox-cursor);
1088
+ }
1089
+
1090
+ .tds-checkbox tds-indeterminate{
1091
+ display:flex;
1092
+ }
1093
+
1094
+ .tds-checkbox input[type="checkbox"]{
1095
+ position:relative;
1096
+ width:1em;
1097
+ height:1em;
1098
+ margin:calc((1lh - 1em) / 2) 0 0;
1099
+ font-size:var(--tds-checkbox-font-size);
1100
+ line-height:inherit;
1101
+ -webkit-appearance:none;
1102
+ -moz-appearance:none;
1103
+ appearance:none;
1104
+ cursor:var(--tds-checkbox-cursor);
1105
+ background-color:var(--tds-checkbox-input-background-color);
1106
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1107
+ border-radius:var(--tds-checkbox-input-border-radius);
1108
+ transition-timing-function:var(--t-ease-in-out);
1109
+ transition-duration:var(--t-duration-200);
1110
+ transition-property:var(--tds-checkbox-transition-property);
1111
+ }
1112
+
1113
+ :is(.tds-checkbox input[type="checkbox"])::before{
1114
+ position:absolute;
1115
+ top:50%;
1116
+ left:50%;
1117
+ visibility:var(--tds-checkbox-input-icon-visibility);
1118
+ width:100%;
1119
+ height:100%;
1120
+ content:"";
1121
+ background-color:var(--tds-checkbox-input-icon-fill);
1122
+ border-radius:var(--tds-checkbox-input-border-radius);
1123
+ opacity:var(--tds-checkbox-input-icon-opacity);
1124
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
1125
+ mask-image:var(--tds-checkbox-input-icon);
1126
+ -webkit-mask-repeat:no-repeat;
1127
+ mask-repeat:no-repeat;
1128
+ -webkit-mask-size:contain;
1129
+ mask-size:contain;
1130
+ transform:translate(-50%, -50%);
1131
+ }
1132
+
1133
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1134
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1135
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1136
+ }
1137
+
1138
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1139
+ outline:var(--t-focus-ring-outline);
1140
+ outline-offset:var(--t-focus-ring-offset);
1141
+ }
1142
+
1143
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
1144
+ pointer-events:none;
1145
+ }
1146
+
1147
+ @media (prefers-reduced-motion: reduce){
1148
+
1149
+ .tds-checkbox input[type="checkbox"]{
1150
+ --tds-checkbox-transition-property:none;
1151
+ }
1152
+ }
1153
+
1154
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1155
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
1156
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1157
+ --tds-checkbox-input-icon-visibility:visible;
1158
+ --tds-checkbox-input-icon-opacity:1;
1159
+ }
1160
+
1161
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1162
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1163
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1164
+ }
1165
+
1166
+ .tds-checkbox:has(input:checked){
1167
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1168
+ }
1169
+
1170
+ .tds-checkbox:has(input:indeterminate){
1171
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1172
+ }
1173
+
1174
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1175
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1176
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
1177
+ --tds-checkbox-description-invalid-icon-display:inline-block;
1178
+ }
1179
+
1180
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1181
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1182
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1183
+ }
1184
+
1185
+ :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{
1186
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1187
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1188
+ }
1189
+
1190
+ :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){
1191
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1192
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1193
+ }
1194
+
1195
+ .tds-checkbox:has(input:required) label::after{
1196
+ margin-left:.25ch;
1197
+ color:var(--t-text-color-status-error);
1198
+ content:"*";
1199
+ }
1200
+
1201
+ .tds-checkbox:has(input:disabled){
1202
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1203
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1204
+
1205
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
1206
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
1207
+ --tds-checkbox-cursor:not-allowed;
1208
+ }
1209
+
1210
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1211
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1212
+ }
1213
+
1214
+ .tds-checkbox-description{
1215
+ display:flex;
1216
+ grid-area:2 / 2;
1217
+ gap:var(--t-spacing-half);
1218
+ align-items:flex-start;
1219
+ padding-inline-start:var(--t-spacing-1);
1220
+ margin:0;
1221
+ font-size:var(--tds-checkbox-description-font-size);
1222
+ line-height:var(--tds-checkbox-description-line-height);
1223
+ color:var(--tds-checkbox-description-color);
1224
+ cursor:text;
1225
+ }
1226
+
1227
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1228
+ display:var(--tds-checkbox-description-invalid-icon-display);
1229
+ flex-shrink:0;
1230
+ margin-top:calc(.5lh - .5em);
1231
+ line-height:var(--tds-checkbox-description-line-height);
1232
+ }
1233
+
1234
+ .tds-checkbox--sm{
1235
+ --tds-checkbox-line-height:1.35;
1236
+ --tds-checkbox-input-size:var(--t-element-size-sm);
1237
+ --tds-checkbox-font-size:var(--t-font-size-sm);
1238
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
1239
+ --tds-checkbox-description-line-height:1.3;
1240
+ }
1241
+
1242
+ .tds-combo-box{
1243
+ --tds-combo-box-button-offset:4px;
1244
+ }
1245
+
1246
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
1247
+ transform:rotate(.5turn);
1248
+ }
1249
+
1250
+ .tds-combo-box--lg{
1251
+ --tds-combo-box-button-offset:5px;
1252
+ }
1253
+
1254
+ .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
1255
+ display:none;
1256
+ }
1257
+
1258
+ .tds-combo-box-input{
1259
+ display:flex;
1260
+ flex:1;
1261
+ align-items:center;
1262
+ padding-block:var(--tds-field-padding-block);
1263
+ padding-inline:var(--tds-field-padding-inline);
1264
+ font-family:inherit;
1265
+ font-size:inherit;
1266
+ color:inherit;
1267
+ outline:0;
1268
+ background:transparent;
1269
+ border:0;
1270
+ }
1271
+
1272
+ .tds-combo-box-input:has( + .tds-combo-box-button){
1273
+ padding-inline-end:0;
1274
+ }
1275
+
1276
+ .tds-combo-box-input::-moz-placeholder{
1277
+ color:var(--tds-field-placeholder-color);
1278
+ -moz-user-select:none;
1279
+ user-select:none;
1280
+ }
1281
+
1282
+ .tds-combo-box-input::placeholder{
1283
+ color:var(--tds-field-placeholder-color);
1284
+ -webkit-user-select:none;
1285
+ -moz-user-select:none;
1286
+ user-select:none;
1287
+ }
1288
+
1289
+ .tds-combo-box-button{
1290
+ flex-shrink:0;
1291
+ align-self:center;
1292
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
1293
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
1294
+ padding:0;
1295
+ margin-inline-end:var(--tds-combo-box-button-offset);
1296
+ }
1297
+
1298
+ .tds-combo-box-button > svg{
1299
+ inline-size:var(--tds-field-font-size);
1300
+ block-size:var(--tds-field-font-size);
1301
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
1302
+ }
1303
+
1304
+ .tds-combo-box-popover{
1305
+ width:var(--trigger-width);
1306
+ max-block-size:inherit;
1307
+ padding:var(--t-spacing-1);
1308
+ overflow:auto;
1309
+ scroll-behavior:smooth;
1310
+ overscroll-behavior:none;
1311
+ -webkit-user-select:none;
1312
+ -moz-user-select:none;
1313
+ user-select:none;
1314
+ outline:0;
1315
+ scrollbar-color:#0004 var(--t-surface-color-card);
1316
+ scrollbar-width:thin;
1317
+ background:var(--t-surface-color-card);
1318
+ background-clip:padding-box;
1319
+ border:1px solid var(--t-border-color);
1320
+ border-radius:var(--t-border-radius);
1321
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1322
+ }
1323
+
1324
+ .tds-combo-box-popover[data-entering]{
1325
+ animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
1326
+ }
1327
+
1328
+ .tds-combo-box-popover[data-exiting]{
1329
+ animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
1330
+ }
1331
+
1332
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1333
+ will-change:opacity, transform;
1334
+ }
1335
+
1336
+ @keyframes tds-combo-box-popover{
1337
+ from{
1338
+ opacity:0;
1339
+ transform:translateY(-8px);
1340
+ }
1341
+ }
1342
+
1343
+ @media (prefers-reduced-motion: reduce){
1344
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1345
+ animation:none;
1346
+ }
1347
+
1348
+ .tds-combo-box-button > svg{
1349
+ transition:none;
1350
+ }
1351
+ }
1352
+
1353
+ .tds-combo-box-list{
1354
+ padding:0;
1355
+ margin:0;
1356
+ }
1357
+
1358
+ .tds-combo-box-list-item{
1359
+ display:block;
1360
+ padding-block:var(--t-spacing-1);
1361
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1362
+ overflow:hidden;
1363
+ text-overflow:ellipsis;
1364
+ font-size:1rem;
1365
+ color:var(--t-text-color);
1366
+ white-space:nowrap;
1367
+ cursor:default;
1368
+ border-radius:var(--t-border-radius);
1369
+ }
1370
+
1371
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
1372
+ background:var(--t-fill-color-neutral-070);
1373
+ }
1374
+
1375
+ .tds-combo-box-list-item[data-selected]{
1376
+ background:var(--t-fill-color-button-interaction-ghost-active);
1377
+ }
1378
+
1379
+ .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
1380
+ background:var(--t-fill-color-neutral-060);
1381
+ }
1382
+
1383
+ .tds-combo-box-list-item[data-disabled]{
1384
+ color:var(--t-form-color-disabled);
1385
+ cursor:not-allowed;
1386
+ }
1387
+
1388
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
1389
+ background:transparent;
1390
+ }
1391
+
1392
+ .tds-combo-box-empty-state{
1393
+ position:relative;
1394
+ min-block-size:var(--t-spacing-3);
1395
+ padding-block:var(--t-spacing-1);
1396
+ padding-inline:var(--t-spacing-2);
1397
+ font-size:var(--t-font-size-md);
1398
+ color:var(--t-text-color-secondary);
1399
+ }
1400
+
1401
+ .tds-combo-box-load-more{
1402
+ position:relative;
1403
+ min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
1404
+ }
1405
+
1406
+ .tds-combo-box-empty-state,
1407
+ .tds-combo-box-load-more{
1408
+ --tds-loading-spinner-visibility:visible;
1409
+ --tds-loading-spinner-animation-play-state:running;
1410
+ }
1411
+
1412
+ .tds-combo-box-list-section:not(:first-child){
1413
+ margin-block-start:var(--t-spacing-half);
1414
+ }
1415
+
1416
+ .tds-combo-box-section-header{
1417
+ padding-block:var(--t-spacing-1);
1418
+ padding-inline:var(--t-spacing-1);
1419
+ font-size:var(--t-font-size-sm);
1420
+ font-weight:var(--t-font-weight-semibold);
1421
+ color:var(--t-text-color-secondary);
1422
+ }
1423
+
1424
+ .tds-dropdown-popover{
1425
+ min-inline-size:10rem;
1426
+ max-inline-size:24rem;
1427
+ padding:var(--t-spacing-1);
1428
+ overflow:auto;
1429
+ overscroll-behavior:none;
1430
+ -webkit-user-select:none;
1431
+ -moz-user-select:none;
1432
+ user-select:none;
1433
+ outline:0;
1434
+ scrollbar-color:#0004 var(--t-surface-color-card);
1435
+ scrollbar-width:thin;
1436
+ background:var(--t-surface-color-card);
1437
+ background-clip:padding-box;
1438
+ border:1px solid var(--t-border-color);
1439
+ border-radius:var(--t-border-radius);
1440
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1441
+ }
1442
+ .tds-dropdown-popover[data-entering]{
1443
+ animation:tds-dropdown-popover var(--t-duration-300) var(--t-ease-out);
1444
+ }
1445
+ .tds-dropdown-popover[data-exiting]{
1446
+ animation:tds-dropdown-popover var(--t-duration-200) var(--t-ease-in) reverse;
1447
+ }
1448
+ .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
1449
+ will-change:opacity, transform;
1450
+ }
1451
+ @keyframes tds-dropdown-popover{
1452
+ from{
1453
+ opacity:0;
1454
+ transform:translateY(-8px);
1455
+ }
1456
+ }
1457
+ @media (prefers-reduced-motion: reduce){
1458
+ .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
1459
+ animation:none;
1460
+ }
1461
+ }
1462
+ .tds-dropdown-popover [role="menu"]{
1463
+ outline:0;
1464
+ }
1465
+ .tds-dropdown-item{
1466
+ --tds-dropdown-item-color:var(--t-text-color);
1467
+
1468
+ display:flex;
1469
+ gap:var(--t-spacing-1);
1470
+ align-items:center;
1471
+ padding-block:var(--t-spacing-1);
1472
+ padding-inline:var(--t-spacing-2);
1473
+ font-size:1rem;
1474
+ color:var(--tds-dropdown-item-color);
1475
+ text-decoration:none;
1476
+ cursor:default;
1477
+ outline:0;
1478
+ border-radius:var(--t-border-radius);
1479
+ }
1480
+ .tds-dropdown-item[data-hovered]:not([data-disabled]),.tds-dropdown-item[data-focus-visible]{
1481
+ background:var(--t-fill-color-neutral-070);
1482
+ }
1483
+ .tds-dropdown-item[data-pressed]:not([data-disabled]){
1484
+ background:var(--t-fill-color-neutral-060);
1485
+ }
1486
+ .tds-dropdown-item[data-disabled]{
1487
+ --tds-dropdown-item-color:var(--t-form-color-disabled);
1488
+
1489
+ cursor:not-allowed;
1490
+ }
1491
+ .tds-dropdown-item--destructive{
1492
+ --tds-dropdown-item-color:var(--t-text-color-status-error);
1493
+ }
1494
+ .tds-dropdown-item--staff-only{
1495
+ --tds-dropdown-item-color:var(--t-fill-color-product-staff);
1496
+ }
1497
+ a.tds-dropdown-item:is(:hover, :active){
1498
+ color:var(--tds-dropdown-item-color);
1499
+ }
1500
+ .tds-dropdown-item [slot="prefix"],
1501
+ .tds-dropdown-item [slot="suffix"]{
1502
+ flex-shrink:0;
1503
+ }
1504
+ .tds-dropdown-item [slot="label"]{
1505
+ flex:1;
1506
+ min-width:0;
1507
+ overflow:hidden;
1508
+ text-overflow:ellipsis;
1509
+ white-space:nowrap;
1510
+ }
1511
+ .tds-dropdown-item [slot="description"]{
1512
+ font-size:var(--t-font-size-sm);
1513
+ color:var(--t-text-color-secondary);
1514
+ }
1515
+ .tds-dropdown-item:has([slot="description"]){
1516
+ display:grid;
1517
+ grid-template-areas:"prefix label suffix" "prefix description suffix";
1518
+ grid-template-columns:auto 1fr auto;
1519
+ }
1520
+ .tds-dropdown-item:has([slot="description"]) [slot="prefix"]{
1521
+ grid-area:prefix;
1522
+ }
1523
+ .tds-dropdown-item:has([slot="description"]) [slot="label"]{
1524
+ grid-area:label;
1525
+ }
1526
+ .tds-dropdown-item:has([slot="description"]) [slot="description"]{
1527
+ grid-area:description;
1528
+ }
1529
+ .tds-dropdown-item:has([slot="description"]) [slot="suffix"]{
1530
+ grid-area:suffix;
1531
+ }
1532
+ .tds-dropdown-section:not(:first-child){
1533
+ margin-block-start:var(--t-spacing-half);
1534
+ }
1535
+ .tds-dropdown-section-label{
1536
+ padding-block:var(--t-spacing-1);
1537
+ padding-inline:var(--t-spacing-1);
1538
+ font-size:var(--t-font-size-sm);
1539
+ font-weight:var(--t-font-weight-semibold);
1540
+ color:var(--t-text-color-secondary);
1541
+ }
1542
+ .tds-dropdown-separator{
1543
+ margin-block:var(--t-spacing-half);
1544
+ margin-inline:0;
1545
+ border:0;
1546
+ border-top:1px solid var(--t-border-color);
1547
+ }
1548
+
1549
+
1550
+ @media (prefers-reduced-motion: no-preference){
1551
+
1552
+ :root{
1553
+ interpolate-size:allow-keywords;
1554
+ }
1555
+ }
1556
+
1557
+ @layer tds-component{
1558
+ tds-sidenav,
1559
+ .tds-sidenav{
1560
+ --tds-sidenav-indent:12px;
1561
+ --tds-sidenav-item-depth:0;
1562
+
1563
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
1564
+
1565
+ --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
1566
+ --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
1567
+ --tds-sidenav-collapse-closed-opacity:0;
1568
+ --tds-sidenav-collapse-open-opacity:1;
1569
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
1570
+ --tds-sidenav-collapse-open-transform:translateY(0);
1571
+
1572
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
1573
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1574
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1575
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1576
+
1577
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1578
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1579
+ --tds-sidenav-item-nested-background-selected:transparent;
1580
+
1581
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1582
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1583
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1584
+
1585
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1586
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1587
+ }
1588
+
1589
+ @media (prefers-reduced-motion: reduce){
1590
+ tds-sidenav,
1591
+ .tds-sidenav{
1592
+ --tds-sidenav-collapse-transition-enter:none;
1593
+ --tds-sidenav-collapse-transition-exit:none;
1594
+ --tds-sidenav-collapse-closed-transform:none;
1595
+ --tds-sidenav-collapse-open-transform:none;
1596
+ }
1597
+ }
1598
+
1599
+ .tds-sidenav--theme-gray{
1600
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1601
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1602
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1603
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1604
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1605
+ }
1606
+ }
1607
+
1608
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1609
+ display:flex;
1610
+ }
1611
+
1612
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1613
+ flex-direction:column;
1614
+ gap:var(--t-spacing-half);
1615
+ width:100%;
1616
+ }
1617
+
1618
+ .tds-sidenav-section-list{
1619
+ width:100%;
1620
+ padding:0;
1621
+ margin:0;
1622
+ list-style:none;
1623
+ }
1624
+
1625
+ .tds-sidenav-section-header{
1626
+ display:flex;
1627
+ align-items:baseline;
1628
+ justify-content:space-between;
1629
+ padding-top:var(--t-spacing-2);
1630
+ }
1631
+
1632
+ .tds-sidenav-section-header h2{
1633
+ margin:0;
1634
+ font-size:var(--t-font-size-sm);
1635
+ font-weight:var(--t-font-weight-semibold);
1636
+ line-height:1.35;
1637
+ color:var(--t-text-color-secondary);
1638
+ text-transform:uppercase;
1639
+ }
1640
+
1641
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1642
+ padding-top:0;
1643
+ }
1644
+
1645
+ .tds-sidenav-section-header [slot="label-actions"]{
1646
+ display:flex;
1647
+ gap:var(--t-spacing-half);
1648
+ align-items:center;
1649
+ }
1650
+
1651
+ .tds-sidenav-section [slot="section-actions"]{
1652
+ display:flex;
1653
+ gap:12px;
1654
+ align-items:center;
1655
+ min-height:42px;
1656
+ padding:var(--t-spacing-1) 0;
1657
+ }
1658
+
1659
+ .tds-sidenav-section-list,
1660
+ .tds-sidenav-item{
1661
+ width:100%;
1662
+ padding:0;
1663
+ margin:0;
1664
+ }
1665
+
1666
+ .tds-sidenav-item :is(a,button){
1667
+ position:relative;
1668
+ display:flex;
1669
+ gap:12px;
1670
+ align-items:center;
1671
+ width:100%;
1672
+ padding:12px;
1673
+ overflow:hidden;
1674
+ font-size:var(--t-font-size-sm);
1675
+ line-height:18px;
1676
+ color:var(--t-text-color-headline);
1677
+ white-space:nowrap;
1678
+ text-decoration:none;
1679
+ -webkit-appearance:none;
1680
+ -moz-appearance:none;
1681
+ appearance:none;
1682
+ cursor:pointer;
1683
+ background-color:var(--tds-sidenav-item-background, transparent);
1684
+ border:0;
1685
+ border-radius:var(--t-border-radius);
1686
+ transition:var(--tds-sidenav-item-transition);
1687
+ }
1688
+
1689
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1690
+ display:block;
1691
+ flex:1;
1692
+ overflow:hidden;
1693
+ text-overflow:ellipsis;
1694
+ text-align:left;
1695
+ white-space:nowrap;
1696
+ }
1697
+
1698
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1699
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1700
+ color:var(--t-text-color-headline);
1701
+ text-decoration:none;
1702
+ }
1703
+
1704
+ :is(.tds-sidenav-item :is(a,button)):active{
1705
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1706
+ }
1707
+
1708
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1709
+ overflow:hidden;
1710
+ color:var(--tds-sidenav-item-icon-color);
1711
+ }
1712
+
1713
+ :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
1714
+ display:block;
1715
+ width:var(--tds-sidenav-item-icon-size);
1716
+ height:var(--tds-sidenav-item-icon-size);
1717
+ }
1718
+
1719
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1720
+ --tds-sidenav-indent:19px;
1721
+ }
1722
+
1723
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1724
+ visibility:visible;
1725
+ block-size:auto;
1726
+ opacity:1;
1727
+ }
1728
+
1729
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1730
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1731
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1732
+
1733
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1734
+ font-weight:var(--t-font-weight-semibold);
1735
+ }
1736
+
1737
+ .tds-sidenav-item:has(.tds-sidenav-section){
1738
+ display:flex;
1739
+ flex-direction:column;
1740
+ gap:var(--t-spacing-half);
1741
+ }
1742
+
1743
+ .tds-sidenav-item .tds-sidenav-section-list{
1744
+ --tds-sidenav-item-depth:1;
1745
+ gap:0;
1746
+ }
1747
+
1748
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1749
+ visibility:hidden;
1750
+ block-size:0;
1751
+ overflow-y:clip;
1752
+ opacity:0;
1753
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
1754
+ }
1755
+
1756
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1757
+ --tds-sidenav-item-depth:2;
1758
+ }
1759
+
1760
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1761
+ min-height:var(--t-element-size-2xl);
1762
+ padding-block:9px;
1763
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1764
+ line-height:1;
1765
+ background-color:transparent;
1766
+ }
1767
+
1768
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1769
+ position:absolute;
1770
+ top:0;
1771
+ bottom:0;
1772
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1773
+ width:2px;
1774
+ content:"";
1775
+ background-color:var(--tds-sidenav-item-nested-border-color);
1776
+ transition:var(--tds-sidenav-item-transition);
1777
+ }
1778
+
1779
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1780
+ position:absolute;
1781
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1782
+ z-index:-1;
1783
+ height:100%;
1784
+ content:"";
1785
+ background-color:var(--tds-sidenav-item-nested-background);
1786
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1787
+ transition:var(--tds-sidenav-item-transition);
1788
+ }
1789
+
1790
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
1791
+ display:block;
1792
+ text-align:left;
1793
+ white-space:normal;
1794
+ }
1795
+
1796
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
1797
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1798
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1799
+ }
1800
+
1801
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1802
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1803
+ }
1804
+
1805
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1806
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1807
+ font-weight:var(--t-font-weight-medium);
1808
+ }
1809
+
1810
+ .tds-sidenav-responsive-header{
1811
+ display:flex;
1812
+ gap:var(--t-spacing-2);
1813
+ align-items:center;
1814
+ width:100%;
1815
+ }
1816
+
1817
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1818
+ order:0;
1819
+ }
1820
+
1821
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1822
+ flex:1;
1823
+ order:1;
1824
+ margin:0;
1825
+ font-size:var(--t-font-size-lg);
1826
+ font-weight:var(--t-font-weight-medium);
1827
+ color:var(--t-text-color-headline);
1828
+ }
1829
+
1830
+ @media (max-width: 719px){
1831
+ .tds-sidenav-collapse{
1832
+ z-index:10001;
1833
+ display:none;
1834
+ max-width:min(448px, calc(100vw - 48px));
1835
+ padding:0;
1836
+ margin:12px 0;
1837
+ position-area:bottom span-right;
1838
+ overflow:hidden;
1839
+ outline:0;
1840
+ background:var(--t-surface-color-card);
1841
+ border:0;
1842
+ border-radius:6px;
1843
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1844
+ opacity:var(--tds-sidenav-collapse-open-opacity);
1845
+ transform:var(--tds-sidenav-collapse-open-transform);
1846
+ transition:var(--tds-sidenav-collapse-transition-enter);
1847
+ will-change:transform;
1848
+ }
1849
+
1850
+ .tds-sidenav-scroll-container{
1851
+ --webkit-overflow-scrolling:touch;
1852
+ display:block;
1853
+ width:100%;
1854
+ height:-moz-fit-content;
1855
+ height:fit-content;
1856
+ padding:var(--t-spacing-2);
1857
+ overflow-y:auto;
1858
+ }
1859
+
1860
+ .tds-sidenav-item :is(a, button) :is(.prefix){
1861
+ display:none;
1862
+ }
1863
+ @supports selector(:popover-open){
1864
+ .tds-sidenav-collapse:popover-open{
1865
+ display:flex;
1866
+ }
1867
+
1868
+ .tds-sidenav-collapse:not(:popover-open){
1869
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1870
+ transition:var(--tds-sidenav-collapse-transition-exit);
1871
+ }
1872
+
1873
+ @starting-style{
1874
+ .tds-sidenav-collapse:popover-open{
1875
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1876
+ transform:var(--tds-sidenav-collapse-closed-transform);
1877
+ }
1878
+ }
1879
+ }
1880
+ @supports not selector(:popover-open){
1881
+ .tds-sidenav-collapse.\:popover-open{
1882
+ display:flex;
1883
+ }
1884
+
1885
+ .tds-sidenav-collapse:not(.\:popover-open){
1886
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1887
+ transition:var(--tds-sidenav-collapse-transition-exit);
1888
+ }
1889
+ }
1890
+ }
1891
+
1892
+ @media (min-width: 720px){
1893
+ .tds-sidenav-responsive-header{
1894
+ display:none;
1895
+ }
1896
+ }
1897
+
1898
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1899
+ display:none;
1900
+ }
1901
+
1902
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1903
+ display:block;
1904
+ }
1905
+
1906
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1907
+ display:flex;
1908
+ flex-direction:column;
1909
+ }
1910
+
1047
1911
  .tds-date-picker{
1048
1912
  --tds-date-picker-button-offset:4px;
1049
1913
  }
@@ -1275,705 +2139,345 @@
1275
2139
  }
1276
2140
 
1277
2141
  .tds-date-picker-calendar-nav{
1278
- display:flex;
1279
- align-items:center;
1280
- justify-content:center;
1281
- padding:var(--t-spacing-half);
1282
- font-size:.875em;
1283
- color:var(--t-text-color);
1284
- cursor:pointer;
1285
- outline:0;
1286
- background-color:transparent;
1287
- border:0;
1288
- border-radius:var(--t-border-radius-md);
1289
- transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
1290
- transition-duration:var(--tds-date-picker-popover-interactive-duration);
1291
- transition-property:var(--tds-date-picker-popover-interactive-property);
1292
- }
1293
-
1294
- .tds-date-picker-calendar-nav[data-hovered]{
1295
- background-color:var(--t-fill-color-button-neutral-outline-hover);
1296
- }
1297
-
1298
- .tds-date-picker-calendar-nav[data-pressed]{
1299
- background-color:var(--t-fill-color-button-neutral-outline-active);
1300
- }
1301
-
1302
- .tds-date-picker-calendar-nav[data-focus-visible]{
1303
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1304
- outline-offset:var(--t-focus-ring-offset);
1305
- }
1306
-
1307
- .tds-date-picker-calendar-nav[data-disabled]{
1308
- color:var(--t-text-color-disabled);
1309
- cursor:not-allowed;
1310
- }
1311
-
1312
- .tds-date-picker-calendar-grid{
1313
- font-feature-settings:"ss01", "ss02";
1314
- border-collapse:collapse;
1315
- }
1316
-
1317
- .tds-date-picker-calendar-grid :where(thead,tbody,tr,td,th){
1318
- padding:0;
1319
- border:0;
1320
- }
1321
-
1322
- .tds-date-picker-calendar-header-cell{
1323
- padding-block-end:var(--t-spacing-1);
1324
- font-size:.875em;
1325
- font-weight:var(--t-font-weight-medium);
1326
- color:var(--t-text-color-secondary);
1327
- text-align:center;
1328
- -webkit-user-select:none;
1329
- -moz-user-select:none;
1330
- user-select:none;
1331
- }
1332
-
1333
- .tds-date-picker-calendar-cell-button{
1334
- position:relative;
1335
- display:flex;
1336
- align-items:center;
1337
- justify-content:center;
1338
- inline-size:2.25em;
1339
- block-size:2.25em;
1340
- color:var(--t-text-color);
1341
- cursor:pointer;
1342
- -webkit-user-select:none;
1343
- -moz-user-select:none;
1344
- user-select:none;
1345
- outline:0;
1346
- }
1347
-
1348
- .tds-date-picker-calendar-cell-button::before{
1349
- position:absolute;
1350
- inset:0;
1351
- z-index:-1;
1352
- content:"";
1353
- background-color:var(--_background-color);
1354
- border-radius:50%;
1355
- }
1356
-
1357
- .tds-date-picker-calendar-cell-button[data-today]::before{
1358
- box-shadow:inset 0 0 0 1.5px var(--t-border-color);
1359
- }
1360
-
1361
- .tds-date-picker-calendar-cell-button[data-outside-month]{
1362
- display:none;
1363
- }
1364
-
1365
- .tds-date-picker-calendar-cell-button[data-hovered]{
1366
- --_background-color:var(--t-fill-color-button-neutral-outline-hover);
1367
- }
1368
-
1369
- .tds-date-picker-calendar-cell-button[data-pressed]{
1370
- --_background-color:var(--t-fill-color-button-neutral-outline-active);
1371
- }
1372
-
1373
- .tds-date-picker-calendar-cell-button[data-selected]{
1374
- --_background-color:var(--t-fill-color-interaction);
1375
- font-weight:var(--t-font-weight-semibold);
1376
- color:var(--t-text-color-inverted);
1377
- border-color:transparent;
1378
- }
1379
-
1380
- .tds-date-picker-calendar-cell-button[data-unavailable]{
1381
- color:var(--t-text-color-disabled);
1382
- text-decoration:line-through;
1383
- cursor:not-allowed;
1384
- }
1385
-
1386
- .tds-date-picker-calendar-cell-button[data-disabled]{
1387
- color:var(--t-text-color-disabled);
1388
- }
1389
-
1390
- .tds-date-picker-calendar-cell-button[data-focus-visible]{
1391
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1392
- outline-offset:-2px;
1393
- }
1394
-
1395
- .tds-date-picker-calendar-cell-button[data-focus-visible][data-selected]{
1396
- outline-offset:var(--t-focus-ring-offset);
1397
- }
1398
-
1399
- .tds-date-picker-popover--lg{
1400
- --tds-date-picker-popover-font-size:var(--t-font-size-lg);
1401
- }
1402
-
1403
- .tds-checkbox-group{
1404
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1405
- --tds-checkbox-group-line-height:1.4;
1406
- --tds-checkbox-group-gap:var(--t-spacing-1);
1407
-
1408
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1409
- --tds-checkbox-group-description-line-height:1.35;
1410
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1411
- --tds-checkbox-group-description-invalid-icon-display:none;
1412
- display:flex;
1413
- flex-direction:column;
1414
- gap:0;
1415
- padding:0;
1416
- margin:0;
1417
-
1418
- font-size:var(--tds-checkbox-group-font-size);
1419
- line-height:var(--tds-checkbox-group-line-height);
1420
- border:0;
1421
- }
1422
-
1423
- .tds-checkbox-group legend{
1424
- float:left;
1425
- padding:0;
1426
- margin:0;
1427
- }
1428
-
1429
- .tds-checkbox-group[aria-invalid="true"]{
1430
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1431
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1432
- }
1433
-
1434
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1435
- margin-left:.25ch;
1436
- color:var(--t-text-color-status-error);
1437
- content:"*";
1438
- }
1439
-
1440
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1441
- content:none;
1442
- }
1443
-
1444
- .tds-checkbox-group-fields{
1445
- display:flex;
1446
- flex-direction:column;
1447
- gap:var(--tds-checkbox-group-gap);
1448
- align-items:flex-start;
1449
- margin-top:var(--t-spacing-1);
1450
- }
1451
-
1452
- .tds-checkbox-group-description{
1453
- display:flex;
1454
- gap:var(--t-spacing-half);
1455
- align-items:flex-start;
1456
- margin:var(--t-spacing-fourth) 0 0;
1457
- font-size:var(--tds-checkbox-group-description-font-size);
1458
- line-height:var(--tds-checkbox-group-description-line-height);
1459
- color:var(--tds-checkbox-group-description-color);
1460
- cursor:text;
1461
- }
1462
-
1463
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1464
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1465
- flex-shrink:0;
1466
- margin-top:calc(.5lh - .5em);
1467
- line-height:var(--tds-checkbox-group-description-line-height);
1468
- }
1469
-
1470
- .tds-checkbox-group--sm{
1471
- --tds-checkbox-group-line-height:1.35;
1472
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1473
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1474
- --tds-checkbox-group-description-line-height:1.3;
1475
- }
1476
-
1477
- .tds-combo-box{
1478
- --tds-combo-box-button-offset:4px;
1479
- }
1480
-
1481
- .tds-combo-box[data-open] .tds-combo-box-button > svg{
1482
- transform:rotate(.5turn);
1483
- }
1484
-
1485
- .tds-combo-box--lg{
1486
- --tds-combo-box-button-offset:5px;
1487
- }
1488
-
1489
- .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
1490
- display:none;
1491
- }
1492
-
1493
- .tds-combo-box-input{
1494
- display:flex;
1495
- flex:1;
1496
- align-items:center;
1497
- padding-block:var(--tds-field-padding-block);
1498
- padding-inline:var(--tds-field-padding-inline);
1499
- font-family:inherit;
1500
- font-size:inherit;
1501
- color:inherit;
2142
+ display:flex;
2143
+ align-items:center;
2144
+ justify-content:center;
2145
+ padding:var(--t-spacing-half);
2146
+ font-size:.875em;
2147
+ color:var(--t-text-color);
2148
+ cursor:pointer;
1502
2149
  outline:0;
1503
- background:transparent;
2150
+ background-color:transparent;
1504
2151
  border:0;
2152
+ border-radius:var(--t-border-radius-md);
2153
+ transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
2154
+ transition-duration:var(--tds-date-picker-popover-interactive-duration);
2155
+ transition-property:var(--tds-date-picker-popover-interactive-property);
1505
2156
  }
1506
2157
 
1507
- .tds-combo-box-input:has( + .tds-combo-box-button){
1508
- padding-inline-end:0;
2158
+ .tds-date-picker-calendar-nav[data-hovered]{
2159
+ background-color:var(--t-fill-color-button-neutral-outline-hover);
1509
2160
  }
1510
2161
 
1511
- .tds-combo-box-input::-moz-placeholder{
1512
- color:var(--tds-field-placeholder-color);
1513
- -moz-user-select:none;
1514
- user-select:none;
2162
+ .tds-date-picker-calendar-nav[data-pressed]{
2163
+ background-color:var(--t-fill-color-button-neutral-outline-active);
1515
2164
  }
1516
2165
 
1517
- .tds-combo-box-input::placeholder{
1518
- color:var(--tds-field-placeholder-color);
1519
- -webkit-user-select:none;
1520
- -moz-user-select:none;
1521
- user-select:none;
2166
+ .tds-date-picker-calendar-nav[data-focus-visible]{
2167
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
2168
+ outline-offset:var(--t-focus-ring-offset);
1522
2169
  }
1523
2170
 
1524
- .tds-combo-box-button{
1525
- flex-shrink:0;
1526
- align-self:center;
1527
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
1528
- block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
1529
- padding:0;
1530
- margin-inline-end:var(--tds-combo-box-button-offset);
2171
+ .tds-date-picker-calendar-nav[data-disabled]{
2172
+ color:var(--t-text-color-disabled);
2173
+ cursor:not-allowed;
2174
+ }
2175
+
2176
+ .tds-date-picker-calendar-grid{
2177
+ font-feature-settings:"ss01", "ss02";
2178
+ border-collapse:collapse;
1531
2179
  }
1532
2180
 
1533
- .tds-combo-box-button > svg{
1534
- inline-size:var(--tds-field-font-size);
1535
- block-size:var(--tds-field-font-size);
1536
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
2181
+ .tds-date-picker-calendar-grid :where(thead,tbody,tr,td,th){
2182
+ padding:0;
2183
+ border:0;
1537
2184
  }
1538
2185
 
1539
- .tds-combo-box-popover{
1540
- width:var(--trigger-width);
1541
- max-block-size:inherit;
1542
- padding:var(--t-spacing-1);
1543
- overflow:auto;
1544
- scroll-behavior:smooth;
1545
- overscroll-behavior:none;
2186
+ .tds-date-picker-calendar-header-cell{
2187
+ padding-block-end:var(--t-spacing-1);
2188
+ font-size:.875em;
2189
+ font-weight:var(--t-font-weight-medium);
2190
+ color:var(--t-text-color-secondary);
2191
+ text-align:center;
2192
+ -webkit-user-select:none;
2193
+ -moz-user-select:none;
2194
+ user-select:none;
2195
+ }
2196
+
2197
+ .tds-date-picker-calendar-cell-button{
2198
+ position:relative;
2199
+ display:flex;
2200
+ align-items:center;
2201
+ justify-content:center;
2202
+ inline-size:2.25em;
2203
+ block-size:2.25em;
2204
+ color:var(--t-text-color);
2205
+ cursor:pointer;
1546
2206
  -webkit-user-select:none;
1547
2207
  -moz-user-select:none;
1548
2208
  user-select:none;
1549
2209
  outline:0;
1550
- scrollbar-color:#0004 var(--t-surface-color-card);
1551
- scrollbar-width:thin;
1552
- background:var(--t-surface-color-card);
1553
- background-clip:padding-box;
1554
- border:1px solid var(--t-border-color);
1555
- border-radius:var(--t-border-radius);
1556
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1557
2210
  }
1558
2211
 
1559
- .tds-combo-box-popover[data-entering]{
1560
- animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
2212
+ .tds-date-picker-calendar-cell-button::before{
2213
+ position:absolute;
2214
+ inset:0;
2215
+ z-index:-1;
2216
+ content:"";
2217
+ background-color:var(--_background-color);
2218
+ border-radius:50%;
1561
2219
  }
1562
2220
 
1563
- .tds-combo-box-popover[data-exiting]{
1564
- animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
1565
- }
2221
+ .tds-date-picker-calendar-cell-button[data-today]::before{
2222
+ box-shadow:inset 0 0 0 1.5px var(--t-border-color);
2223
+ }
1566
2224
 
1567
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1568
- will-change:opacity, transform;
2225
+ .tds-date-picker-calendar-cell-button[data-outside-month]{
2226
+ display:none;
1569
2227
  }
1570
2228
 
1571
- @keyframes tds-combo-box-popover{
1572
- from{
1573
- opacity:0;
1574
- transform:translateY(-8px);
2229
+ .tds-date-picker-calendar-cell-button[data-hovered]{
2230
+ --_background-color:var(--t-fill-color-button-neutral-outline-hover);
1575
2231
  }
1576
- }
1577
-
1578
- @media (prefers-reduced-motion: reduce){
1579
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1580
- animation:none;
1581
- }
1582
2232
 
1583
- .tds-combo-box-button > svg{
1584
- transition:none;
2233
+ .tds-date-picker-calendar-cell-button[data-pressed]{
2234
+ --_background-color:var(--t-fill-color-button-neutral-outline-active);
1585
2235
  }
1586
- }
1587
-
1588
- .tds-combo-box-list{
1589
- padding:0;
1590
- margin:0;
1591
- }
1592
2236
 
1593
- .tds-combo-box-list-item{
1594
- display:block;
1595
- padding-block:var(--t-spacing-1);
1596
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1597
- overflow:hidden;
1598
- text-overflow:ellipsis;
1599
- font-size:1rem;
1600
- color:var(--t-text-color);
1601
- white-space:nowrap;
1602
- cursor:default;
1603
- border-radius:var(--t-border-radius);
1604
- }
1605
-
1606
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
1607
- background:var(--t-fill-color-neutral-070);
2237
+ .tds-date-picker-calendar-cell-button[data-selected]{
2238
+ --_background-color:var(--t-fill-color-interaction);
2239
+ font-weight:var(--t-font-weight-semibold);
2240
+ color:var(--t-text-color-inverted);
2241
+ border-color:transparent;
1608
2242
  }
1609
2243
 
1610
- .tds-combo-box-list-item[data-selected]{
1611
- background:var(--t-fill-color-button-interaction-ghost-active);
2244
+ .tds-date-picker-calendar-cell-button[data-unavailable]{
2245
+ color:var(--t-text-color-disabled);
2246
+ text-decoration:line-through;
2247
+ cursor:not-allowed;
1612
2248
  }
1613
2249
 
1614
- .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
1615
- background:var(--t-fill-color-neutral-060);
2250
+ .tds-date-picker-calendar-cell-button[data-disabled]{
2251
+ color:var(--t-text-color-disabled);
1616
2252
  }
1617
2253
 
1618
- .tds-combo-box-list-item[data-disabled]{
1619
- color:var(--t-form-color-disabled);
1620
- cursor:not-allowed;
2254
+ .tds-date-picker-calendar-cell-button[data-focus-visible]{
2255
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
2256
+ outline-offset:-2px;
1621
2257
  }
1622
2258
 
1623
- .tds-combo-box-list-item[data-disabled][data-hovered]{
1624
- background:transparent;
1625
- }
1626
-
1627
- .tds-combo-box-empty-state{
1628
- position:relative;
1629
- min-block-size:var(--t-spacing-3);
1630
- padding-block:var(--t-spacing-1);
1631
- padding-inline:var(--t-spacing-2);
1632
- font-size:var(--t-font-size-md);
1633
- color:var(--t-text-color-secondary);
1634
- }
2259
+ .tds-date-picker-calendar-cell-button[data-focus-visible][data-selected]{
2260
+ outline-offset:var(--t-focus-ring-offset);
2261
+ }
1635
2262
 
1636
- .tds-combo-box-load-more{
1637
- position:relative;
1638
- min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
2263
+ .tds-date-picker-popover--lg{
2264
+ --tds-date-picker-popover-font-size:var(--t-font-size-lg);
1639
2265
  }
1640
2266
 
1641
- .tds-combo-box-empty-state,
1642
- .tds-combo-box-load-more{
1643
- --tds-loading-spinner-visibility:visible;
1644
- --tds-loading-spinner-animation-play-state:running;
1645
- }
2267
+ .tds-radio-group{
2268
+ --tds-radio-group-font-size:var(--t-font-size-md);
2269
+ --tds-radio-group-line-height:1.4;
2270
+ --tds-radio-group-gap:var(--t-spacing-1);
1646
2271
 
1647
- .tds-combo-box-list-section:not(:first-child){
1648
- margin-block-start:var(--t-spacing-half);
1649
- }
2272
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
2273
+ --tds-radio-group-description-line-height:1.35;
2274
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
2275
+ --tds-radio-group-description-invalid-icon-display:none;
2276
+ display:flex;
2277
+ flex-direction:column;
2278
+ gap:0;
2279
+ padding:0;
2280
+ margin:0;
1650
2281
 
1651
- .tds-combo-box-section-header{
1652
- padding-block:var(--t-spacing-1);
1653
- padding-inline:var(--t-spacing-1);
1654
- font-size:var(--t-font-size-sm);
1655
- font-weight:var(--t-font-weight-semibold);
1656
- color:var(--t-text-color-secondary);
2282
+ font-size:var(--tds-radio-group-font-size);
2283
+ line-height:var(--tds-radio-group-line-height);
2284
+ border:0;
1657
2285
  }
1658
2286
 
1659
- .tds-dropdown-popover{
1660
- min-inline-size:10rem;
1661
- max-inline-size:24rem;
1662
- padding:var(--t-spacing-1);
1663
- overflow:auto;
1664
- overscroll-behavior:none;
1665
- -webkit-user-select:none;
1666
- -moz-user-select:none;
1667
- user-select:none;
1668
- outline:0;
1669
- scrollbar-color:#0004 var(--t-surface-color-card);
1670
- scrollbar-width:thin;
1671
- background:var(--t-surface-color-card);
1672
- background-clip:padding-box;
1673
- border:1px solid var(--t-border-color);
1674
- border-radius:var(--t-border-radius);
1675
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1676
- }
1677
- .tds-dropdown-popover[data-entering]{
1678
- animation:tds-dropdown-popover var(--t-duration-300) var(--t-ease-out);
1679
- }
1680
- .tds-dropdown-popover[data-exiting]{
1681
- animation:tds-dropdown-popover var(--t-duration-200) var(--t-ease-in) reverse;
1682
- }
1683
- .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
1684
- will-change:opacity, transform;
2287
+ .tds-radio-group legend{
2288
+ float:left;
2289
+ padding:0;
2290
+ margin:0;
1685
2291
  }
1686
- @keyframes tds-dropdown-popover{
1687
- from{
1688
- opacity:0;
1689
- transform:translateY(-8px);
2292
+
2293
+ .tds-radio-group[aria-invalid="true"]{
2294
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
2295
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1690
2296
  }
1691
- }
1692
- @media (prefers-reduced-motion: reduce){
1693
- .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
1694
- animation:none;
2297
+
2298
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
2299
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1695
2300
  }
2301
+
2302
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2303
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2304
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2305
+ }
2306
+
2307
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2308
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2309
+ }
2310
+
2311
+ .tds-radio-group:has(input:required) legend::after{
2312
+ margin-left:.25ch;
2313
+ color:var(--t-text-color-status-error);
2314
+ content:"*";
2315
+ }
2316
+
2317
+ .tds-radio-group-fields{
2318
+ display:flex;
2319
+ flex-direction:column;
2320
+ gap:var(--tds-radio-group-gap);
2321
+ align-items:flex-start;
2322
+ margin-top:var(--t-spacing-1);
1696
2323
  }
1697
- .tds-dropdown-popover [role="menu"]{
1698
- outline:0;
1699
- }
1700
- .tds-dropdown-item{
1701
- --tds-dropdown-item-color:var(--t-text-color);
1702
2324
 
2325
+ .tds-radio-group-description{
1703
2326
  display:flex;
1704
- gap:var(--t-spacing-1);
1705
- align-items:center;
1706
- padding-block:var(--t-spacing-1);
1707
- padding-inline:var(--t-spacing-2);
1708
- font-size:1rem;
1709
- color:var(--tds-dropdown-item-color);
1710
- text-decoration:none;
1711
- cursor:default;
1712
- outline:0;
1713
- border-radius:var(--t-border-radius);
2327
+ gap:var(--t-spacing-half);
2328
+ align-items:flex-start;
2329
+ margin:var(--t-spacing-fourth) 0 0;
2330
+ font-size:var(--tds-radio-group-description-font-size);
2331
+ line-height:var(--tds-radio-group-description-line-height);
2332
+ color:var(--tds-radio-group-description-color);
2333
+ cursor:text;
1714
2334
  }
1715
- .tds-dropdown-item[data-hovered]:not([data-disabled]),.tds-dropdown-item[data-focus-visible]{
1716
- background:var(--t-fill-color-neutral-070);
1717
- }
1718
- .tds-dropdown-item[data-pressed]:not([data-disabled]){
1719
- background:var(--t-fill-color-neutral-060);
1720
- }
1721
- .tds-dropdown-item[data-disabled]{
1722
- --tds-dropdown-item-color:var(--t-form-color-disabled);
1723
2335
 
1724
- cursor:not-allowed;
2336
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2337
+ display:var(--tds-radio-group-description-invalid-icon-display);
2338
+ flex-shrink:0;
2339
+ margin-top:calc(.5lh - .5em);
2340
+ line-height:var(--tds-radio-group-description-line-height);
1725
2341
  }
1726
- .tds-dropdown-item--destructive{
1727
- --tds-dropdown-item-color:var(--t-text-color-status-error);
1728
- }
1729
- .tds-dropdown-item--staff-only{
1730
- --tds-dropdown-item-color:var(--t-fill-color-product-staff);
1731
- }
1732
- a.tds-dropdown-item:is(:hover, :active){
1733
- color:var(--tds-dropdown-item-color);
1734
- }
1735
- .tds-dropdown-item [slot="prefix"],
1736
- .tds-dropdown-item [slot="suffix"]{
1737
- flex-shrink:0;
1738
- }
1739
- .tds-dropdown-item [slot="label"]{
1740
- flex:1;
1741
- min-width:0;
1742
- overflow:hidden;
1743
- text-overflow:ellipsis;
1744
- white-space:nowrap;
1745
- }
1746
- .tds-dropdown-item [slot="description"]{
1747
- font-size:var(--t-font-size-sm);
1748
- color:var(--t-text-color-secondary);
1749
- }
1750
- .tds-dropdown-item:has([slot="description"]){
1751
- display:grid;
1752
- grid-template-areas:"prefix label suffix" "prefix description suffix";
1753
- grid-template-columns:auto 1fr auto;
1754
- }
1755
- .tds-dropdown-item:has([slot="description"]) [slot="prefix"]{
1756
- grid-area:prefix;
1757
- }
1758
- .tds-dropdown-item:has([slot="description"]) [slot="label"]{
1759
- grid-area:label;
1760
- }
1761
- .tds-dropdown-item:has([slot="description"]) [slot="description"]{
1762
- grid-area:description;
1763
- }
1764
- .tds-dropdown-item:has([slot="description"]) [slot="suffix"]{
1765
- grid-area:suffix;
1766
- }
1767
- .tds-dropdown-section:not(:first-child){
1768
- margin-block-start:var(--t-spacing-half);
1769
- }
1770
- .tds-dropdown-section-label{
1771
- padding-block:var(--t-spacing-1);
1772
- padding-inline:var(--t-spacing-1);
1773
- font-size:var(--t-font-size-sm);
1774
- font-weight:var(--t-font-weight-semibold);
1775
- color:var(--t-text-color-secondary);
1776
- }
1777
- .tds-dropdown-separator{
1778
- margin-block:var(--t-spacing-half);
1779
- margin-inline:0;
1780
- border:0;
1781
- border-top:1px solid var(--t-border-color);
1782
- }
1783
2342
 
1784
- .tds-checkbox{
1785
- --tds-checkbox-font-size:var(--t-font-size-md);
1786
- --tds-checkbox-cursor:pointer;
1787
- --tds-checkbox-line-height:1.4;
1788
- --tds-checkbox-transition-property:background-color, border-color;
2343
+ .tds-radio-group--sm{
2344
+ --tds-radio-group-line-height:1.35;
2345
+ --tds-radio-group-font-size:var(--t-font-size-sm);
2346
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
2347
+ --tds-radio-group-description-line-height:1.3;
2348
+ }
1789
2349
 
1790
- --tds-checkbox-input-size:var(--t-element-size-md);
1791
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1792
- --tds-checkbox-input-border-color:var(--t-form-border-color);
1793
- --tds-checkbox-input-background-color:var(--t-form-background-color);
2350
+ .tds-radio{
2351
+ --tds-radio-font-size:var(--t-font-size-md);
2352
+ --tds-radio-cursor:pointer;
2353
+ --tds-radio-line-height:1.4;
2354
+ --tds-radio-transition-property:border-width;
1794
2355
 
1795
- --tds-checkbox-input-icon:none;
1796
- --tds-checkbox-input-icon-visibility:hidden;
1797
- --tds-checkbox-input-icon-opacity:0;
1798
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
2356
+ --tds-radio-input-size:var(--t-element-size-md);
2357
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
2358
+ --tds-radio-input-border-color:var(--t-form-border-color);
2359
+ --tds-radio-input-border-width:var(--t-form-border-width);
2360
+ --tds-radio-input-background-color:var(--t-form-background-color);
1799
2361
 
1800
- --tds-checkbox-label-color:var(--t-form-color);
2362
+ --tds-radio-label-color:var(--t-form-color);
1801
2363
 
1802
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
1803
- --tds-checkbox-description-line-height:1.35;
1804
- --tds-checkbox-description-color:var(--t-text-color-secondary);
1805
- --tds-checkbox-description-invalid-icon-display:none;
2364
+ --tds-radio-description-font-size:var(--t-font-size-sm);
2365
+ --tds-radio-description-line-height:1.35;
2366
+ --tds-radio-description-color:var(--t-text-color-secondary);
1806
2367
 
1807
2368
  position:relative;
1808
2369
  display:inline-grid;
1809
2370
  grid-template-columns:auto;
1810
2371
  grid-auto-columns:1fr;
1811
2372
  gap:var(--t-spacing-fourth) 0;
1812
- line-height:var(--tds-checkbox-line-height);
2373
+ line-height:var(--tds-radio-line-height);
1813
2374
  -webkit-user-select:none;
1814
2375
  -moz-user-select:none;
1815
2376
  user-select:none;
1816
2377
  }
1817
2378
 
1818
- .tds-checkbox label{
2379
+ .tds-radio label{
1819
2380
  grid-area:1 / 2;
1820
2381
  padding-inline-start:var(--t-spacing-1);
1821
- font-size:var(--tds-checkbox-font-size);
2382
+ font-size:var(--tds-radio-font-size);
1822
2383
  font-weight:var(--t-font-weight-normal);
1823
- color:var(--tds-checkbox-label-color);
1824
- cursor:var(--tds-checkbox-cursor);
1825
- }
1826
-
1827
- .tds-checkbox tds-indeterminate{
1828
- display:flex;
2384
+ color:var(--tds-radio-label-color);
2385
+ cursor:var(--tds-radio-cursor);
1829
2386
  }
1830
2387
 
1831
- .tds-checkbox input[type="checkbox"]{
2388
+ .tds-radio input[type="radio"]{
1832
2389
  position:relative;
1833
2390
  width:1em;
1834
2391
  height:1em;
1835
2392
  margin:calc((1lh - 1em) / 2) 0 0;
1836
- font-size:var(--tds-checkbox-font-size);
2393
+ font-size:var(--tds-radio-font-size);
1837
2394
  line-height:inherit;
1838
2395
  -webkit-appearance:none;
1839
2396
  -moz-appearance:none;
1840
2397
  appearance:none;
1841
- cursor:var(--tds-checkbox-cursor);
1842
- background-color:var(--tds-checkbox-input-background-color);
1843
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1844
- border-radius:var(--tds-checkbox-input-border-radius);
2398
+ cursor:var(--tds-radio-cursor);
2399
+ background-color:var(--tds-radio-input-background-color);
2400
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
2401
+ border-radius:var(--tds-radio-input-border-radius);
1845
2402
  transition-timing-function:var(--t-ease-in-out);
1846
2403
  transition-duration:var(--t-duration-200);
1847
- transition-property:var(--tds-checkbox-transition-property);
2404
+ transition-property:var(--tds-radio-transition-property);
1848
2405
  }
1849
2406
 
1850
- :is(.tds-checkbox input[type="checkbox"])::before{
1851
- position:absolute;
1852
- top:50%;
1853
- left:50%;
1854
- visibility:var(--tds-checkbox-input-icon-visibility);
1855
- width:100%;
1856
- height:100%;
1857
- content:"";
1858
- background-color:var(--tds-checkbox-input-icon-fill);
1859
- border-radius:var(--tds-checkbox-input-border-radius);
1860
- opacity:var(--tds-checkbox-input-icon-opacity);
1861
- -webkit-mask-image:var(--tds-checkbox-input-icon);
1862
- mask-image:var(--tds-checkbox-input-icon);
1863
- -webkit-mask-repeat:no-repeat;
1864
- mask-repeat:no-repeat;
1865
- -webkit-mask-size:contain;
1866
- mask-size:contain;
1867
- transform:translate(-50%, -50%);
1868
- }
1869
-
1870
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1871
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1872
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
2407
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
2408
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2409
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1873
2410
  }
1874
2411
 
1875
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
2412
+ :is(.tds-radio input[type="radio"]):focus-visible{
1876
2413
  outline:var(--t-focus-ring-outline);
1877
2414
  outline-offset:var(--t-focus-ring-offset);
1878
2415
  }
1879
2416
 
1880
- :is(.tds-checkbox input[type="checkbox"]):disabled{
2417
+ :is(.tds-radio input[type="radio"]):disabled{
1881
2418
  pointer-events:none;
1882
2419
  }
1883
2420
 
1884
2421
  @media (prefers-reduced-motion: reduce){
1885
2422
 
1886
- .tds-checkbox input[type="checkbox"]{
1887
- --tds-checkbox-transition-property:none;
1888
- }
1889
- }
1890
-
1891
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1892
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
1893
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1894
- --tds-checkbox-input-icon-visibility:visible;
1895
- --tds-checkbox-input-icon-opacity:1;
2423
+ .tds-radio input[type="radio"]{
2424
+ --tds-radio-transition-property:none;
1896
2425
  }
1897
-
1898
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1899
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1900
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1901
2426
  }
1902
2427
 
1903
- .tds-checkbox:has(input:checked){
1904
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1905
- }
1906
-
1907
- .tds-checkbox:has(input:indeterminate){
1908
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1909
- }
1910
-
1911
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1912
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1913
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1914
- --tds-checkbox-description-invalid-icon-display:inline-block;
2428
+ .tds-radio:has(input:checked){
2429
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2430
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
2431
+ --tds-radio-input-border-width:4px;
1915
2432
  }
1916
-
1917
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1918
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1919
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1920
- }
1921
-
1922
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
1923
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1924
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
2433
+
2434
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
2435
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2436
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1925
2437
  }
1926
2438
 
1927
- :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
1928
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1929
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1930
- }
2439
+ .tds-radio:has(input:user-invalid){
2440
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2441
+ }
1931
2442
 
1932
- .tds-checkbox:has(input:required) label::after{
1933
- margin-left:.25ch;
1934
- color:var(--t-text-color-status-error);
1935
- content:"*";
2443
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2444
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2445
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1936
2446
  }
1937
2447
 
1938
- .tds-checkbox:has(input:disabled){
1939
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1940
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
2448
+ .tds-radio:has(input:disabled){
2449
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2450
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1941
2451
 
1942
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1943
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1944
- --tds-checkbox-cursor:not-allowed;
2452
+ --tds-radio-label-color:var(--t-form-color-disabled);
2453
+ --tds-radio-description-color:var(--t-form-color-disabled);
2454
+ --tds-radio-cursor:not-allowed;
1945
2455
  }
1946
2456
 
1947
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1948
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
2457
+ .tds-radio:has(input:disabled) input:checked{
2458
+ --tds-radio-input-background-color:var(--t-form-background-color);
2459
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1949
2460
  }
1950
2461
 
1951
- .tds-checkbox-description{
2462
+ .tds-radio-description{
1952
2463
  display:flex;
1953
2464
  grid-area:2 / 2;
1954
2465
  gap:var(--t-spacing-half);
1955
2466
  align-items:flex-start;
1956
2467
  padding-inline-start:var(--t-spacing-1);
1957
2468
  margin:0;
1958
- font-size:var(--tds-checkbox-description-font-size);
1959
- line-height:var(--tds-checkbox-description-line-height);
1960
- color:var(--tds-checkbox-description-color);
2469
+ font-size:var(--tds-radio-description-font-size);
2470
+ line-height:var(--tds-radio-description-line-height);
2471
+ color:var(--tds-radio-description-color);
1961
2472
  cursor:text;
1962
2473
  }
1963
2474
 
1964
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1965
- display:var(--tds-checkbox-description-invalid-icon-display);
1966
- flex-shrink:0;
1967
- margin-top:calc(.5lh - .5em);
1968
- line-height:var(--tds-checkbox-description-line-height);
1969
- }
1970
-
1971
- .tds-checkbox--sm{
1972
- --tds-checkbox-line-height:1.35;
1973
- --tds-checkbox-input-size:var(--t-element-size-sm);
1974
- --tds-checkbox-font-size:var(--t-font-size-sm);
1975
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1976
- --tds-checkbox-description-line-height:1.3;
2475
+ .tds-radio--sm{
2476
+ --tds-radio-line-height:1.35;
2477
+ --tds-radio-input-size:var(--t-element-size-sm);
2478
+ --tds-radio-font-size:var(--t-font-size-sm);
2479
+ --tds-radio-description-font-size:var(--t-font-size-xs);
2480
+ --tds-radio-description-line-height:1.3;
1977
2481
  }
1978
2482
 
1979
2483
 
@@ -2149,449 +2653,209 @@ a.tds-dropdown-item:is(:hover, :active){
2149
2653
  outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2150
2654
  outline-offset:0;
2151
2655
  background-color:var(--tds-field-background-color);
2152
- border:var(--t-form-border-width) solid var(--tds-field-border-color);
2153
- border-radius:var(--t-form-border-radius);
2154
- transition-timing-function:var(--t-ease-in-out);
2155
- transition-duration:var(--t-duration-200);
2156
- transition-property:background-color, border-color, outline-color, outline-offset;
2157
- }
2158
-
2159
- .tds-field-control[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
2160
- border-color:var(--tds-field-border-color-hover);
2161
- }
2162
-
2163
- .tds-field-control[data-focus-within]{
2164
- outline-color:var(--t-focus-ring-color);
2165
- outline-offset:var(--t-focus-ring-offset);
2166
- border-color:var(--tds-field-border-color-active);
2167
- }
2168
-
2169
- .tds-field-control[data-readonly],.tds-field-control:has([data-readonly]),.tds-field-control:has([readonly]){
2170
- --tds-field-border-color:var(--t-form-border-color-readonly);
2171
- --tds-field-border-color-hover:var(--t-form-border-color-readonly);
2172
- --tds-field-background-color:var(--t-form-background-color-readonly);
2173
- color:var(--t-form-color-readonly);
2174
- }
2175
-
2176
- [data-focus-within]:is(.tds-field-control[data-readonly],.tds-field-control:has([data-readonly]),.tds-field-control:has([readonly])){
2177
- border-color:var(--t-form-border-color-hover);
2178
- }
2179
-
2180
- .tds-field-description{
2181
- display:flex;
2182
- gap:var(--t-spacing-half);
2183
- align-items:flex-start;
2184
- margin:0;
2185
- font-size:var(--tds-field-description-font-size);
2186
- line-height:var(--tds-field-description-line-height);
2187
- color:var(--tds-field-description-color, var(--t-text-color-secondary));
2188
- cursor:var(--tds-field-description-cursor);
2189
- }
2190
-
2191
- .tds-field-description .tds-field-description-invalid-icon{
2192
- display:var(--tds-field-description-invalid-icon-display, none);
2193
- flex-shrink:0;
2194
- margin-block-start:calc(.5lh - .5em);
2195
- line-height:var(--tds-field-description-line-height);
2196
- }
2197
-
2198
- .tds-field-date-segment{
2199
- padding-inline:var(--tds-field-date-segment-padding-inline, 2px);
2200
- text-align:end;
2201
- text-wrap:nowrap;
2202
- caret-color:transparent;
2203
- border-radius:var(--t-border-radius-sm);
2204
- }
2205
-
2206
- .tds-field-date-segment[data-placeholder]{
2207
- color:var(--tds-field-placeholder-color);
2208
- }
2209
-
2210
- .tds-field-date-segment[data-focused]{
2211
- color:var(--t-text-color-inverted);
2212
- outline:0;
2213
- background-color:var(--t-fill-color-interaction);
2214
- }
2215
-
2216
- .tds-field-date-segment-separator{
2217
- padding-inline:0;
2218
- color:var(--tds-field-placeholder-color);
2219
- }
2220
-
2221
- .tds-field-date-segment:not([data-placeholder]) + .tds-field-date-segment-separator{
2222
- color:var(--tds-field-color);
2223
- }
2224
-
2225
- .tds-number-stepper{
2226
- --tds-number-stepper-button-offset:4px;
2227
- --tds-number-stepper-button-gap:2px;
2228
- }
2229
-
2230
- .tds-number-stepper--lg{
2231
- --tds-number-stepper-button-offset:5px;
2232
- --tds-number-stepper-button-gap:4px;
2233
- }
2234
-
2235
- .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
2236
- display:none;
2237
- }
2238
-
2239
- .tds-number-stepper-input{
2240
- display:flex;
2241
- flex:1;
2242
- align-items:center;
2243
- min-inline-size:0;
2244
- padding-block:var(--tds-field-padding-block);
2245
- padding-inline:var(--tds-field-padding-inline);
2246
- font-family:inherit;
2247
- font-size:inherit;
2248
- color:inherit;
2249
- outline:0;
2250
- background:transparent;
2251
- border:0;
2252
- }
2253
-
2254
- .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
2255
- margin:0;
2256
- -webkit-appearance:none;
2257
- appearance:none;
2258
- }
2259
-
2260
- .tds-number-stepper-button{
2261
- flex-shrink:0;
2262
- align-self:center;
2263
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
2264
- block-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
2265
- padding:0;
2266
- }
2267
-
2268
- .tds-number-stepper-button + .tds-number-stepper-button{
2269
- margin-inline-start:var(--tds-number-stepper-button-gap);
2270
- }
2271
-
2272
- .tds-number-stepper-button:last-of-type{
2273
- margin-inline-end:var(--tds-number-stepper-button-offset);
2274
- }
2275
-
2276
- .tds-radio{
2277
- --tds-radio-font-size:var(--t-font-size-md);
2278
- --tds-radio-cursor:pointer;
2279
- --tds-radio-line-height:1.4;
2280
- --tds-radio-transition-property:border-width;
2281
-
2282
- --tds-radio-input-size:var(--t-element-size-md);
2283
- --tds-radio-input-border-radius:var(--t-border-radius-round);
2284
- --tds-radio-input-border-color:var(--t-form-border-color);
2285
- --tds-radio-input-border-width:var(--t-form-border-width);
2286
- --tds-radio-input-background-color:var(--t-form-background-color);
2287
-
2288
- --tds-radio-label-color:var(--t-form-color);
2289
-
2290
- --tds-radio-description-font-size:var(--t-font-size-sm);
2291
- --tds-radio-description-line-height:1.35;
2292
- --tds-radio-description-color:var(--t-text-color-secondary);
2293
-
2294
- position:relative;
2295
- display:inline-grid;
2296
- grid-template-columns:auto;
2297
- grid-auto-columns:1fr;
2298
- gap:var(--t-spacing-fourth) 0;
2299
- line-height:var(--tds-radio-line-height);
2300
- -webkit-user-select:none;
2301
- -moz-user-select:none;
2302
- user-select:none;
2303
- }
2304
-
2305
- .tds-radio label{
2306
- grid-area:1 / 2;
2307
- padding-inline-start:var(--t-spacing-1);
2308
- font-size:var(--tds-radio-font-size);
2309
- font-weight:var(--t-font-weight-normal);
2310
- color:var(--tds-radio-label-color);
2311
- cursor:var(--tds-radio-cursor);
2312
- }
2313
-
2314
- .tds-radio input[type="radio"]{
2315
- position:relative;
2316
- width:1em;
2317
- height:1em;
2318
- margin:calc((1lh - 1em) / 2) 0 0;
2319
- font-size:var(--tds-radio-font-size);
2320
- line-height:inherit;
2321
- -webkit-appearance:none;
2322
- -moz-appearance:none;
2323
- appearance:none;
2324
- cursor:var(--tds-radio-cursor);
2325
- background-color:var(--tds-radio-input-background-color);
2326
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
2327
- border-radius:var(--tds-radio-input-border-radius);
2328
- transition-timing-function:var(--t-ease-in-out);
2329
- transition-duration:var(--t-duration-200);
2330
- transition-property:var(--tds-radio-transition-property);
2331
- }
2332
-
2333
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
2334
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2335
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
2336
- }
2337
-
2338
- :is(.tds-radio input[type="radio"]):focus-visible{
2339
- outline:var(--t-focus-ring-outline);
2340
- outline-offset:var(--t-focus-ring-offset);
2341
- }
2342
-
2343
- :is(.tds-radio input[type="radio"]):disabled{
2344
- pointer-events:none;
2345
- }
2656
+ border:var(--t-form-border-width) solid var(--tds-field-border-color);
2657
+ border-radius:var(--t-form-border-radius);
2658
+ transition-timing-function:var(--t-ease-in-out);
2659
+ transition-duration:var(--t-duration-200);
2660
+ transition-property:background-color, border-color, outline-color, outline-offset;
2661
+ }
2346
2662
 
2347
- @media (prefers-reduced-motion: reduce){
2663
+ .tds-field-control[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
2664
+ border-color:var(--tds-field-border-color-hover);
2665
+ }
2348
2666
 
2349
- .tds-radio input[type="radio"]{
2350
- --tds-radio-transition-property:none;
2667
+ .tds-field-control[data-focus-within]{
2668
+ outline-color:var(--t-focus-ring-color);
2669
+ outline-offset:var(--t-focus-ring-offset);
2670
+ border-color:var(--tds-field-border-color-active);
2351
2671
  }
2352
- }
2353
2672
 
2354
- .tds-radio:has(input:checked){
2355
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2356
- --tds-radio-input-border-color:var(--t-border-color-control-info);
2357
- --tds-radio-input-border-width:4px;
2673
+ .tds-field-control[data-readonly],.tds-field-control:has([data-readonly]),.tds-field-control:has([readonly]){
2674
+ --tds-field-border-color:var(--t-form-border-color-readonly);
2675
+ --tds-field-border-color-hover:var(--t-form-border-color-readonly);
2676
+ --tds-field-background-color:var(--t-form-background-color-readonly);
2677
+ color:var(--t-form-color-readonly);
2358
2678
  }
2359
2679
 
2360
- .tds-radio:has(input:checked) input:hover:not(:disabled){
2361
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2362
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2680
+ [data-focus-within]:is(.tds-field-control[data-readonly],.tds-field-control:has([data-readonly]),.tds-field-control:has([readonly])){
2681
+ border-color:var(--t-form-border-color-hover);
2363
2682
  }
2364
2683
 
2365
- .tds-radio:has(input:user-invalid){
2366
- --tds-radio-input-border-color:var(--t-form-border-color-error);
2367
- }
2684
+ .tds-field-description{
2685
+ display:flex;
2686
+ gap:var(--t-spacing-half);
2687
+ align-items:flex-start;
2688
+ margin:0;
2689
+ font-size:var(--tds-field-description-font-size);
2690
+ line-height:var(--tds-field-description-line-height);
2691
+ color:var(--tds-field-description-color, var(--t-text-color-secondary));
2692
+ cursor:var(--tds-field-description-cursor);
2693
+ }
2368
2694
 
2369
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2370
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2371
- --tds-radio-input-background-color:var(--t-form-background-color-error);
2372
- }
2695
+ .tds-field-description .tds-field-description-invalid-icon{
2696
+ display:var(--tds-field-description-invalid-icon-display, none);
2697
+ flex-shrink:0;
2698
+ margin-block-start:calc(.5lh - .5em);
2699
+ line-height:var(--tds-field-description-line-height);
2700
+ }
2373
2701
 
2374
- .tds-radio:has(input:disabled){
2375
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2376
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2702
+ .tds-field-date-segment{
2703
+ padding-inline:var(--tds-field-date-segment-padding-inline, 2px);
2704
+ text-align:end;
2705
+ text-wrap:nowrap;
2706
+ caret-color:transparent;
2707
+ border-radius:var(--t-border-radius-sm);
2708
+ }
2377
2709
 
2378
- --tds-radio-label-color:var(--t-form-color-disabled);
2379
- --tds-radio-description-color:var(--t-form-color-disabled);
2380
- --tds-radio-cursor:not-allowed;
2710
+ .tds-field-date-segment[data-placeholder]{
2711
+ color:var(--tds-field-placeholder-color);
2381
2712
  }
2382
2713
 
2383
- .tds-radio:has(input:disabled) input:checked{
2384
- --tds-radio-input-background-color:var(--t-form-background-color);
2385
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2386
- }
2714
+ .tds-field-date-segment[data-focused]{
2715
+ color:var(--t-text-color-inverted);
2716
+ outline:0;
2717
+ background-color:var(--t-fill-color-interaction);
2718
+ }
2387
2719
 
2388
- .tds-radio-description{
2389
- display:flex;
2390
- grid-area:2 / 2;
2391
- gap:var(--t-spacing-half);
2392
- align-items:flex-start;
2393
- padding-inline-start:var(--t-spacing-1);
2394
- margin:0;
2395
- font-size:var(--tds-radio-description-font-size);
2396
- line-height:var(--tds-radio-description-line-height);
2397
- color:var(--tds-radio-description-color);
2398
- cursor:text;
2720
+ .tds-field-date-segment-separator{
2721
+ padding-inline:0;
2722
+ color:var(--tds-field-placeholder-color);
2399
2723
  }
2400
2724
 
2401
- .tds-radio--sm{
2402
- --tds-radio-line-height:1.35;
2403
- --tds-radio-input-size:var(--t-element-size-sm);
2404
- --tds-radio-font-size:var(--t-font-size-sm);
2405
- --tds-radio-description-font-size:var(--t-font-size-xs);
2406
- --tds-radio-description-line-height:1.3;
2725
+ .tds-field-date-segment:not([data-placeholder]) + .tds-field-date-segment-separator{
2726
+ color:var(--tds-field-color);
2407
2727
  }
2408
2728
 
2409
- .tds-radio-group{
2410
- --tds-radio-group-font-size:var(--t-font-size-md);
2411
- --tds-radio-group-line-height:1.4;
2412
- --tds-radio-group-gap:var(--t-spacing-1);
2729
+ .tds-checkbox-group{
2730
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
2731
+ --tds-checkbox-group-line-height:1.4;
2732
+ --tds-checkbox-group-gap:var(--t-spacing-1);
2413
2733
 
2414
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
2415
- --tds-radio-group-description-line-height:1.35;
2416
- --tds-radio-group-description-color:var(--t-text-color-secondary);
2417
- --tds-radio-group-description-invalid-icon-display:none;
2734
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
2735
+ --tds-checkbox-group-description-line-height:1.35;
2736
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
2737
+ --tds-checkbox-group-description-invalid-icon-display:none;
2418
2738
  display:flex;
2419
2739
  flex-direction:column;
2420
2740
  gap:0;
2421
2741
  padding:0;
2422
2742
  margin:0;
2423
2743
 
2424
- font-size:var(--tds-radio-group-font-size);
2425
- line-height:var(--tds-radio-group-line-height);
2744
+ font-size:var(--tds-checkbox-group-font-size);
2745
+ line-height:var(--tds-checkbox-group-line-height);
2426
2746
  border:0;
2427
2747
  }
2428
2748
 
2429
- .tds-radio-group legend{
2749
+ .tds-checkbox-group legend{
2430
2750
  float:left;
2431
2751
  padding:0;
2432
2752
  margin:0;
2433
2753
  }
2434
2754
 
2435
- .tds-radio-group[aria-invalid="true"]{
2436
- --tds-radio-group-description-color:var(--t-text-color-status-error);
2437
- --tds-radio-group-description-invalid-icon-display:inline-block;
2755
+ .tds-checkbox-group[aria-invalid="true"]{
2756
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
2757
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
2438
2758
  }
2439
2759
 
2440
- .tds-radio-group[aria-invalid="true"] .tds-radio{
2441
- --tds-radio-input-border-color:var(--t-form-border-color-error);
2442
- }
2443
-
2444
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2445
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2446
- --tds-radio-input-background-color:var(--t-form-background-color-error);
2447
- }
2448
-
2449
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2450
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2451
- }
2452
-
2453
- .tds-radio-group:has(input:required) legend::after{
2760
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
2454
2761
  margin-left:.25ch;
2455
2762
  color:var(--t-text-color-status-error);
2456
2763
  content:"*";
2457
2764
  }
2458
2765
 
2459
- .tds-radio-group-fields{
2766
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
2767
+ content:none;
2768
+ }
2769
+
2770
+ .tds-checkbox-group-fields{
2460
2771
  display:flex;
2461
2772
  flex-direction:column;
2462
- gap:var(--tds-radio-group-gap);
2773
+ gap:var(--tds-checkbox-group-gap);
2463
2774
  align-items:flex-start;
2464
2775
  margin-top:var(--t-spacing-1);
2465
2776
  }
2466
2777
 
2467
- .tds-radio-group-description{
2778
+ .tds-checkbox-group-description{
2468
2779
  display:flex;
2469
2780
  gap:var(--t-spacing-half);
2470
2781
  align-items:flex-start;
2471
2782
  margin:var(--t-spacing-fourth) 0 0;
2472
- font-size:var(--tds-radio-group-description-font-size);
2473
- line-height:var(--tds-radio-group-description-line-height);
2474
- color:var(--tds-radio-group-description-color);
2783
+ font-size:var(--tds-checkbox-group-description-font-size);
2784
+ line-height:var(--tds-checkbox-group-description-line-height);
2785
+ color:var(--tds-checkbox-group-description-color);
2475
2786
  cursor:text;
2476
2787
  }
2477
2788
 
2478
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2479
- display:var(--tds-radio-group-description-invalid-icon-display);
2789
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
2790
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
2480
2791
  flex-shrink:0;
2481
2792
  margin-top:calc(.5lh - .5em);
2482
- line-height:var(--tds-radio-group-description-line-height);
2793
+ line-height:var(--tds-checkbox-group-description-line-height);
2483
2794
  }
2484
2795
 
2485
- .tds-radio-group--sm{
2486
- --tds-radio-group-line-height:1.35;
2487
- --tds-radio-group-font-size:var(--t-font-size-sm);
2488
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
2489
- --tds-radio-group-description-line-height:1.3;
2796
+ .tds-checkbox-group--sm{
2797
+ --tds-checkbox-group-line-height:1.35;
2798
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
2799
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
2800
+ --tds-checkbox-group-description-line-height:1.3;
2490
2801
  }
2491
2802
 
2492
- .tds-input:has(textarea){
2493
- --tds-input-padding-block:6px;
2494
- --tds-input-resizer-size:var(--t-element-size-sm);
2495
- --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");
2803
+ .tds-time-field-input{
2804
+ --tds-field-date-segment-padding-inline:1px;
2805
+ padding-block:var(--tds-field-padding-block);
2806
+ padding-inline:var(--tds-field-padding-inline);
2807
+ font-variant-numeric:tabular-nums;
2496
2808
  }
2497
2809
 
2498
- @supports (x: attr(x type(*))){
2499
-
2500
- .tds-input textarea{
2501
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
2810
+ .tds-number-stepper{
2811
+ --tds-number-stepper-button-offset:4px;
2812
+ --tds-number-stepper-button-gap:2px;
2502
2813
  }
2503
- }
2504
2814
 
2505
- .tds-input.tds-textarea--resize-vertical textarea{
2506
- resize:vertical;
2507
- }
2508
-
2509
- .tds-input.tds-textarea--resize-none textarea{
2510
- resize:none;
2511
- }
2512
-
2513
- .tds-input.tds-textarea--resize-auto textarea{
2514
- resize:vertical;
2515
- }
2516
-
2517
- @supports (field-sizing: content){
2518
- .tds-input.tds-textarea--resize-auto textarea{
2519
- field-sizing:content;
2520
- resize:none;
2521
- }
2522
- }
2523
-
2524
- .tds-input textarea{
2525
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2526
- --tds-input-scrollbar-thumb-color-hidden:transparent;
2527
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2528
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2529
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2530
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2531
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2532
- --tds-input-scrollbar-thumb-border-radius:999px;
2533
- --tds-input-scrollbar-thumb-border-width:3px;
2534
- --tds-input-scrollbar-track-margin-block:.125rem;
2535
- scrollbar-color:initial;
2536
- transition-timing-function:var(--t-ease-in-out);
2537
- transition-duration:var(--t-duration-200);
2538
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2815
+ .tds-number-stepper--lg{
2816
+ --tds-number-stepper-button-offset:5px;
2817
+ --tds-number-stepper-button-gap:4px;
2539
2818
  }
2540
2819
 
2541
- @media (pointer: fine){
2542
- :is(.tds-input textarea)::-webkit-scrollbar{
2543
- width:12px;
2544
- height:12px;
2545
- cursor:default;
2546
- }
2547
-
2548
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2549
- cursor:default;
2550
- background:var(--tds-input-scrollbar-thumb-color);
2551
- background-clip:content-box;
2552
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2553
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2554
- }
2555
-
2556
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2557
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2558
- }
2559
-
2560
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2561
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2562
- }
2563
-
2564
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2565
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2566
- }
2567
-
2568
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
2569
- background:var(--tds-input-scrollbar-surface-color);
2570
- }
2820
+ .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
2821
+ display:none;
2822
+ }
2571
2823
 
2572
- :is(.tds-input textarea)::-webkit-resizer{
2573
- background:var(--tds-input-resizer-icon) no-repeat;
2574
- background-position:right bottom;
2575
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2576
- }
2824
+ .tds-number-stepper-input{
2825
+ display:flex;
2826
+ flex:1;
2827
+ align-items:center;
2828
+ min-inline-size:0;
2829
+ padding-block:var(--tds-field-padding-block);
2830
+ padding-inline:var(--tds-field-padding-inline);
2831
+ font-family:inherit;
2832
+ font-size:inherit;
2833
+ color:inherit;
2834
+ outline:0;
2835
+ background:transparent;
2836
+ border:0;
2837
+ }
2577
2838
 
2578
- :is(.tds-input textarea)::-webkit-scrollbar-track{
2579
- margin-block:var(--tds-input-scrollbar-track-margin-block);
2580
- cursor:default;
2581
- }
2839
+ .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
2840
+ margin:0;
2841
+ -webkit-appearance:none;
2842
+ appearance:none;
2843
+ }
2582
2844
 
2583
- @supports (-moz-appearance: none){
2584
- :is(.tds-input textarea){
2585
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2586
- scrollbar-width:thin;
2587
- }
2845
+ .tds-number-stepper-button{
2846
+ flex-shrink:0;
2847
+ align-self:center;
2848
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
2849
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
2850
+ padding:0;
2851
+ }
2588
2852
 
2589
- @media (hover){
2590
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2591
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2592
- }
2593
- }
2594
- }
2853
+ .tds-number-stepper-button + .tds-number-stepper-button{
2854
+ margin-inline-start:var(--tds-number-stepper-button-gap);
2855
+ }
2856
+
2857
+ .tds-number-stepper-button:last-of-type{
2858
+ margin-inline-end:var(--tds-number-stepper-button-offset);
2595
2859
  }
2596
2860
 
2597
2861
  .tds-toggle-switch{
@@ -3160,387 +3424,123 @@ a.tds-dropdown-item:is(:hover, :active){
3160
3424
  translate:var(--tds-select-dropdown-open-translate);
3161
3425
  transition:var(--tds-select-dropdown-transition);
3162
3426
  }
3163
-
3164
- :is(.tds-select select:has( > button)) option::checkmark{
3165
- display:none;
3166
- }
3167
-
3168
- @starting-style{
3169
- :is(.tds-select select:has( > button))::picker(select):popover-open{
3170
- opacity:var(--tds-select-dropdown-closed-opacity);
3171
- translate:var(--tds-select-dropdown-closed-translate);
3172
- }
3173
- }
3174
- }
3175
-
3176
- .tds-time-field-input{
3177
- --tds-field-date-segment-padding-inline:1px;
3178
- padding-block:var(--tds-field-padding-block);
3179
- padding-inline:var(--tds-field-padding-inline);
3180
- font-variant-numeric:tabular-nums;
3181
- }
3182
-
3183
-
3184
- @media (prefers-reduced-motion: no-preference){
3185
-
3186
- :root{
3187
- interpolate-size:allow-keywords;
3188
- }
3189
- }
3190
-
3191
- @layer tds-component{
3192
- tds-sidenav,
3193
- .tds-sidenav{
3194
- --tds-sidenav-indent:12px;
3195
- --tds-sidenav-item-depth:0;
3196
-
3197
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
3198
-
3199
- --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
3200
- --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
3201
- --tds-sidenav-collapse-closed-opacity:0;
3202
- --tds-sidenav-collapse-open-opacity:1;
3203
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
3204
- --tds-sidenav-collapse-open-transform:translateY(0);
3205
-
3206
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
3207
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
3208
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
3209
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
3210
-
3211
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
3212
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
3213
- --tds-sidenav-item-nested-background-selected:transparent;
3214
-
3215
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
3216
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
3217
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
3218
-
3219
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
3220
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
3221
- }
3222
-
3223
- @media (prefers-reduced-motion: reduce){
3224
- tds-sidenav,
3225
- .tds-sidenav{
3226
- --tds-sidenav-collapse-transition-enter:none;
3227
- --tds-sidenav-collapse-transition-exit:none;
3228
- --tds-sidenav-collapse-closed-transform:none;
3229
- --tds-sidenav-collapse-open-transform:none;
3230
- }
3231
- }
3232
-
3233
- .tds-sidenav--theme-gray{
3234
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
3235
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
3236
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
3237
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
3238
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
3239
- }
3240
- }
3241
-
3242
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
3243
- display:flex;
3244
- }
3245
-
3246
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
3247
- flex-direction:column;
3248
- gap:var(--t-spacing-half);
3249
- width:100%;
3250
- }
3251
-
3252
- .tds-sidenav-section-list{
3253
- width:100%;
3254
- padding:0;
3255
- margin:0;
3256
- list-style:none;
3257
- }
3258
-
3259
- .tds-sidenav-section-header{
3260
- display:flex;
3261
- align-items:baseline;
3262
- justify-content:space-between;
3263
- padding-top:var(--t-spacing-2);
3264
- }
3265
-
3266
- .tds-sidenav-section-header h2{
3267
- margin:0;
3268
- font-size:var(--t-font-size-sm);
3269
- font-weight:var(--t-font-weight-semibold);
3270
- line-height:1.35;
3271
- color:var(--t-text-color-secondary);
3272
- text-transform:uppercase;
3273
- }
3274
-
3275
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
3276
- padding-top:0;
3277
- }
3278
-
3279
- .tds-sidenav-section-header [slot="label-actions"]{
3280
- display:flex;
3281
- gap:var(--t-spacing-half);
3282
- align-items:center;
3283
- }
3284
-
3285
- .tds-sidenav-section [slot="section-actions"]{
3286
- display:flex;
3287
- gap:12px;
3288
- align-items:center;
3289
- min-height:42px;
3290
- padding:var(--t-spacing-1) 0;
3291
- }
3292
-
3293
- .tds-sidenav-section-list,
3294
- .tds-sidenav-item{
3295
- width:100%;
3296
- padding:0;
3297
- margin:0;
3298
- }
3299
-
3300
- .tds-sidenav-item :is(a,button){
3301
- position:relative;
3302
- display:flex;
3303
- gap:12px;
3304
- align-items:center;
3305
- width:100%;
3306
- padding:12px;
3307
- overflow:hidden;
3308
- font-size:var(--t-font-size-sm);
3309
- line-height:18px;
3310
- color:var(--t-text-color-headline);
3311
- white-space:nowrap;
3312
- text-decoration:none;
3313
- -webkit-appearance:none;
3314
- -moz-appearance:none;
3315
- appearance:none;
3316
- cursor:pointer;
3317
- background-color:var(--tds-sidenav-item-background, transparent);
3318
- border:0;
3319
- border-radius:var(--t-border-radius);
3320
- transition:var(--tds-sidenav-item-transition);
3321
- }
3322
-
3323
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
3324
- display:block;
3325
- flex:1;
3326
- overflow:hidden;
3327
- text-overflow:ellipsis;
3328
- text-align:left;
3329
- white-space:nowrap;
3330
- }
3331
-
3332
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
3333
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
3334
- color:var(--t-text-color-headline);
3335
- text-decoration:none;
3336
- }
3337
-
3338
- :is(.tds-sidenav-item :is(a,button)):active{
3339
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
3340
- }
3341
-
3342
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
3343
- overflow:hidden;
3344
- color:var(--tds-sidenav-item-icon-color);
3345
- }
3346
-
3347
- :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
3348
- display:block;
3349
- width:var(--tds-sidenav-item-icon-size);
3350
- height:var(--tds-sidenav-item-icon-size);
3351
- }
3352
-
3353
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
3354
- --tds-sidenav-indent:19px;
3355
- }
3356
-
3357
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
3358
- visibility:visible;
3359
- block-size:auto;
3360
- opacity:1;
3427
+
3428
+ :is(.tds-select select:has( > button)) option::checkmark{
3429
+ display:none;
3361
3430
  }
3362
3431
 
3363
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
3364
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
3365
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
3432
+ @starting-style{
3433
+ :is(.tds-select select:has( > button))::picker(select):popover-open{
3434
+ opacity:var(--tds-select-dropdown-closed-opacity);
3435
+ translate:var(--tds-select-dropdown-closed-translate);
3436
+ }
3437
+ }
3438
+ }
3366
3439
 
3367
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
3368
- font-weight:var(--t-font-weight-semibold);
3369
- }
3440
+ .tds-input:has(textarea){
3441
+ --tds-input-padding-block:6px;
3442
+ --tds-input-resizer-size:var(--t-element-size-sm);
3443
+ --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");
3444
+ }
3370
3445
 
3371
- .tds-sidenav-item:has(.tds-sidenav-section){
3372
- display:flex;
3373
- flex-direction:column;
3374
- gap:var(--t-spacing-half);
3375
- }
3446
+ @supports (x: attr(x type(*))){
3376
3447
 
3377
- .tds-sidenav-item .tds-sidenav-section-list{
3378
- --tds-sidenav-item-depth:1;
3379
- gap:0;
3448
+ .tds-input textarea{
3449
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
3450
+ }
3380
3451
  }
3381
3452
 
3382
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
3383
- visibility:hidden;
3384
- block-size:0;
3385
- overflow-y:clip;
3386
- opacity:0;
3387
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
3453
+ .tds-input.tds-textarea--resize-vertical textarea{
3454
+ resize:vertical;
3388
3455
  }
3389
3456
 
3390
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
3391
- --tds-sidenav-item-depth:2;
3457
+ .tds-input.tds-textarea--resize-none textarea{
3458
+ resize:none;
3392
3459
  }
3393
3460
 
3394
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
3395
- min-height:var(--t-element-size-2xl);
3396
- padding-block:9px;
3397
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
3398
- line-height:1;
3399
- background-color:transparent;
3461
+ .tds-input.tds-textarea--resize-auto textarea{
3462
+ resize:vertical;
3400
3463
  }
3401
3464
 
3402
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
3403
- position:absolute;
3404
- top:0;
3405
- bottom:0;
3406
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
3407
- width:2px;
3408
- content:"";
3409
- background-color:var(--tds-sidenav-item-nested-border-color);
3410
- transition:var(--tds-sidenav-item-transition);
3411
- }
3412
-
3413
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
3414
- position:absolute;
3415
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
3416
- z-index:-1;
3417
- height:100%;
3418
- content:"";
3419
- background-color:var(--tds-sidenav-item-nested-background);
3420
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
3421
- transition:var(--tds-sidenav-item-transition);
3422
- }
3423
-
3424
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
3425
- display:block;
3426
- text-align:left;
3427
- white-space:normal;
3428
- }
3429
-
3430
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
3431
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
3432
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
3433
- }
3434
-
3435
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
3436
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
3465
+ @supports (field-sizing: content){
3466
+ .tds-input.tds-textarea--resize-auto textarea{
3467
+ field-sizing:content;
3468
+ resize:none;
3437
3469
  }
3438
-
3439
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
3440
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
3441
- font-weight:var(--t-font-weight-medium);
3442
3470
  }
3443
3471
 
3444
- .tds-sidenav-responsive-header{
3445
- display:flex;
3446
- gap:var(--t-spacing-2);
3447
- align-items:center;
3448
- width:100%;
3472
+ .tds-input textarea{
3473
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
3474
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
3475
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
3476
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
3477
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
3478
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
3479
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
3480
+ --tds-input-scrollbar-thumb-border-radius:999px;
3481
+ --tds-input-scrollbar-thumb-border-width:3px;
3482
+ --tds-input-scrollbar-track-margin-block:.125rem;
3483
+ scrollbar-color:initial;
3484
+ transition-timing-function:var(--t-ease-in-out);
3485
+ transition-duration:var(--t-duration-200);
3486
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
3449
3487
  }
3450
3488
 
3451
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
3452
- order:0;
3453
- }
3454
-
3455
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
3456
- flex:1;
3457
- order:1;
3458
- margin:0;
3459
- font-size:var(--t-font-size-lg);
3460
- font-weight:var(--t-font-weight-medium);
3461
- color:var(--t-text-color-headline);
3462
- }
3463
-
3464
- @media (max-width: 719px){
3465
- .tds-sidenav-collapse{
3466
- z-index:10001;
3467
- display:none;
3468
- max-width:min(448px, calc(100vw - 48px));
3469
- padding:0;
3470
- margin:12px 0;
3471
- position-area:bottom span-right;
3472
- overflow:hidden;
3473
- outline:0;
3474
- background:var(--t-surface-color-card);
3475
- border:0;
3476
- border-radius:6px;
3477
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
3478
- opacity:var(--tds-sidenav-collapse-open-opacity);
3479
- transform:var(--tds-sidenav-collapse-open-transform);
3480
- transition:var(--tds-sidenav-collapse-transition-enter);
3481
- will-change:transform;
3482
- }
3483
-
3484
- .tds-sidenav-scroll-container{
3485
- --webkit-overflow-scrolling:touch;
3486
- display:block;
3487
- width:100%;
3488
- height:-moz-fit-content;
3489
- height:fit-content;
3490
- padding:var(--t-spacing-2);
3491
- overflow-y:auto;
3492
- }
3493
-
3494
- .tds-sidenav-item :is(a, button) :is(.prefix){
3495
- display:none;
3496
- }
3497
- @supports selector(:popover-open){
3498
- .tds-sidenav-collapse:popover-open{
3499
- display:flex;
3489
+ @media (pointer: fine){
3490
+ :is(.tds-input textarea)::-webkit-scrollbar{
3491
+ width:12px;
3492
+ height:12px;
3493
+ cursor:default;
3500
3494
  }
3501
3495
 
3502
- .tds-sidenav-collapse:not(:popover-open){
3503
- opacity:var(--tds-sidenav-collapse-closed-opacity);
3504
- transition:var(--tds-sidenav-collapse-transition-exit);
3496
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
3497
+ cursor:default;
3498
+ background:var(--tds-input-scrollbar-thumb-color);
3499
+ background-clip:content-box;
3500
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
3501
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
3505
3502
  }
3506
3503
 
3507
- @starting-style{
3508
- .tds-sidenav-collapse:popover-open{
3509
- opacity:var(--tds-sidenav-collapse-closed-opacity);
3510
- transform:var(--tds-sidenav-collapse-closed-transform);
3511
- }
3504
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
3505
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
3512
3506
  }
3513
- }
3514
- @supports not selector(:popover-open){
3515
- .tds-sidenav-collapse.\:popover-open{
3516
- display:flex;
3507
+
3508
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
3509
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
3517
3510
  }
3518
3511
 
3519
- .tds-sidenav-collapse:not(.\:popover-open){
3520
- opacity:var(--tds-sidenav-collapse-closed-opacity);
3521
- transition:var(--tds-sidenav-collapse-transition-exit);
3512
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
3513
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
3522
3514
  }
3523
- }
3524
- }
3525
3515
 
3526
- @media (min-width: 720px){
3527
- .tds-sidenav-responsive-header{
3528
- display:none;
3529
- }
3530
- }
3516
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
3517
+ background:var(--tds-input-scrollbar-surface-color);
3518
+ }
3531
3519
 
3532
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
3533
- display:none;
3520
+ :is(.tds-input textarea)::-webkit-resizer{
3521
+ background:var(--tds-input-resizer-icon) no-repeat;
3522
+ background-position:right bottom;
3523
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
3534
3524
  }
3535
3525
 
3536
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
3537
- display:block;
3526
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
3527
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
3528
+ cursor:default;
3538
3529
  }
3539
3530
 
3540
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3541
- display:flex;
3542
- flex-direction:column;
3531
+ @supports (-moz-appearance: none){
3532
+ :is(.tds-input textarea){
3533
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
3534
+ scrollbar-width:thin;
3535
+ }
3536
+
3537
+ @media (hover){
3538
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
3539
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
3540
+ }
3541
+ }
3543
3542
  }
3543
+ }
3544
3544
 
3545
3545
  .tds-loading-spinner{
3546
3546
  --tds-loading-spinner-size:1.25em;
@@ -5909,6 +5909,37 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
5909
5909
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
5910
5910
  }
5911
5911
 
5912
+ .tds-data-table-wrapper{
5913
+ overflow-x:auto;
5914
+ }
5915
+
5916
+ .tds-data-table{
5917
+ width:100%;
5918
+ font-size:var(--t-font-size-md);
5919
+ color:var(--t-text-color);
5920
+ border-collapse:collapse;
5921
+ }
5922
+
5923
+ .tds-data-table th,.tds-data-table td{
5924
+ padding:var(--t-spacing-1);
5925
+ text-align:start;
5926
+ white-space:nowrap;
5927
+ border-bottom:1px solid var(--t-border-color);
5928
+ }
5929
+
5930
+ .tds-data-table th{
5931
+ font-weight:var(--t-font-weight-semibold);
5932
+ }
5933
+
5934
+ .tds-data-table-column-label--hidden{
5935
+ position:absolute;
5936
+ width:1px;
5937
+ height:1px;
5938
+ overflow:hidden;
5939
+ white-space:nowrap;
5940
+ clip-path:inset(50%);
5941
+ }
5942
+
5912
5943
  .t-banner{
5913
5944
  --t-banner-font-size:var(--t-font-size-md);
5914
5945
  --t-banner-font-color:var(--t-text-color);