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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -677,6 +677,48 @@
677
677
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
678
678
  }
679
679
 
680
+ .tds-button-group{
681
+ display:inline-flex;
682
+ }
683
+ .tds-button-group > .tds-btn{
684
+ --tds-button-group-item-z-index:1;
685
+
686
+ position:relative;
687
+ z-index:var(--tds-button-group-item-z-index);
688
+ border-radius:0;
689
+ }
690
+ :is(.tds-button-group > .tds-btn):not(:first-child){
691
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
692
+ }
693
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
694
+ position:absolute;
695
+ inset-block:calc(var(--tds-btn-border-width) * -1);
696
+ width:var(--tds-btn-border-width);
697
+ pointer-events:none;
698
+ content:"";
699
+ background-color:var(--t-border-color-white);
700
+ }
701
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
702
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
703
+ }
704
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
705
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
706
+ }
707
+ :is(.tds-button-group > .tds-btn):hover{
708
+ --tds-button-group-item-z-index:2;
709
+ }
710
+ :is(.tds-button-group > .tds-btn):focus-visible{
711
+ --tds-button-group-item-z-index:5;
712
+ }
713
+ .tds-button-group > .tds-btn:first-child{
714
+ border-start-start-radius:var(--tds-btn-border-radius);
715
+ border-end-start-radius:var(--tds-btn-border-radius);
716
+ }
717
+ .tds-button-group > .tds-btn:last-child{
718
+ border-start-end-radius:var(--tds-btn-border-radius);
719
+ border-end-end-radius:var(--tds-btn-border-radius);
720
+ }
721
+
680
722
  @layer t-critical{
681
723
  tds-page-header:not(.hydrated){
682
724
  display:none;
@@ -1028,201 +1070,6 @@
1028
1070
  --tds-checkbox-group-description-line-height:1.3;
1029
1071
  }
1030
1072
 
1031
- .tds-checkbox{
1032
- --tds-checkbox-font-size:var(--t-font-size-md);
1033
- --tds-checkbox-cursor:pointer;
1034
- --tds-checkbox-line-height:1.4;
1035
- --tds-checkbox-transition-property:background-color, border-color;
1036
-
1037
- --tds-checkbox-input-size:var(--t-element-size-md);
1038
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1039
- --tds-checkbox-input-border-color:var(--t-form-border-color);
1040
- --tds-checkbox-input-background-color:var(--t-form-background-color);
1041
-
1042
- --tds-checkbox-input-icon:none;
1043
- --tds-checkbox-input-icon-visibility:hidden;
1044
- --tds-checkbox-input-icon-opacity:0;
1045
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1046
-
1047
- --tds-checkbox-label-color:var(--t-form-color);
1048
-
1049
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
1050
- --tds-checkbox-description-line-height:1.35;
1051
- --tds-checkbox-description-color:var(--t-text-color-secondary);
1052
- --tds-checkbox-description-invalid-icon-display:none;
1053
-
1054
- position:relative;
1055
- display:inline-grid;
1056
- grid-template-columns:auto;
1057
- grid-auto-columns:1fr;
1058
- gap:var(--t-spacing-fourth) 0;
1059
- line-height:var(--tds-checkbox-line-height);
1060
- -webkit-user-select:none;
1061
- -moz-user-select:none;
1062
- user-select:none;
1063
- }
1064
-
1065
- .tds-checkbox label{
1066
- grid-area:1 / 2;
1067
- padding-inline-start:var(--t-spacing-1);
1068
- font-size:var(--tds-checkbox-font-size);
1069
- font-weight:var(--t-font-weight-normal);
1070
- color:var(--tds-checkbox-label-color);
1071
- cursor:var(--tds-checkbox-cursor);
1072
- }
1073
-
1074
- .tds-checkbox tds-indeterminate{
1075
- display:flex;
1076
- }
1077
-
1078
- .tds-checkbox input[type="checkbox"]{
1079
- position:relative;
1080
- width:1em;
1081
- height:1em;
1082
- margin:calc((1lh - 1em) / 2) 0 0;
1083
- font-size:var(--tds-checkbox-font-size);
1084
- line-height:inherit;
1085
- -webkit-appearance:none;
1086
- -moz-appearance:none;
1087
- appearance:none;
1088
- cursor:var(--tds-checkbox-cursor);
1089
- background-color:var(--tds-checkbox-input-background-color);
1090
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1091
- border-radius:var(--tds-checkbox-input-border-radius);
1092
- transition-timing-function:var(--t-ease-in-out);
1093
- transition-duration:var(--t-duration-200);
1094
- transition-property:var(--tds-checkbox-transition-property);
1095
- }
1096
-
1097
- :is(.tds-checkbox input[type="checkbox"])::before{
1098
- position:absolute;
1099
- top:50%;
1100
- left:50%;
1101
- visibility:var(--tds-checkbox-input-icon-visibility);
1102
- width:100%;
1103
- height:100%;
1104
- content:"";
1105
- background-color:var(--tds-checkbox-input-icon-fill);
1106
- border-radius:var(--tds-checkbox-input-border-radius);
1107
- opacity:var(--tds-checkbox-input-icon-opacity);
1108
- -webkit-mask-image:var(--tds-checkbox-input-icon);
1109
- mask-image:var(--tds-checkbox-input-icon);
1110
- -webkit-mask-repeat:no-repeat;
1111
- mask-repeat:no-repeat;
1112
- -webkit-mask-size:contain;
1113
- mask-size:contain;
1114
- transform:translate(-50%, -50%);
1115
- }
1116
-
1117
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1118
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1119
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1120
- }
1121
-
1122
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1123
- outline:var(--t-focus-ring-outline);
1124
- outline-offset:var(--t-focus-ring-offset);
1125
- }
1126
-
1127
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1128
- pointer-events:none;
1129
- }
1130
-
1131
- @media (prefers-reduced-motion: reduce){
1132
-
1133
- .tds-checkbox input[type="checkbox"]{
1134
- --tds-checkbox-transition-property:none;
1135
- }
1136
- }
1137
-
1138
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1139
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
1140
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1141
- --tds-checkbox-input-icon-visibility:visible;
1142
- --tds-checkbox-input-icon-opacity:1;
1143
- }
1144
-
1145
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1146
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1147
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1148
- }
1149
-
1150
- .tds-checkbox:has(input:checked){
1151
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1152
- }
1153
-
1154
- .tds-checkbox:has(input:indeterminate){
1155
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1156
- }
1157
-
1158
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1159
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1160
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1161
- --tds-checkbox-description-invalid-icon-display:inline-block;
1162
- }
1163
-
1164
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1165
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1166
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1167
- }
1168
-
1169
- :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{
1170
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1171
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1172
- }
1173
-
1174
- :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){
1175
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1176
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1177
- }
1178
-
1179
- .tds-checkbox:has(input:required) label::after{
1180
- margin-left:.25ch;
1181
- color:var(--t-text-color-status-error);
1182
- content:"*";
1183
- }
1184
-
1185
- .tds-checkbox:has(input:disabled){
1186
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1187
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1188
-
1189
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1190
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1191
- --tds-checkbox-cursor:not-allowed;
1192
- }
1193
-
1194
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1195
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1196
- }
1197
-
1198
- .tds-checkbox-description{
1199
- display:flex;
1200
- grid-area:2 / 2;
1201
- gap:var(--t-spacing-half);
1202
- align-items:flex-start;
1203
- padding-inline-start:var(--t-spacing-1);
1204
- margin:0;
1205
- font-size:var(--tds-checkbox-description-font-size);
1206
- line-height:var(--tds-checkbox-description-line-height);
1207
- color:var(--tds-checkbox-description-color);
1208
- cursor:text;
1209
- }
1210
-
1211
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1212
- display:var(--tds-checkbox-description-invalid-icon-display);
1213
- flex-shrink:0;
1214
- margin-top:calc(.5lh - .5em);
1215
- line-height:var(--tds-checkbox-description-line-height);
1216
- }
1217
-
1218
- .tds-checkbox--sm{
1219
- --tds-checkbox-line-height:1.35;
1220
- --tds-checkbox-input-size:var(--t-element-size-sm);
1221
- --tds-checkbox-font-size:var(--t-font-size-sm);
1222
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1223
- --tds-checkbox-description-line-height:1.3;
1224
- }
1225
-
1226
1073
 
