@planningcenter/tapestry 4.2.1-rc.3 → 4.2.1-rc.4

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 (21) hide show
  1. package/dist/components/DataTable/DataTable.d.ts +27 -3
  2. package/dist/components/DataTable/DataTable.d.ts.map +1 -1
  3. package/dist/components/DataTable/DataTable.js +12 -4
  4. package/dist/components/DataTable/DataTable.js.map +1 -1
  5. package/dist/components/internal/pagination/Pagination.d.ts +26 -0
  6. package/dist/components/internal/pagination/Pagination.d.ts.map +1 -0
  7. package/dist/components/internal/pagination/Pagination.js +61 -0
  8. package/dist/components/internal/pagination/Pagination.js.map +1 -0
  9. package/dist/components/internal/pagination/getPaginationItems.d.ts +24 -0
  10. package/dist/components/internal/pagination/getPaginationItems.d.ts.map +1 -0
  11. package/dist/components/internal/pagination/getPaginationItems.js +65 -0
  12. package/dist/components/internal/pagination/getPaginationItems.js.map +1 -0
  13. package/dist/components/internal/pagination/index.d.ts +5 -0
  14. package/dist/components/internal/pagination/index.d.ts.map +1 -0
  15. package/dist/reactRender.css +1065 -957
  16. package/dist/reactRender.css.map +1 -1
  17. package/dist/reactRenderLegacy.css +1065 -957
  18. package/dist/reactRenderLegacy.css.map +1 -1
  19. package/dist/unstable.css +3134 -3026
  20. package/dist/unstable.css.map +1 -1
  21. package/package.json +2 -2
package/dist/reactRenderLegacy.css CHANGED
@@ -677,48 +677,6 @@
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
-
722
680
  @layer t-critical{
723
681
  tds-page-header:not(.hydrated){
724
682
  display:none;
@@ -996,246 +954,93 @@
996
954
  }
997
955
  }
998
956
 
999
- .tds-checkbox{
1000
- --tds-checkbox-font-size:var(--t-font-size-md);
1001
- --tds-checkbox-cursor:pointer;
1002
- --tds-checkbox-line-height:1.4;
1003
- --tds-checkbox-transition-property:background-color, border-color;
1004
-
1005
- --tds-checkbox-input-size:var(--t-element-size-md);
1006
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1007
- --tds-checkbox-input-border-color:var(--t-form-border-color);
1008
- --tds-checkbox-input-background-color:var(--t-form-background-color);
1009
-
1010
- --tds-checkbox-input-icon:none;
1011
- --tds-checkbox-input-icon-visibility:hidden;
1012
- --tds-checkbox-input-icon-opacity:0;
1013
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1014
-
1015
- --tds-checkbox-label-color:var(--t-form-color);
1016
-
1017
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
1018
- --tds-checkbox-description-line-height:1.35;
1019
- --tds-checkbox-description-color:var(--t-text-color-secondary);
1020
- --tds-checkbox-description-invalid-icon-display:none;
1021
-
1022
- position:relative;
1023
- display:inline-grid;
1024
- grid-template-columns:auto;
1025
- grid-auto-columns:1fr;
1026
- gap:var(--t-spacing-fourth) 0;
1027
- line-height:var(--tds-checkbox-line-height);
1028
- -webkit-user-select:none;
1029
- -moz-user-select:none;
1030
- user-select:none;
957
+ .tds-button-group{
958
+ display:inline-flex;
1031
959
  }
960
+ .tds-button-group > .tds-btn{
961
+ --tds-button-group-item-z-index:1;
1032
962
 
1033
- .tds-checkbox label{
1034
- grid-area:1 / 2;
1035
- padding-inline-start:var(--t-spacing-1);
1036
- font-size:var(--tds-checkbox-font-size);
1037
- font-weight:var(--t-font-weight-normal);
1038
- color:var(--tds-checkbox-label-color);
1039
- cursor:var(--tds-checkbox-cursor);
1040
- }
1041
-
1042
- .tds-checkbox tds-indeterminate{
1043
- display:flex;
1044
- }
1045
-
1046
- .tds-checkbox input[type="checkbox"]{
1047
963
  position:relative;
1048
- width:1em;
1049
- height:1em;
1050
- margin:calc((1lh - 1em) / 2) 0 0;
1051
- font-size:var(--tds-checkbox-font-size);
1052
- line-height:inherit;
1053
- -webkit-appearance:none;
1054
- -moz-appearance:none;
1055
- appearance:none;
1056
- cursor:var(--tds-checkbox-cursor);
1057
- background-color:var(--tds-checkbox-input-background-color);
1058
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1059
- border-radius:var(--tds-checkbox-input-border-radius);
1060
- transition-timing-function:var(--t-ease-in-out);
1061
- transition-duration:var(--t-duration-200);
1062
- transition-property:var(--tds-checkbox-transition-property);
964
+ z-index:var(--tds-button-group-item-z-index);
965
+ border-radius:0;
1063
966
  }
1064
-
1065
- :is(.tds-checkbox input[type="checkbox"])::before{
1066
- position:absolute;
1067
- top:50%;
1068
- left:50%;
1069
- visibility:var(--tds-checkbox-input-icon-visibility);
1070
- width:100%;
1071
- height:100%;
1072
- content:"";
1073
- background-color:var(--tds-checkbox-input-icon-fill);
1074
- border-radius:var(--tds-checkbox-input-border-radius);
1075
- opacity:var(--tds-checkbox-input-icon-opacity);
1076
- -webkit-mask-image:var(--tds-checkbox-input-icon);
1077
- mask-image:var(--tds-checkbox-input-icon);
1078
- -webkit-mask-repeat:no-repeat;
1079
- mask-repeat:no-repeat;
1080
- -webkit-mask-size:contain;
1081
- mask-size:contain;
1082
- transform:translate(-50%, -50%);
1083
- }
1084
-
1085
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1086
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1087
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
967
+ :is(.tds-button-group > .tds-btn):not(:first-child){
968
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1088
969
  }
1089
-
1090
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1091
- outline:var(--t-focus-ring-outline);
1092
- outline-offset:var(--t-focus-ring-offset);
970
+ :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{
971
+ position:absolute;
972
+ inset-block:calc(var(--tds-btn-border-width) * -1);
973
+ width:var(--tds-btn-border-width);
974
+ pointer-events:none;
975
+ content:"";
976
+ background-color:var(--t-border-color-white);
977
+ }
978
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
979
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
980
+ }
981
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
982
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
983
+ }
984
+ :is(.tds-button-group > .tds-btn):hover{
985
+ --tds-button-group-item-z-index:2;
1093
986
  }
1094
-
1095
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1096
- pointer-events:none;
987
+ :is(.tds-button-group > .tds-btn):focus-visible{
988
+ --tds-button-group-item-z-index:5;
1097
989
  }
1098
-
1099
- @media (prefers-reduced-motion: reduce){
1100
-
1101
- .tds-checkbox input[type="checkbox"]{
1102
- --tds-checkbox-transition-property:none;
990
+ .tds-button-group > .tds-btn:first-child{
991
+ border-start-start-radius:var(--tds-btn-border-radius);
992
+ border-end-start-radius:var(--tds-btn-border-radius);
1103
993
  }
1104
- }
1105
-
1106
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1107
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
1108
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1109
- --tds-checkbox-input-icon-visibility:visible;
1110
- --tds-checkbox-input-icon-opacity:1;
994
+ .tds-button-group > .tds-btn:last-child{
995
+ border-start-end-radius:var(--tds-btn-border-radius);
996
+ border-end-end-radius:var(--tds-btn-border-radius);
1111
997
  }
1112
998
 
1113
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1114
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1115
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1116
- }
999
+ .tds-checkbox-group{
1000
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1001
+ --tds-checkbox-group-line-height:1.4;
1002
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1117
1003
 
1118
- .tds-checkbox:has(input:checked){
1119
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1120
- }
1004
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1005
+ --tds-checkbox-group-description-line-height:1.35;
1006
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1007
+ --tds-checkbox-group-description-invalid-icon-display:none;
1008
+ display:flex;
1009
+ flex-direction:column;
1010
+ gap:0;
1011
+ padding:0;
1012
+ margin:0;
1121
1013
 
1122
- .tds-checkbox:has(input:indeterminate){
1123
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1124
- }
1014
+ font-size:var(--tds-checkbox-group-font-size);
1015
+ line-height:var(--tds-checkbox-group-line-height);
1016
+ border:0;
1017
+ }
1125
1018
 
1126
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1127
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1128
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1129
- --tds-checkbox-description-invalid-icon-display:inline-block;
1019
+ .tds-checkbox-group legend{
1020
+ float:left;
1021
+ padding:0;
1022
+ margin:0;
1130
1023
  }
1131
1024
 
1132
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1133
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1134
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1135
- }
1136
-
1137
- :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{
1138
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1139
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1140
- }
1141
-
1142
- :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){
1143
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1144
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1145
- }
1025
+ .tds-checkbox-group[aria-invalid="true"]{
1026
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1027
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1028
+ }
1146
1029
 
1147
- .tds-checkbox:has(input:required) label::after{
1030
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1148
1031
  margin-left:.25ch;
1149
1032
  color:var(--t-text-color-status-error);
1150
1033
  content:"*";
1151
1034
  }
1152
1035
 
1153
- .tds-checkbox:has(input:disabled){
1154
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1155
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1156
-
1157
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1158
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1159
- --tds-checkbox-cursor:not-allowed;
1160
- }
1161
-
1162
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1163
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1036
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1037
+ content:none;
1164
1038
  }
1165
1039
 
