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

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.
Files changed (5) hide show
  1. package/dist/reactRender.css +515 -515
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +515 -515
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -1044,6 +1044,243 @@
1044
1044
  }
1045
1045
  }
1046
1046
 
1047
+ .tds-button-group{
1048
+ display:inline-flex;
1049
+ }
1050
+ .tds-button-group > .tds-btn{
1051
+ --tds-button-group-item-z-index:1;
1052
+
1053
+ position:relative;
1054
+ z-index:var(--tds-button-group-item-z-index);
1055
+ border-radius:0;
1056
+ }
1057
+ :is(.tds-button-group > .tds-btn):not(:first-child){
1058
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1059
+ }
1060
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--pill):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--pill):not(:last-child)::after{
1061
+ position:absolute;
1062
+ inset-block:calc(var(--tds-btn-border-width) * -1);
1063
+ width:var(--tds-btn-border-width);
1064
+ pointer-events:none;
1065
+ content:"";
1066
+ background-color:var(--t-border-color-white);
1067
+ }
1068
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--pill):not(:first-child)::before{
1069
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1070
+ }
1071
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--pill):not(:last-child)::after{
1072
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1073
+ }
1074
+ :is(.tds-button-group > .tds-btn):hover{
1075
+ --tds-button-group-item-z-index:2;
1076
+ }
1077
+ :is(.tds-button-group > .tds-btn):focus-visible{
1078
+ --tds-button-group-item-z-index:5;
1079
+ }
1080
+ .tds-button-group > .tds-btn:first-child{
1081
+ border-start-start-radius:var(--tds-btn-border-radius);
1082
+ border-end-start-radius:var(--tds-btn-border-radius);
1083
+ }
1084
+ .tds-button-group > .tds-btn:last-child{
1085
+ border-start-end-radius:var(--tds-btn-border-radius);
1086
+ border-end-end-radius:var(--tds-btn-border-radius);
1087
+ }
1088
+
1089
+ .tds-checkbox{
1090
+ --tds-checkbox-font-size:var(--t-font-size-md);
1091
+ --tds-checkbox-cursor:pointer;
1092
+ --tds-checkbox-line-height:1.4;
1093
+ --tds-checkbox-transition-property:background-color, border-color;
1094
+
1095
+ --tds-checkbox-input-size:var(--t-element-size-md);
1096
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1097
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
1098
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
1099
+
1100
+ --tds-checkbox-input-icon:none;
1101
+ --tds-checkbox-input-icon-visibility:hidden;
1102
+ --tds-checkbox-input-icon-opacity:0;
1103
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1104
+
1105
+ --tds-checkbox-label-color:var(--t-form-color);
1106
+
1107
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
1108
+ --tds-checkbox-description-line-height:1.35;
1109
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
1110
+ --tds-checkbox-description-invalid-icon-display:none;
1111
+
1112
+ position:relative;
1113
+ display:inline-grid;
1114
+ grid-template-columns:auto;
1115
+ grid-auto-columns:1fr;
1116
+ gap:var(--t-spacing-fourth) 0;
1117
+ line-height:var(--tds-checkbox-line-height);
1118
+ -webkit-user-select:none;
1119
+ -moz-user-select:none;
1120
+ user-select:none;
1121
+ }
1122
+
1123
+ .tds-checkbox label{
1124
+ grid-area:1 / 2;
1125
+ padding-inline-start:var(--t-spacing-1);
1126
+ font-size:var(--tds-checkbox-font-size);
1127
+ font-weight:var(--t-font-weight-normal);
1128
+ color:var(--tds-checkbox-label-color);
1129
+ cursor:var(--tds-checkbox-cursor);
1130
+ }
1131
+
1132
+ .tds-checkbox tds-indeterminate{
1133
+ display:flex;
1134
+ }
1135
+
1136
+ .tds-checkbox input[type="checkbox"]{
1137
+ position:relative;
1138
+ width:1em;
1139
+ height:1em;
1140
+ margin:calc((1lh - 1em) / 2) 0 0;
1141
+ font-size:var(--tds-checkbox-font-size);
1142
+ line-height:inherit;
1143
+ -webkit-appearance:none;
1144
+ -moz-appearance:none;
1145
+ appearance:none;
1146
+ cursor:var(--tds-checkbox-cursor);
1147
+ background-color:var(--tds-checkbox-input-background-color);
1148
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1149
+ border-radius:var(--tds-checkbox-input-border-radius);
1150
+ transition-timing-function:var(--t-ease-in-out);
1151
+ transition-duration:var(--t-duration-200);
1152
+ transition-property:var(--tds-checkbox-transition-property);
1153
+ }
1154
+
1155
+ :is(.tds-checkbox input[type="checkbox"])::before{
1156
+ position:absolute;
1157
+ top:50%;
1158
+ left:50%;
1159
+ visibility:var(--tds-checkbox-input-icon-visibility);
1160
+ width:100%;
1161
+ height:100%;
1162
+ content:"";
1163
+ background-color:var(--tds-checkbox-input-icon-fill);
1164
+ border-radius:var(--tds-checkbox-input-border-radius);
1165
+ opacity:var(--tds-checkbox-input-icon-opacity);
1166
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
1167
+ mask-image:var(--tds-checkbox-input-icon);
1168
+ -webkit-mask-repeat:no-repeat;
1169
+ mask-repeat:no-repeat;
1170
+ -webkit-mask-size:contain;
1171
+ mask-size:contain;
1172
+ transform:translate(-50%, -50%);
1173
+ }
1174
+
1175
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1176
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1177
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1178
+ }
1179
+
1180
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1181
+ outline:var(--t-focus-ring-outline);
1182
+ outline-offset:var(--t-focus-ring-offset);
1183
+ }
1184
+
1185
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
1186
+ pointer-events:none;
1187
+ }
1188
+
1189
+ @media (prefers-reduced-motion: reduce){
1190
+
1191
+ .tds-checkbox input[type="checkbox"]{
1192
+ --tds-checkbox-transition-property:none;
1193
+ }
1194
+ }
1195
+
1196
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1197
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
1198
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1199
+ --tds-checkbox-input-icon-visibility:visible;
1200
+ --tds-checkbox-input-icon-opacity:1;
1201
+ }
1202
+
1203
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1204
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1205
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1206
+ }
1207
+
1208
+ .tds-checkbox:has(input:checked){
1209
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1210
+ }
1211
+
1212
+ .tds-checkbox:has(input:indeterminate){
1213
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1214
+ }
1215
+
1216
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1217
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1218
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
1219
+ --tds-checkbox-description-invalid-icon-display:inline-block;
1220
+ }
1221
+
1222
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1223
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1224
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1225
+ }
1226
+
1227
+ :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{
1228
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1229
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1230
+ }
1231
+
1232
+ :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){
1233
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1234
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1235
+ }
1236
+
1237
+ .tds-checkbox:has(input:required) label::after{
1238
+ margin-left:.25ch;
1239
+ color:var(--t-text-color-status-error);
1240
+ content:"*";
1241
+ }
1242
+
1243
+ .tds-checkbox:has(input:disabled){
1244
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1245
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1246
+
1247
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
1248
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
1249
+ --tds-checkbox-cursor:not-allowed;
1250
+ }
1251
+
1252
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1253
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1254
+ }
1255
+
1256
+ .tds-checkbox-description{
1257
+ display:flex;
1258
+ grid-area:2 / 2;
1259
+ gap:var(--t-spacing-half);
1260
+ align-items:flex-start;
1261
+ padding-inline-start:var(--t-spacing-1);
1262
+ margin:0;
1263
+ font-size:var(--tds-checkbox-description-font-size);
1264
+ line-height:var(--tds-checkbox-description-line-height);
1265
+ color:var(--tds-checkbox-description-color);
1266
+ cursor:text;
1267
+ }
1268
+
1269
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1270
+ display:var(--tds-checkbox-description-invalid-icon-display);
1271
+ flex-shrink:0;
1272
+ margin-top:calc(.5lh - .5em);
1273
+ line-height:var(--tds-checkbox-description-line-height);
1274
+ }
1275
+
1276
+ .tds-checkbox--sm{
1277
+ --tds-checkbox-line-height:1.35;
1278
+ --tds-checkbox-input-size:var(--t-element-size-sm);
1279
+ --tds-checkbox-font-size:var(--t-font-size-sm);
1280
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
1281
+ --tds-checkbox-description-line-height:1.3;
1282
+ }
1283
+
1047
1284
 