1227
1074
  @media (prefers-reduced-motion: no-preference){
1228
1075
 
@@ -1585,193 +1432,199 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1585
1432
  flex-direction:column;
1586
1433
  }
1587
1434
 
1588
- .tds-button-group{
1589
- display:inline-flex;
1590
- }
1591
- .tds-button-group > .tds-btn{
1592
- --tds-button-group-item-z-index:1;
1435
+ .tds-checkbox{
1436
+ --tds-checkbox-font-size:var(--t-font-size-md);
1437
+ --tds-checkbox-cursor:pointer;
1438
+ --tds-checkbox-line-height:1.4;
1439
+ --tds-checkbox-transition-property:background-color, border-color;
1593
1440
 
1594
- position:relative;
1595
- z-index:var(--tds-button-group-item-z-index);
1596
- border-radius:0;
1597
- }
1598
- :is(.tds-button-group > .tds-btn):not(:first-child){
1599
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1600
- }
1601
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1602
- position:absolute;
1603
- inset-block:calc(var(--tds-btn-border-width) * -1);
1604
- width:var(--tds-btn-border-width);
1605
- pointer-events:none;
1606
- content:"";
1607
- background-color:var(--t-border-color-white);
1608
- }
1609
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1610
- inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1611
- }
1612
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1613
- inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1614
- }
1615
- :is(.tds-button-group > .tds-btn):hover{
1616
- --tds-button-group-item-z-index:2;
1617
- }
1618
- :is(.tds-button-group > .tds-btn):focus-visible{
1619
- --tds-button-group-item-z-index:5;
1620
- }
1621
- .tds-button-group > .tds-btn:first-child{
1622
- border-start-start-radius:var(--tds-btn-border-radius);
1623
- border-end-start-radius:var(--tds-btn-border-radius);
1624
- }
1625
- .tds-button-group > .tds-btn:last-child{
1626
- border-start-end-radius:var(--tds-btn-border-radius);
1627
- border-end-end-radius:var(--tds-btn-border-radius);
1628
- }
1441
+ --tds-checkbox-input-size:var(--t-element-size-md);
1442
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1443
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
1444
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
1629
1445
 
1630
- .tds-dropdown-popover{
1631
- min-inline-size:10rem;
1632
- max-inline-size:24rem;
1633
- padding:var(--t-spacing-1);
1634
- overflow:auto;
1635
- overscroll-behavior:none;
1446
+ --tds-checkbox-input-icon:none;
1447
+ --tds-checkbox-input-icon-visibility:hidden;
1448
+ --tds-checkbox-input-icon-opacity:0;
1449
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1450
+
1451
+ --tds-checkbox-label-color:var(--t-form-color);
1452
+
1453
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
1454
+ --tds-checkbox-description-line-height:1.35;
1455
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
1456
+ --tds-checkbox-description-invalid-icon-display:none;
1457
+
1458
+ position:relative;
1459
+ display:inline-grid;
1460
+ grid-template-columns:auto;
1461
+ grid-auto-columns:1fr;
1462
+ gap:var(--t-spacing-fourth) 0;
1463
+ line-height:var(--tds-checkbox-line-height);
1636
1464
  -webkit-user-select:none;
1637
1465
  -moz-user-select:none;
1638
1466
  user-select:none;
1639
- outline:0;
1640
- scrollbar-color:#0004 var(--t-surface-color-card);
1641
- scrollbar-width:thin;
1642
- background:var(--t-surface-color-card);
1643
- background-clip:padding-box;
1644
- border:1px solid var(--t-border-color);
1645
- border-radius:var(--t-border-radius);
1646
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1647
1467
  }