1166
- .tds-checkbox-description{
1040
+ .tds-checkbox-group-fields{
1167
1041
  display:flex;
1168
- grid-area:2 / 2;
1169
- gap:var(--t-spacing-half);
1170
- align-items:flex-start;
1171
- padding-inline-start:var(--t-spacing-1);
1172
- margin:0;
1173
- font-size:var(--tds-checkbox-description-font-size);
1174
- line-height:var(--tds-checkbox-description-line-height);
1175
- color:var(--tds-checkbox-description-color);
1176
- cursor:text;
1177
- }
1178
-
1179
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1180
- display:var(--tds-checkbox-description-invalid-icon-display);
1181
- flex-shrink:0;
1182
- margin-top:calc(.5lh - .5em);
1183
- line-height:var(--tds-checkbox-description-line-height);
1184
- }
1185
-
1186
- .tds-checkbox--sm{
1187
- --tds-checkbox-line-height:1.35;
1188
- --tds-checkbox-input-size:var(--t-element-size-sm);
1189
- --tds-checkbox-font-size:var(--t-font-size-sm);
1190
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1191
- --tds-checkbox-description-line-height:1.3;
1192
- }
1193
-
1194
- .tds-checkbox-group{
1195
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1196
- --tds-checkbox-group-line-height:1.4;
1197
- --tds-checkbox-group-gap:var(--t-spacing-1);
1198
-
1199
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1200
- --tds-checkbox-group-description-line-height:1.35;
1201
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1202
- --tds-checkbox-group-description-invalid-icon-display:none;
1203
- display:flex;
1204
- flex-direction:column;
1205
- gap:0;
1206
- padding:0;
1207
- margin:0;
1208
-
1209
- font-size:var(--tds-checkbox-group-font-size);
1210
- line-height:var(--tds-checkbox-group-line-height);
1211
- border:0;
1212
- }
1213
-
1214
- .tds-checkbox-group legend{
1215
- float:left;
1216
- padding:0;
1217
- margin:0;
1218
- }
1219
-
1220
- .tds-checkbox-group[aria-invalid="true"]{
1221
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1222
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1223
- }
1224
-
1225
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1226
- margin-left:.25ch;
1227
- color:var(--t-text-color-status-error);
1228
- content:"*";
1229
- }
1230
-
1231
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1232
- content:none;
1233
- }
1234
-
1235
- .tds-checkbox-group-fields{
1236
- display:flex;
1237
- flex-direction:column;
1238
- gap:var(--tds-checkbox-group-gap);
1042
+ flex-direction:column;
1043
+ gap:var(--tds-checkbox-group-gap);
1239
1044
  align-items:flex-start;
1240
1045
  margin-top:var(--t-spacing-1);
1241
1046
  }
@@ -1266,634 +1071,712 @@
1266
1071
  }
1267
1072
 
1268
1073
 
1269
- @media (prefers-reduced-motion: no-preference){
1074
+ :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1075
+ -webkit-appearance:none;
1076
+ appearance:none;
1077
+ }
1270
1078
 
1271
- :root{
1272
- interpolate-size:allow-keywords;
1273
- }
1079
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1080
+ inline-size:1em;
1081
+ block-size:2em;
1082
+ }
1083
+ @supports (field-sizing: content){
1084
+ .tds-input--auto-width{
1085
+ inline-size:-moz-fit-content;
1086
+ inline-size:fit-content;
1087
+ min-inline-size:min(100%, 122px);
1274
1088
  }
1275
1089
 
1276
- @layer tds-component{
1277
- tds-sidenav,
1278
- .tds-sidenav{
1279
- --tds-sidenav-indent:12px;
1280
- --tds-sidenav-item-depth:0;
1281
-
1282
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
1283
-
1284
- --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
1285
- --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
1286
- --tds-sidenav-collapse-closed-opacity:0;
1287
- --tds-sidenav-collapse-open-opacity:1;
1288
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
1289
- --tds-sidenav-collapse-open-transform:translateY(0);
1290
-
1291
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
1292
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1293
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1294
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1090
+ .tds-input--auto-width input{
1091
+ field-sizing:content;
1092
+ inline-size:auto;
1093
+ }
1094
+ }
1295
1095
 
1296
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1297
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1298
- --tds-sidenav-item-nested-background-selected:transparent;
1096
+ .tds-modal-overlay{
1097
+ --tds-modal-min-margin-block:var(--t-spacing-3);
1299
1098
 
1300
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1301
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1302
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1099
+ position:fixed;
1100
+ inset:0;
1101
+ z-index:1000;
1102
+ display:grid;
1103
+ grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
1104
+ justify-items:center;
1105
+ overflow-y:auto;
1106
+ background:hsl(0 0% 0% / 40%);
1107
+ }
1303
1108
 
1304
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1305
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1109
+ .tds-modal-overlay[data-entering]{
1110
+ animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1306
1111
  }
1307
1112
 
1308
- @media (prefers-reduced-motion: reduce){
1309
- tds-sidenav,
1310
- .tds-sidenav{
1311
- --tds-sidenav-collapse-transition-enter:none;
1312
- --tds-sidenav-collapse-transition-exit:none;
1313
- --tds-sidenav-collapse-closed-transform:none;
1314
- --tds-sidenav-collapse-open-transform:none;
1113
+ .tds-modal-overlay[data-exiting]{
1114
+ animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1315
1115
  }
1316
- }
1317
1116
 
1318
- .tds-sidenav--theme-gray{
1319
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1320
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1321
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1322
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1323
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1117
+ @keyframes tds-modal-overlay-fade{
1118
+ from{
1119
+ opacity:0;
1324
1120
  }
1325
1121
  }
1326
1122
 
1327
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1328
- display:flex;
1123
+ .tds-modal-frame{
1124
+ --tds-modal-width:600px;
1125
+ --tds-modal-edge-margin-inline:var(--t-spacing-3);
1126
+ display:flex;
1127
+
1128
+ grid-row:2;
1129
+ justify-content:center;
1130
+ width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
1131
+ }
1132
+
1133
+ .tds-modal-frame[data-entering]{
1134
+ animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1329
1135
  }
1330
1136
 
1331
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1332
- flex-direction:column;
1333
- gap:var(--t-spacing-half);
1334
- width:100%;
1137
+ .tds-modal-frame[data-exiting]{
1138
+ animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1335
1139
  }
1336
1140
 
1337
- .tds-sidenav-section-list{
1338
- width:100%;
1339
- padding:0;
1340
- margin:0;
1341
- list-style:none;
1141
+ .tds-modal-frame--sm{
1142
+ --tds-modal-width:400px;
1342
1143
  }
1343
1144
 
1344
- .tds-sidenav-section-header{
1345
- display:flex;
1346
- align-items:baseline;
1347
- justify-content:space-between;
1348
- padding-top:var(--t-spacing-2);
1145
+ .tds-modal-frame--lg{
1146
+ --tds-modal-width:800px;
1349
1147
  }
1350
1148
 
1351
- .tds-sidenav-section-header h2{
1352
- margin:0;
1353
- font-size:var(--t-font-size-sm);
1354
- font-weight:var(--t-font-weight-semibold);
1355
- line-height:1.35;
1356
- color:var(--t-text-color-secondary);
1357
- text-transform:uppercase;
1358
- }
1149
+ .tds-modal-frame--xl{
1150
+ --tds-modal-width:1000px;
1151
+ }
1359
1152
 
1360
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1361
- padding-top:0;
1153
+ @keyframes tds-modal-zoom{
1154
+ from{
1155
+ opacity:0;
1156
+ scale:.96;
1362
1157
  }
1158
+ }
1363
1159
 
1364
- .tds-sidenav-section-header [slot="label-actions"]{
1365
- display:flex;
1366
- gap:var(--t-spacing-half);
1367
- align-items:center;
1160
+ @media (prefers-reduced-motion: reduce){
1161
+ .tds-modal-overlay[data-entering],
1162
+ .tds-modal-overlay[data-exiting],
1163
+ .tds-modal-frame[data-entering],
1164
+ .tds-modal-frame[data-exiting]{
1165
+ animation:none;
1368
1166
  }
1369
-
1370
- .tds-sidenav-section [slot="section-actions"]{
1371
- display:flex;
1372
- gap:12px;
1373
- align-items:center;
1374
- min-height:42px;
1375
- padding:var(--t-spacing-1) 0;
1376
1167
  }
1377
1168
 
1378
- .tds-sidenav-section-list,
1379
- .tds-sidenav-item{
1169
+ .tds-modal{
1170
+ display:flex;
1171
+ flex-direction:column;
1380
1172
  width:100%;
1381
- padding:0;
1382
- margin:0;
1173
+ padding-block-start:var(--t-spacing-3);
1174
+ padding-inline:0;
1175
+ background:var(--t-surface-color-card);
1176
+
1177
+ border:0;
1178
+ border-radius:var(--t-border-radius-lg);
1179
+ box-shadow:0 4px 18px 0 #0003;
1383
1180
  }
1384
1181
 
1385
- .tds-sidenav-item :is(a,button){
1386
- position:relative;
1387
- display:flex;
1388
- gap:12px;
1389
- align-items:center;
1390
- width:100%;
1391
- padding:12px;
1392
- overflow:hidden;
1393
- font-size:var(--t-font-size-sm);
1394
- line-height:18px;
1395
- color:var(--t-text-color-headline);
1396
- white-space:nowrap;
1397
- text-decoration:none;
1398
- -webkit-appearance:none;
1399
- -moz-appearance:none;
1400
- appearance:none;
1401
- cursor:pointer;
1402
- background-color:var(--tds-sidenav-item-background, transparent);
1403
- border:0;
1404
- border-radius:var(--t-border-radius);
1405
- transition:var(--tds-sidenav-item-transition);
1182
+ .tds-modal:focus{
1183
+ outline:none;
1406
1184
  }
1407
1185
 
1408
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1409
- display:block;
1410
- flex:1;
1411
- overflow:hidden;
1412
- text-overflow:ellipsis;
1413
- text-align:left;
1414
- white-space:nowrap;
1415
- }
1186
+ .tds-modal-header{
1187
+ display:grid;
1188
+ grid-template-columns:1fr auto;
1189
+ -moz-column-gap:var(--t-spacing-2);
1190
+ column-gap:var(--t-spacing-2);
1191
+ padding-block:0;
1192
+ padding-inline:var(--t-spacing-4);
1193
+ }
1416
1194
 
1417
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1418
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1419
- color:var(--t-text-color-headline);
1420
- text-decoration:none;
1421
- }
1195
+ .tds-modal-title{
1196
+ grid-row:1;
1197
+ grid-column:1;
1198
+ margin:0;
1199
+ font-size:var(--t-font-size-2xl);
1200
+ font-weight:var(--t-font-weight-medium);
1201
+ line-height:140%;
1202
+ color:var(--t-text-color-headline);
1203
+ }
1422
1204
 
1423
- :is(.tds-sidenav-item :is(a,button)):active{
1424
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1425
- }
1205
+ .tds-modal-subtitle{
1206
+ grid-row:2;
1207
+ grid-column:1;
1208
+ margin:0;
1209
+ font-size:var(--t-font-size-md);
1210
+ font-weight:var(--t-font-weight-medium);
1211
+ line-height:140%;
1212
+ color:var(--t-text-color-secondary);
1213
+ }
1426
1214
 
1427
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1428
- overflow:hidden;
1429
- color:var(--tds-sidenav-item-icon-color);
1430
- }
1215
+ .tds-modal-close{
1216
+ grid-row:1;
1217
+ grid-column:2;
1218
+ align-self:center;
1219
+ color:var(--t-icon-color-dim);
1220
+ }
1431
1221
 
1432
- :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
1433
- display:block;
1434
- width:var(--tds-sidenav-item-icon-size);
1435
- height:var(--tds-sidenav-item-icon-size);
1436
- }
1222
+ .tds-modal-body{
1223
+ padding-block:var(--t-spacing-3);
1224
+ padding-inline:var(--t-spacing-4);
1225
+ }
1437
1226
 
1438
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1439
- --tds-sidenav-indent:19px;
1440
- }
1227
+ .tds-modal-body--full-width{
1228
+ padding-inline:0;
1229
+ }
1441
1230
 
1442
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1443
- visibility:visible;
1444
- block-size:auto;
1445
- opacity:1;
1446
- }
1231
+ .tds-modal-footer{
1232
+ display:flex;
1233
+ gap:var(--t-spacing-2);
1234
+ align-items:center;
1235
+ justify-content:flex-end;
1236
+ padding-block:var(--t-spacing-3);
1237
+ padding-inline:var(--t-spacing-4);
1238
+ border-top:1px solid var(--t-border-color);
1239
+ }
1447
1240
 
1448
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1449
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1450
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1241
+ .tds-modal-footer > [slot="start"]{
1242
+ margin-inline-end:auto;
1243
+ }
1451
1244
 
1452
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1453
- font-weight:var(--t-font-weight-semibold);
1245
+ @media (min-width: 720px){
1246
+ .tds-modal-overlay{
1247
+ --tds-modal-min-margin-block:0;
1454
1248
  }
1455
1249
 
1456
- .tds-sidenav-item:has(.tds-sidenav-section){
1457
- display:flex;
1458
- flex-direction:column;
1459
- gap:var(--t-spacing-half);
1250
+ .tds-modal-footer{
1251
+ position:sticky;
1252
+ bottom:0;
1253
+ background:var(--t-surface-color-card);
1254
+ border-end-start-radius:var(--t-border-radius-lg);
1255
+ border-end-end-radius:var(--t-border-radius-lg);
1460
1256
  }
1257
+ }
1461
1258
 
1462
- .tds-sidenav-item .tds-sidenav-section-list{
1463
- --tds-sidenav-item-depth:1;
1464
- gap:0;
1465
- }
1259
+ .tds-checkbox{
1260
+ --tds-checkbox-font-size:var(--t-font-size-md);
1261
+ --tds-checkbox-cursor:pointer;
1262
+ --tds-checkbox-line-height:1.4;
1263
+ --tds-checkbox-transition-property:background-color, border-color;
1466
1264
 
1467
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1468
- visibility:hidden;
1469
- block-size:0;
1470
- overflow-y:clip;
1471
- opacity:0;
1472
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
1473
- }
1265
+ --tds-checkbox-input-size:var(--t-element-size-md);
1266
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1267
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
1268
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
1474
1269
 
1475
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1476
- --tds-sidenav-item-depth:2;
1477
- }
1270
+ --tds-checkbox-input-icon:none;
1271
+ --tds-checkbox-input-icon-visibility:hidden;
1272
+ --tds-checkbox-input-icon-opacity:0;
1273
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1478
1274
 
1479
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1480
- min-height:var(--t-element-size-2xl);
1481
- padding-block:9px;
1482
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1483
- line-height:1;
1484
- background-color:transparent;
1485
- }
1275
+ --tds-checkbox-label-color:var(--t-form-color);
1486
1276
 
1487
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1488
- position:absolute;
1489
- top:0;
1490
- bottom:0;
1491
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1492
- width:2px;
1493
- content:"";
1494
- background-color:var(--tds-sidenav-item-nested-border-color);
1495
- transition:var(--tds-sidenav-item-transition);
1496
- }
1277
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
1278
+ --tds-checkbox-description-line-height:1.35;
1279
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
1280
+ --tds-checkbox-description-invalid-icon-display:none;
1497
1281
 
1498
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1499
- position:absolute;
1500
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1501
- z-index:-1;
1502
- height:100%;
1503
- content:"";
1504
- background-color:var(--tds-sidenav-item-nested-background);
1505
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1506
- transition:var(--tds-sidenav-item-transition);
1507
- }
1282
+ position:relative;
1283
+ display:inline-grid;
1284
+ grid-template-columns:auto;
1285
+ grid-auto-columns:1fr;
1286
+ gap:var(--t-spacing-fourth) 0;
1287
+ line-height:var(--tds-checkbox-line-height);
1288
+ -webkit-user-select:none;
1289
+ -moz-user-select:none;
1290
+ user-select:none;
1291
+ }
1508
1292
 
