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

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