1648
- .tds-dropdown-popover[data-entering]{
1649
- animation:tds-dropdown-popover var(--t-duration-300) var(--t-ease-out);
1650
- }
1651
- .tds-dropdown-popover[data-exiting]{
1652
- animation:tds-dropdown-popover var(--t-duration-200) var(--t-ease-in) reverse;
1468
+
1469
+ .tds-checkbox label{
1470
+ grid-area:1 / 2;
1471
+ padding-inline-start:var(--t-spacing-1);
1472
+ font-size:var(--tds-checkbox-font-size);
1473
+ font-weight:var(--t-font-weight-normal);
1474
+ color:var(--tds-checkbox-label-color);
1475
+ cursor:var(--tds-checkbox-cursor);
1653
1476
  }
1654
- .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
1655
- will-change:opacity, transform;
1477
+
1478
+ .tds-checkbox tds-indeterminate{
1479
+ display:flex;
1656
1480
  }
1657
1481
 
1658
- @keyframes tds-dropdown-popover{
1659
- from{
1660
- opacity:0;
1661
- transform:translateY(-8px);
1482
+ .tds-checkbox input[type="checkbox"]{
1483
+ position:relative;
1484
+ width:1em;
1485
+ height:1em;
1486
+ margin:calc((1lh - 1em) / 2) 0 0;
1487
+ font-size:var(--tds-checkbox-font-size);
1488
+ line-height:inherit;
1489
+ -webkit-appearance:none;
1490
+ -moz-appearance:none;
1491
+ appearance:none;
1492
+ cursor:var(--tds-checkbox-cursor);
1493
+ background-color:var(--tds-checkbox-input-background-color);
1494
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1495
+ border-radius:var(--tds-checkbox-input-border-radius);
1496
+ transition-timing-function:var(--t-ease-in-out);
1497
+ transition-duration:var(--t-duration-200);
1498
+ transition-property:var(--tds-checkbox-transition-property);
1662
1499
  }
1663
- }
1664
1500
 
1665
- @media (prefers-reduced-motion: reduce){
1666
- .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
1667
- animation:none;
1501
+ :is(.tds-checkbox input[type="checkbox"])::before{
1502
+ position:absolute;
1503
+ top:50%;
1504
+ left:50%;
1505
+ visibility:var(--tds-checkbox-input-icon-visibility);
1506
+ width:100%;
1507
+ height:100%;
1508
+ content:"";
1509
+ background-color:var(--tds-checkbox-input-icon-fill);
1510
+ border-radius:var(--tds-checkbox-input-border-radius);
1511
+ opacity:var(--tds-checkbox-input-icon-opacity);
1512
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
1513
+ mask-image:var(--tds-checkbox-input-icon);
1514
+ -webkit-mask-repeat:no-repeat;
1515
+ mask-repeat:no-repeat;
1516
+ -webkit-mask-size:contain;
1517
+ mask-size:contain;
1518
+ transform:translate(-50%, -50%);
1668
1519
  }
1669
- }
1670
1520
 
1671
- .tds-dropdown-popover [role="menu"]{
1672
- outline:0;
1673
- }
1674
- .tds-dropdown-item{
1675
- --tds-dropdown-item-color:var(--t-text-color);
1676
- --tds-dropdown-item-row-gap:0;
1677
- --tds-dropdown-item-column-gap:var(--t-spacing-1);
1521
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1522
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1523
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1524
+ }
1678
1525
 
1679
- display:flex;
1680
- row-gap:var(--tds-dropdown-item-row-gap);
1681
- -moz-column-gap:var(--tds-dropdown-item-column-gap);
1682
- column-gap:var(--tds-dropdown-item-column-gap);
1683
- align-items:center;
1684
- padding-block:var(--t-spacing-1);
1685
- padding-inline:var(--t-spacing-2);
1686
- font-size:1rem;
1687
- color:var(--tds-dropdown-item-color);
1688
- text-decoration:none;
1689
- cursor:default;
1690
- outline:0;
1691
- border-radius:var(--t-border-radius);
1692
- }
1693
- .tds-dropdown-item[data-hovered]:not([data-disabled]),.tds-dropdown-item[data-focus-visible]{
1694
- background:var(--t-fill-color-neutral-070);
1526
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1527
+ outline:var(--t-focus-ring-outline);
1528
+ outline-offset:var(--t-focus-ring-offset);
1529
+ }
1530
+
1531
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
1532
+ pointer-events:none;
1533
+ }
1534
+
1535
+ @media (prefers-reduced-motion: reduce){
1536
+
1537
+ .tds-checkbox input[type="checkbox"]{
1538
+ --tds-checkbox-transition-property:none;
1695
1539
  }
1696
- .tds-dropdown-item[data-pressed]:not([data-disabled]){
1697
- background:var(--t-fill-color-neutral-060);
1540
+ }
1541
+
1542
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1543
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
1544
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1545
+ --tds-checkbox-input-icon-visibility:visible;
1546
+ --tds-checkbox-input-icon-opacity:1;
1698
1547
  }
1699
- .tds-dropdown-item[data-disabled]{
1700
- --tds-dropdown-item-color:var(--t-form-color-disabled);
1701
1548
 
1702
- cursor:not-allowed;
1549
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1550
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1551
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1552
+ }
1553
+
1554
+ .tds-checkbox:has(input:checked){
1555
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1703
1556
  }
1704
1557
 
1705
- .tds-dropdown-item--destructive{
1706
- --tds-dropdown-item-color:var(--t-text-color-status-error);
1707
- }
1558
+ .tds-checkbox:has(input:indeterminate){
1559
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1560
+ }
1708
1561
 
1709
- .tds-dropdown-item--staff-only{
1710
- --tds-dropdown-item-color:var(--t-fill-color-product-staff);
1711
- }
1712
- a.tds-dropdown-item:is(:hover, :active){
1713
- color:var(--tds-dropdown-item-color);
1714
- }
1715
- .tds-dropdown-item [slot="prefix"],
1716
- .tds-dropdown-item [slot="suffix"]{
1717
- flex-shrink:0;
1718
- }
1562
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1563
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1564
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
1565
+ --tds-checkbox-description-invalid-icon-display:inline-block;
1566
+ }
1719
1567
 
1720
- .tds-dropdown-item [slot="label"]{
1721
- flex:1;
1722
- min-width:0;
1723
- overflow:hidden;
1724
- text-overflow:ellipsis;
1725
- white-space:nowrap;
1726
- }
1568
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1569
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1570
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1571
+ }
1727
1572
 
1728
- .tds-dropdown-item [slot="description"]{
1729
- font-size:var(--t-font-size-sm);
1730
- color:var(--t-text-color-secondary);
1731
- }
1573
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
1574
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1575
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1576
+ }
1732
1577
 
1733
- .tds-dropdown-item:has([slot="description"]){
1734
- --tds-dropdown-item-row-gap:var(--t-spacing-half);
1735
- --tds-dropdown-item-column-gap:0;
1578
+ :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
1579
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1580
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1581
+ }
1736
1582
 
1737
- display:grid;
1738
- grid-template-areas:"prefix label suffix" ". description .";
1739
- grid-template-columns:auto 1fr auto;
1740
- }
1583
+ .tds-checkbox:has(input:required) label::after{
1584
+ margin-left:.25ch;
1585
+ color:var(--t-text-color-status-error);
1586
+ content:"*";
1587
+ }
1741
1588
 
1742
- .tds-dropdown-item:has([slot="description"]) [slot="prefix"]{
1743
- grid-area:prefix;
1744
- margin-inline-end:var(--t-spacing-1);
1745
- }
1589
+ .tds-checkbox:has(input:disabled){
1590
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1591
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1746
1592
 
1747
- .tds-dropdown-item:has([slot="description"]) [slot="label"]{
1748
- grid-area:label;
1749
- }
1593
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
1594
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
1595
+ --tds-checkbox-cursor:not-allowed;
1596
+ }
1750
1597
 
1751
- .tds-dropdown-item:has([slot="description"]) [slot="description"]{
1752
- grid-area:description;
1753
- }
1598
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1599
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1600
+ }
1754
1601
 