1509
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
1510
- display:block;
1511
- text-align:left;
1512
- white-space:normal;
1513
- }
1293
+ .tds-checkbox label{
1294
+ grid-area:1 / 2;
1295
+ padding-inline-start:var(--t-spacing-1);
1296
+ font-size:var(--tds-checkbox-font-size);
1297
+ font-weight:var(--t-font-weight-normal);
1298
+ color:var(--tds-checkbox-label-color);
1299
+ cursor:var(--tds-checkbox-cursor);
1300
+ }
1514
1301
 
1515
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
1516
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1517
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1518
- }
1302
+ .tds-checkbox tds-indeterminate{
1303
+ display:flex;
1304
+ }
1519
1305
 
1520
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1521
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1522
- }
1306
+ .tds-checkbox input[type="checkbox"]{
1307
+ position:relative;
1308
+ width:1em;
1309
+ height:1em;
1310
+ margin:calc((1lh - 1em) / 2) 0 0;
1311
+ font-size:var(--tds-checkbox-font-size);
1312
+ line-height:inherit;
1313
+ -webkit-appearance:none;
1314
+ -moz-appearance:none;
1315
+ appearance:none;
1316
+ cursor:var(--tds-checkbox-cursor);
1317
+ background-color:var(--tds-checkbox-input-background-color);
1318
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1319
+ border-radius:var(--tds-checkbox-input-border-radius);
1320
+ transition-timing-function:var(--t-ease-in-out);
1321
+ transition-duration:var(--t-duration-200);
1322
+ transition-property:var(--tds-checkbox-transition-property);
1323
+ }
1523
1324
 
1524
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1525
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1526
- font-weight:var(--t-font-weight-medium);
1325
+ :is(.tds-checkbox input[type="checkbox"])::before{
1326
+ position:absolute;
1327
+ top:50%;
1328
+ left:50%;
1329
+ visibility:var(--tds-checkbox-input-icon-visibility);
1330
+ width:100%;
1331
+ height:100%;
1332
+ content:"";
1333
+ background-color:var(--tds-checkbox-input-icon-fill);
1334
+ border-radius:var(--tds-checkbox-input-border-radius);
1335
+ opacity:var(--tds-checkbox-input-icon-opacity);
1336
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
1337
+ mask-image:var(--tds-checkbox-input-icon);
1338
+ -webkit-mask-repeat:no-repeat;
1339
+ mask-repeat:no-repeat;
1340
+ -webkit-mask-size:contain;
1341
+ mask-size:contain;
1342
+ transform:translate(-50%, -50%);
1527
1343
  }
1528
1344
 
1529
- .tds-sidenav-responsive-header{
1530
- display:flex;
1531
- gap:var(--t-spacing-2);
1532
- align-items:center;
1533
- width:100%;
1534
- }
1345
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1346
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1347
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1348
+ }
1535
1349
 
1536
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1537
- order:0;
1350
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1351
+ outline:var(--t-focus-ring-outline);
1352
+ outline-offset:var(--t-focus-ring-offset);
1353
+ }
1354
+
1355
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
1356
+ pointer-events:none;
1357
+ }
1358
+
1359
+ @media (prefers-reduced-motion: reduce){
1360
+
1361
+ .tds-checkbox input[type="checkbox"]{
1362
+ --tds-checkbox-transition-property:none;
1538
1363
  }
1364
+ }
1539
1365
 