1048
1285
  @media (prefers-reduced-motion: no-preference){
1049
1286
 
@@ -1385,296 +1622,27 @@
1385
1622
  transition:var(--tds-sidenav-collapse-transition-exit);
1386
1623
  }
1387
1624
  }
1388
- }
1389
-
1390
- @media (min-width: 720px){
1391
- .tds-sidenav-responsive-header{
1392
- display:none;
1393
- }
1394
- }
1395
-
1396
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1397
- display:none;
1398
- }
1399
-
1400
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1401
- display:block;
1402
- }
1403
-
1404
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1405
- display:flex;
1406
- flex-direction:column;
1407
- }
1408
-
1409
- .tds-checkbox-group{
1410
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1411
- --tds-checkbox-group-line-height:1.4;
1412
- --tds-checkbox-group-gap:var(--t-spacing-1);
1413
-
1414
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1415
- --tds-checkbox-group-description-line-height:1.35;
1416
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1417
- --tds-checkbox-group-description-invalid-icon-display:none;
1418
- display:flex;
1419
- flex-direction:column;
1420
- gap:0;
1421
- padding:0;
1422
- margin:0;
1423
-
1424
- font-size:var(--tds-checkbox-group-font-size);
1425
- line-height:var(--tds-checkbox-group-line-height);
1426
- border:0;
1427
- }
1428
-
1429
- .tds-checkbox-group legend{
1430
- float:left;
1431
- padding:0;
1432
- margin:0;
1433
- }
1434
-
1435
- .tds-checkbox-group[aria-invalid="true"]{
1436
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1437
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1438
- }
1439
-
1440
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1441
- margin-left:.25ch;
1442
- color:var(--t-text-color-status-error);
1443
- content:"*";
1444
- }
1445
-
1446
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1447
- content:none;
1448
- }
1449
-
1450
- .tds-checkbox-group-fields{
1451
- display:flex;
1452
- flex-direction:column;
1453
- gap:var(--tds-checkbox-group-gap);
1454
- align-items:flex-start;
1455
- margin-top:var(--t-spacing-1);
1456
- }
1457
-
1458
- .tds-checkbox-group-description{
1459
- display:flex;
1460
- gap:var(--t-spacing-half);
1461
- align-items:flex-start;
1462
- margin:var(--t-spacing-fourth) 0 0;
1463
- font-size:var(--tds-checkbox-group-description-font-size);
1464
- line-height:var(--tds-checkbox-group-description-line-height);
1465
- color:var(--tds-checkbox-group-description-color);
1466
- cursor:text;
1467
- }
1468
-
1469
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1470
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1471
- flex-shrink:0;
1472
- margin-top:calc(.5lh - .5em);
1473
- line-height:var(--tds-checkbox-group-description-line-height);
1474
- }
1475
-
1476
- .tds-checkbox-group--sm{
1477
- --tds-checkbox-group-line-height:1.35;
1478
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1479
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1480
- --tds-checkbox-group-description-line-height:1.3;
1481
- }
1482
-
1483
- .tds-checkbox{
1484
- --tds-checkbox-font-size:var(--t-font-size-md);
1485
- --tds-checkbox-cursor:pointer;
1486
- --tds-checkbox-line-height:1.4;
1487
- --tds-checkbox-transition-property:background-color, border-color;
1488
-
1489
- --tds-checkbox-input-size:var(--t-element-size-md);
1490
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1491
- --tds-checkbox-input-border-color:var(--t-form-border-color);
1492
- --tds-checkbox-input-background-color:var(--t-form-background-color);
1493
-
1494
- --tds-checkbox-input-icon:none;
1495
- --tds-checkbox-input-icon-visibility:hidden;
1496
- --tds-checkbox-input-icon-opacity:0;
1497
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1498
-
1499
- --tds-checkbox-label-color:var(--t-form-color);
1500
-
1501
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
1502
- --tds-checkbox-description-line-height:1.35;
1503
- --tds-checkbox-description-color:var(--t-text-color-secondary);
1504
- --tds-checkbox-description-invalid-icon-display:none;
1505
-
1506
- position:relative;
1507
- display:inline-grid;
1508
- grid-template-columns:auto;
1509
- grid-auto-columns:1fr;
1510
- gap:var(--t-spacing-fourth) 0;
1511
- line-height:var(--tds-checkbox-line-height);
1512
- -webkit-user-select:none;
1513
- -moz-user-select:none;
1514
- user-select:none;
1515
- }
1516
-
1517
- .tds-checkbox label{
1518
- grid-area:1 / 2;
1519
- padding-inline-start:var(--t-spacing-1);
1520
- font-size:var(--tds-checkbox-font-size);
1521
- font-weight:var(--t-font-weight-normal);
1522
- color:var(--tds-checkbox-label-color);
1523
- cursor:var(--tds-checkbox-cursor);
1524
- }
1525
-
1526
- .tds-checkbox tds-indeterminate{
1527
- display:flex;
1528
- }
1529
-
1530
- .tds-checkbox input[type="checkbox"]{
1531
- position:relative;
1532
- width:1em;
1533
- height:1em;
1534
- margin:calc((1lh - 1em) / 2) 0 0;
1535
- font-size:var(--tds-checkbox-font-size);
1536
- line-height:inherit;
1537
- -webkit-appearance:none;
1538
- -moz-appearance:none;
1539
- appearance:none;
1540
- cursor:var(--tds-checkbox-cursor);
1541
- background-color:var(--tds-checkbox-input-background-color);
1542
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1543
- border-radius:var(--tds-checkbox-input-border-radius);
1544
- transition-timing-function:var(--t-ease-in-out);
1545
- transition-duration:var(--t-duration-200);
1546
- transition-property:var(--tds-checkbox-transition-property);
1547
- }
1548
-
1549
- :is(.tds-checkbox input[type="checkbox"])::before{
1550
- position:absolute;
1551
- top:50%;
1552
- left:50%;
1553
- visibility:var(--tds-checkbox-input-icon-visibility);
1554
- width:100%;
1555
- height:100%;
1556
- content:"";
1557
- background-color:var(--tds-checkbox-input-icon-fill);
1558
- border-radius:var(--tds-checkbox-input-border-radius);
1559
- opacity:var(--tds-checkbox-input-icon-opacity);
1560
- -webkit-mask-image:var(--tds-checkbox-input-icon);
1561
- mask-image:var(--tds-checkbox-input-icon);
1562
- -webkit-mask-repeat:no-repeat;
1563
- mask-repeat:no-repeat;
1564
- -webkit-mask-size:contain;
1565
- mask-size:contain;
1566
- transform:translate(-50%, -50%);
1567
- }
1568
-
1569
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1570
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1571
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1572
- }
1573
-
1574
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1575
- outline:var(--t-focus-ring-outline);
1576
- outline-offset:var(--t-focus-ring-offset);
1577
- }
1578
-
1579
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1580
- pointer-events:none;
1581
- }
1582
-
1583
- @media (prefers-reduced-motion: reduce){
1584
-
1585
- .tds-checkbox input[type="checkbox"]{
1586
- --tds-checkbox-transition-property:none;
1587
- }
1588
- }
1589
-
1590
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1591
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
1592
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1593
- --tds-checkbox-input-icon-visibility:visible;
1594
- --tds-checkbox-input-icon-opacity:1;
1595
- }
1596
-
1597
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1598
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1599
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1600
- }
1601
-
1602
- .tds-checkbox:has(input:checked){
1603
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1604
- }
1605
-
1606
- .tds-checkbox:has(input:indeterminate){
1607
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1608
- }
1609
-
1610
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1611
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1612
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1613
- --tds-checkbox-description-invalid-icon-display:inline-block;
1614
- }
1615
-
1616
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1617
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1618
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1619
- }
1620
-
1621
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
1622
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1623
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1624
- }
1625
-
1626
- :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
1627
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1628
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1629
- }
1630
-
1631
- .tds-checkbox:has(input:required) label::after{
1632
- margin-left:.25ch;
1633
- color:var(--t-text-color-status-error);
1634
- content:"*";
1635
- }
1636
-
1637
- .tds-checkbox:has(input:disabled){
1638
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1639
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1640
-
1641
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1642
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1643
- --tds-checkbox-cursor:not-allowed;
1644
- }
1645
-
1646
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1647
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1648
- }
1649
-
1650
- .tds-checkbox-description{
1651
- display:flex;
1652
- grid-area:2 / 2;
1653
- gap:var(--t-spacing-half);
1654
- align-items:flex-start;
1655
- padding-inline-start:var(--t-spacing-1);
1656
- margin:0;
1657
- font-size:var(--tds-checkbox-description-font-size);
1658
- line-height:var(--tds-checkbox-description-line-height);
1659
- color:var(--tds-checkbox-description-color);
1660
- cursor:text;
1661
- }
1662
-
1663
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1664
- display:var(--tds-checkbox-description-invalid-icon-display);
1665
- flex-shrink:0;
1666
- margin-top:calc(.5lh - .5em);
1667
- line-height:var(--tds-checkbox-description-line-height);
1668
- }
1625
+ }
1669
1626
 