1755
- .tds-dropdown-item:has([slot="description"]) [slot="suffix"]{
1756
- grid-area:suffix;
1757
- margin-inline-start:var(--t-spacing-1);
1758
- }
1759
- .tds-dropdown-section:not(:first-child){
1760
- margin-block-start:var(--t-spacing-half);
1602
+ .tds-checkbox-description{
1603
+ display:flex;
1604
+ grid-area:2 / 2;
1605
+ gap:var(--t-spacing-half);
1606
+ align-items:flex-start;
1607
+ padding-inline-start:var(--t-spacing-1);
1608
+ margin:0;
1609
+ font-size:var(--tds-checkbox-description-font-size);
1610
+ line-height:var(--tds-checkbox-description-line-height);
1611
+ color:var(--tds-checkbox-description-color);
1612
+ cursor:text;
1761
1613
  }
1762
1614
 
1763
- .tds-dropdown-section-label{
1764
- padding-block:var(--t-spacing-1);
1765
- padding-inline:var(--t-spacing-1);
1766
- font-size:var(--t-font-size-sm);
1767
- font-weight:var(--t-font-weight-semibold);
1768
- color:var(--t-text-color-secondary);
1769
- }
1770
- .tds-dropdown-separator{
1771
- margin-block:var(--t-spacing-half);
1772
- margin-inline:0;
1773
- border:0;
1774
- border-top:1px solid var(--t-border-color);
1615
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1616
+ display:var(--tds-checkbox-description-invalid-icon-display);
1617
+ flex-shrink:0;
1618
+ margin-top:calc(.5lh - .5em);
1619
+ line-height:var(--tds-checkbox-description-line-height);
1620
+ }
1621
+
1622
+ .tds-checkbox--sm{
1623
+ --tds-checkbox-line-height:1.35;
1624
+ --tds-checkbox-input-size:var(--t-element-size-sm);
1625
+ --tds-checkbox-font-size:var(--t-font-size-sm);
1626
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
1627
+ --tds-checkbox-description-line-height:1.3;
1775
1628
  }
1776
1629
 
1777
1630
 
@@ -1797,148 +1650,249 @@ a.tds-dropdown-item:is(:hover, :active){
1797
1650
  }
1798
1651
  }
1799
1652
 
1800
- .tds-modal-overlay{
1801
- position:fixed;
1802
- inset:0;
1803
- z-index:1000;
1804
- display:flex;
1805
- align-items:center;
1806
- justify-content:center;
1807
- background:hsl(0 0% 0% / 40%);
1653
+ .tds-input:has(textarea){
1654
+ --tds-input-padding-block:6px;
1655
+ --tds-input-resizer-size:var(--t-element-size-sm);
1656
+ --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");
1808
1657
  }
1809
1658
 
1810
- .tds-modal-overlay[data-entering]{
1811
- animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1812
- }
1659
+ @supports (x: attr(x type(*))){
1813
1660
 
1814
- .tds-modal-overlay[data-exiting]{
1815
- animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1661
+ .tds-input textarea{
1662
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1663
+ }
1816
1664
  }
1817
1665
 
1818
- @keyframes tds-modal-overlay-fade{
1819
- from{
1820
- opacity:0;
1821
- }
1822
- }
1666
+ .tds-input.tds-textarea--resize-vertical textarea{
1667
+ resize:vertical;
1668
+ }
1823
1669
 
1824
- .tds-modal-frame{
1825
- --tds-modal-width:600px;
1670
+ .tds-input.tds-textarea--resize-none textarea{
1671
+ resize:none;
1672
+ }
1826
1673
 
1827
- display:flex;
1828
- justify-content:center;
1829
- width:min(var(--tds-modal-width), calc(100% - 48px));
1674
+ .tds-input.tds-textarea--resize-auto textarea{
1675
+ resize:vertical;
1676
+ }
1677
+
1678
+ @supports (field-sizing: content){
1679
+ .tds-input.tds-textarea--resize-auto textarea{
1680
+ field-sizing:content;
1681
+ resize:none;
1682
+ }
1683
+ }
1684
+
1685
+ .tds-input textarea{
1686
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1687
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1688
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1689
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1690
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1691
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1692
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1693
+ --tds-input-scrollbar-thumb-border-radius:999px;
1694
+ --tds-input-scrollbar-thumb-border-width:3px;
1695
+ --tds-input-scrollbar-track-margin-block:.125rem;
1696
+ scrollbar-color:initial;
1697
+ transition-timing-function:var(--t-ease-in-out);
1698
+ transition-duration:var(--t-duration-200);
1699
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1830
1700
  }
1831
1701
 
1832
- .tds-modal-frame[data-entering]{
1833
- animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1834
- }
1702
+ @media (pointer: fine){
1703
+ :is(.tds-input textarea)::-webkit-scrollbar{
1704
+ width:12px;
1705
+ height:12px;
1706
+ cursor:default;
1707
+ }
1835
1708
 
1836
- .tds-modal-frame[data-exiting]{
1837
- animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1838
- }
1709
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1710
+ cursor:default;
1711
+ background:var(--tds-input-scrollbar-thumb-color);
1712
+ background-clip:content-box;
1713
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1714
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1715
+ }
1839
1716
 
1840
- .tds-modal-frame--sm{
1841
- --tds-modal-width:400px;
1842
- }
1717
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1718
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1719
+ }
1843
1720
 
1844
- .tds-modal-frame--lg{
1845
- --tds-modal-width:800px;
1846
- }
1721
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1722
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1723
+ }
1847
1724
 
1848
- .tds-modal-frame--xl{
1849
- --tds-modal-width:1000px;
1850
- }
1725
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1726
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1727
+ }
1851
1728
 
1852
- @keyframes tds-modal-zoom{
1853
- from{
1854
- opacity:0;
1855
- scale:.96;
1729
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1730
+ background:var(--tds-input-scrollbar-surface-color);
1731
+ }
1732
+
1733
+ :is(.tds-input textarea)::-webkit-resizer{
1734
+ background:var(--tds-input-resizer-icon) no-repeat;
1735
+ background-position:right bottom;
1736
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1737
+ }
1738
+
1739
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1740
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1741
+ cursor:default;
1742
+ }
1743
+
1744
+ @supports (-moz-appearance: none){
1745
+ :is(.tds-input textarea){
1746
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1747
+ scrollbar-width:thin;
1748
+ }
1749
+
1750
+ @media (hover){
1751
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1752
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1753
+ }
1754
+ }
1755
+ }
1856
1756
  }