1540
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1541
- flex:1;
1542
- order:1;
1543
- margin:0;
1544
- font-size:var(--t-font-size-lg);
1545
- font-weight:var(--t-font-weight-medium);
1546
- color:var(--t-text-color-headline);
1366
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1367
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
1368
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1369
+ --tds-checkbox-input-icon-visibility:visible;
1370
+ --tds-checkbox-input-icon-opacity:1;
1547
1371
  }
1548
1372
 
1549
- @media (max-width: 719px){
1550
- .tds-sidenav-collapse{
1551
- z-index:10001;
1552
- display:none;
1553
- max-width:min(448px, calc(100vw - 48px));
1554
- padding:0;
1555
- margin:12px 0;
1556
- position-area:bottom span-right;
1557
- overflow:hidden;
1558
- outline:0;
1559
- background:var(--t-surface-color-card);
1560
- border:0;
1561
- border-radius:6px;
1562
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1563
- opacity:var(--tds-sidenav-collapse-open-opacity);
1564
- transform:var(--tds-sidenav-collapse-open-transform);
1565
- transition:var(--tds-sidenav-collapse-transition-enter);
1566
- will-change:transform;
1373
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1374
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1375
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1376
+ }
1377
+
1378
+ .tds-checkbox:has(input:checked){
1379
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1567
1380
  }
1568
1381
 
1569
- .tds-sidenav-scroll-container{
1570
- --webkit-overflow-scrolling:touch;
1571
- display:block;
1572
- width:100%;
1573
- height:-moz-fit-content;
1574
- height:fit-content;
1575
- padding:var(--t-spacing-2);
1576
- overflow-y:auto;
1382
+ .tds-checkbox:has(input:indeterminate){
1383
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1577
1384
  }
1578
1385
 
1579
- .tds-sidenav-item :is(a, button) :is(.prefix){
1580
- display:none;
1386
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1387
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1388
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
1389
+ --tds-checkbox-description-invalid-icon-display:inline-block;
1581
1390
  }
1582
- @supports selector(:popover-open){
1583
- .tds-sidenav-collapse:popover-open{
1584
- display:flex;
1391
+
1392
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1393
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1394
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1585
1395
  }
1586
1396
 
1587
- .tds-sidenav-collapse:not(:popover-open){
1588
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1589
- transition:var(--tds-sidenav-collapse-transition-exit);
1397
+ :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{
1398
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1399
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1590
1400
  }
1591
1401
 
1592
- @starting-style{
1593
- .tds-sidenav-collapse:popover-open{
1594
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1595
- transform:var(--tds-sidenav-collapse-closed-transform);
1402
+ :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){
1403
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1404
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1596
1405
  }
1406
+
1407
+ .tds-checkbox:has(input:required) label::after{
1408
+ margin-left:.25ch;
1409
+ color:var(--t-text-color-status-error);
1410
+ content:"*";
1597
1411
  }
1412
+
1413
+ .tds-checkbox:has(input:disabled){
1414
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1415
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1416
+
1417
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
1418
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
1419
+ --tds-checkbox-cursor:not-allowed;
1598
1420
  }
1599
- @supports not selector(:popover-open){
1600
- .tds-sidenav-collapse.\:popover-open{
1601
- display:flex;
1602
- }
1603
1421
 
1604
- .tds-sidenav-collapse:not(.\:popover-open){
1605
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1606
- transition:var(--tds-sidenav-collapse-transition-exit);
1422
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1423
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1607
1424
  }
1608
- }
1609
- }
1610
1425
 
1611
- @media (min-width: 720px){
1612
- .tds-sidenav-responsive-header{
1613
- display:none;
1614
- }
1426
+ .tds-checkbox-description{
1427
+ display:flex;
1428
+ grid-area:2 / 2;
1429
+ gap:var(--t-spacing-half);
1430
+ align-items:flex-start;
1431
+ padding-inline-start:var(--t-spacing-1);
1432
+ margin:0;
1433
+ font-size:var(--tds-checkbox-description-font-size);
1434
+ line-height:var(--tds-checkbox-description-line-height);
1435
+ color:var(--tds-checkbox-description-color);
1436
+ cursor:text;
1615
1437
  }
1616
1438
 
1617
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1618
- display:none;
1619
- }
1439
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1440
+ display:var(--tds-checkbox-description-invalid-icon-display);
1441
+ flex-shrink:0;
1442
+ margin-top:calc(.5lh - .5em);
1443
+ line-height:var(--tds-checkbox-description-line-height);
1444
+ }
1620
1445
 
1621
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1622
- display:block;
1623
- }
1446
+ .tds-checkbox--sm{
1447
+ --tds-checkbox-line-height:1.35;
1448
+ --tds-checkbox-input-size:var(--t-element-size-sm);
1449
+ --tds-checkbox-font-size:var(--t-font-size-sm);
1450
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
1451
+ --tds-checkbox-description-line-height:1.3;
1452
+ }
1624
1453
 
1625
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1626
- display:flex;
1627
- flex-direction:column;
1628
- }
1454
+ .tds-radio-group{
1455
+ --tds-radio-group-font-size:var(--t-font-size-md);
1456
+ --tds-radio-group-line-height:1.4;
1457
+ --tds-radio-group-gap:var(--t-spacing-1);
1629
1458
 
1630
- .tds-modal-overlay{
1631
- --tds-modal-min-margin-block:var(--t-spacing-3);
1459
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1460
+ --tds-radio-group-description-line-height:1.35;
1461
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1462
+ --tds-radio-group-description-invalid-icon-display:none;
1463
+ display:flex;
1464
+ flex-direction:column;
1465
+ gap:0;
1466
+ padding:0;
1467
+ margin:0;
1632
1468
 
1633
- position:fixed;
1634
- inset:0;
1635
- z-index:1000;
1636
- display:grid;
1637
- grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
1638
- justify-items:center;
1639
- overflow-y:auto;
1640
- background:hsl(0 0% 0% / 40%);
1469
+ font-size:var(--tds-radio-group-font-size);
1470
+ line-height:var(--tds-radio-group-line-height);
1471
+ border:0;
1641
1472
  }
1642
1473
 
1643
- .tds-modal-overlay[data-entering]{
1644
- animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1474
+ .tds-radio-group legend{
1475
+ float:left;
1476
+ padding:0;
1477
+ margin:0;
1645
1478
  }
1646
1479
 
1647
- .tds-modal-overlay[data-exiting]{
1648
- animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1480
+ .tds-radio-group[aria-invalid="true"]{
1481
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1482
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1649
1483
  }
1650
1484
 
1651
- @keyframes tds-modal-overlay-fade{
1652
- from{
1653
- opacity:0;
1654
- }
1655
- }
1485
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1486
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1487
+ }
1488
+
1489
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1490
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1491
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1492
+ }
1493
+
1494
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1495
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1496
+ }
1497
+
1498
+ .tds-radio-group:has(input:required) legend::after{
1499
+ margin-left:.25ch;
1500
+ color:var(--t-text-color-status-error);
1501
+ content:"*";
1502
+ }
1656
1503
 
1657
- .tds-modal-frame{
1658
- --tds-modal-width:600px;
1659
- --tds-modal-edge-margin-inline:var(--t-spacing-3);
1504
+ .tds-radio-group-fields{
1660
1505
  display:flex;
1661
-
1662
- grid-row:2;
1663
- justify-content:center;
1664
- width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
1506
+ flex-direction:column;
1507
+ gap:var(--tds-radio-group-gap);
1508
+ align-items:flex-start;
1509
+ margin-top:var(--t-spacing-1);
1665
1510
  }
1666
1511
 
1667
- .tds-modal-frame[data-entering]{
1668
- animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1669
- }
1512
+ .tds-radio-group-description{
1513
+ display:flex;
1514
+ gap:var(--t-spacing-half);
1515
+ align-items:flex-start;
1516
+ margin:var(--t-spacing-fourth) 0 0;
1517
+ font-size:var(--tds-radio-group-description-font-size);
1518
+ line-height:var(--tds-radio-group-description-line-height);
1519
+ color:var(--tds-radio-group-description-color);
1520
+ cursor:text;
1521
+ }
1670
1522
 
1671
- .tds-modal-frame[data-exiting]{
1672
- animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1523
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1524
+ display:var(--tds-radio-group-description-invalid-icon-display);
1525
+ flex-shrink:0;
1526
+ margin-top:calc(.5lh - .5em);
1527
+ line-height:var(--tds-radio-group-description-line-height);
1673
1528
  }
1674
1529
 
1675
- .tds-modal-frame--sm{
1676
- --tds-modal-width:400px;
1530
+ .tds-radio-group--sm{
1531
+ --tds-radio-group-line-height:1.35;
1532
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1533
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1534
+ --tds-radio-group-description-line-height:1.3;
1677
1535
  }
1678
1536
 
1679
- .tds-modal-frame--lg{
1680
- --tds-modal-width:800px;
1537
+ .tds-input:has(textarea){
1538
+ --tds-input-padding-block:6px;
1539
+ --tds-input-resizer-size:var(--t-element-size-sm);
1540
+ --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");
1681
1541
  }
1682
1542
 
1683
- .tds-modal-frame--xl{
1684
- --tds-modal-width:1000px;
1685
- }
1543
+ @supports (x: attr(x type(*))){
1686
1544
 
1687
- @keyframes tds-modal-zoom{
1688
- from{
1689
- opacity:0;
1690
- scale:.96;
1691
- }
1545
+ .tds-input textarea{
1546
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1692
1547
  }
1693
-
1694
- @media (prefers-reduced-motion: reduce){
1695
- .tds-modal-overlay[data-entering],
1696
- .tds-modal-overlay[data-exiting],
1697
- .tds-modal-frame[data-entering],
1698
- .tds-modal-frame[data-exiting]{
1699
- animation:none;
1700
1548
  }
1701
- }
1702
1549
 
1703
- .tds-modal{
1704
- display:flex;
1705
- flex-direction:column;
1706
- width:100%;
1707
- padding-block-start:var(--t-spacing-3);
1708
- padding-inline:0;
1709
- background:var(--t-surface-color-card);
1550
+ .tds-input.tds-textarea--resize-vertical textarea{
1551
+ resize:vertical;
1552
+ }
1710
1553
 
1711
- border:0;
1712
- border-radius:var(--t-border-radius-lg);
1713
- box-shadow:0 4px 18px 0 #0003;
1714
- }
1554
+ .tds-input.tds-textarea--resize-none textarea{
1555
+ resize:none;
1556
+ }
1715
1557
 
1716
- .tds-modal:focus{
1717
- outline:none;
1718
- }
1558
+ .tds-input.tds-textarea--resize-auto textarea{
1559
+ resize:vertical;
1560
+ }
1719
1561
 
1720
- .tds-modal-header{
1721
- display:grid;
1722
- grid-template-columns:1fr auto;
1723
- -moz-column-gap:var(--t-spacing-2);
1724
- column-gap:var(--t-spacing-2);
1725
- padding-block:0;
1726
- padding-inline:var(--t-spacing-4);
1727
- }
1562
+ @supports (field-sizing: content){
1563
+ .tds-input.tds-textarea--resize-auto textarea{
1564
+ field-sizing:content;
1565
+ resize:none;
1566
+ }
1567
+ }
1728
1568
 
1729
- .tds-modal-title{
1730
- grid-row:1;
1731
- grid-column:1;
1732
- margin:0;
1733
- font-size:var(--t-font-size-2xl);
1734
- font-weight:var(--t-font-weight-medium);
1735
- line-height:140%;
1736
- color:var(--t-text-color-headline);
1569
+ .tds-input textarea{
1570
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1571
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1572
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1573
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1574
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1575
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1576
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1577
+ --tds-input-scrollbar-thumb-border-radius:999px;
1578
+ --tds-input-scrollbar-thumb-border-width:3px;
1579
+ --tds-input-scrollbar-track-margin-block:.125rem;
1580
+ scrollbar-color:initial;
1581
+ transition-timing-function:var(--t-ease-in-out);
1582
+ transition-duration:var(--t-duration-200);
1583
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1737
1584
  }
1738
1585
 
1739
- .tds-modal-subtitle{
1740
- grid-row:2;
1741
- grid-column:1;
1742
- margin:0;
1743
- font-size:var(--t-font-size-md);
1744
- font-weight:var(--t-font-weight-medium);
1745
- line-height:140%;
1746
- color:var(--t-text-color-secondary);
1747
- }
1586
+ @media (pointer: fine){
1587
+ :is(.tds-input textarea)::-webkit-scrollbar{
1588
+ width:12px;
1589
+ height:12px;
1590
+ cursor:default;
1591
+ }
1748
1592
 
1749
- .tds-modal-close{
1750
- grid-row:1;
1751
- grid-column:2;
1752
- align-self:center;
1753
- color:var(--t-icon-color-dim);
1754
- }
1593
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1594
+ cursor:default;
1595
+ background:var(--tds-input-scrollbar-thumb-color);
1596
+ background-clip:content-box;
1597
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1598
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1599
+ }
1755
1600
 
1756
- .tds-modal-body{
1757
- padding-block:var(--t-spacing-3);
1758
- padding-inline:var(--t-spacing-4);
1759
- }
1601
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1602
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1603
+ }
1760
1604
 
1761
- .tds-modal-body--full-width{
1762
- padding-inline:0;
1763
- }
1605
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1606
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1607
+ }
1764
1608
 
1765
- .tds-modal-footer{
1766
- display:flex;
1767
- gap:var(--t-spacing-2);
1768
- align-items:center;
1769
- justify-content:flex-end;
1770
- padding-block:var(--t-spacing-3);
1771
- padding-inline:var(--t-spacing-4);
1772
- border-top:1px solid var(--t-border-color);
1773
- }
1609
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1610
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1611
+ }
1774
1612
 
1775
- .tds-modal-footer > [slot="start"]{
1776
- margin-inline-end:auto;
1777
- }
1613
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1614
+ background:var(--tds-input-scrollbar-surface-color);
1615
+ }
1778
1616
 
1779
- @media (min-width: 720px){
1780
- .tds-modal-overlay{
1781
- --tds-modal-min-margin-block:0;
1782
- }
1617
+ :is(.tds-input textarea)::-webkit-resizer{
1618
+ background:var(--tds-input-resizer-icon) no-repeat;
1619
+ background-position:right bottom;
1620
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1621
+ }
1783
1622
 
1784
- .tds-modal-footer{
1785
- position:sticky;
1786
- bottom:0;
1787
- background:var(--t-surface-color-card);
1788
- border-end-start-radius:var(--t-border-radius-lg);
1789
- border-end-end-radius:var(--t-border-radius-lg);
1623
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1624
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1625
+ cursor:default;
1626
+ }
1627
+
1628
+ @supports (-moz-appearance: none){
1629
+ :is(.tds-input textarea){
1630
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1631
+ scrollbar-width:thin;
1632
+ }
1633
+
1634
+ @media (hover){
1635
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1636
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1637
+ }
1638
+ }
1639
+ }
1790
1640
  }
1641
+
1642
+ .tds-toggle-switch{
1643
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1644
+ --tds-toggle-switch-cursor:pointer;
1645
+ --tds-toggle-switch-display:inline-grid;
1646
+ --tds-toggle-switch-line-height:1.4;
1647
+
1648
+ --tds-toggle-switch-label-color:var(--t-form-color);
1649
+
1650
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1651
+ --tds-toggle-switch-track-outline:none;
1652
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1653
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1654
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1655
+
1656
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1657
+ --tds-toggle-switch-thumb-transform:translateX(0);
1658
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1659
+
1660
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1661
+ --tds-toggle-switch-description-line-height:1.35;
1662
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1663
+ position:relative;
1664
+
1665
+ display:var(--tds-toggle-switch-display);
1666
+ grid-template-columns:auto;
1667
+ grid-auto-columns:1fr;
1668
+ gap:var(--t-spacing-fourth) 0;
1669
+ -webkit-user-select:none;
1670
+ -moz-user-select:none;
1671
+ user-select:none;
1791
1672
  }
1792
1673
 
1674
+ .tds-toggle-switch input[type="checkbox"]{
1675
+ position:absolute;
1676
+ width:var(--tds-toggle-switch-track-width);
1677
+ height:var(--tds-toggle-switch-track-height);
1678
+ margin:0;
1679
+ -webkit-appearance:none;
1680
+ -moz-appearance:none;
1681
+ appearance:none;
1682
+ cursor:var(--tds-toggle-switch-cursor);
1683
+ outline:var(--tds-toggle-switch-track-outline);
1684
+ outline-offset:var(--t-focus-ring-offset);
1685
+ background-color:transparent;
1686
+ border:0;
1687
+ border-radius:var(--t-border-radius-round);
1688
+ }
1793
1689
 
1794
- :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1795
- -webkit-appearance:none;
1796
- appearance:none;
1797
- }
1798
-
1799
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1800
- inline-size:1em;
1801
- block-size:2em;
1690
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1691
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1802
1692
  }