1670
- .tds-checkbox--sm{
1671
- --tds-checkbox-line-height:1.35;
1672
- --tds-checkbox-input-size:var(--t-element-size-sm);
1673
- --tds-checkbox-font-size:var(--t-font-size-sm);
1674
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1675
- --tds-checkbox-description-line-height:1.3;
1627
+ @media (min-width: 720px){
1628
+ .tds-sidenav-responsive-header{
1629
+ display:none;
1630
+ }
1676
1631
  }
1677
1632
 
1633
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1634
+ display:none;
1635
+ }
1636
+
1637
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1638
+ display:block;
1639
+ }
1640
+
1641
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1642
+ display:flex;
1643
+ flex-direction:column;
1644
+ }
1645
+
1678
1646
  .tds-combo-box{
1679
1647
  --tds-combo-box-button-offset:4px;
1680
1648
  }
@@ -1857,48 +1825,80 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1857
1825
  color:var(--t-text-color-secondary);
1858
1826
  }
1859
1827
 
1860
- .tds-button-group{
1861
- display:inline-flex;
1828
+ .tds-checkbox-group{
1829
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1830
+ --tds-checkbox-group-line-height:1.4;
1831
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1832
+
1833
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1834
+ --tds-checkbox-group-description-line-height:1.35;
1835
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1836
+ --tds-checkbox-group-description-invalid-icon-display:none;
1837
+ display:flex;
1838
+ flex-direction:column;
1839
+ gap:0;
1840
+ padding:0;
1841
+ margin:0;
1842
+
1843
+ font-size:var(--tds-checkbox-group-font-size);
1844
+ line-height:var(--tds-checkbox-group-line-height);
1845
+ border:0;
1862
1846
  }
1863
- .tds-button-group > .tds-btn{
1864
- --tds-button-group-item-z-index:1;
1865
1847
 
1866
- position:relative;
1867
- z-index:var(--tds-button-group-item-z-index);
1868
- border-radius:0;
1848
+ .tds-checkbox-group legend{
1849
+ float:left;
1850
+ padding:0;
1851
+ margin:0;
1869
1852
  }
1870
- :is(.tds-button-group > .tds-btn):not(:first-child){
1871
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1872
- }
1873
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--pill):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--pill):not(:last-child)::after{
1874
- position:absolute;
1875
- inset-block:calc(var(--tds-btn-border-width) * -1);
1876
- width:var(--tds-btn-border-width);
1877
- pointer-events:none;
1878
- content:"";
1879
- background-color:var(--t-border-color-white);
1880
- }
1881
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--pill):not(:first-child)::before{
1882
- inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1883
- }
1884
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--pill):not(:last-child)::after{
1885
- inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1886
- }
1887
- :is(.tds-button-group > .tds-btn):hover{
1888
- --tds-button-group-item-z-index:2;
1853
+
1854
+ .tds-checkbox-group[aria-invalid="true"]{
1855
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1856
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1857
+ }
1858
+
1859
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1860
+ margin-left:.25ch;
1861
+ color:var(--t-text-color-status-error);
1862
+ content:"*";
1889
1863
  }