1757
+
1758
+ .tds-toggle-switch{
1759
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1760
+ --tds-toggle-switch-cursor:pointer;
1761
+ --tds-toggle-switch-display:inline-grid;
1762
+ --tds-toggle-switch-line-height:1.4;
1763
+
1764
+ --tds-toggle-switch-label-color:var(--t-form-color);
1765
+
1766
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1767
+ --tds-toggle-switch-track-outline:none;
1768
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1769
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1770
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1771
+
1772
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1773
+ --tds-toggle-switch-thumb-transform:translateX(0);
1774
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1775
+
1776
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1777
+ --tds-toggle-switch-description-line-height:1.35;
1778
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1779
+ position:relative;
1780
+
1781
+ display:var(--tds-toggle-switch-display);
1782
+ grid-template-columns:auto;
1783
+ grid-auto-columns:1fr;
1784
+ gap:var(--t-spacing-fourth) 0;
1785
+ -webkit-user-select:none;
1786
+ -moz-user-select:none;
1787
+ user-select:none;
1857
1788
  }
1858
1789
 
1859
- @media (prefers-reduced-motion: reduce){
1860
- .tds-modal-overlay[data-entering],
1861
- .tds-modal-overlay[data-exiting],
1862
- .tds-modal-frame[data-entering],
1863
- .tds-modal-frame[data-exiting]{
1864
- animation:none;
1790
+ .tds-toggle-switch input[type="checkbox"]{
1791
+ position:absolute;
1792
+ width:var(--tds-toggle-switch-track-width);
1793
+ height:var(--tds-toggle-switch-track-height);
1794
+ margin:0;
1795
+ -webkit-appearance:none;
1796
+ -moz-appearance:none;
1797
+ appearance:none;
1798
+ cursor:var(--tds-toggle-switch-cursor);
1799
+ outline:var(--tds-toggle-switch-track-outline);
1800
+ outline-offset:var(--t-focus-ring-offset);
1801
+ background-color:transparent;
1802
+ border:0;
1803
+ border-radius:var(--t-border-radius-round);
1865
1804
  }
1866
- }
1867
1805
 
1868
- .tds-modal{
1869
- display:flex;
1870
- flex-direction:column;
1871
- width:100%;
1872
- padding-block:var(--t-spacing-3);
1873
- padding-inline:0;
1874
- background:var(--t-surface-color-card);
1806
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1807
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1808
+ }
1875
1809
 
1876
- border:0;
1877
- border-radius:var(--t-border-radius-lg);
1878
- box-shadow:0 4px 18px 0 #0003;
1879
- }
1810
+ .tds-toggle-switch label{
1811
+ display:inline-flex;
1812
+ grid-area:1 / 2;
1813
+ padding-inline-start:var(--t-spacing-1);
1814
+ margin-top:-.09375em;
1815
+ font-size:var(--tds-toggle-switch-font-size);
1816
+ font-weight:var(--t-font-weight-normal);
1817
+ line-height:var(--tds-toggle-switch-line-height);
1818
+ color:var(--tds-toggle-switch-label-color);
1819
+ cursor:var(--tds-toggle-switch-cursor);
1820
+ }
1880
1821
 
1881
- .tds-modal:focus{
1882
- outline:none;
1822
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1823
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1883
1824
  }
1884
1825
 
1885
- .tds-modal-header{
1886
- display:grid;
1887
- grid-template-columns:1fr auto;
1888
- -moz-column-gap:var(--t-spacing-2);
1889
- column-gap:var(--t-spacing-2);
1890
- padding-block:0;
1891
- padding-inline:var(--t-spacing-4);
1892
- }
1826
+ .tds-toggle-switch:has(input:checked){
1827
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1828
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1829
+ }
1893
1830
 
1894
- .tds-modal-title{
1895
- grid-row:1;
1896
- grid-column:1;
1897
- margin:0;
1898
- font-size:var(--t-font-size-2xl);
1899
- font-weight:var(--t-font-weight-medium);
1900
- line-height:140%;
1901
- color:var(--t-text-color-headline);
1902
- }
1831
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1832
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1833
+ }
1903
1834
 