1803
- @supports (field-sizing: content){
1804
- .tds-input--auto-width{
1805
- inline-size:-moz-fit-content;
1806
- inline-size:fit-content;
1807
- min-inline-size:min(100%, 122px);
1808
- }
1809
1693
 
1810
- .tds-input--auto-width input{
1811
- field-sizing:content;
1812
- inline-size:auto;
1694
+ .tds-toggle-switch label{
1695
+ display:inline-flex;
1696
+ grid-area:1 / 2;
1697
+ padding-inline-start:var(--t-spacing-1);
1698
+ margin-top:-.09375em;
1699
+ font-size:var(--tds-toggle-switch-font-size);
1700
+ font-weight:var(--t-font-weight-normal);
1701
+ line-height:var(--tds-toggle-switch-line-height);
1702
+ color:var(--tds-toggle-switch-label-color);
1703
+ cursor:var(--tds-toggle-switch-cursor);
1813
1704
  }
1814
- }
1815
-
1816
- .tds-radio-group{
1817
- --tds-radio-group-font-size:var(--t-font-size-md);
1818
- --tds-radio-group-line-height:1.4;
1819
- --tds-radio-group-gap:var(--t-spacing-1);
1820
-
1821
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1822
- --tds-radio-group-description-line-height:1.35;
1823
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1824
- --tds-radio-group-description-invalid-icon-display:none;
1825
- display:flex;
1826
- flex-direction:column;
1827
- gap:0;
1828
- padding:0;
1829
- margin:0;
1830
-
1831
- font-size:var(--tds-radio-group-font-size);
1832
- line-height:var(--tds-radio-group-line-height);
1833
- border:0;
1834
- }
1835
1705
 
1836
- .tds-radio-group legend{
1837
- float:left;
1838
- padding:0;
1839
- margin:0;
1706
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1707
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1840
1708
  }
1841
1709
 
1842
- .tds-radio-group[aria-invalid="true"]{
1843
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1844
- --tds-radio-group-description-invalid-icon-display:inline-block;
1710
+ .tds-toggle-switch:has(input:checked){
1711
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1712
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1845
1713
  }
1846
1714
 
1847
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1848
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1715
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1716
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1849
1717
  }
1850
1718
 
1851
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1852
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1853
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1854
- }
1719
+ .tds-toggle-switch:has(input:disabled){
1720
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1721
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1722
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1723
+ --tds-toggle-switch-cursor:not-allowed;
1724
+ }
1855
1725
 