1890
- :is(.tds-button-group > .tds-btn):focus-visible{
1891
- --tds-button-group-item-z-index:5;
1864
+
1865
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1866
+ content:none;
1892
1867
  }
1893
- .tds-button-group > .tds-btn:first-child{
1894
- border-start-start-radius:var(--tds-btn-border-radius);
1895
- border-end-start-radius:var(--tds-btn-border-radius);
1896
- }
1897
- .tds-button-group > .tds-btn:last-child{
1898
- border-start-end-radius:var(--tds-btn-border-radius);
1899
- border-end-end-radius:var(--tds-btn-border-radius);
1868
+
1869
+ .tds-checkbox-group-fields{
1870
+ display:flex;
1871
+ flex-direction:column;
1872
+ gap:var(--tds-checkbox-group-gap);
1873
+ align-items:flex-start;
1874
+ margin-top:var(--t-spacing-1);
1875
+ }
1876
+
1877
+ .tds-checkbox-group-description{
1878
+ display:flex;
1879
+ gap:var(--t-spacing-half);
1880
+ align-items:flex-start;
1881
+ margin:var(--t-spacing-fourth) 0 0;
1882
+ font-size:var(--tds-checkbox-group-description-font-size);
1883
+ line-height:var(--tds-checkbox-group-description-line-height);
1884
+ color:var(--tds-checkbox-group-description-color);
1885
+ cursor:text;
1886
+ }
1887
+
1888
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1889
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1890
+ flex-shrink:0;
1891
+ margin-top:calc(.5lh - .5em);
1892
+ line-height:var(--tds-checkbox-group-description-line-height);
1900
1893
  }