1904
- .tds-modal-subtitle{
1905
- grid-row:2;
1906
- grid-column:1;
1907
- margin:0;
1908
- font-size:var(--t-font-size-md);
1909
- font-weight:var(--t-font-weight-medium);
1910
- line-height:140%;
1911
- color:var(--t-text-color-secondary);
1835
+ .tds-toggle-switch:has(input:disabled){
1836
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1837
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1838
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1839
+ --tds-toggle-switch-cursor:not-allowed;
1840
+ }
1841
+
1842
+ .tds-toggle-switch-track{
1843
+ position:relative;
1844
+ flex-shrink:0;
1845
+ width:var(--tds-toggle-switch-track-width);
1846
+ height:var(--tds-toggle-switch-track-height);
1847
+ background-color:var(--tds-toggle-switch-track-background-color);
1848
+ border-radius:var(--t-border-radius-round);
1849
+ transition:var(--tds-toggle-switch-track-transition);
1912
1850
  }
1913
1851
 
1914
- .tds-modal-close{
1915
- grid-row:1;
1916
- grid-column:2;
1917
- align-self:center;
1918
- color:var(--t-icon-color-dim);
1919
- }
1852
+ .tds-toggle-switch-track::before{
1853
+ position:absolute;
1854
+ top:var(--t-spacing-fourth);
1855
+ left:var(--t-spacing-fourth);
1856
+ width:var(--tds-toggle-switch-thumb-size);
1857
+ height:var(--tds-toggle-switch-thumb-size);
1858
+ content:"";
1859
+ background-color:#fff;
1860
+ border-radius:var(--t-border-radius-round);
1861
+ transform:var(--tds-toggle-switch-thumb-transform);
1862
+ transition:var(--tds-toggle-switch-thumb-transition);
1863
+ }
1920
1864
 
1921
- .tds-modal-body{
1922
- padding-block:var(--t-spacing-3);
1923
- padding-inline:var(--t-spacing-4);
1924
- }
1865
+ @media (prefers-reduced-motion: reduce){
1925
1866
 
1926
- .tds-modal-body--full-width{
1927
- padding-inline:0;
1867
+ .tds-toggle-switch-track{
1868
+ --tds-toggle-switch-track-transition:none;
1869
+ --tds-toggle-switch-thumb-transition:none;
1928
1870
  }
1871
+ }
1929
1872
 
1930
- .tds-modal-footer{
1873
+ .tds-toggle-switch-description{
1931
1874
  display:flex;
1932
- gap:var(--t-spacing-2);
1933
- align-items:center;
1934
- justify-content:flex-end;
1935
- padding-block-start:var(--t-spacing-3);
1936
- padding-inline:var(--t-spacing-4);
1937
- border-top:1px solid var(--t-border-color);
1875
+ grid-area:2 / 2;
1876
+ align-items:flex-start;
1877
+ padding-inline-start:var(--t-spacing-1);
1878
+ margin:0;
1879
+ font-size:var(--tds-toggle-switch-description-font-size);
1880
+ line-height:var(--tds-toggle-switch-description-line-height);
1881
+ color:var(--tds-toggle-switch-description-color);
1882
+ cursor:text;
1938
1883
  }
1939
1884
 
1940
- .tds-modal-footer > [slot="start"]{
1941
- margin-inline-end:auto;
1885
+ .tds-toggle-switch--sm{
1886
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1887
+ --tds-toggle-switch-line-height:1.35;
1888
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1889
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1890
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1891
+ --tds-toggle-switch-description-line-height:1.3;
1892
+ }
1893
+
1894
+ .tds-toggle-switch--hide-label{
1895
+ --tds-toggle-switch-display:inline-flex;
1942
1896
  }
1943
1897
 
1944
1898
  .tds-radio-group{
@@ -2024,250 +1978,296 @@ a.tds-dropdown-item:is(:hover, :active){
2024
1978
  --tds-radio-group-description-line-height:1.3;
2025
1979
  }
2026
1980
 
2027
- .tds-toggle-switch{
2028
- --tds-toggle-switch-font-size:var(--t-font-size-md);
2029
- --tds-toggle-switch-cursor:pointer;
2030
- --tds-toggle-switch-display:inline-grid;
2031
- --tds-toggle-switch-line-height:1.4;
2032
-
2033
- --tds-toggle-switch-label-color:var(--t-form-color);
2034
-
2035
- --tds-toggle-switch-track-width:var(--t-container-size-md);
2036
- --tds-toggle-switch-track-outline:none;
2037
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
2038
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
2039
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
2040
-
2041
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
2042
- --tds-toggle-switch-thumb-transform:translateX(0);
2043
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
2044
-
2045
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
2046
- --tds-toggle-switch-description-line-height:1.35;
2047
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
2048
- position:relative;
2049
-
2050
- display:var(--tds-toggle-switch-display);
2051
- grid-template-columns:auto;
2052
- grid-auto-columns:1fr;
2053
- gap:var(--t-spacing-fourth) 0;
1981
+ .tds-dropdown-popover{
1982
+ min-inline-size:10rem;
1983
+ max-inline-size:24rem;
1984
+ padding:var(--t-spacing-1);
1985
+ overflow:auto;
1986
+ overscroll-behavior:none;
2054
1987
  -webkit-user-select:none;
2055
1988
  -moz-user-select:none;
2056
1989
  user-select:none;
1990
+ outline:0;
1991
+ scrollbar-color:#0004 var(--t-surface-color-card);
1992
+ scrollbar-width:thin;
1993
+ background:var(--t-surface-color-card);
1994
+ background-clip:padding-box;
1995
+ border:1px solid var(--t-border-color);
1996
+ border-radius:var(--t-border-radius);
1997
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
2057
1998
  }
1999
+ .tds-dropdown-popover[data-entering]{
2000
+ animation:tds-dropdown-popover var(--t-duration-300) var(--t-ease-out);
2001
+ }
2002
+ .tds-dropdown-popover[data-exiting]{
2003
+ animation:tds-dropdown-popover var(--t-duration-200) var(--t-ease-in) reverse;
2004
+ }
2005
+ .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
2006
+ will-change:opacity, transform;
2007
+ }
2058
2008
 
2059
- .tds-toggle-switch input[type="checkbox"]{
2060
- position:absolute;
2061
- width:var(--tds-toggle-switch-track-width);
2062
- height:var(--tds-toggle-switch-track-height);
2063
- margin:0;
2064
- -webkit-appearance:none;
2065
- -moz-appearance:none;
2066
- appearance:none;
2067
- cursor:var(--tds-toggle-switch-cursor);
2068
- outline:var(--tds-toggle-switch-track-outline);
2069
- outline-offset:var(--t-focus-ring-offset);
2070
- background-color:transparent;
2071
- border:0;
2072
- border-radius:var(--t-border-radius-round);
2009
+ @keyframes tds-dropdown-popover{
2010
+ from{
2011
+ opacity:0;
2012
+ transform:translateY(-8px);
2073
2013
  }
2014
+ }
2074
2015
 
2075
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2076
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2016
+ @media (prefers-reduced-motion: reduce){
2017
+ .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
2018
+ animation:none;
2077
2019
  }
2020
+ }
2078
2021
 
2079
- .tds-toggle-switch label{
2080
- display:inline-flex;
2081
- grid-area:1 / 2;
2082
- padding-inline-start:var(--t-spacing-1);
2083
- margin-top:-.09375em;
2084
- font-size:var(--tds-toggle-switch-font-size);
2085
- font-weight:var(--t-font-weight-normal);
2086
- line-height:var(--tds-toggle-switch-line-height);
2087
- color:var(--tds-toggle-switch-label-color);
2088
- cursor:var(--tds-toggle-switch-cursor);
2022
+ .tds-dropdown-popover [role="menu"]{
2023
+ outline:0;
2024
+ }
2025
+ .tds-dropdown-item{
2026
+ --tds-dropdown-item-color:var(--t-text-color);
2027
+ --tds-dropdown-item-row-gap:0;
2028
+ --tds-dropdown-item-column-gap:var(--t-spacing-1);
2029
+
2030
+ display:flex;
2031
+ row-gap:var(--tds-dropdown-item-row-gap);
2032
+ -moz-column-gap:var(--tds-dropdown-item-column-gap);
2033
+ column-gap:var(--tds-dropdown-item-column-gap);
2034
+ align-items:center;
2035
+ padding-block:var(--t-spacing-1);
2036
+ padding-inline:var(--t-spacing-2);
2037
+ font-size:1rem;
2038
+ color:var(--tds-dropdown-item-color);
2039
+ text-decoration:none;
2040
+ cursor:default;
2041
+ outline:0;
2042
+ border-radius:var(--t-border-radius);
2043
+ }
2044
+ .tds-dropdown-item[data-hovered]:not([data-disabled]),.tds-dropdown-item[data-focus-visible]{
2045
+ background:var(--t-fill-color-neutral-070);
2046
+ }
2047
+ .tds-dropdown-item[data-pressed]:not([data-disabled]){
2048
+ background:var(--t-fill-color-neutral-060);
2049
+ }
2050
+ .tds-dropdown-item[data-disabled]{
2051
+ --tds-dropdown-item-color:var(--t-form-color-disabled);
2052
+
2053
+ cursor:not-allowed;
2089
2054
  }
2090
2055
 
2091
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2092
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2056
+ .tds-dropdown-item--destructive{
2057
+ --tds-dropdown-item-color:var(--t-text-color-status-error);
2058
+ }
2059
+
2060
+ .tds-dropdown-item--staff-only{
2061
+ --tds-dropdown-item-color:var(--t-fill-color-product-staff);
2062
+ }
2063
+ a.tds-dropdown-item:is(:hover, :active){
2064
+ color:var(--tds-dropdown-item-color);
2065
+ }
2066
+ .tds-dropdown-item [slot="prefix"],
2067
+ .tds-dropdown-item [slot="suffix"]{
2068
+ flex-shrink:0;
2069
+ }
2070
+
2071
+ .tds-dropdown-item [slot="label"]{
2072
+ flex:1;
2073
+ min-width:0;
2074
+ overflow:hidden;
2075
+ text-overflow:ellipsis;
2076
+ white-space:nowrap;
2077
+ }
2078
+
2079
+ .tds-dropdown-item [slot="description"]{
2080
+ font-size:var(--t-font-size-sm);
2081
+ color:var(--t-text-color-secondary);
2082
+ }
2083
+
2084
+ .tds-dropdown-item:has([slot="description"]){
2085
+ --tds-dropdown-item-row-gap:var(--t-spacing-half);
2086
+ --tds-dropdown-item-column-gap:0;
2087
+
2088
+ display:grid;
2089
+ grid-template-areas:"prefix label suffix" ". description .";
2090
+ grid-template-columns:auto 1fr auto;
2091
+ }
2092
+
2093
+ .tds-dropdown-item:has([slot="description"]) [slot="prefix"]{
2094
+ grid-area:prefix;
2095
+ margin-inline-end:var(--t-spacing-1);
2096
+ }
2097
+
2098
+ .tds-dropdown-item:has([slot="description"]) [slot="label"]{
2099
+ grid-area:label;
2100
+ }
2101
+
2102
+ .tds-dropdown-item:has([slot="description"]) [slot="description"]{
2103
+ grid-area:description;
2104
+ }
2105
+
2106
+ .tds-dropdown-item:has([slot="description"]) [slot="suffix"]{
2107
+ grid-area:suffix;
2108
+ margin-inline-start:var(--t-spacing-1);
2109
+ }
2110
+ .tds-dropdown-section:not(:first-child){
2111
+ margin-block-start:var(--t-spacing-half);
2112
+ }
2113
+
2114
+ .tds-dropdown-section-label{
2115
+ padding-block:var(--t-spacing-1);
2116
+ padding-inline:var(--t-spacing-1);
2117
+ font-size:var(--t-font-size-sm);
2118
+ font-weight:var(--t-font-weight-semibold);
2119
+ color:var(--t-text-color-secondary);
2120
+ }
2121
+ .tds-dropdown-separator{
2122
+ margin-block:var(--t-spacing-half);
2123
+ margin-inline:0;
2124
+ border:0;
2125
+ border-top:1px solid var(--t-border-color);
2126
+ }
2127
+
2128
+ .tds-modal-overlay{
2129
+ position:fixed;
2130
+ inset:0;
2131
+ z-index:1000;
2132
+ display:flex;
2133
+ align-items:center;
2134
+ justify-content:center;
2135
+ background:hsl(0 0% 0% / 40%);
2136
+ }
2137
+
2138
+ .tds-modal-overlay[data-entering]{
2139
+ animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
2093
2140
  }
2094
2141
 
2095
- .tds-toggle-switch:has(input:checked){
2096
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2097
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2142
+ .tds-modal-overlay[data-exiting]{
2143
+ animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
2098
2144
  }
2099
2145
 
2100
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2101
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2102
- }
2103
-
2104
- .tds-toggle-switch:has(input:disabled){
2105
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2106
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2107
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2108
- --tds-toggle-switch-cursor:not-allowed;
2146
+ @keyframes tds-modal-overlay-fade{
2147
+ from{
2148
+ opacity:0;
2109
2149
  }
2150
+ }
2110
2151
 
2111
- .tds-toggle-switch-track{
2112
- position:relative;
2113
- flex-shrink:0;
2114
- width:var(--tds-toggle-switch-track-width);
2115
- height:var(--tds-toggle-switch-track-height);
2116
- background-color:var(--tds-toggle-switch-track-background-color);
2117
- border-radius:var(--t-border-radius-round);
2118
- transition:var(--tds-toggle-switch-track-transition);
2152
+ .tds-modal-frame{
2153
+ --tds-modal-width:600px;
2154
+
2155
+ display:flex;
2156
+ justify-content:center;
2157
+ width:min(var(--tds-modal-width), calc(100% - 48px));
2119
2158
  }
2120
2159
 
2121
- .tds-toggle-switch-track::before{
2122
- position:absolute;
2123
- top:var(--t-spacing-fourth);
2124
- left:var(--t-spacing-fourth);
2125
- width:var(--tds-toggle-switch-thumb-size);
2126
- height:var(--tds-toggle-switch-thumb-size);
2127
- content:"";
2128
- background-color:#fff;
2129
- border-radius:var(--t-border-radius-round);
2130
- transform:var(--tds-toggle-switch-thumb-transform);
2131
- transition:var(--tds-toggle-switch-thumb-transition);
2160
+ .tds-modal-frame[data-entering]{
2161
+ animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
2132
2162
  }
2133
2163
 
2134
- @media (prefers-reduced-motion: reduce){
2135
-
2136
- .tds-toggle-switch-track{
2137
- --tds-toggle-switch-track-transition:none;
2138
- --tds-toggle-switch-thumb-transition:none;
2139
- }
2164
+ .tds-modal-frame[data-exiting]{
2165
+ animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
2140
2166
  }
2141
2167
 
2142
- .tds-toggle-switch-description{
2143
- display:flex;
2144
- grid-area:2 / 2;
2145
- align-items:flex-start;
2146
- padding-inline-start:var(--t-spacing-1);
2147
- margin:0;
2148
- font-size:var(--tds-toggle-switch-description-font-size);
2149
- line-height:var(--tds-toggle-switch-description-line-height);
2150
- color:var(--tds-toggle-switch-description-color);
2151
- cursor:text;
2168
+ .tds-modal-frame--sm{
2169
+ --tds-modal-width:400px;
2152
2170
  }
2153
2171
 
2154
- .tds-toggle-switch--sm{
2155
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
2156
- --tds-toggle-switch-line-height:1.35;
2157
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
2158
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2159
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2160
- --tds-toggle-switch-description-line-height:1.3;
2172
+ .tds-modal-frame--lg{
2173
+ --tds-modal-width:800px;
2161
2174
  }
2162
2175
 
2163
- .tds-toggle-switch--hide-label{
2164
- --tds-toggle-switch-display:inline-flex;
2176
+ .tds-modal-frame--xl{
2177
+ --tds-modal-width:1000px;
2165
2178
  }
2166
2179
 
2167
- .tds-input:has(textarea){
2168
- --tds-input-padding-block:6px;
2169
- --tds-input-resizer-size:var(--t-element-size-sm);
2170
- --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");
2180
+ @keyframes tds-modal-zoom{
2181
+ from{
2182
+ opacity:0;
2183
+ scale:.96;
2184
+ }
2171
2185
  }
2172
2186
 
2173
- @supports (x: attr(x type(*))){
2174
-
2175
- .tds-input textarea{
2176
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
2177
- }
2187
+ @media (prefers-reduced-motion: reduce){
2188
+ .tds-modal-overlay[data-entering],
2189
+ .tds-modal-overlay[data-exiting],
2190
+ .tds-modal-frame[data-entering],
2191
+ .tds-modal-frame[data-exiting]{
2192
+ animation:none;
2178
2193
  }
2194
+ }
2179
2195
 
2180
- .tds-input.tds-textarea--resize-vertical textarea{
2181
- resize:vertical;
2182
- }
2183
-
2184
- .tds-input.tds-textarea--resize-none textarea{
2185
- resize:none;
2186
- }
2187
-
2188
- .tds-input.tds-textarea--resize-auto textarea{
2189
- resize:vertical;
2190
- }
2191
-
2192
- @supports (field-sizing: content){
2193
- .tds-input.tds-textarea--resize-auto textarea{
2194
- field-sizing:content;
2195
- resize:none;
2196
- }
2197
- }
2196
+ .tds-modal{
2197
+ display:flex;
2198
+ flex-direction:column;
2199
+ width:100%;
2200
+ padding-block:var(--t-spacing-3);
2201
+ padding-inline:0;
2202
+ background:var(--t-surface-color-card);
2198
2203
 
2199
- .tds-input textarea{
2200
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2201
- --tds-input-scrollbar-thumb-color-hidden:transparent;
2202
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2203
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2204
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2205
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2206
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2207
- --tds-input-scrollbar-thumb-border-radius:999px;
2208
- --tds-input-scrollbar-thumb-border-width:3px;
2209
- --tds-input-scrollbar-track-margin-block:.125rem;
2210
- scrollbar-color:initial;
2211
- transition-timing-function:var(--t-ease-in-out);
2212
- transition-duration:var(--t-duration-200);
2213
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2204
+ border:0;
2205
+ border-radius:var(--t-border-radius-lg);
2206
+ box-shadow:0 4px 18px 0 #0003;
2214
2207
  }
2215
2208
 
2216
- @media (pointer: fine){
2217
- :is(.tds-input textarea)::-webkit-scrollbar{
2218
- width:12px;
2219
- height:12px;
2220
- cursor:default;
2221
- }
2222
-
2223
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2224
- cursor:default;
2225
- background:var(--tds-input-scrollbar-thumb-color);
2226
- background-clip:content-box;
2227
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2228
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2229
- }
2209
+ .tds-modal:focus{
2210
+ outline:none;
2211
+ }
2230
2212
 
2231
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2232
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2233
- }
2213
+ .tds-modal-header{
2214
+ display:grid;
2215
+ grid-template-columns:1fr auto;
2216
+ -moz-column-gap:var(--t-spacing-2);
2217
+ column-gap:var(--t-spacing-2);
2218
+ padding-block:0;
2219
+ padding-inline:var(--t-spacing-4);
2220
+ }
2234
2221
 
2235
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2236
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2237
- }
2222
+ .tds-modal-title{
2223
+ grid-row:1;
2224
+ grid-column:1;
2225
+ margin:0;
2226
+ font-size:var(--t-font-size-2xl);
2227
+ font-weight:var(--t-font-weight-medium);
2228
+ line-height:140%;
2229
+ color:var(--t-text-color-headline);
2230
+ }
2238
2231
 
2239
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2240
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2241
- }
2232
+ .tds-modal-subtitle{
2233
+ grid-row:2;
2234
+ grid-column:1;
2235
+ margin:0;
2236
+ font-size:var(--t-font-size-md);
2237
+ font-weight:var(--t-font-weight-medium);
2238
+ line-height:140%;
2239
+ color:var(--t-text-color-secondary);
2240
+ }
2242
2241
 
2243
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
2244
- background:var(--tds-input-scrollbar-surface-color);
2245
- }
2242
+ .tds-modal-close{
2243
+ grid-row:1;
2244
+ grid-column:2;
2245
+ align-self:center;
2246
+ color:var(--t-icon-color-dim);
2247
+ }
2246
2248
 
2247
- :is(.tds-input textarea)::-webkit-resizer{
2248
- background:var(--tds-input-resizer-icon) no-repeat;
2249
- background-position:right bottom;
2250
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2251
- }
2249
+ .tds-modal-body{
2250
+ padding-block:var(--t-spacing-3);
2251
+ padding-inline:var(--t-spacing-4);
2252
+ }
2252
2253
 
2253
- :is(.tds-input textarea)::-webkit-scrollbar-track{
2254
- margin-block:var(--tds-input-scrollbar-track-margin-block);
2255
- cursor:default;
2256
- }
2254
+ .tds-modal-body--full-width{
2255
+ padding-inline:0;
2256
+ }
2257
2257
 
2258
- @supports (-moz-appearance: none){
2259
- :is(.tds-input textarea){
2260
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2261
- scrollbar-width:thin;
2262
- }
2258
+ .tds-modal-footer{
2259
+ display:flex;
2260
+ gap:var(--t-spacing-2);
2261
+ align-items:center;
2262
+ justify-content:flex-end;
2263
+ padding-block-start:var(--t-spacing-3);
2264
+ padding-inline:var(--t-spacing-4);
2265
+ border-top:1px solid var(--t-border-color);
2266
+ }
2263
2267
 
2264
- @media (hover){
2265
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2266
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2267
- }
2268
- }
2269
- }
2270
- }
2268
+ .tds-modal-footer > [slot="start"]{
2269
+ margin-inline-end:auto;
2270
+ }
2271
2271
 
2272
2272
  .tds-radio{
2273
2273
  --tds-radio-font-size:var(--t-font-size-md);
@@ -4251,6 +4251,11 @@ a.tds-dropdown-item:is(:hover, :active){
4251
4251
  --tds-search-input-clear-button-display:flex;
4252
4252
  }
4253
4253
 
4254
+ .tds-data-table-results-count{
4255
+ margin-block:0 var(--t-spacing-1-half);
4256
+ font-size:var(--t-font-size-md);
4257
+ color:var(--t-text-color-secondary);
4258
+ }
4254
4259
  .tds-data-table-wrapper{
4255
4260
  --tds-data-table-background-color:var(--t-surface-color-canvas);
4256
4261
  --tds-data-table-border-color:var(--t-border-color);