1856
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1857
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1858
- }
1726
+ .tds-toggle-switch-track{
1727
+ position:relative;
1728
+ flex-shrink:0;
1729
+ width:var(--tds-toggle-switch-track-width);
1730
+ height:var(--tds-toggle-switch-track-height);
1731
+ background-color:var(--tds-toggle-switch-track-background-color);
1732
+ border-radius:var(--t-border-radius-round);
1733
+ transition:var(--tds-toggle-switch-track-transition);
1734
+ }
1859
1735
 
1860
- .tds-radio-group:has(input:required) legend::after{
1861
- margin-left:.25ch;
1862
- color:var(--t-text-color-status-error);
1863
- content:"*";
1864
- }
1736
+ .tds-toggle-switch-track::before{
1737
+ position:absolute;
1738
+ top:var(--t-spacing-fourth);
1739
+ left:var(--t-spacing-fourth);
1740
+ width:var(--tds-toggle-switch-thumb-size);
1741
+ height:var(--tds-toggle-switch-thumb-size);
1742
+ content:"";
1743
+ background-color:#fff;
1744
+ border-radius:var(--t-border-radius-round);
1745
+ transform:var(--tds-toggle-switch-thumb-transform);
1746
+ transition:var(--tds-toggle-switch-thumb-transition);
1747
+ }
1865
1748
 
1866
- .tds-radio-group-fields{
1867
- display:flex;
1868
- flex-direction:column;
1869
- gap:var(--tds-radio-group-gap);
1870
- align-items:flex-start;
1871
- margin-top:var(--t-spacing-1);
1749
+ @media (prefers-reduced-motion: reduce){
1750
+
1751
+ .tds-toggle-switch-track{
1752
+ --tds-toggle-switch-track-transition:none;
1753
+ --tds-toggle-switch-thumb-transition:none;
1872
1754
  }
1755
+ }
1873
1756
 
1874
- .tds-radio-group-description{
1757
+ .tds-toggle-switch-description{
1875
1758
  display:flex;
1876
- gap:var(--t-spacing-half);
1759
+ grid-area:2 / 2;
1877
1760
  align-items:flex-start;
1878
- margin:var(--t-spacing-fourth) 0 0;
1879
- font-size:var(--tds-radio-group-description-font-size);
1880
- line-height:var(--tds-radio-group-description-line-height);
1881
- color:var(--tds-radio-group-description-color);
1761
+ padding-inline-start:var(--t-spacing-1);
1762
+ margin:0;
1763
+ font-size:var(--tds-toggle-switch-description-font-size);
1764
+ line-height:var(--tds-toggle-switch-description-line-height);
1765
+ color:var(--tds-toggle-switch-description-color);
1882
1766
  cursor:text;
1883
1767
  }
1884
1768
 
1885
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1886
- display:var(--tds-radio-group-description-invalid-icon-display);
1887
- flex-shrink:0;
1888
- margin-top:calc(.5lh - .5em);
1889
- line-height:var(--tds-radio-group-description-line-height);
1890
- }
1769
+ .tds-toggle-switch--sm{
1770
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1771
+ --tds-toggle-switch-line-height:1.35;
1772
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1773
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1774
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1775
+ --tds-toggle-switch-description-line-height:1.3;
1776
+ }
1891
1777
 
1892
- .tds-radio-group--sm{
1893
- --tds-radio-group-line-height:1.35;
1894
- --tds-radio-group-font-size:var(--t-font-size-sm);
1895
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1896
- --tds-radio-group-description-line-height:1.3;
1778
+ .tds-toggle-switch--hide-label{
1779
+ --tds-toggle-switch-display:inline-flex;
1897
1780
  }
1898
1781
 
1899
1782
  .tds-radio{
@@ -1998,281 +1881,398 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1998
1881
  --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1999
1882
  --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2000
1883
 
2001
- --tds-radio-label-color:var(--t-form-color-disabled);
2002
- --tds-radio-description-color:var(--t-form-color-disabled);
2003
- --tds-radio-cursor:not-allowed;
1884
+ --tds-radio-label-color:var(--t-form-color-disabled);
1885
+ --tds-radio-description-color:var(--t-form-color-disabled);
1886
+ --tds-radio-cursor:not-allowed;
1887
+ }
1888
+
1889
+ .tds-radio:has(input:disabled) input:checked{
1890
+ --tds-radio-input-background-color:var(--t-form-background-color);
1891
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1892
+ }
1893
+
1894
+ .tds-radio-description{
1895
+ display:flex;
1896
+ grid-area:2 / 2;
1897
+ gap:var(--t-spacing-half);
1898
+ align-items:flex-start;
1899
+ padding-inline-start:var(--t-spacing-1);
1900
+ margin:0;
1901
+ font-size:var(--tds-radio-description-font-size);
1902
+ line-height:var(--tds-radio-description-line-height);
1903
+ color:var(--tds-radio-description-color);
1904
+ cursor:text;
1905
+ }
1906
+
1907
+ .tds-radio--sm{
1908
+ --tds-radio-line-height:1.35;
1909
+ --tds-radio-input-size:var(--t-element-size-sm);
1910
+ --tds-radio-font-size:var(--t-font-size-sm);
1911
+ --tds-radio-description-font-size:var(--t-font-size-xs);
1912
+ --tds-radio-description-line-height:1.3;
1913
+ }
1914
+
1915
+
1916
+ @media (prefers-reduced-motion: no-preference){
1917
+
1918
+ :root{
1919
+ interpolate-size:allow-keywords;
1920
+ }
1921
+ }
1922
+
1923
+ @layer tds-component{
1924
+ tds-sidenav,
1925
+ .tds-sidenav{
1926
+ --tds-sidenav-indent:12px;
1927
+ --tds-sidenav-item-depth:0;
1928
+
1929
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
1930
+
1931
+ --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
1932
+ --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
1933
+ --tds-sidenav-collapse-closed-opacity:0;
1934
+ --tds-sidenav-collapse-open-opacity:1;
1935
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
1936
+ --tds-sidenav-collapse-open-transform:translateY(0);
1937
+
1938
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
1939
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1940
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1941
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1942
+
1943
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1944
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1945
+ --tds-sidenav-item-nested-background-selected:transparent;
1946
+
1947
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1948
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1949
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1950
+
1951
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1952
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1953
+ }
1954
+
1955
+ @media (prefers-reduced-motion: reduce){
1956
+ tds-sidenav,
1957
+ .tds-sidenav{
1958
+ --tds-sidenav-collapse-transition-enter:none;
1959
+ --tds-sidenav-collapse-transition-exit:none;
1960
+ --tds-sidenav-collapse-closed-transform:none;
1961
+ --tds-sidenav-collapse-open-transform:none;
1962
+ }
1963
+ }
1964
+
1965
+ .tds-sidenav--theme-gray{
1966
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1967
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1968
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1969
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1970
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1971
+ }
1972
+ }
1973
+
1974
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1975
+ display:flex;
2004
1976
  }
2005
1977
 
2006
- .tds-radio:has(input:disabled) input:checked{
2007
- --tds-radio-input-background-color:var(--t-form-background-color);
2008
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2009
- }
1978
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1979
+ flex-direction:column;
1980
+ gap:var(--t-spacing-half);
1981
+ width:100%;
1982
+ }
2010
1983
 