1901
1894
 
1895
+ .tds-checkbox-group--sm{
1896
+ --tds-checkbox-group-line-height:1.35;
1897
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1898
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1899
+ --tds-checkbox-group-description-line-height:1.3;
1900
+ }
1901
+
1902
1902
  .tds-dropdown-popover{
1903
1903
  min-inline-size:10rem;
1904
1904
  max-inline-size:24rem;
@@ -2236,52 +2236,192 @@ a.tds-dropdown-item:is(:hover, :active){
2236
2236
  --tds-radio-input-border-color:var(--t-form-border-color-error);
2237
2237
  }
2238
2238
 
2239
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2240
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2241
- --tds-radio-input-background-color:var(--t-form-background-color-error);
2242
- }
2239
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2240
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2241
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2242
+ }
2243
+
2244
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2245
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2246
+ }
2247
+
2248
+ .tds-radio-group:has(input:required) legend::after{
2249
+ margin-left:.25ch;
2250
+ color:var(--t-text-color-status-error);
2251
+ content:"*";
2252
+ }
2253
+
2254
+ .tds-radio-group-fields{
2255
+ display:flex;
2256
+ flex-direction:column;
2257
+ gap:var(--tds-radio-group-gap);
2258
+ align-items:flex-start;
2259
+ margin-top:var(--t-spacing-1);
2260
+ }
2261
+
2262
+ .tds-radio-group-description{
2263
+ display:flex;
2264
+ gap:var(--t-spacing-half);
2265
+ align-items:flex-start;
2266
+ margin:var(--t-spacing-fourth) 0 0;
2267
+ font-size:var(--tds-radio-group-description-font-size);
2268
+ line-height:var(--tds-radio-group-description-line-height);
2269
+ color:var(--tds-radio-group-description-color);
2270
+ cursor:text;
2271
+ }
2272
+
2273
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2274
+ display:var(--tds-radio-group-description-invalid-icon-display);
2275
+ flex-shrink:0;
2276
+ margin-top:calc(.5lh - .5em);
2277
+ line-height:var(--tds-radio-group-description-line-height);
2278
+ }
2279
+
2280
+ .tds-radio-group--sm{
2281
+ --tds-radio-group-line-height:1.35;
2282
+ --tds-radio-group-font-size:var(--t-font-size-sm);
2283
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
2284
+ --tds-radio-group-description-line-height:1.3;
2285
+ }
2286
+
2287
+ .tds-toggle-switch{
2288
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
2289
+ --tds-toggle-switch-cursor:pointer;
2290
+ --tds-toggle-switch-display:inline-grid;
2291
+ --tds-toggle-switch-line-height:1.4;
2292
+
2293
+ --tds-toggle-switch-label-color:var(--t-form-color);
2294
+
2295
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
2296
+ --tds-toggle-switch-track-outline:none;
2297
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
2298
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
2299
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
2300
+
2301
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
2302
+ --tds-toggle-switch-thumb-transform:translateX(0);
2303
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
2304
+
2305
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
2306
+ --tds-toggle-switch-description-line-height:1.35;
2307
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
2308
+ position:relative;
2309
+
2310
+ display:var(--tds-toggle-switch-display);
2311
+ grid-template-columns:auto;
2312
+ grid-auto-columns:1fr;
2313
+ gap:var(--t-spacing-fourth) 0;
2314
+ -webkit-user-select:none;
2315
+ -moz-user-select:none;
2316
+ user-select:none;
2317
+ }
2318
+
2319
+ .tds-toggle-switch input[type="checkbox"]{
2320
+ position:absolute;
2321
+ width:var(--tds-toggle-switch-track-width);
2322
+ height:var(--tds-toggle-switch-track-height);
2323
+ margin:0;
2324
+ -webkit-appearance:none;
2325
+ -moz-appearance:none;
2326
+ appearance:none;
2327
+ cursor:var(--tds-toggle-switch-cursor);
2328
+ outline:var(--tds-toggle-switch-track-outline);
2329
+ outline-offset:var(--t-focus-ring-offset);
2330
+ background-color:transparent;
2331
+ border:0;
2332
+ border-radius:var(--t-border-radius-round);
2333
+ }
2334
+
2335
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2336
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2337
+ }
2338
+
2339
+ .tds-toggle-switch label{
2340
+ display:inline-flex;
2341
+ grid-area:1 / 2;
2342
+ padding-inline-start:var(--t-spacing-1);
2343
+ margin-top:-.09375em;
2344
+ font-size:var(--tds-toggle-switch-font-size);
2345
+ font-weight:var(--t-font-weight-normal);
2346
+ line-height:var(--tds-toggle-switch-line-height);
2347
+ color:var(--tds-toggle-switch-label-color);
2348
+ cursor:var(--tds-toggle-switch-cursor);
2349
+ }
2350
+
2351
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2352
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2353
+ }
2354
+
2355
+ .tds-toggle-switch:has(input:checked){
2356
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2357
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2358
+ }
2359
+
2360
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2361
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2362
+ }
2363
+
2364
+ .tds-toggle-switch:has(input:disabled){
2365
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2366
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2367
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2368
+ --tds-toggle-switch-cursor:not-allowed;
2369
+ }
2370
+
2371
+ .tds-toggle-switch-track{
2372
+ position:relative;
2373
+ flex-shrink:0;
2374
+ width:var(--tds-toggle-switch-track-width);
2375
+ height:var(--tds-toggle-switch-track-height);
2376
+ background-color:var(--tds-toggle-switch-track-background-color);
2377
+ border-radius:var(--t-border-radius-round);
2378
+ transition:var(--tds-toggle-switch-track-transition);
2379
+ }
2243
2380
 
2244
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2245
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2246
- }
2381
+ .tds-toggle-switch-track::before{
2382
+ position:absolute;
2383
+ top:var(--t-spacing-fourth);
2384
+ left:var(--t-spacing-fourth);
2385
+ width:var(--tds-toggle-switch-thumb-size);
2386
+ height:var(--tds-toggle-switch-thumb-size);
2387
+ content:"";
2388
+ background-color:#fff;
2389
+ border-radius:var(--t-border-radius-round);
2390
+ transform:var(--tds-toggle-switch-thumb-transform);
2391
+ transition:var(--tds-toggle-switch-thumb-transition);
2392
+ }
2247
2393
 
2248
- .tds-radio-group:has(input:required) legend::after{
2249
- margin-left:.25ch;
2250
- color:var(--t-text-color-status-error);
2251
- content:"*";
2252
- }
2394
+ @media (prefers-reduced-motion: reduce){
2253
2395
 
2254
- .tds-radio-group-fields{
2255
- display:flex;
2256
- flex-direction:column;
2257
- gap:var(--tds-radio-group-gap);
2258
- align-items:flex-start;
2259
- margin-top:var(--t-spacing-1);
2396
+ .tds-toggle-switch-track{
2397
+ --tds-toggle-switch-track-transition:none;
2398
+ --tds-toggle-switch-thumb-transition:none;
2260
2399
  }
2400
+ }
2261
2401
 
2262
- .tds-radio-group-description{
2402
+ .tds-toggle-switch-description{
2263
2403
  display:flex;
2264
- gap:var(--t-spacing-half);
2404
+ grid-area:2 / 2;
2265
2405
  align-items:flex-start;
2266
- margin:var(--t-spacing-fourth) 0 0;
2267
- font-size:var(--tds-radio-group-description-font-size);
2268
- line-height:var(--tds-radio-group-description-line-height);
2269
- color:var(--tds-radio-group-description-color);
2406
+ padding-inline-start:var(--t-spacing-1);
2407
+ margin:0;
2408
+ font-size:var(--tds-toggle-switch-description-font-size);
2409
+ line-height:var(--tds-toggle-switch-description-line-height);
2410
+ color:var(--tds-toggle-switch-description-color);
2270
2411
  cursor:text;
2271
2412
  }
2272
2413
 
2273
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2274
- display:var(--tds-radio-group-description-invalid-icon-display);
2275
- flex-shrink:0;
2276
- margin-top:calc(.5lh - .5em);
2277
- line-height:var(--tds-radio-group-description-line-height);
2278
- }
2414
+ .tds-toggle-switch--sm{
2415
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
2416
+ --tds-toggle-switch-line-height:1.35;
2417
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
2418
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2419
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2420
+ --tds-toggle-switch-description-line-height:1.3;
2421
+ }
2279
2422
 
2280
- .tds-radio-group--sm{
2281
- --tds-radio-group-line-height:1.35;
2282
- --tds-radio-group-font-size:var(--t-font-size-sm);
2283
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
2284
- --tds-radio-group-description-line-height:1.3;
2423
+ .tds-toggle-switch--hide-label{
2424
+ --tds-toggle-switch-display:inline-flex;
2285
2425
  }
2286
2426
 
2287
2427
  .tds-input:has(textarea){
@@ -2522,144 +2662,31 @@ a.tds-dropdown-item:is(:hover, :active){
2522
2662
  --tds-radio-description-line-height:1.3;
2523
2663
  }
2524
2664
 
2525
- .tds-toggle-switch{
2526
- --tds-toggle-switch-font-size:var(--t-font-size-md);
2527
- --tds-toggle-switch-cursor:pointer;
2528
- --tds-toggle-switch-display:inline-grid;
2529
- --tds-toggle-switch-line-height:1.4;
2530
-
2531
- --tds-toggle-switch-label-color:var(--t-form-color);
2532
-
2533
- --tds-toggle-switch-track-width:var(--t-container-size-md);
2534
- --tds-toggle-switch-track-outline:none;
2535
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
2536
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
2537
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
2538
-
2539
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
2540
- --tds-toggle-switch-thumb-transform:translateX(0);
2541
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
2542
-
2543
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
2544
- --tds-toggle-switch-description-line-height:1.35;
2545
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
2546
- position:relative;
2547
-
2548
- display:var(--tds-toggle-switch-display);
2549
- grid-template-columns:auto;
2550
- grid-auto-columns:1fr;
2551
- gap:var(--t-spacing-fourth) 0;
2552
- -webkit-user-select:none;
2553
- -moz-user-select:none;
2554
- user-select:none;
2665
+ .tds-loading-spinner{
2666
+ position:absolute;
2667
+ right:0;
2668
+ left:0;
2669
+ visibility:var(--tds-loading-spinner-visibility, hidden);
2670
+ width:var(--tds-loading-spinner-size, 1.25em);
2671
+ height:var(--tds-loading-spinner-size, 1.25em);
2672
+ margin:auto;
2673
+ border:var(--tds-loading-spinner-track-width, 4px) solid var(--tds-loading-spinner-track-color, var(--t-fill-color-transparency-dark-020));
2674
+ border-top-color:var(--tds-loading-spinner-color, currentcolor);
2675
+ border-radius:50%;
2676
+ animation:spinner-rotate 500ms infinite linear;
2677
+ animation-play-state:var(--tds-loading-spinner-animation-play-state, paused);
2555
2678
  }
2556
2679
 
2557
- .tds-toggle-switch input[type="checkbox"]{
2558
- position:absolute;
2559
- width:var(--tds-toggle-switch-track-width);
2560
- height:var(--tds-toggle-switch-track-height);
2561
- margin:0;
2562
- -webkit-appearance:none;
2563
- -moz-appearance:none;
2564
- appearance:none;
2565
- cursor:var(--tds-toggle-switch-cursor);
2566
- outline:var(--tds-toggle-switch-track-outline);
2567
- outline-offset:var(--t-focus-ring-offset);
2568
- background-color:transparent;
2569
- border:0;
2570
- border-radius:var(--t-border-radius-round);
2571
- }
2572
-
2573
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2574
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2575
- }
2576
-
2577
- .tds-toggle-switch label{
2578
- display:inline-flex;
2579
- grid-area:1 / 2;
2580
- padding-inline-start:var(--t-spacing-1);
2581
- margin-top:-.09375em;
2582
- font-size:var(--tds-toggle-switch-font-size);
2583
- font-weight:var(--t-font-weight-normal);
2584
- line-height:var(--tds-toggle-switch-line-height);
2585
- color:var(--tds-toggle-switch-label-color);
2586
- cursor:var(--tds-toggle-switch-cursor);
2587
- }
2588
-
2589
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2590
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2591
- }
2592
-
2593
- .tds-toggle-switch:has(input:checked){
2594
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2595
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2596
- }
2597
-
2598
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2599
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2600
- }
2601
-
2602
- .tds-toggle-switch:has(input:disabled){
2603
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2604
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2605
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2606
- --tds-toggle-switch-cursor:not-allowed;
2680
+ @keyframes spinner-rotate{
2681
+ to{
2682
+ transform:rotate(360deg);
2607
2683
  }
2608
-
2609
- .tds-toggle-switch-track{
2610
- position:relative;
2611
- flex-shrink:0;
2612
- width:var(--tds-toggle-switch-track-width);
2613
- height:var(--tds-toggle-switch-track-height);
2614
- background-color:var(--tds-toggle-switch-track-background-color);
2615
- border-radius:var(--t-border-radius-round);
2616
- transition:var(--tds-toggle-switch-track-transition);
2617
2684
  }
2618
2685
 
2619
- .tds-toggle-switch-track::before{
2620
- position:absolute;
2621
- top:var(--t-spacing-fourth);
2622
- left:var(--t-spacing-fourth);
2623
- width:var(--tds-toggle-switch-thumb-size);
2624
- height:var(--tds-toggle-switch-thumb-size);
2625
- content:"";
2626
- background-color:#fff;
2627
- border-radius:var(--t-border-radius-round);
2628
- transform:var(--tds-toggle-switch-thumb-transform);
2629
- transition:var(--tds-toggle-switch-thumb-transition);
2630
- }
2631
-
2632
2686
  @media (prefers-reduced-motion: reduce){
2633
-
2634
- .tds-toggle-switch-track{
2635
- --tds-toggle-switch-track-transition:none;
2636
- --tds-toggle-switch-thumb-transition:none;
2637
- }
2687
+ [class*="--loading"] .tds-loading-spinner{
2688
+ --tds-loading-spinner-animation-play-state:paused;
2638
2689
  }
2639
-
2640
- .tds-toggle-switch-description{
2641
- display:flex;
2642
- grid-area:2 / 2;
2643
- align-items:flex-start;
2644
- padding-inline-start:var(--t-spacing-1);
2645
- margin:0;
2646
- font-size:var(--tds-toggle-switch-description-font-size);
2647
- line-height:var(--tds-toggle-switch-description-line-height);
2648
- color:var(--tds-toggle-switch-description-color);
2649
- cursor:text;
2650
- }
2651
-
2652
- .tds-toggle-switch--sm{
2653
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
2654
- --tds-toggle-switch-line-height:1.35;
2655
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
2656
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2657
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2658
- --tds-toggle-switch-description-line-height:1.3;
2659
- }
2660
-
2661
- .tds-toggle-switch--hide-label{
2662
- --tds-toggle-switch-display:inline-flex;
2663
2690
  }
2664
2691
 
2665
2692
  .tds-input{
@@ -2799,33 +2826,6 @@ a.tds-dropdown-item:is(:hover, :active){
2799
2826
  line-height:1.35;
2800
2827
  }
2801
2828
 
2802
- .tds-loading-spinner{
2803
- position:absolute;
2804
- right:0;
2805
- left:0;
2806
- visibility:var(--tds-loading-spinner-visibility, hidden);
2807
- width:var(--tds-loading-spinner-size, 1.25em);
2808
- height:var(--tds-loading-spinner-size, 1.25em);
2809
- margin:auto;
2810
- border:var(--tds-loading-spinner-track-width, 4px) solid var(--tds-loading-spinner-track-color, var(--t-fill-color-transparency-dark-020));
2811
- border-top-color:var(--tds-loading-spinner-color, currentcolor);
2812
- border-radius:50%;
2813
- animation:spinner-rotate 500ms infinite linear;
2814
- animation-play-state:var(--tds-loading-spinner-animation-play-state, paused);
2815
- }
2816
-
2817
- @keyframes spinner-rotate{
2818
- to{
2819
- transform:rotate(360deg);
2820
- }
2821
- }
2822
-
2823
- @media (prefers-reduced-motion: reduce){
2824
- [class*="--loading"] .tds-loading-spinner{
2825
- --tds-loading-spinner-animation-play-state:paused;
2826
- }
2827
- }
2828
-
2829
2829
  @layer t-critical, t-component;
2830
2830
 
2831
2831
  :root{