2011
- .tds-radio-description{
2012
- display:flex;
2013
- grid-area:2 / 2;
2014
- gap:var(--t-spacing-half);
2015
- align-items:flex-start;
2016
- padding-inline-start:var(--t-spacing-1);
1984
+ .tds-sidenav-section-list{
1985
+ width:100%;
1986
+ padding:0;
2017
1987
  margin:0;
2018
- font-size:var(--tds-radio-description-font-size);
2019
- line-height:var(--tds-radio-description-line-height);
2020
- color:var(--tds-radio-description-color);
2021
- cursor:text;
1988
+ list-style:none;
2022
1989
  }
2023
1990
 
2024
- .tds-radio--sm{
2025
- --tds-radio-line-height:1.35;
2026
- --tds-radio-input-size:var(--t-element-size-sm);
2027
- --tds-radio-font-size:var(--t-font-size-sm);
2028
- --tds-radio-description-font-size:var(--t-font-size-xs);
2029
- --tds-radio-description-line-height:1.3;
1991
+ .tds-sidenav-section-header{
1992
+ display:flex;
1993
+ align-items:baseline;
1994
+ justify-content:space-between;
1995
+ padding-top:var(--t-spacing-2);
2030
1996
  }
2031
1997
 
2032
- .tds-input:has(textarea){
2033
- --tds-input-padding-block:6px;
2034
- --tds-input-resizer-size:var(--t-element-size-sm);
2035
- --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");
2036
- }
1998
+ .tds-sidenav-section-header h2{
1999
+ margin:0;
2000
+ font-size:var(--t-font-size-sm);
2001
+ font-weight:var(--t-font-weight-semibold);
2002
+ line-height:1.35;
2003
+ color:var(--t-text-color-secondary);
2004
+ text-transform:uppercase;
2005
+ }
2037
2006
 
2038
- @supports (x: attr(x type(*))){
2007
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
2008
+ padding-top:0;
2009
+ }
2039
2010
 
2040
- .tds-input textarea{
2041
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
2011
+ .tds-sidenav-section-header [slot="label-actions"]{
2012
+ display:flex;
2013
+ gap:var(--t-spacing-half);
2014
+ align-items:center;
2015
+ }
2016
+
2017
+ .tds-sidenav-section [slot="section-actions"]{
2018
+ display:flex;
2019
+ gap:12px;
2020
+ align-items:center;
2021
+ min-height:42px;
2022
+ padding:var(--t-spacing-1) 0;
2023
+ }
2024
+
2025
+ .tds-sidenav-section-list,
2026
+ .tds-sidenav-item{
2027
+ width:100%;
2028
+ padding:0;
2029
+ margin:0;
2042
2030
  }
2031
+
2032
+ .tds-sidenav-item :is(a,button){
2033
+ position:relative;
2034
+ display:flex;
2035
+ gap:12px;
2036
+ align-items:center;
2037
+ width:100%;
2038
+ padding:12px;
2039
+ overflow:hidden;
2040
+ font-size:var(--t-font-size-sm);
2041
+ line-height:18px;
2042
+ color:var(--t-text-color-headline);
2043
+ white-space:nowrap;
2044
+ text-decoration:none;
2045
+ -webkit-appearance:none;
2046
+ -moz-appearance:none;
2047
+ appearance:none;
2048
+ cursor:pointer;
2049
+ background-color:var(--tds-sidenav-item-background, transparent);
2050
+ border:0;
2051
+ border-radius:var(--t-border-radius);
2052
+ transition:var(--tds-sidenav-item-transition);
2043
2053
  }
2044
2054
 
2045
- .tds-input.tds-textarea--resize-vertical textarea{
2046
- resize:vertical;
2055
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
2056
+ display:block;
2057
+ flex:1;
2058
+ overflow:hidden;
2059
+ text-overflow:ellipsis;
2060
+ text-align:left;
2061
+ white-space:nowrap;
2047
2062
  }
2048
2063
 
2049
- .tds-input.tds-textarea--resize-none textarea{
2050
- resize:none;
2064
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
2065
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
2066
+ color:var(--t-text-color-headline);
2067
+ text-decoration:none;
2051
2068
  }
2052
2069
 
2053
- .tds-input.tds-textarea--resize-auto textarea{
2054
- resize:vertical;
2070
+ :is(.tds-sidenav-item :is(a,button)):active{
2071
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
2055
2072
  }
2056
2073
 
2057
- @supports (field-sizing: content){
2058
- .tds-input.tds-textarea--resize-auto textarea{
2059
- field-sizing:content;
2060
- resize:none;
2061
- }
2074
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
2075
+ overflow:hidden;
2076
+ color:var(--tds-sidenav-item-icon-color);
2062
2077
  }
2063
2078
 
2064
- .tds-input textarea{
2065
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2066
- --tds-input-scrollbar-thumb-color-hidden:transparent;
2067
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2068
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2069
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2070
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2071
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2072
- --tds-input-scrollbar-thumb-border-radius:999px;
2073
- --tds-input-scrollbar-thumb-border-width:3px;
2074
- --tds-input-scrollbar-track-margin-block:.125rem;
2075
- scrollbar-color:initial;
2076
- transition-timing-function:var(--t-ease-in-out);
2077
- transition-duration:var(--t-duration-200);
2078
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2079
- }
2079
+ :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
2080
+ display:block;
2081
+ width:var(--tds-sidenav-item-icon-size);
2082
+ height:var(--tds-sidenav-item-icon-size);
2083
+ }
2080
2084
 
2081
- @media (pointer: fine){
2082
- :is(.tds-input textarea)::-webkit-scrollbar{
2083
- width:12px;
2084
- height:12px;
2085
- cursor:default;
2085
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
2086
+ --tds-sidenav-indent:19px;
2086
2087
  }
2087
2088
 
2088
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2089
- cursor:default;
2090
- background:var(--tds-input-scrollbar-thumb-color);
2091
- background-clip:content-box;
2092
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2093
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2089
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
2090
+ visibility:visible;
2091
+ block-size:auto;
2092
+ opacity:1;
2094
2093
  }
2095
2094
 
2096
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2097
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2098
- }
2095
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
2096
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
2097
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
2099
2098
 
2100
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2101
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2102
- }
2099
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
2100
+ font-weight:var(--t-font-weight-semibold);
2101
+ }
2103
2102
 
2104
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2105
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2106
- }
2103
+ .tds-sidenav-item:has(.tds-sidenav-section){
2104
+ display:flex;
2105
+ flex-direction:column;
2106
+ gap:var(--t-spacing-half);
2107
+ }
2107
2108
 
2108
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
2109
- background:var(--tds-input-scrollbar-surface-color);
2109
+ .tds-sidenav-item .tds-sidenav-section-list{
2110
+ --tds-sidenav-item-depth:1;
2111
+ gap:0;
2112
+ }
2113
+
2114
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
2115
+ visibility:hidden;
2116
+ block-size:0;
2117
+ overflow-y:clip;
2118
+ opacity:0;
2119
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
2110
2120
  }
2111
2121
 
2112
- :is(.tds-input textarea)::-webkit-resizer{
2113
- background:var(--tds-input-resizer-icon) no-repeat;
2114
- background-position:right bottom;
2115
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2122
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
2123
+ --tds-sidenav-item-depth:2;
2116
2124
  }
2117
2125
 
2118
- :is(.tds-input textarea)::-webkit-scrollbar-track{
2119
- margin-block:var(--tds-input-scrollbar-track-margin-block);
2120
- cursor:default;
2126
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2127
+ min-height:var(--t-element-size-2xl);
2128
+ padding-block:9px;
2129
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
2130
+ line-height:1;
2131
+ background-color:transparent;
2121
2132
  }
2122
2133
 
2123
- @supports (-moz-appearance: none){
2124
- :is(.tds-input textarea){
2125
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2126
- scrollbar-width:thin;
2134
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
2135
+ position:absolute;
2136
+ top:0;
2137
+ bottom:0;
2138
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2139
+ width:2px;
2140
+ content:"";
2141
+ background-color:var(--tds-sidenav-item-nested-border-color);
2142
+ transition:var(--tds-sidenav-item-transition);
2127
2143
  }
2128
2144
 
2129
- @media (hover){
2130
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2131
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2132
- }
2145
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
2146
+ position:absolute;
2147
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2148
+ z-index:-1;
2149
+ height:100%;
2150
+ content:"";
2151
+ background-color:var(--tds-sidenav-item-nested-background);
2152
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
2153
+ transition:var(--tds-sidenav-item-transition);
2133
2154
  }
2134
- }
2135
- }
2136
-
2137
- .tds-toggle-switch{
2138
- --tds-toggle-switch-font-size:var(--t-font-size-md);
2139
- --tds-toggle-switch-cursor:pointer;
2140
- --tds-toggle-switch-display:inline-grid;
2141
- --tds-toggle-switch-line-height:1.4;
2142
-
2143
- --tds-toggle-switch-label-color:var(--t-form-color);
2144
2155
 
2145
- --tds-toggle-switch-track-width:var(--t-container-size-md);
2146
- --tds-toggle-switch-track-outline:none;
2147
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
2148
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
2149
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
2156
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
2157
+ display:block;
2158
+ text-align:left;
2159
+ white-space:normal;
2160
+ }
2150
2161
 
2151
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
2152
- --tds-toggle-switch-thumb-transform:translateX(0);
2153
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
2162
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
2163
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
2164
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
2165
+ }
2154
2166
 
2155
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
2156
- --tds-toggle-switch-description-line-height:1.35;
2157
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
2158
- position:relative;
2167
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
2168
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
2169
+ }
2159
2170
 
2160
- display:var(--tds-toggle-switch-display);
2161
- grid-template-columns:auto;
2162
- grid-auto-columns:1fr;
2163
- gap:var(--t-spacing-fourth) 0;
2164
- -webkit-user-select:none;
2165
- -moz-user-select:none;
2166
- user-select:none;
2171
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2172
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
2173
+ font-weight:var(--t-font-weight-medium);
2174
+ }
2175
+
2176
+ .tds-sidenav-responsive-header{
2177
+ display:flex;
2178
+ gap:var(--t-spacing-2);
2179
+ align-items:center;
2180
+ width:100%;
2167
2181
  }
2168
2182
 
2169
- .tds-toggle-switch input[type="checkbox"]{
2170
- position:absolute;
2171
- width:var(--tds-toggle-switch-track-width);
2172
- height:var(--tds-toggle-switch-track-height);
2173
- margin:0;
2174
- -webkit-appearance:none;
2175
- -moz-appearance:none;
2176
- appearance:none;
2177
- cursor:var(--tds-toggle-switch-cursor);
2178
- outline:var(--tds-toggle-switch-track-outline);
2179
- outline-offset:var(--t-focus-ring-offset);
2180
- background-color:transparent;
2181
- border:0;
2182
- border-radius:var(--t-border-radius-round);
2183
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
2184
+ order:0;
2183
2185
  }
2184
2186
 
2185
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2186
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2187
- }
2187
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
2188
+ flex:1;
2189
+ order:1;
2190
+ margin:0;
2191
+ font-size:var(--t-font-size-lg);
2192
+ font-weight:var(--t-font-weight-medium);
2193
+ color:var(--t-text-color-headline);
2194
+ }
2188
2195
 
2189
- .tds-toggle-switch label{
2190
- display:inline-flex;
2191
- grid-area:1 / 2;
2192
- padding-inline-start:var(--t-spacing-1);
2193
- margin-top:-.09375em;
2194
- font-size:var(--tds-toggle-switch-font-size);
2195
- font-weight:var(--t-font-weight-normal);
2196
- line-height:var(--tds-toggle-switch-line-height);
2197
- color:var(--tds-toggle-switch-label-color);
2198
- cursor:var(--tds-toggle-switch-cursor);
2196
+ @media (max-width: 719px){
2197
+ .tds-sidenav-collapse{
2198
+ z-index:10001;
2199
+ display:none;
2200
+ max-width:min(448px, calc(100vw - 48px));
2201
+ padding:0;
2202
+ margin:12px 0;
2203
+ position-area:bottom span-right;
2204
+ overflow:hidden;
2205
+ outline:0;
2206
+ background:var(--t-surface-color-card);
2207
+ border:0;
2208
+ border-radius:6px;
2209
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
2210
+ opacity:var(--tds-sidenav-collapse-open-opacity);
2211
+ transform:var(--tds-sidenav-collapse-open-transform);
2212
+ transition:var(--tds-sidenav-collapse-transition-enter);
2213
+ will-change:transform;
2199
2214
  }
2200
2215
 
2201
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2202
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2216
+ .tds-sidenav-scroll-container{
2217
+ --webkit-overflow-scrolling:touch;
2218
+ display:block;
2219
+ width:100%;
2220
+ height:-moz-fit-content;
2221
+ height:fit-content;
2222
+ padding:var(--t-spacing-2);
2223
+ overflow-y:auto;
2203
2224
  }
2204
2225
 
2205
- .tds-toggle-switch:has(input:checked){
2206
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2207
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2226
+ .tds-sidenav-item :is(a, button) :is(.prefix){
2227
+ display:none;
2208
2228
  }
2229
+ @supports selector(:popover-open){
2230
+ .tds-sidenav-collapse:popover-open{
2231
+ display:flex;
2232
+ }
2209
2233
 
2210
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2211
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2234
+ .tds-sidenav-collapse:not(:popover-open){
2235
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2236
+ transition:var(--tds-sidenav-collapse-transition-exit);
2212
2237
  }
2213
2238
 
2214
- .tds-toggle-switch:has(input:disabled){
2215
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2216
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2217
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2218
- --tds-toggle-switch-cursor:not-allowed;
2239
+ @starting-style{
2240
+ .tds-sidenav-collapse:popover-open{
2241
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2242
+ transform:var(--tds-sidenav-collapse-closed-transform);
2243
+ }
2244
+ }
2219
2245
  }
2246
+ @supports not selector(:popover-open){
2247
+ .tds-sidenav-collapse.\:popover-open{
2248
+ display:flex;
2249
+ }
2220
2250
 
2221
- .tds-toggle-switch-track{
2222
- position:relative;
2223
- flex-shrink:0;
2224
- width:var(--tds-toggle-switch-track-width);
2225
- height:var(--tds-toggle-switch-track-height);
2226
- background-color:var(--tds-toggle-switch-track-background-color);
2227
- border-radius:var(--t-border-radius-round);
2228
- transition:var(--tds-toggle-switch-track-transition);
2251
+ .tds-sidenav-collapse:not(.\:popover-open){
2252
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2253
+ transition:var(--tds-sidenav-collapse-transition-exit);
2254
+ }
2255
+ }
2229
2256
  }
2230
2257
 
2231
- .tds-toggle-switch-track::before{
2232
- position:absolute;
2233
- top:var(--t-spacing-fourth);
2234
- left:var(--t-spacing-fourth);
2235
- width:var(--tds-toggle-switch-thumb-size);
2236
- height:var(--tds-toggle-switch-thumb-size);
2237
- content:"";
2238
- background-color:#fff;
2239
- border-radius:var(--t-border-radius-round);
2240
- transform:var(--tds-toggle-switch-thumb-transform);
2241
- transition:var(--tds-toggle-switch-thumb-transition);
2258
+ @media (min-width: 720px){
2259
+ .tds-sidenav-responsive-header{
2260
+ display:none;
2242
2261
  }
2243
-
2244
- @media (prefers-reduced-motion: reduce){
2245
-
2246
- .tds-toggle-switch-track{
2247
- --tds-toggle-switch-track-transition:none;
2248
- --tds-toggle-switch-thumb-transition:none;
2249
2262
  }
2250
- }
2251
2263
 
2252
- .tds-toggle-switch-description{
2253
- display:flex;
2254
- grid-area:2 / 2;
2255
- align-items:flex-start;
2256
- padding-inline-start:var(--t-spacing-1);
2257
- margin:0;
2258
- font-size:var(--tds-toggle-switch-description-font-size);
2259
- line-height:var(--tds-toggle-switch-description-line-height);
2260
- color:var(--tds-toggle-switch-description-color);
2261
- cursor:text;
2262
- }
2264
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
2265
+ display:none;
2266
+ }
2263
2267
 
2264
- .tds-toggle-switch--sm{
2265
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
2266
- --tds-toggle-switch-line-height:1.35;
2267
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
2268
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2269
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2270
- --tds-toggle-switch-description-line-height:1.3;
2271
- }
2268
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
2269
+ display:block;
2270
+ }
2272
2271
 
2273
- .tds-toggle-switch--hide-label{
2274
- --tds-toggle-switch-display:inline-flex;
2275
- }
2272
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2273
+ display:flex;
2274
+ flex-direction:column;
2275
+ }
2276
2276
 
2277
2277
  .tds-input{
2278
2278
  --tds-input-border-color:var(--t-form-border-color);
@@ -4014,6 +4014,11 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4014
4014
  padding-block:var(--tds-data-table-cell-padding-block);
4015
4015
  padding-inline:var(--tds-data-table-cell-padding-inline);
4016
4016
  }
4017
+ .tds-data-table-frame-footer{
4018
+ padding-block:var(--tds-data-table-cell-padding-block);
4019
+ padding-inline:var(--tds-data-table-cell-padding-inline);
4020
+ border-top:1px solid var(--tds-data-table-border-color);
4021
+ }
4017
4022
 
4018
4023
  .tds-data-table-results-count{
4019
4024
  margin:0;
@@ -4368,6 +4373,109 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4368
4373
  }
4369
4374
  }
4370
4375
 
4376
+ .tds-pagination{
4377
+ --tds-pagination-background-color:var(--t-surface-color-canvas);
4378
+ --tds-pagination-page-background-color-hover:var(--t-fill-color-neutral-100);
4379
+ --tds-pagination-page-background-color-active:var(--t-fill-color-status-info-dim);
4380
+ --tds-pagination-page-border-color-hover:var(--t-border-color-control-info);
4381
+ --tds-pagination-page-border-radius:var(--t-border-radius-md);
4382
+ --tds-pagination-page-border-width:var(--t-border-width);
4383
+ --tds-pagination-page-color:var(--t-text-color-headline);
4384
+ --tds-pagination-page-color-hover:var(--t-text-color-interaction);
4385
+ --tds-pagination-page-current-background-color:var(--t-fill-color-control);
4386
+ --tds-pagination-page-current-color:var(--t-text-color-inverted);
4387
+ --tds-pagination-page-font-size:var(--t-font-size-md);
4388
+ --tds-pagination-page-min-size:34px;
4389
+
4390
+ container-type:inline-size;
4391
+ background-color:var(--tds-pagination-background-color);
4392
+ }
4393
+
4394
+ .tds-pagination .tds-btn--icononly{
4395
+ aspect-ratio:1;
4396
+ }
4397
+
4398
+ .tds-pagination-list{
4399
+ padding:0;
4400
+ margin:0;
4401
+ list-style:none;
4402
+ }
4403
+
4404
+ .tds-pagination-page{
4405
+ display:inline-flex;
4406
+ align-items:center;
4407
+ justify-content:center;
4408
+ min-width:var(--tds-pagination-page-min-size);
4409
+ height:var(--tds-pagination-page-min-size);
4410
+ padding-inline:var(--t-spacing-half);
4411
+ font-size:var(--tds-pagination-page-font-size);
4412
+ line-height:1;
4413
+ color:var(--tds-pagination-page-color);
4414
+ -webkit-user-select:none;
4415
+ -moz-user-select:none;
4416
+ user-select:none;
4417
+ background-color:transparent;
4418
+ border:var(--tds-pagination-page-border-width) solid transparent;
4419
+ border-radius:var(--tds-pagination-page-border-radius);
4420
+ }
4421
+
4422
+ .tds-pagination-page:is(button){
4423
+ cursor:pointer;
4424
+ }
4425
+
4426
+ .tds-pagination-page:is(button):hover{
4427
+ color:var(--tds-pagination-page-color-hover);
4428
+ background-color:var(--tds-pagination-page-background-color-hover);
4429
+ border-color:var(--tds-pagination-page-border-color-hover);
4430
+ }
4431
+
4432
+ .tds-pagination-page:is(button):active{
4433
+ background-color:var(--tds-pagination-page-background-color-active);
4434
+ }
4435
+
4436
+ .tds-pagination-page:is(button):focus-visible{
4437
+ position:relative;
4438
+ z-index:2;
4439
+ outline:var(--t-focus-ring-outline);
4440
+ outline-offset:var(--t-focus-ring-offset);
4441
+ }
4442
+
4443
+ .tds-pagination-page--current{
4444
+ font-weight:var(--t-font-weight-semibold);
4445
+ color:var(--tds-pagination-page-current-color);
4446
+ cursor:default;
4447
+ background-color:var(--tds-pagination-page-current-background-color);
4448
+ }
4449
+
4450
+ .tds-pagination-ellipsis{
4451
+ display:inline-flex;
4452
+ align-items:center;
4453
+ justify-content:center;
4454
+ height:var(--tds-pagination-page-min-size);
4455
+ aspect-ratio:1;
4456
+ font-size:var(--tds-pagination-page-font-size);
4457
+ line-height:1;
4458
+ color:var(--t-text-color-secondary);
4459
+ cursor:default;
4460
+ -webkit-user-select:none;
4461
+ -moz-user-select:none;
4462
+ user-select:none;
4463
+ }
4464
+
4465
+ .tds-pagination .tds-pagination-item--compact{
4466
+ display:none;
4467
+ }
4468
+
4469
+ @container (inline-size < 480px){
4470
+ .tds-pagination .tds-pagination-item--full{
4471
+ display:none;
4472
+ }
4473
+
4474
+ .tds-pagination .tds-pagination-item--compact{
4475
+ display:flex;
4476
+ }
4477
+ }
4478
+
4371
4479
  .t-banner{
4372
4480
  --t-banner-font-size:var(--t-font-size-md);
4373
4481
  --t-banner-font-color:var(--t-text-color);