@planningcenter/tapestry 4.0.0-rc.7 → 4.0.0-rc.9

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 (11) hide show
  1. package/dist/componentRegistration.js +4 -0
  2. package/dist/componentRegistration.js.map +1 -1
  3. package/dist/components/combo-box/ComboBox.js +19 -19
  4. package/dist/components/combo-box/ComboBox.js.map +1 -1
  5. package/dist/components/internal/LoadingSpinner.js +2 -2
  6. package/dist/components/internal/LoadingSpinner.js.map +1 -1
  7. package/dist/reactRender.css +1241 -1241
  8. package/dist/reactRender.css.map +1 -1
  9. package/dist/reactRenderLegacy.css +1241 -1241
  10. package/dist/reactRenderLegacy.css.map +1 -1
  11. package/package.json +2 -2
package/dist/reactRenderLegacy.css CHANGED
@@ -954,1007 +954,943 @@
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);
1236
- }
1237
-
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;
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);
1256
1142
  }
1257
1143
 
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
- }
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
+ }
1267
1151
 
1268
- .tds-sidenav-item :is(a, button) :is(.prefix){
1269
- display:none;
1270
- }
1271
- @supports selector(:popover-open){
1272
- .tds-sidenav-collapse:popover-open{
1273
- display:flex;
1274
- }
1275
1152
 
1276
- .tds-sidenav-collapse:not(:popover-open){
1277
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1278
- transition:var(--tds-sidenav-collapse-transition-exit);
1153
+ :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{
1154
+ -webkit-appearance:none;
1155
+ appearance:none;
1279
1156
  }
1280
1157
 
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);
1285
- }
1158
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1159
+ inline-size:1em;
1160
+ block-size:2em;
1286
1161
  }
1162
+ @supports (field-sizing: content){
1163
+ .tds-input--auto-width{
1164
+ inline-size:-moz-fit-content;
1165
+ inline-size:fit-content;
1166
+ min-inline-size:min(100%, 122px);
1287
1167
  }
1288
- @supports not selector(:popover-open){
1289
- .tds-sidenav-collapse.\:popover-open{
1290
- display:flex;
1291
- }
1292
1168
 
1293
- .tds-sidenav-collapse:not(.\:popover-open){
1294
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1295
- transition:var(--tds-sidenav-collapse-transition-exit);
1296
- }
1169
+ .tds-input--auto-width input{
1170
+ field-sizing:content;
1171
+ inline-size:auto;
1297
1172
  }
1298
1173
  }
1299
1174
 
1300
- @media (min-width: 720px){
1301
- .tds-sidenav-responsive-header{
1302
- display:none;
1303
- }
1175
+ .tds-checkbox-group{
1176
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1177
+ --tds-checkbox-group-line-height:1.4;
1178
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1179
+
1180
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1181
+ --tds-checkbox-group-description-line-height:1.35;
1182
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1183
+ --tds-checkbox-group-description-invalid-icon-display:none;
1184
+ display:flex;
1185
+ flex-direction:column;
1186
+ gap:0;
1187
+ padding:0;
1188
+ margin:0;
1189
+
1190
+ font-size:var(--tds-checkbox-group-font-size);
1191
+ line-height:var(--tds-checkbox-group-line-height);
1192
+ border:0;
1304
1193
  }
1305
1194
 
1306
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1307
- display:none;
1308
- }
1195
+ .tds-checkbox-group legend{
1196
+ float:left;
1197
+ padding:0;
1198
+ margin:0;
1199
+ }
1309
1200
 
1310
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1311
- display:block;
1201
+ .tds-checkbox-group[aria-invalid="true"]{
1202
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1203
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1204
+ }
1205
+
1206
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1207
+ margin-left:.25ch;
1208
+ color:var(--t-text-color-status-error);
1209
+ content:"*";
1312
1210
  }
1313
1211
 
1314
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1315
- display:flex;
1316
- flex-direction:column;
1212
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1213
+ content:none;
1317
1214
  }
1318
1215
 
1319
- .tds-button-group{
1320
- display:inline-flex;
1216
+ .tds-checkbox-group-fields{
1217
+ display:flex;
1218
+ flex-direction:column;
1219
+ gap:var(--tds-checkbox-group-gap);
1220
+ align-items:flex-start;
1221
+ margin-top:var(--t-spacing-1);
1321
1222
  }
1322
- .tds-button-group > .tds-btn{
1323
- --tds-button-group-item-z-index:1;
1324
1223
 
1325
- position:relative;
1326
- z-index:var(--tds-button-group-item-z-index);
1327
- border-radius:0;
1224
+ .tds-checkbox-group-description{
1225
+ display:flex;
1226
+ gap:var(--t-spacing-half);
1227
+ align-items:flex-start;
1228
+ margin:var(--t-spacing-fourth) 0 0;
1229
+ font-size:var(--tds-checkbox-group-description-font-size);
1230
+ line-height:var(--tds-checkbox-group-description-line-height);
1231
+ color:var(--tds-checkbox-group-description-color);
1232
+ cursor:text;
1233
+ }
1234
+
1235
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1236
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1237
+ flex-shrink:0;
1238
+ margin-top:calc(.5lh - .5em);
1239
+ line-height:var(--tds-checkbox-group-description-line-height);
1328
1240
  }
1329
- :is(.tds-button-group > .tds-btn):not(:first-child){
1330
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1331
- }
1332
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--pill):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--pill):not(:last-child)::after{
1333
- position:absolute;
1334
- inset-block:calc(var(--tds-btn-border-width) * -1);
1335
- width:var(--tds-btn-border-width);
1336
- pointer-events:none;
1337
- content:"";
1338
- background-color:var(--t-border-color-white);
1339
- }
1340
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--pill):not(:first-child)::before{
1341
- inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1342
- }
1343
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--pill):not(:last-child)::after{
1344
- inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1345
- }
1346
- :is(.tds-button-group > .tds-btn):hover{
1347
- --tds-button-group-item-z-index:2;
1348
- }
1349
- :is(.tds-button-group > .tds-btn):focus-visible{
1350
- --tds-button-group-item-z-index:5;
1351
- }
1352
- .tds-button-group > .tds-btn:first-child{
1353
- border-start-start-radius:var(--tds-btn-border-radius);
1354
- border-end-start-radius:var(--tds-btn-border-radius);
1355
- }
1356
- .tds-button-group > .tds-btn:last-child{
1357
- border-start-end-radius:var(--tds-btn-border-radius);
1358
- border-end-end-radius:var(--tds-btn-border-radius);
1359
- }
1360
-
1361
- .tds-checkbox{
1362
- --tds-checkbox-font-size:var(--t-font-size-md);
1363
- --tds-checkbox-cursor:pointer;
1364
- --tds-checkbox-line-height:1.4;
1365
- --tds-checkbox-transition-property:background-color, border-color;
1366
-
1367
- --tds-checkbox-input-size:var(--t-element-size-md);
1368
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1369
- --tds-checkbox-input-border-color:var(--t-form-border-color);
1370
- --tds-checkbox-input-background-color:var(--t-form-background-color);
1371
1241
 
1372
- --tds-checkbox-input-icon:none;
1373
- --tds-checkbox-input-icon-visibility:hidden;
1374
- --tds-checkbox-input-icon-opacity:0;
1375
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1376
-
1377
- --tds-checkbox-label-color:var(--t-form-color);
1378
-
1379
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
1380
- --tds-checkbox-description-line-height:1.35;
1381
- --tds-checkbox-description-color:var(--t-text-color-secondary);
1382
- --tds-checkbox-description-invalid-icon-display:none;
1242
+ .tds-checkbox-group--sm{
1243
+ --tds-checkbox-group-line-height:1.35;
1244
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1245
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1246
+ --tds-checkbox-group-description-line-height:1.3;
1247
+ }
1383
1248
 
1384
- position:relative;
1385
- display:inline-grid;
1386
- grid-template-columns:auto;
1387
- grid-auto-columns:1fr;
1388
- gap:var(--t-spacing-fourth) 0;
1389
- line-height:var(--tds-checkbox-line-height);
1249
+ .tds-dropdown-popover{
1250
+ min-inline-size:10rem;
1251
+ max-inline-size:24rem;
1252
+ padding:var(--t-spacing-1);
1253
+ overflow:auto;
1254
+ overscroll-behavior:none;
1390
1255
  -webkit-user-select:none;
1391
1256
  -moz-user-select:none;
1392
1257
  user-select:none;
1258
+ outline:0;
1259
+ scrollbar-color:#0004 var(--t-surface-color-card);
1260
+ scrollbar-width:thin;
1261
+ background:var(--t-surface-color-card);
1262
+ background-clip:padding-box;
1263
+ border:1px solid var(--t-border-color);
1264
+ border-radius:var(--t-border-radius);
1265
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1393
1266
  }
1267
+ .tds-dropdown-popover[data-entering]{
1268
+ animation:tds-dropdown-popover var(--t-duration-300) var(--t-ease-out);
1269
+ }
1270
+ .tds-dropdown-popover[data-exiting]{
1271
+ animation:tds-dropdown-popover var(--t-duration-200) var(--t-ease-in) reverse;
1272
+ }
1273
+ .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
1274
+ will-change:opacity, transform;
1275
+ }
1394
1276
 
1395
- .tds-checkbox label{
1396
- grid-area:1 / 2;
1397
- padding-inline-start:var(--t-spacing-1);
1398
- font-size:var(--tds-checkbox-font-size);
1399
- font-weight:var(--t-font-weight-normal);
1400
- color:var(--tds-checkbox-label-color);
1401
- cursor:var(--tds-checkbox-cursor);
1277
+ @keyframes tds-dropdown-popover{
1278
+ from{
1279
+ opacity:0;
1280
+ transform:translateY(-8px);
1402
1281
  }
1282
+ }
1403
1283
 
1404
- .tds-checkbox tds-indeterminate{
1405
- display:flex;
1284
+ @media (prefers-reduced-motion: reduce){
1285
+ .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
1286
+ animation:none;
1287
+ }
1288
+ }
1289
+
1290
+ .tds-dropdown-popover [role="menu"]{
1291
+ outline:0;
1292
+ }
1293
+ .tds-dropdown-item{
1294
+ --tds-dropdown-item-color:var(--t-text-color);
1295
+ --tds-dropdown-item-row-gap:0;
1296
+ --tds-dropdown-item-column-gap:var(--t-spacing-1);
1297
+
1298
+ display:flex;
1299
+ row-gap:var(--tds-dropdown-item-row-gap);
1300
+ -moz-column-gap:var(--tds-dropdown-item-column-gap);
1301
+ column-gap:var(--tds-dropdown-item-column-gap);
1302
+ align-items:center;
1303
+ padding-block:var(--t-spacing-1);
1304
+ padding-inline:var(--t-spacing-2);
1305
+ font-size:1rem;
1306
+ color:var(--tds-dropdown-item-color);
1307
+ text-decoration:none;
1308
+ cursor:default;
1309
+ outline:0;
1310
+ border-radius:var(--t-border-radius);
1311
+ }
1312
+ .tds-dropdown-item[data-hovered]:not([data-disabled]),.tds-dropdown-item[data-focus-visible]{
1313
+ background:var(--t-fill-color-neutral-070);
1314
+ }
1315
+ .tds-dropdown-item[data-pressed]:not([data-disabled]){
1316
+ background:var(--t-fill-color-neutral-060);
1406
1317
  }
1318
+ .tds-dropdown-item[data-disabled]{
1319
+ --tds-dropdown-item-color:var(--t-form-color-disabled);
1407
1320
 
1408
- .tds-checkbox input[type="checkbox"]{
1409
- position:relative;
1410
- width:1em;
1411
- height:1em;
1412
- margin:calc((1lh - 1em) / 2) 0 0;
1413
- font-size:var(--tds-checkbox-font-size);
1414
- line-height:inherit;
1415
- -webkit-appearance:none;
1416
- -moz-appearance:none;
1417
- appearance:none;
1418
- cursor:var(--tds-checkbox-cursor);
1419
- background-color:var(--tds-checkbox-input-background-color);
1420
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1421
- border-radius:var(--tds-checkbox-input-border-radius);
1422
- transition-timing-function:var(--t-ease-in-out);
1423
- transition-duration:var(--t-duration-200);
1424
- transition-property:var(--tds-checkbox-transition-property);
1321
+ cursor:not-allowed;
1425
1322
  }
1426
1323
 
1427
- :is(.tds-checkbox input[type="checkbox"])::before{
1428
- position:absolute;
1429
- top:50%;
1430
- left:50%;
1431
- visibility:var(--tds-checkbox-input-icon-visibility);
1432
- width:100%;
1433
- height:100%;
1434
- content:"";
1435
- background-color:var(--tds-checkbox-input-icon-fill);
1436
- border-radius:var(--tds-checkbox-input-border-radius);
1437
- opacity:var(--tds-checkbox-input-icon-opacity);
1438
- -webkit-mask-image:var(--tds-checkbox-input-icon);
1439
- mask-image:var(--tds-checkbox-input-icon);
1440
- -webkit-mask-repeat:no-repeat;
1441
- mask-repeat:no-repeat;
1442
- -webkit-mask-size:contain;
1443
- mask-size:contain;
1444
- transform:translate(-50%, -50%);
1445
- }
1324
+ .tds-dropdown-item--destructive{
1325
+ --tds-dropdown-item-color:var(--t-text-color-status-error);
1326
+ }
1446
1327
 
1447
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1448
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1449
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1450
- }
1328
+ .tds-dropdown-item--staff-only{
1329
+ --tds-dropdown-item-color:var(--t-fill-color-product-staff);
1330
+ }
1331
+ a.tds-dropdown-item:is(:hover, :active){
1332
+ color:var(--tds-dropdown-item-color);
1333
+ }
1334
+ .tds-dropdown-item [slot="prefix"],
1335
+ .tds-dropdown-item [slot="suffix"]{
1336
+ flex-shrink:0;
1337
+ }
1451
1338
 
1452
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1453
- outline:var(--t-focus-ring-outline);
1454
- outline-offset:var(--t-focus-ring-offset);
1455
- }
1339
+ .tds-dropdown-item [slot="label"]{
1340
+ flex:1;
1341
+ min-width:0;
1342
+ overflow:hidden;
1343
+ text-overflow:ellipsis;
1344
+ white-space:nowrap;
1345
+ }
1456
1346
 
1457
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1458
- pointer-events:none;
1459
- }
1347
+ .tds-dropdown-item [slot="description"]{
1348
+ font-size:var(--t-font-size-sm);
1349
+ color:var(--t-text-color-secondary);
1350
+ }
1460
1351
 
1461
- @media (prefers-reduced-motion: reduce){
1352
+ .tds-dropdown-item:has([slot="description"]){
1353
+ --tds-dropdown-item-row-gap:var(--t-spacing-half);
1354
+ --tds-dropdown-item-column-gap:0;
1462
1355
 
1463
- .tds-checkbox input[type="checkbox"]{
1464
- --tds-checkbox-transition-property:none;
1465
- }
1466
- }
1356
+ display:grid;
1357
+ grid-template-areas:"prefix label suffix" ". description .";
1358
+ grid-template-columns:auto 1fr auto;
1359
+ }
1467
1360
 
1468
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1469
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
1470
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1471
- --tds-checkbox-input-icon-visibility:visible;
1472
- --tds-checkbox-input-icon-opacity:1;
1473
- }
1361
+ .tds-dropdown-item:has([slot="description"]) [slot="prefix"]{
1362
+ grid-area:prefix;
1363
+ margin-inline-end:var(--t-spacing-1);
1364
+ }
1474
1365
 
1475
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1476
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1477
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1478
- }
1366
+ .tds-dropdown-item:has([slot="description"]) [slot="label"]{
1367
+ grid-area:label;
1368
+ }
1479
1369
 
1480
- .tds-checkbox:has(input:checked){
1481
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1370
+ .tds-dropdown-item:has([slot="description"]) [slot="description"]{
1371
+ grid-area:description;
1372
+ }
1373
+
1374
+ .tds-dropdown-item:has([slot="description"]) [slot="suffix"]{
1375
+ grid-area:suffix;
1376
+ margin-inline-start:var(--t-spacing-1);
1377
+ }
1378
+ .tds-dropdown-section:not(:first-child){
1379
+ margin-block-start:var(--t-spacing-half);
1380
+ }
1381
+
1382
+ .tds-dropdown-section-label{
1383
+ padding-block:var(--t-spacing-1);
1384
+ padding-inline:var(--t-spacing-1);
1385
+ font-size:var(--t-font-size-sm);
1386
+ font-weight:var(--t-font-weight-semibold);
1387
+ color:var(--t-text-color-secondary);
1388
+ }
1389
+ .tds-dropdown-separator{
1390
+ margin-block:var(--t-spacing-half);
1391
+ margin-inline:0;
1392
+ border:0;
1393
+ border-top:1px solid var(--t-border-color);
1394
+ }
1395
+
1396
+ .tds-modal-overlay{
1397
+ position:fixed;
1398
+ inset:0;
1399
+ z-index:1000;
1400
+ display:flex;
1401
+ align-items:center;
1402
+ justify-content:center;
1403
+ background:hsl(0 0% 0% / 40%);
1404
+ }
1405
+
1406
+ .tds-modal-overlay[data-entering]{
1407
+ animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1482
1408
  }
1483
1409
 
1484
- .tds-checkbox:has(input:indeterminate){
1485
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1410
+ .tds-modal-overlay[data-exiting]{
1411
+ animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1486
1412
  }
1487
1413
 
1488
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1489
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1490
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1491
- --tds-checkbox-description-invalid-icon-display:inline-block;
1414
+ @keyframes tds-modal-overlay-fade{
1415
+ from{
1416
+ opacity:0;
1492
1417
  }
1418
+ }
1493
1419
 
1494
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1495
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1496
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1497
- }
1420
+ .tds-modal-frame{
1421
+ --tds-modal-width:600px;
1498
1422
 
1499
- :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{
1500
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1501
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1502
- }
1423
+ display:flex;
1424
+ justify-content:center;
1425
+ width:min(var(--tds-modal-width), calc(100% - 48px));
1426
+ }
1503
1427
 
1504
- :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){
1505
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1506
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1507
- }
1428
+ .tds-modal-frame[data-entering]{
1429
+ animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1430
+ }
1508
1431
 
1509
- .tds-checkbox:has(input:required) label::after{
1510
- margin-left:.25ch;
1511
- color:var(--t-text-color-status-error);
1512
- content:"*";
1513
- }
1432
+ .tds-modal-frame[data-exiting]{
1433
+ animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1434
+ }
1514
1435
 
1515
- .tds-checkbox:has(input:disabled){
1516
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1517
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1436
+ .tds-modal-frame--sm{
1437
+ --tds-modal-width:400px;
1438
+ }
1518
1439
 
1519
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1520
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1521
- --tds-checkbox-cursor:not-allowed;
1440
+ .tds-modal-frame--lg{
1441
+ --tds-modal-width:800px;
1442
+ }
1443
+
1444
+ .tds-modal-frame--xl{
1445
+ --tds-modal-width:1000px;
1446
+ }
1447
+
1448
+ @keyframes tds-modal-zoom{
1449
+ from{
1450
+ opacity:0;
1451
+ scale:.96;
1522
1452
  }
1453
+ }
1523
1454
 
1524
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1525
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1526
- }
1455
+ @media (prefers-reduced-motion: reduce){
1456
+ .tds-modal-overlay[data-entering],
1457
+ .tds-modal-overlay[data-exiting],
1458
+ .tds-modal-frame[data-entering],
1459
+ .tds-modal-frame[data-exiting]{
1460
+ animation:none;
1461
+ }
1462
+ }
1527
1463
 
1528
- .tds-checkbox-description{
1464
+ .tds-modal{
1529
1465
  display:flex;
1530
- grid-area:2 / 2;
1531
- gap:var(--t-spacing-half);
1532
- align-items:flex-start;
1533
- padding-inline-start:var(--t-spacing-1);
1534
- margin:0;
1535
- font-size:var(--tds-checkbox-description-font-size);
1536
- line-height:var(--tds-checkbox-description-line-height);
1537
- color:var(--tds-checkbox-description-color);
1538
- cursor:text;
1466
+ flex-direction:column;
1467
+ width:100%;
1468
+ padding-block:var(--t-spacing-3);
1469
+ padding-inline:0;
1470
+ background:var(--t-surface-color-card);
1471
+
1472
+ border:0;
1473
+ border-radius:var(--t-border-radius-lg);
1474
+ box-shadow:0 4px 18px 0 #0003;
1539
1475
  }
1540
1476
 
1541
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1542
- display:var(--tds-checkbox-description-invalid-icon-display);
1543
- flex-shrink:0;
1544
- margin-top:calc(.5lh - .5em);
1545
- line-height:var(--tds-checkbox-description-line-height);
1477
+ .tds-modal:focus{
1478
+ outline:none;
1546
1479
  }
1547
1480
 
1548
- .tds-checkbox--sm{
1549
- --tds-checkbox-line-height:1.35;
1550
- --tds-checkbox-input-size:var(--t-element-size-sm);
1551
- --tds-checkbox-font-size:var(--t-font-size-sm);
1552
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1553
- --tds-checkbox-description-line-height:1.3;
1481
+ .tds-modal-header{
1482
+ display:grid;
1483
+ grid-template-columns:1fr auto;
1484
+ -moz-column-gap:var(--t-spacing-2);
1485
+ column-gap:var(--t-spacing-2);
1486
+ padding-block:0;
1487
+ padding-inline:var(--t-spacing-4);
1488
+ }
1489
+
1490
+ .tds-modal-title{
1491
+ grid-row:1;
1492
+ grid-column:1;
1493
+ margin:0;
1494
+ font-size:var(--t-font-size-2xl);
1495
+ font-weight:var(--t-font-weight-medium);
1496
+ line-height:140%;
1497
+ color:var(--t-text-color-headline);
1498
+ }
1499
+
1500
+ .tds-modal-subtitle{
1501
+ grid-row:2;
1502
+ grid-column:1;
1503
+ margin:0;
1504
+ font-size:var(--t-font-size-md);
1505
+ font-weight:var(--t-font-weight-medium);
1506
+ line-height:140%;
1507
+ color:var(--t-text-color-secondary);
1508
+ }
1509
+
1510
+ .tds-modal-close{
1511
+ grid-row:1;
1512
+ grid-column:2;
1513
+ align-self:center;
1514
+ color:var(--t-icon-color-dim);
1515
+ }
1516
+
1517
+ .tds-modal-body{
1518
+ padding-block:var(--t-spacing-3);
1519
+ padding-inline:var(--t-spacing-4);
1520
+ }
1521
+
1522
+ .tds-modal-body--full-width{
1523
+ padding-inline:0;
1524
+ }
1525
+
1526
+ .tds-modal-footer{
1527
+ display:flex;
1528
+ gap:var(--t-spacing-2);
1529
+ align-items:center;
1530
+ justify-content:flex-end;
1531
+ padding-block-start:var(--t-spacing-3);
1532
+ padding-inline:var(--t-spacing-4);
1533
+ border-top:1px solid var(--t-border-color);
1534
+ }
1535
+
1536
+ .tds-modal-footer > [slot="start"]{
1537
+ margin-inline-end:auto;
1554
1538
  }
1555
1539
 
1556
- .tds-checkbox-group{
1557
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1558
- --tds-checkbox-group-line-height:1.4;
1559
- --tds-checkbox-group-gap:var(--t-spacing-1);
1540
+ .tds-radio-group{
1541
+ --tds-radio-group-font-size:var(--t-font-size-md);
1542
+ --tds-radio-group-line-height:1.4;
1543
+ --tds-radio-group-gap:var(--t-spacing-1);
1560
1544
 
1561
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1562
- --tds-checkbox-group-description-line-height:1.35;
1563
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1564
- --tds-checkbox-group-description-invalid-icon-display:none;
1545
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1546
+ --tds-radio-group-description-line-height:1.35;
1547
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1548
+ --tds-radio-group-description-invalid-icon-display:none;
1565
1549
  display:flex;
1566
1550
  flex-direction:column;
1567
1551
  gap:0;
1568
1552
  padding:0;
1569
1553
  margin:0;
1570
1554
 
1571
- font-size:var(--tds-checkbox-group-font-size);
1572
- line-height:var(--tds-checkbox-group-line-height);
1555
+ font-size:var(--tds-radio-group-font-size);
1556
+ line-height:var(--tds-radio-group-line-height);
1573
1557
  border:0;
1574
1558
  }
1575
1559
 
1576
- .tds-checkbox-group legend{
1560
+ .tds-radio-group legend{
1577
1561
  float:left;
1578
1562
  padding:0;
1579
1563
  margin:0;
1580
1564
  }
1581
1565
 
1582
- .tds-checkbox-group[aria-invalid="true"]{
1583
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1584
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1566
+ .tds-radio-group[aria-invalid="true"]{
1567
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1568
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1585
1569
  }
1586
1570
 
1587
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1571
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1572
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1573
+ }
1574
+
1575
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1576
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1577
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1578
+ }
1579
+
1580
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1581
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1582
+ }
1583
+
1584
+ .tds-radio-group:has(input:required) legend::after{
1588
1585
  margin-left:.25ch;
1589
1586
  color:var(--t-text-color-status-error);
1590
1587
  content:"*";
1591
1588
  }
1592
1589
 
1593
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1594
- content:none;
1595
- }
1596
-
1597
- .tds-checkbox-group-fields{
1590
+ .tds-radio-group-fields{
1598
1591
  display:flex;
1599
1592
  flex-direction:column;
1600
- gap:var(--tds-checkbox-group-gap);
1593
+ gap:var(--tds-radio-group-gap);
1601
1594
  align-items:flex-start;
1602
1595
  margin-top:var(--t-spacing-1);
1603
1596
  }
1604
1597
 
1605
- .tds-checkbox-group-description{
1598
+ .tds-radio-group-description{
1606
1599
  display:flex;
1607
1600
  gap:var(--t-spacing-half);
1608
1601
  align-items:flex-start;
1609
1602
  margin:var(--t-spacing-fourth) 0 0;
1610
- font-size:var(--tds-checkbox-group-description-font-size);
1611
- line-height:var(--tds-checkbox-group-description-line-height);
1612
- color:var(--tds-checkbox-group-description-color);
1603
+ font-size:var(--tds-radio-group-description-font-size);
1604
+ line-height:var(--tds-radio-group-description-line-height);
1605
+ color:var(--tds-radio-group-description-color);
1613
1606
  cursor:text;
1614
1607
  }
1615
1608
 
1616
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1617
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1609
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1610
+ display:var(--tds-radio-group-description-invalid-icon-display);
1618
1611
  flex-shrink:0;
1619
1612
  margin-top:calc(.5lh - .5em);
1620
- line-height:var(--tds-checkbox-group-description-line-height);
1613
+ line-height:var(--tds-radio-group-description-line-height);
1621
1614
  }
1622
1615
 
1623
- .tds-checkbox-group--sm{
1624
- --tds-checkbox-group-line-height:1.35;
1625
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1626
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1627
- --tds-checkbox-group-description-line-height:1.3;
1616
+ .tds-radio-group--sm{
1617
+ --tds-radio-group-line-height:1.35;
1618
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1619
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1620
+ --tds-radio-group-description-line-height:1.3;
1628
1621
  }
1629
1622
 
1630
- .tds-dropdown-popover{
1631
- min-inline-size:10rem;
1632
- max-inline-size:24rem;
1633
- padding:var(--t-spacing-1);
1634
- overflow:auto;
1635
- overscroll-behavior:none;
1623
+ .tds-radio{
1624
+ --tds-radio-font-size:var(--t-font-size-md);
1625
+ --tds-radio-cursor:pointer;
1626
+ --tds-radio-line-height:1.4;
1627
+ --tds-radio-transition-property:border-width;
1628
+
1629
+ --tds-radio-input-size:var(--t-element-size-md);
1630
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
1631
+ --tds-radio-input-border-color:var(--t-form-border-color);
1632
+ --tds-radio-input-border-width:var(--t-form-border-width);
1633
+ --tds-radio-input-background-color:var(--t-form-background-color);
1634
+
1635
+ --tds-radio-label-color:var(--t-form-color);
1636
+
1637
+ --tds-radio-description-font-size:var(--t-font-size-sm);
1638
+ --tds-radio-description-line-height:1.35;
1639
+ --tds-radio-description-color:var(--t-text-color-secondary);
1640
+
1641
+ position:relative;
1642
+ display:inline-grid;
1643
+ grid-template-columns:auto;
1644
+ grid-auto-columns:1fr;
1645
+ gap:var(--t-spacing-fourth) 0;
1646
+ line-height:var(--tds-radio-line-height);
1636
1647
  -webkit-user-select:none;
1637
1648
  -moz-user-select:none;
1638
1649
  user-select:none;
1639
- outline:0;
1640
- scrollbar-color:#0004 var(--t-surface-color-card);
1641
- scrollbar-width:thin;
1642
- background:var(--t-surface-color-card);
1643
- background-clip:padding-box;
1644
- border:1px solid var(--t-border-color);
1645
- border-radius:var(--t-border-radius);
1646
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1647
1650
  }
1648
- .tds-dropdown-popover[data-entering]{
1649
- animation:tds-dropdown-popover var(--t-duration-300) var(--t-ease-out);
1650
- }
1651
- .tds-dropdown-popover[data-exiting]{
1652
- animation:tds-dropdown-popover var(--t-duration-200) var(--t-ease-in) reverse;
1653
- }
1654
- .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
1655
- will-change:opacity, transform;
1651
+
1652
+ .tds-radio label{
1653
+ grid-area:1 / 2;
1654
+ padding-inline-start:var(--t-spacing-1);
1655
+ font-size:var(--tds-radio-font-size);
1656
+ font-weight:var(--t-font-weight-normal);
1657
+ color:var(--tds-radio-label-color);
1658
+ cursor:var(--tds-radio-cursor);
1656
1659
  }
1657
1660
 
1658
- @keyframes tds-dropdown-popover{
1659
- from{
1660
- opacity:0;
1661
- transform:translateY(-8px);
1661
+ .tds-radio input[type="radio"]{
1662
+ position:relative;
1663
+ width:1em;
1664
+ height:1em;
1665
+ margin:calc((1lh - 1em) / 2) 0 0;
1666
+ font-size:var(--tds-radio-font-size);
1667
+ line-height:inherit;
1668
+ -webkit-appearance:none;
1669
+ -moz-appearance:none;
1670
+ appearance:none;
1671
+ cursor:var(--tds-radio-cursor);
1672
+ background-color:var(--tds-radio-input-background-color);
1673
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1674
+ border-radius:var(--tds-radio-input-border-radius);
1675
+ transition-timing-function:var(--t-ease-in-out);
1676
+ transition-duration:var(--t-duration-200);
1677
+ transition-property:var(--tds-radio-transition-property);
1662
1678
  }
1663
- }
1664
1679
 
1665
- @media (prefers-reduced-motion: reduce){
1666
- .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
1667
- animation:none;
1680
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1681
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1682
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1668
1683
  }
1669
- }
1670
1684
 
1671
- .tds-dropdown-popover [role="menu"]{
1672
- outline:0;
1673
- }
1674
- .tds-dropdown-item{
1675
- --tds-dropdown-item-color:var(--t-text-color);
1676
- --tds-dropdown-item-row-gap:0;
1677
- --tds-dropdown-item-column-gap:var(--t-spacing-1);
1685
+ :is(.tds-radio input[type="radio"]):focus-visible{
1686
+ outline:var(--t-focus-ring-outline);
1687
+ outline-offset:var(--t-focus-ring-offset);
1688
+ }
1678
1689
 
1679
- display:flex;
1680
- row-gap:var(--tds-dropdown-item-row-gap);
1681
- -moz-column-gap:var(--tds-dropdown-item-column-gap);
1682
- column-gap:var(--tds-dropdown-item-column-gap);
1683
- align-items:center;
1684
- padding-block:var(--t-spacing-1);
1685
- padding-inline:var(--t-spacing-2);
1686
- font-size:1rem;
1687
- color:var(--tds-dropdown-item-color);
1688
- text-decoration:none;
1689
- cursor:default;
1690
- outline:0;
1691
- border-radius:var(--t-border-radius);
1692
- }
1693
- .tds-dropdown-item[data-hovered]:not([data-disabled]),.tds-dropdown-item[data-focus-visible]{
1694
- background:var(--t-fill-color-neutral-070);
1695
- }
1696
- .tds-dropdown-item[data-pressed]:not([data-disabled]){
1697
- background:var(--t-fill-color-neutral-060);
1690
+ :is(.tds-radio input[type="radio"]):disabled{
1691
+ pointer-events:none;
1692
+ }
1693
+
1694
+ @media (prefers-reduced-motion: reduce){
1695
+
1696
+ .tds-radio input[type="radio"]{
1697
+ --tds-radio-transition-property:none;
1698
1698
  }
1699
- .tds-dropdown-item[data-disabled]{
1700
- --tds-dropdown-item-color:var(--t-form-color-disabled);
1699
+ }
1701
1700
 
1702
- cursor:not-allowed;
1701
+ .tds-radio:has(input:checked){
1702
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1703
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
1704
+ --tds-radio-input-border-width:4px;
1703
1705
  }
1704
1706
 
1705
- .tds-dropdown-item--destructive{
1706
- --tds-dropdown-item-color:var(--t-text-color-status-error);
1707
- }
1707
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
1708
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1709
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1710
+ }
1708
1711
 
1709
- .tds-dropdown-item--staff-only{
1710
- --tds-dropdown-item-color:var(--t-fill-color-product-staff);
1711
- }
1712
- a.tds-dropdown-item:is(:hover, :active){
1713
- color:var(--tds-dropdown-item-color);
1714
- }
1715
- .tds-dropdown-item [slot="prefix"],
1716
- .tds-dropdown-item [slot="suffix"]{
1717
- flex-shrink:0;
1718
- }
1712
+ .tds-radio:has(input:user-invalid){
1713
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1714
+ }
1719
1715
 
1720
- .tds-dropdown-item [slot="label"]{
1721
- flex:1;
1722
- min-width:0;
1723
- overflow:hidden;
1724
- text-overflow:ellipsis;
1725
- white-space:nowrap;
1726
- }
1716
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1717
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1718
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1719
+ }
1727
1720
 
1728
- .tds-dropdown-item [slot="description"]{
1729
- font-size:var(--t-font-size-sm);
1730
- color:var(--t-text-color-secondary);
1731
- }
1721
+ .tds-radio:has(input:disabled){
1722
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1723
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1732
1724
 
1733
- .tds-dropdown-item:has([slot="description"]){
1734
- --tds-dropdown-item-row-gap:var(--t-spacing-half);
1735
- --tds-dropdown-item-column-gap:0;
1725
+ --tds-radio-label-color:var(--t-form-color-disabled);
1726
+ --tds-radio-description-color:var(--t-form-color-disabled);
1727
+ --tds-radio-cursor:not-allowed;
1728
+ }
1736
1729
 
1737
- display:grid;
1738
- grid-template-areas:"prefix label suffix" ". description .";
1739
- grid-template-columns:auto 1fr auto;
1740
- }
1730
+ .tds-radio:has(input:disabled) input:checked{
1731
+ --tds-radio-input-background-color:var(--t-form-background-color);
1732
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1733
+ }
1741
1734
 
1742
- .tds-dropdown-item:has([slot="description"]) [slot="prefix"]{
1743
- grid-area:prefix;
1744
- margin-inline-end:var(--t-spacing-1);
1735
+ .tds-radio-description{
1736
+ display:flex;
1737
+ grid-area:2 / 2;
1738
+ gap:var(--t-spacing-half);
1739
+ align-items:flex-start;
1740
+ padding-inline-start:var(--t-spacing-1);
1741
+ margin:0;
1742
+ font-size:var(--tds-radio-description-font-size);
1743
+ line-height:var(--tds-radio-description-line-height);
1744
+ color:var(--tds-radio-description-color);
1745
+ cursor:text;
1745
1746
  }
1746
1747
 
1747
- .tds-dropdown-item:has([slot="description"]) [slot="label"]{
1748
- grid-area:label;
1748
+ .tds-radio--sm{
1749
+ --tds-radio-line-height:1.35;
1750
+ --tds-radio-input-size:var(--t-element-size-sm);
1751
+ --tds-radio-font-size:var(--t-font-size-sm);
1752
+ --tds-radio-description-font-size:var(--t-font-size-xs);
1753
+ --tds-radio-description-line-height:1.3;
1749
1754
  }
1750
1755
 
1751
- .tds-dropdown-item:has([slot="description"]) [slot="description"]{
1752
- grid-area:description;
1753
- }
1756
+ .tds-toggle-switch{
1757
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1758
+ --tds-toggle-switch-cursor:pointer;
1759
+ --tds-toggle-switch-display:inline-grid;
1760
+ --tds-toggle-switch-line-height:1.4;
1754
1761
 
1755
- .tds-dropdown-item:has([slot="description"]) [slot="suffix"]{
1756
- grid-area:suffix;
1757
- margin-inline-start:var(--t-spacing-1);
1758
- }
1759
- .tds-dropdown-section:not(:first-child){
1760
- margin-block-start:var(--t-spacing-half);
1761
- }
1762
+ --tds-toggle-switch-label-color:var(--t-form-color);
1762
1763
 
1763
- .tds-dropdown-section-label{
1764
- padding-block:var(--t-spacing-1);
1765
- padding-inline:var(--t-spacing-1);
1766
- font-size:var(--t-font-size-sm);
1767
- font-weight:var(--t-font-weight-semibold);
1768
- color:var(--t-text-color-secondary);
1769
- }
1770
- .tds-dropdown-separator{
1771
- margin-block:var(--t-spacing-half);
1772
- margin-inline:0;
1773
- border:0;
1774
- border-top:1px solid var(--t-border-color);
1775
- }
1764
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1765
+ --tds-toggle-switch-track-outline:none;
1766
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1767
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1768
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1776
1769
 
1777
- .tds-combo-box{
1778
- --tds-combo-box-button-offset:4px;
1779
- }
1770
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1771
+ --tds-toggle-switch-thumb-transform:translateX(0);
1772
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1780
1773
 
1781
- .tds-combo-box[data-open] .tds-combo-box-button > svg{
1782
- transform:rotate(.5turn);
1783
- }
1774
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1775
+ --tds-toggle-switch-description-line-height:1.35;
1776
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1777
+ position:relative;
1784
1778
 
1785
- .tds-combo-box--lg{
1786
- --tds-combo-box-button-offset:5px;
1787
- }
1788
- .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
1789
- display:none;
1790
- }
1791
- .tds-combo-box-input{
1792
- display:flex;
1793
- flex:1;
1794
- align-items:center;
1795
- padding-block:var(--tds-field-padding-block);
1796
- padding-inline:var(--tds-field-padding-inline);
1797
- font-family:inherit;
1798
- font-size:inherit;
1799
- color:inherit;
1800
- outline:0;
1801
- background:transparent;
1802
- border:0;
1803
- }
1804
- .tds-combo-box-input:has( + .tds-combo-box-button){
1805
- padding-inline-end:0;
1806
- }
1807
- .tds-combo-box-input::-moz-placeholder{
1808
- color:var(--tds-field-placeholder-color);
1809
- -moz-user-select:none;
1810
- user-select:none;
1811
- }
1812
- .tds-combo-box-input::placeholder{
1813
- color:var(--tds-field-placeholder-color);
1814
- -webkit-user-select:none;
1815
- -moz-user-select:none;
1816
- user-select:none;
1817
- }
1818
- .tds-combo-box-button{
1819
- flex-shrink:0;
1820
- align-self:center;
1821
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
1822
- block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
1823
- padding:0;
1824
- margin-inline-end:var(--tds-combo-box-button-offset);
1825
- }
1826
- .tds-combo-box-button > svg{
1827
- inline-size:var(--tds-field-font-size);
1828
- block-size:var(--tds-field-font-size);
1829
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
1830
- }
1831
- .tds-combo-box-popover{
1832
- width:var(--trigger-width);
1833
- max-block-size:inherit;
1834
- padding:var(--t-spacing-1);
1835
- overflow:auto;
1836
- scroll-behavior:smooth;
1837
- overscroll-behavior:none;
1779
+ display:var(--tds-toggle-switch-display);
1780
+ grid-template-columns:auto;
1781
+ grid-auto-columns:1fr;
1782
+ gap:var(--t-spacing-fourth) 0;
1838
1783
  -webkit-user-select:none;
1839
1784
  -moz-user-select:none;
1840
1785
  user-select:none;
1841
- outline:0;
1842
- scrollbar-color:#0004 var(--t-surface-color-card);
1843
- scrollbar-width:thin;
1844
- background:var(--t-surface-color-card);
1845
- background-clip:padding-box;
1846
- border:1px solid var(--t-border-color);
1847
- border-radius:var(--t-border-radius);
1848
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1849
1786
  }
1850
- .tds-combo-box-popover[data-entering]{
1851
- animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
1852
- }
1853
- .tds-combo-box-popover[data-exiting]{
1854
- animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
1855
- }
1856
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1857
- will-change:opacity, transform;
1858
- }
1859
1787
 
1860
- @keyframes tds-combo-box-popover{
1861
- from{
1862
- opacity:0;
1863
- transform:translateY(-8px);
1788
+ .tds-toggle-switch input[type="checkbox"]{
1789
+ position:absolute;
1790
+ width:var(--tds-toggle-switch-track-width);
1791
+ height:var(--tds-toggle-switch-track-height);
1792
+ margin:0;
1793
+ -webkit-appearance:none;
1794
+ -moz-appearance:none;
1795
+ appearance:none;
1796
+ cursor:var(--tds-toggle-switch-cursor);
1797
+ outline:var(--tds-toggle-switch-track-outline);
1798
+ outline-offset:var(--t-focus-ring-offset);
1799
+ background-color:transparent;
1800
+ border:0;
1801
+ border-radius:var(--t-border-radius-round);
1864
1802
  }
1865
- }
1866
1803
 
1867
- @media (prefers-reduced-motion: reduce){
1868
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1869
- animation:none;
1804
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1805
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1870
1806
  }
1871
1807
 
1872
- .tds-combo-box-button > svg{
1873
- transition:none;
1874
- }
1875
- }
1876
- .tds-combo-box-list{
1877
- padding:0;
1878
- margin:0;
1879
- }
1880
- .tds-combo-box-list-item{
1881
- display:block;
1882
- padding-block:var(--t-spacing-1);
1883
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1884
- overflow:hidden;
1885
- text-overflow:ellipsis;
1886
- font-size:1rem;
1887
- color:var(--t-text-color);
1888
- white-space:nowrap;
1889
- cursor:default;
1890
- border-radius:var(--t-border-radius);
1891
- }
1892
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
1893
- background:var(--t-fill-color-neutral-070);
1894
- }
1895
- .tds-combo-box-list-item[data-selected]{
1896
- background:var(--t-fill-color-button-interaction-ghost-active);
1808
+ .tds-toggle-switch label{
1809
+ display:inline-flex;
1810
+ grid-area:1 / 2;
1811
+ padding-inline-start:var(--t-spacing-1);
1812
+ margin-top:-.09375em;
1813
+ font-size:var(--tds-toggle-switch-font-size);
1814
+ font-weight:var(--t-font-weight-normal);
1815
+ line-height:var(--tds-toggle-switch-line-height);
1816
+ color:var(--tds-toggle-switch-label-color);
1817
+ cursor:var(--tds-toggle-switch-cursor);
1897
1818
  }
1898
- .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
1899
- background:var(--t-fill-color-neutral-060);
1819
+
1820
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1821
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1900
1822
  }
1901
- .tds-combo-box-list-item[data-disabled]{
1902
- color:var(--t-form-color-disabled);
1903
- cursor:not-allowed;
1823
+
1824
+ .tds-toggle-switch:has(input:checked){
1825
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1826
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1904
1827
  }
1905
- .tds-combo-box-list-item[data-disabled][data-hovered]{
1906
- background:transparent;
1828
+
1829
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1830
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1907
1831
  }
1908
- .tds-combo-box-empty-state{
1909
- position:relative;
1910
- min-block-size:var(--t-spacing-3);
1911
- padding-block:var(--t-spacing-1);
1912
- padding-inline:var(--t-spacing-2);
1913
- font-size:var(--t-font-size-md);
1914
- color:var(--t-text-color-secondary);
1915
- }
1916
- .tds-combo-box-load-more{
1917
- position:relative;
1918
- min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
1919
- }
1920
1832
 
1921
- .tds-combo-box-empty-state,
1922
- .tds-combo-box-load-more{
1923
- --tds-loading-spinner-visibility:visible;
1924
- --tds-loading-spinner-animation-play-state:running;
1925
- }
1926
- .tds-combo-box-list-section:not(:first-child){
1927
- margin-block-start:var(--t-spacing-half);
1928
- }
1929
- .tds-combo-box-section-header{
1930
- padding-block:var(--t-spacing-1);
1931
- padding-inline:var(--t-spacing-1);
1932
- font-size:var(--t-font-size-sm);
1933
- font-weight:var(--t-font-weight-semibold);
1934
- color:var(--t-text-color-secondary);
1833
+ .tds-toggle-switch:has(input:disabled){
1834
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1835
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1836
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1837
+ --tds-toggle-switch-cursor:not-allowed;
1838
+ }
1839
+
1840
+ .tds-toggle-switch-track{
1841
+ position:relative;
1842
+ flex-shrink:0;
1843
+ width:var(--tds-toggle-switch-track-width);
1844
+ height:var(--tds-toggle-switch-track-height);
1845
+ background-color:var(--tds-toggle-switch-track-background-color);
1846
+ border-radius:var(--t-border-radius-round);
1847
+ transition:var(--tds-toggle-switch-track-transition);
1935
1848
  }
1936
1849
 
1850
+ .tds-toggle-switch-track::before{
1851
+ position:absolute;
1852
+ top:var(--t-spacing-fourth);
1853
+ left:var(--t-spacing-fourth);
1854
+ width:var(--tds-toggle-switch-thumb-size);
1855
+ height:var(--tds-toggle-switch-thumb-size);
1856
+ content:"";
1857
+ background-color:#fff;
1858
+ border-radius:var(--t-border-radius-round);
1859
+ transform:var(--tds-toggle-switch-thumb-transform);
1860
+ transition:var(--tds-toggle-switch-thumb-transition);
1861
+ }
1937
1862
 
1938
- :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{
1939
- -webkit-appearance:none;
1940
- appearance:none;
1941
- }
1863
+ @media (prefers-reduced-motion: reduce){
1942
1864
 
1943
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1944
- inline-size:1em;
1945
- block-size:2em;
1946
- }
1947
- @supports (field-sizing: content){
1948
- .tds-input--auto-width{
1949
- inline-size:-moz-fit-content;
1950
- inline-size:fit-content;
1951
- min-inline-size:min(100%, 122px);
1865
+ .tds-toggle-switch-track{
1866
+ --tds-toggle-switch-track-transition:none;
1867
+ --tds-toggle-switch-thumb-transition:none;
1868
+ }
1952
1869
  }
1953
1870
 
1954
- .tds-input--auto-width input{
1955
- field-sizing:content;
1956
- inline-size:auto;
1957
- }
1871
+ .tds-toggle-switch-description{
1872
+ display:flex;
1873
+ grid-area:2 / 2;
1874
+ align-items:flex-start;
1875
+ padding-inline-start:var(--t-spacing-1);
1876
+ margin:0;
1877
+ font-size:var(--tds-toggle-switch-description-font-size);
1878
+ line-height:var(--tds-toggle-switch-description-line-height);
1879
+ color:var(--tds-toggle-switch-description-color);
1880
+ cursor:text;
1881
+ }
1882
+
1883
+ .tds-toggle-switch--sm{
1884
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1885
+ --tds-toggle-switch-line-height:1.35;
1886
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1887
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1888
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1889
+ --tds-toggle-switch-description-line-height:1.3;
1890
+ }
1891
+
1892
+ .tds-toggle-switch--hide-label{
1893
+ --tds-toggle-switch-display:inline-flex;
1958
1894
  }
1959
1895
 
1960
1896
  .tds-input:has(textarea){
@@ -2062,533 +1998,410 @@ a.tds-dropdown-item:is(:hover, :active){
2062
1998
  }
2063
1999
  }
2064
2000
 
2065
- .tds-modal-overlay{
2066
- position:fixed;
2067
- inset:0;
2068
- z-index:1000;
2069
- display:flex;
2070
- align-items:center;
2071
- justify-content:center;
2072
- background:hsl(0 0% 0% / 40%);
2073
- }
2074
-
2075
- .tds-modal-overlay[data-entering]{
2076
- animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
2077
- }
2078
-
2079
- .tds-modal-overlay[data-exiting]{
2080
- animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
2081
- }
2082
-
2083
- @keyframes tds-modal-overlay-fade{
2084
- from{
2085
- opacity:0;
2086
- }
2087
- }
2088
-
2089
- .tds-modal-frame{
2090
- --tds-modal-width:600px;
2091
-
2092
- display:flex;
2093
- justify-content:center;
2094
- width:min(var(--tds-modal-width), calc(100% - 48px));
2095
- }
2096
-
2097
- .tds-modal-frame[data-entering]{
2098
- animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
2099
- }
2100
-
2101
- .tds-modal-frame[data-exiting]{
2102
- animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
2103
- }
2104
-
2105
- .tds-modal-frame--sm{
2106
- --tds-modal-width:400px;
2107
- }
2108
-
2109
- .tds-modal-frame--lg{
2110
- --tds-modal-width:800px;
2111
- }
2112
-
2113
- .tds-modal-frame--xl{
2114
- --tds-modal-width:1000px;
2001
+ .tds-button-group{
2002
+ display:inline-flex;
2115
2003
  }
2004
+ .tds-button-group > .tds-btn{
2005
+ --tds-button-group-item-z-index:1;
2116
2006
 
2117
- @keyframes tds-modal-zoom{
2118
- from{
2119
- opacity:0;
2120
- scale:.96;
2007
+ position:relative;
2008
+ z-index:var(--tds-button-group-item-z-index);
2009
+ border-radius:0;
2121
2010
  }
2122
- }
2123
-
2124
- @media (prefers-reduced-motion: reduce){
2125
- .tds-modal-overlay[data-entering],
2126
- .tds-modal-overlay[data-exiting],
2127
- .tds-modal-frame[data-entering],
2128
- .tds-modal-frame[data-exiting]{
2129
- animation:none;
2011
+ :is(.tds-button-group > .tds-btn):not(:first-child){
2012
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
2013
+ }
2014
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--pill):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--pill):not(:last-child)::after{
2015
+ position:absolute;
2016
+ inset-block:calc(var(--tds-btn-border-width) * -1);
2017
+ width:var(--tds-btn-border-width);
2018
+ pointer-events:none;
2019
+ content:"";
2020
+ background-color:var(--t-border-color-white);
2021
+ }
2022
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--pill):not(:first-child)::before{
2023
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
2024
+ }
2025
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--pill):not(:last-child)::after{
2026
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
2027
+ }
2028
+ :is(.tds-button-group > .tds-btn):hover{
2029
+ --tds-button-group-item-z-index:2;
2030
+ }
2031
+ :is(.tds-button-group > .tds-btn):focus-visible{
2032
+ --tds-button-group-item-z-index:5;
2033
+ }
2034
+ .tds-button-group > .tds-btn:first-child{
2035
+ border-start-start-radius:var(--tds-btn-border-radius);
2036
+ border-end-start-radius:var(--tds-btn-border-radius);
2130
2037
  }
2131
- }
2132
-
2133
- .tds-modal{
2134
- display:flex;
2135
- flex-direction:column;
2136
- width:100%;
2137
- padding-block:var(--t-spacing-3);
2138
- padding-inline:0;
2139
- background:var(--t-surface-color-card);
2140
-
2141
- border:0;
2142
- border-radius:var(--t-border-radius-lg);
2143
- box-shadow:0 4px 18px 0 #0003;
2144
- }
2145
-
2146
- .tds-modal:focus{
2147
- outline:none;
2038
+ .tds-button-group > .tds-btn:last-child{
2039
+ border-start-end-radius:var(--tds-btn-border-radius);
2040
+ border-end-end-radius:var(--tds-btn-border-radius);
2148
2041
  }
2149
2042
 
2150
- .tds-modal-header{
2151
- display:grid;
2152
- grid-template-columns:1fr auto;
2153
- -moz-column-gap:var(--t-spacing-2);
2154
- column-gap:var(--t-spacing-2);
2155
- padding-block:0;
2156
- padding-inline:var(--t-spacing-4);
2157
- }
2158
-
2159
- .tds-modal-title{
2160
- grid-row:1;
2161
- grid-column:1;
2162
- margin:0;
2163
- font-size:var(--t-font-size-2xl);
2164
- font-weight:var(--t-font-weight-medium);
2165
- line-height:140%;
2166
- color:var(--t-text-color-headline);
2167
- }
2168
-
2169
- .tds-modal-subtitle{
2170
- grid-row:2;
2171
- grid-column:1;
2172
- margin:0;
2173
- font-size:var(--t-font-size-md);
2174
- font-weight:var(--t-font-weight-medium);
2175
- line-height:140%;
2176
- color:var(--t-text-color-secondary);
2177
- }
2178
-
2179
- .tds-modal-close{
2180
- grid-row:1;
2181
- grid-column:2;
2182
- align-self:center;
2183
- color:var(--t-icon-color-dim);
2184
- }
2185
-
2186
- .tds-modal-body{
2187
- padding-block:var(--t-spacing-3);
2188
- padding-inline:var(--t-spacing-4);
2189
- }
2190
-
2191
- .tds-modal-body--full-width{
2192
- padding-inline:0;
2193
- }
2194
-
2195
- .tds-modal-footer{
2196
- display:flex;
2197
- gap:var(--t-spacing-2);
2198
- align-items:center;
2199
- justify-content:flex-end;
2200
- padding-block-start:var(--t-spacing-3);
2201
- padding-inline:var(--t-spacing-4);
2202
- border-top:1px solid var(--t-border-color);
2203
- }
2204
-
2205
- .tds-modal-footer > [slot="start"]{
2206
- margin-inline-end:auto;
2207
- }
2208
-
2209
- .tds-radio{
2210
- --tds-radio-font-size:var(--t-font-size-md);
2211
- --tds-radio-cursor:pointer;
2212
- --tds-radio-line-height:1.4;
2213
- --tds-radio-transition-property:border-width;
2214
-
2215
- --tds-radio-input-size:var(--t-element-size-md);
2216
- --tds-radio-input-border-radius:var(--t-border-radius-round);
2217
- --tds-radio-input-border-color:var(--t-form-border-color);
2218
- --tds-radio-input-border-width:var(--t-form-border-width);
2219
- --tds-radio-input-background-color:var(--t-form-background-color);
2220
-
2221
- --tds-radio-label-color:var(--t-form-color);
2222
2043
 
2223
- --tds-radio-description-font-size:var(--t-font-size-sm);
2224
- --tds-radio-description-line-height:1.35;
2225
- --tds-radio-description-color:var(--t-text-color-secondary);
2044
+ @media (prefers-reduced-motion: no-preference){
2226
2045
 
2227
- position:relative;
2228
- display:inline-grid;
2229
- grid-template-columns:auto;
2230
- grid-auto-columns:1fr;
2231
- gap:var(--t-spacing-fourth) 0;
2232
- line-height:var(--tds-radio-line-height);
2233
- -webkit-user-select:none;
2234
- -moz-user-select:none;
2235
- user-select:none;
2046
+ :root{
2047
+ interpolate-size:allow-keywords;
2236
2048
  }
2237
-
2238
- .tds-radio label{
2239
- grid-area:1 / 2;
2240
- padding-inline-start:var(--t-spacing-1);
2241
- font-size:var(--tds-radio-font-size);
2242
- font-weight:var(--t-font-weight-normal);
2243
- color:var(--tds-radio-label-color);
2244
- cursor:var(--tds-radio-cursor);
2245
2049
  }
2246
2050
 
2247
- .tds-radio input[type="radio"]{
2248
- position:relative;
2249
- width:1em;
2250
- height:1em;
2251
- margin:calc((1lh - 1em) / 2) 0 0;
2252
- font-size:var(--tds-radio-font-size);
2253
- line-height:inherit;
2254
- -webkit-appearance:none;
2255
- -moz-appearance:none;
2256
- appearance:none;
2257
- cursor:var(--tds-radio-cursor);
2258
- background-color:var(--tds-radio-input-background-color);
2259
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
2260
- border-radius:var(--tds-radio-input-border-radius);
2261
- transition-timing-function:var(--t-ease-in-out);
2262
- transition-duration:var(--t-duration-200);
2263
- transition-property:var(--tds-radio-transition-property);
2264
- }
2051
+ @layer tds-component{
2052
+ tds-sidenav,
2053
+ .tds-sidenav{
2054
+ --tds-sidenav-indent:12px;
2055
+ --tds-sidenav-item-depth:0;
2265
2056
 
2266
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
2267
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2268
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
2269
- }
2057
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
2270
2058
 
2271
- :is(.tds-radio input[type="radio"]):focus-visible{
2272
- outline:var(--t-focus-ring-outline);
2273
- outline-offset:var(--t-focus-ring-offset);
2274
- }
2059
+ --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;
2060
+ --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;
2061
+ --tds-sidenav-collapse-closed-opacity:0;
2062
+ --tds-sidenav-collapse-open-opacity:1;
2063
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
2064
+ --tds-sidenav-collapse-open-transform:translateY(0);
2275
2065
 
2276
- :is(.tds-radio input[type="radio"]):disabled{
2277
- pointer-events:none;
2278
- }
2066
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
2067
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
2068
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
2069
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
2279
2070
 
2280
- @media (prefers-reduced-motion: reduce){
2071
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
2072
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
2073
+ --tds-sidenav-item-nested-background-selected:transparent;
2281
2074
 
2282
- .tds-radio input[type="radio"]{
2283
- --tds-radio-transition-property:none;
2284
- }
2285
- }
2075
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
2076
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
2077
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
2286
2078
 
2287
- .tds-radio:has(input:checked){
2288
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2289
- --tds-radio-input-border-color:var(--t-border-color-control-info);
2290
- --tds-radio-input-border-width:4px;
2079
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
2080
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
2291
2081
  }
2292
2082
 
2293
- .tds-radio:has(input:checked) input:hover:not(:disabled){
2294
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2295
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2296
- }
2297
-
2298
- .tds-radio:has(input:user-invalid){
2299
- --tds-radio-input-border-color:var(--t-form-border-color-error);
2083
+ @media (prefers-reduced-motion: reduce){
2084
+ tds-sidenav,
2085
+ .tds-sidenav{
2086
+ --tds-sidenav-collapse-transition-enter:none;
2087
+ --tds-sidenav-collapse-transition-exit:none;
2088
+ --tds-sidenav-collapse-closed-transform:none;
2089
+ --tds-sidenav-collapse-open-transform:none;
2300
2090
  }
2301
-
2302
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2303
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2304
- --tds-radio-input-background-color:var(--t-form-background-color-error);
2305
2091
  }
2306
2092
 
2307
- .tds-radio:has(input:disabled){
2308
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2309
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2093
+ .tds-sidenav--theme-gray{
2094
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
2095
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
2096
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
2097
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
2098
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
2099
+ }
2100
+ }
2310
2101
 
2311
- --tds-radio-label-color:var(--t-form-color-disabled);
2312
- --tds-radio-description-color:var(--t-form-color-disabled);
2313
- --tds-radio-cursor:not-allowed;
2102
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
2103
+ display:flex;
2314
2104
  }
2315
2105
 
2316
- .tds-radio:has(input:disabled) input:checked{
2317
- --tds-radio-input-background-color:var(--t-form-background-color);
2318
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2319
- }
2106
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
2107
+ flex-direction:column;
2108
+ gap:var(--t-spacing-half);
2109
+ width:100%;
2110
+ }
2320
2111
 
2321
- .tds-radio-description{
2322
- display:flex;
2323
- grid-area:2 / 2;
2324
- gap:var(--t-spacing-half);
2325
- align-items:flex-start;
2326
- padding-inline-start:var(--t-spacing-1);
2112
+ .tds-sidenav-section-list{
2113
+ width:100%;
2114
+ padding:0;
2327
2115
  margin:0;
2328
- font-size:var(--tds-radio-description-font-size);
2329
- line-height:var(--tds-radio-description-line-height);
2330
- color:var(--tds-radio-description-color);
2331
- cursor:text;
2116
+ list-style:none;
2332
2117
  }
2333
2118
 
2334
- .tds-radio--sm{
2335
- --tds-radio-line-height:1.35;
2336
- --tds-radio-input-size:var(--t-element-size-sm);
2337
- --tds-radio-font-size:var(--t-font-size-sm);
2338
- --tds-radio-description-font-size:var(--t-font-size-xs);
2339
- --tds-radio-description-line-height:1.3;
2119
+ .tds-sidenav-section-header{
2120
+ display:flex;
2121
+ align-items:baseline;
2122
+ justify-content:space-between;
2123
+ padding-top:var(--t-spacing-2);
2340
2124
  }
2341
2125
 
2342
- .tds-toggle-switch{
2343
- --tds-toggle-switch-font-size:var(--t-font-size-md);
2344
- --tds-toggle-switch-cursor:pointer;
2345
- --tds-toggle-switch-display:inline-grid;
2346
- --tds-toggle-switch-line-height:1.4;
2347
-
2348
- --tds-toggle-switch-label-color:var(--t-form-color);
2126
+ .tds-sidenav-section-header h2{
2127
+ margin:0;
2128
+ font-size:var(--t-font-size-sm);
2129
+ font-weight:var(--t-font-weight-semibold);
2130
+ line-height:1.35;
2131
+ color:var(--t-text-color-secondary);
2132
+ text-transform:uppercase;
2133
+ }
2349
2134
 
2350
- --tds-toggle-switch-track-width:var(--t-container-size-md);
2351
- --tds-toggle-switch-track-outline:none;
2352
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
2353
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
2354
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
2135
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
2136
+ padding-top:0;
2137
+ }
2355
2138
 
2356
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
2357
- --tds-toggle-switch-thumb-transform:translateX(0);
2358
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
2139
+ .tds-sidenav-section-header [slot="label-actions"]{
2140
+ display:flex;
2141
+ gap:var(--t-spacing-half);
2142
+ align-items:center;
2143
+ }
2359
2144
 
2360
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
2361
- --tds-toggle-switch-description-line-height:1.35;
2362
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
2363
- position:relative;
2145
+ .tds-sidenav-section [slot="section-actions"]{
2146
+ display:flex;
2147
+ gap:12px;
2148
+ align-items:center;
2149
+ min-height:42px;
2150
+ padding:var(--t-spacing-1) 0;
2151
+ }
2364
2152
 
2365
- display:var(--tds-toggle-switch-display);
2366
- grid-template-columns:auto;
2367
- grid-auto-columns:1fr;
2368
- gap:var(--t-spacing-fourth) 0;
2369
- -webkit-user-select:none;
2370
- -moz-user-select:none;
2371
- user-select:none;
2153
+ .tds-sidenav-section-list,
2154
+ .tds-sidenav-item{
2155
+ width:100%;
2156
+ padding:0;
2157
+ margin:0;
2372
2158
  }
2373
2159
 
2374
- .tds-toggle-switch input[type="checkbox"]{
2375
- position:absolute;
2376
- width:var(--tds-toggle-switch-track-width);
2377
- height:var(--tds-toggle-switch-track-height);
2378
- margin:0;
2160
+ .tds-sidenav-item :is(a,button){
2161
+ position:relative;
2162
+ display:flex;
2163
+ gap:12px;
2164
+ align-items:center;
2165
+ width:100%;
2166
+ padding:12px;
2167
+ overflow:hidden;
2168
+ font-size:var(--t-font-size-sm);
2169
+ line-height:18px;
2170
+ color:var(--t-text-color-headline);
2171
+ white-space:nowrap;
2172
+ text-decoration:none;
2379
2173
  -webkit-appearance:none;
2380
2174
  -moz-appearance:none;
2381
2175
  appearance:none;
2382
- cursor:var(--tds-toggle-switch-cursor);
2383
- outline:var(--tds-toggle-switch-track-outline);
2384
- outline-offset:var(--t-focus-ring-offset);
2385
- background-color:transparent;
2176
+ cursor:pointer;
2177
+ background-color:var(--tds-sidenav-item-background, transparent);
2386
2178
  border:0;
2387
- border-radius:var(--t-border-radius-round);
2179
+ border-radius:var(--t-border-radius);
2180
+ transition:var(--tds-sidenav-item-transition);
2388
2181
  }
2389
2182
 
2390
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2391
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2392
- }
2393
-
2394
- .tds-toggle-switch label{
2395
- display:inline-flex;
2396
- grid-area:1 / 2;
2397
- padding-inline-start:var(--t-spacing-1);
2398
- margin-top:-.09375em;
2399
- font-size:var(--tds-toggle-switch-font-size);
2400
- font-weight:var(--t-font-weight-normal);
2401
- line-height:var(--tds-toggle-switch-line-height);
2402
- color:var(--tds-toggle-switch-label-color);
2403
- cursor:var(--tds-toggle-switch-cursor);
2404
- }
2183
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
2184
+ display:block;
2185
+ flex:1;
2186
+ overflow:hidden;
2187
+ text-overflow:ellipsis;
2188
+ text-align:left;
2189
+ white-space:nowrap;
2190
+ }
2405
2191
 
2406
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2407
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2408
- }
2192
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
2193
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
2194
+ color:var(--t-text-color-headline);
2195
+ text-decoration:none;
2196
+ }
2409
2197
 
2410
- .tds-toggle-switch:has(input:checked){
2411
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2412
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2413
- }
2198
+ :is(.tds-sidenav-item :is(a,button)):active{
2199
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
2200
+ }
2414
2201
 
2415
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2416
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2202
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
2203
+ overflow:hidden;
2204
+ color:var(--tds-sidenav-item-icon-color);
2417
2205
  }
2418
2206
 
2419
- .tds-toggle-switch:has(input:disabled){
2420
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2421
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2422
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2423
- --tds-toggle-switch-cursor:not-allowed;
2424
- }
2207
+ :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{
2208
+ display:block;
2209
+ width:var(--tds-sidenav-item-icon-size);
2210
+ height:var(--tds-sidenav-item-icon-size);
2211
+ }
2425
2212
 
2426
- .tds-toggle-switch-track{
2427
- position:relative;
2428
- flex-shrink:0;
2429
- width:var(--tds-toggle-switch-track-width);
2430
- height:var(--tds-toggle-switch-track-height);
2431
- background-color:var(--tds-toggle-switch-track-background-color);
2432
- border-radius:var(--t-border-radius-round);
2433
- transition:var(--tds-toggle-switch-track-transition);
2434
- }
2213
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
2214
+ --tds-sidenav-indent:19px;
2215
+ }
2435
2216
 
2436
- .tds-toggle-switch-track::before{
2437
- position:absolute;
2438
- top:var(--t-spacing-fourth);
2439
- left:var(--t-spacing-fourth);
2440
- width:var(--tds-toggle-switch-thumb-size);
2441
- height:var(--tds-toggle-switch-thumb-size);
2442
- content:"";
2443
- background-color:#fff;
2444
- border-radius:var(--t-border-radius-round);
2445
- transform:var(--tds-toggle-switch-thumb-transform);
2446
- transition:var(--tds-toggle-switch-thumb-transition);
2447
- }
2217
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
2218
+ visibility:visible;
2219
+ block-size:auto;
2220
+ opacity:1;
2221
+ }
2448
2222
 
2449
- @media (prefers-reduced-motion: reduce){
2223
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
2224
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
2225
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
2450
2226
 
2451
- .tds-toggle-switch-track{
2452
- --tds-toggle-switch-track-transition:none;
2453
- --tds-toggle-switch-thumb-transition:none;
2454
- }
2227
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
2228
+ font-weight:var(--t-font-weight-semibold);
2455
2229
  }
2456
2230
 
2457
- .tds-toggle-switch-description{
2458
- display:flex;
2459
- grid-area:2 / 2;
2460
- align-items:flex-start;
2461
- padding-inline-start:var(--t-spacing-1);
2462
- margin:0;
2463
- font-size:var(--tds-toggle-switch-description-font-size);
2464
- line-height:var(--tds-toggle-switch-description-line-height);
2465
- color:var(--tds-toggle-switch-description-color);
2466
- cursor:text;
2467
- }
2468
-
2469
- .tds-toggle-switch--sm{
2470
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
2471
- --tds-toggle-switch-line-height:1.35;
2472
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
2473
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2474
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2475
- --tds-toggle-switch-description-line-height:1.3;
2476
- }
2231
+ .tds-sidenav-item:has(.tds-sidenav-section){
2232
+ display:flex;
2233
+ flex-direction:column;
2234
+ gap:var(--t-spacing-half);
2235
+ }
2477
2236
 
2478
- .tds-toggle-switch--hide-label{
2479
- --tds-toggle-switch-display:inline-flex;
2480
- }
2237
+ .tds-sidenav-item .tds-sidenav-section-list{
2238
+ --tds-sidenav-item-depth:1;
2239
+ gap:0;
2240
+ }
2481
2241
 
2482
- .tds-radio-group{
2483
- --tds-radio-group-font-size:var(--t-font-size-md);
2484
- --tds-radio-group-line-height:1.4;
2485
- --tds-radio-group-gap:var(--t-spacing-1);
2242
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
2243
+ visibility:hidden;
2244
+ block-size:0;
2245
+ overflow-y:clip;
2246
+ opacity:0;
2247
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
2248
+ }
2486
2249
 
2487
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
2488
- --tds-radio-group-description-line-height:1.35;
2489
- --tds-radio-group-description-color:var(--t-text-color-secondary);
2490
- --tds-radio-group-description-invalid-icon-display:none;
2491
- display:flex;
2492
- flex-direction:column;
2493
- gap:0;
2494
- padding:0;
2495
- margin:0;
2250
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
2251
+ --tds-sidenav-item-depth:2;
2252
+ }
2496
2253
 
2497
- font-size:var(--tds-radio-group-font-size);
2498
- line-height:var(--tds-radio-group-line-height);
2499
- border:0;
2500
- }
2254
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2255
+ min-height:var(--t-element-size-2xl);
2256
+ padding-block:9px;
2257
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
2258
+ line-height:1;
2259
+ background-color:transparent;
2260
+ }
2501
2261
 
2502
- .tds-radio-group legend{
2503
- float:left;
2504
- padding:0;
2505
- margin:0;
2506
- }
2262
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
2263
+ position:absolute;
2264
+ top:0;
2265
+ bottom:0;
2266
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2267
+ width:2px;
2268
+ content:"";
2269
+ background-color:var(--tds-sidenav-item-nested-border-color);
2270
+ transition:var(--tds-sidenav-item-transition);
2271
+ }
2507
2272
 
2508
- .tds-radio-group[aria-invalid="true"]{
2509
- --tds-radio-group-description-color:var(--t-text-color-status-error);
2510
- --tds-radio-group-description-invalid-icon-display:inline-block;
2511
- }
2273
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
2274
+ position:absolute;
2275
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2276
+ z-index:-1;
2277
+ height:100%;
2278
+ content:"";
2279
+ background-color:var(--tds-sidenav-item-nested-background);
2280
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
2281
+ transition:var(--tds-sidenav-item-transition);
2282
+ }
2512
2283
 
2513
- .tds-radio-group[aria-invalid="true"] .tds-radio{
2514
- --tds-radio-input-border-color:var(--t-form-border-color-error);
2515
- }
2284
+ :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)){
2285
+ display:block;
2286
+ text-align:left;
2287
+ white-space:normal;
2288
+ }
2516
2289
 
2517
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2518
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2519
- --tds-radio-input-background-color:var(--t-form-background-color-error);
2290
+ :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{
2291
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
2292
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
2520
2293
  }
2521
2294
 
2522
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2523
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2295
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
2296
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
2524
2297
  }
2525
2298
 
2526
- .tds-radio-group:has(input:required) legend::after{
2527
- margin-left:.25ch;
2528
- color:var(--t-text-color-status-error);
2529
- content:"*";
2299
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2300
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
2301
+ font-weight:var(--t-font-weight-medium);
2530
2302
  }
2531
2303
 
2532
- .tds-radio-group-fields{
2304
+ .tds-sidenav-responsive-header{
2533
2305
  display:flex;
2534
- flex-direction:column;
2535
- gap:var(--tds-radio-group-gap);
2536
- align-items:flex-start;
2537
- margin-top:var(--t-spacing-1);
2306
+ gap:var(--t-spacing-2);
2307
+ align-items:center;
2308
+ width:100%;
2538
2309
  }
2539
2310
 
2540
- .tds-radio-group-description{
2541
- display:flex;
2542
- gap:var(--t-spacing-half);
2543
- align-items:flex-start;
2544
- margin:var(--t-spacing-fourth) 0 0;
2545
- font-size:var(--tds-radio-group-description-font-size);
2546
- line-height:var(--tds-radio-group-description-line-height);
2547
- color:var(--tds-radio-group-description-color);
2548
- cursor:text;
2549
- }
2311
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
2312
+ order:0;
2313
+ }
2550
2314
 
2551
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2552
- display:var(--tds-radio-group-description-invalid-icon-display);
2553
- flex-shrink:0;
2554
- margin-top:calc(.5lh - .5em);
2555
- line-height:var(--tds-radio-group-description-line-height);
2315
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
2316
+ flex:1;
2317
+ order:1;
2318
+ margin:0;
2319
+ font-size:var(--t-font-size-lg);
2320
+ font-weight:var(--t-font-weight-medium);
2321
+ color:var(--t-text-color-headline);
2322
+ }
2323
+
2324
+ @media (max-width: 719px){
2325
+ .tds-sidenav-collapse{
2326
+ z-index:10001;
2327
+ display:none;
2328
+ max-width:min(448px, calc(100vw - 48px));
2329
+ padding:0;
2330
+ margin:12px 0;
2331
+ position-area:bottom span-right;
2332
+ overflow:hidden;
2333
+ outline:0;
2334
+ background:var(--t-surface-color-card);
2335
+ border:0;
2336
+ border-radius:6px;
2337
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
2338
+ opacity:var(--tds-sidenav-collapse-open-opacity);
2339
+ transform:var(--tds-sidenav-collapse-open-transform);
2340
+ transition:var(--tds-sidenav-collapse-transition-enter);
2341
+ will-change:transform;
2342
+ }
2343
+
2344
+ .tds-sidenav-scroll-container{
2345
+ --webkit-overflow-scrolling:touch;
2346
+ display:block;
2347
+ width:100%;
2348
+ height:-moz-fit-content;
2349
+ height:fit-content;
2350
+ padding:var(--t-spacing-2);
2351
+ overflow-y:auto;
2556
2352
  }
2557
2353
 
2558
- .tds-radio-group--sm{
2559
- --tds-radio-group-line-height:1.35;
2560
- --tds-radio-group-font-size:var(--t-font-size-sm);
2561
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
2562
- --tds-radio-group-description-line-height:1.3;
2563
- }
2354
+ .tds-sidenav-item :is(a, button) :is(.prefix){
2355
+ display:none;
2356
+ }
2357
+ @supports selector(:popover-open){
2358
+ .tds-sidenav-collapse:popover-open{
2359
+ display:flex;
2360
+ }
2564
2361
 
2565
- .tds-loading-spinner{
2566
- position:absolute;
2567
- right:0;
2568
- left:0;
2569
- visibility:var(--tds-loading-spinner-visibility, hidden);
2570
- width:var(--tds-loading-spinner-size, 1.25em);
2571
- height:var(--tds-loading-spinner-size, 1.25em);
2572
- margin:auto;
2573
- border:var(--tds-loading-spinner-track-width, 4px) solid var(--tds-loading-spinner-track-color, var(--t-fill-color-transparency-dark-020));
2574
- border-top-color:var(--tds-loading-spinner-color, currentcolor);
2575
- border-radius:50%;
2576
- animation:spinner-rotate 500ms infinite linear;
2577
- animation-play-state:var(--tds-loading-spinner-animation-play-state, paused);
2578
- }
2362
+ .tds-sidenav-collapse:not(:popover-open){
2363
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2364
+ transition:var(--tds-sidenav-collapse-transition-exit);
2365
+ }
2579
2366
 
2580
- @keyframes spinner-rotate{
2581
- to{
2582
- transform:rotate(360deg);
2367
+ @starting-style{
2368
+ .tds-sidenav-collapse:popover-open{
2369
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2370
+ transform:var(--tds-sidenav-collapse-closed-transform);
2371
+ }
2372
+ }
2373
+ }
2374
+ @supports not selector(:popover-open){
2375
+ .tds-sidenav-collapse.\:popover-open{
2376
+ display:flex;
2377
+ }
2378
+
2379
+ .tds-sidenav-collapse:not(.\:popover-open){
2380
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2381
+ transition:var(--tds-sidenav-collapse-transition-exit);
2382
+ }
2583
2383
  }
2584
2384
  }
2585
2385
 
2586
- @media (prefers-reduced-motion: reduce){
2587
- [class*="--loading"] .tds-loading-spinner{
2588
- --tds-loading-spinner-animation-play-state:paused;
2386
+ @media (min-width: 720px){
2387
+ .tds-sidenav-responsive-header{
2388
+ display:none;
2589
2389
  }
2590
2390
  }
2591
2391
 
2392
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
2393
+ display:none;
2394
+ }
2395
+
2396
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
2397
+ display:block;
2398
+ }
2399
+
2400
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2401
+ display:flex;
2402
+ flex-direction:column;
2403
+ }
2404
+
2592
2405
  .tds-input{
2593
2406
  --tds-input-border-color:var(--t-form-border-color);
2594
2407
  --tds-input-border-color-hover:var(--t-form-border-color-hover);
@@ -5525,6 +5338,193 @@ a.tds-dropdown-item:is(:hover, :active){
5525
5338
  color:var(--tds-field-color);
5526
5339
  }
5527
5340
 
5341
+ .tds-combo-box{
5342
+ --tds-combo-box-button-offset:4px;
5343
+ }
5344
+
5345
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
5346
+ transform:rotate(.5turn);
5347
+ }
5348
+
5349
+ .tds-combo-box--lg{
5350
+ --tds-combo-box-button-offset:5px;
5351
+ }
5352
+ .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
5353
+ display:none;
5354
+ }
5355
+ .tds-combo-box-input{
5356
+ display:flex;
5357
+ flex:1;
5358
+ align-items:center;
5359
+ padding-block:var(--tds-field-padding-block);
5360
+ padding-inline:var(--tds-field-padding-inline);
5361
+ font-family:inherit;
5362
+ font-size:inherit;
5363
+ color:inherit;
5364
+ outline:0;
5365
+ background:transparent;
5366
+ border:0;
5367
+ }
5368
+ .tds-combo-box-input:has( + .tds-combo-box-button){
5369
+ padding-inline-end:0;
5370
+ }
5371
+ .tds-combo-box-input::-moz-placeholder{
5372
+ color:var(--tds-field-placeholder-color);
5373
+ -moz-user-select:none;
5374
+ user-select:none;
5375
+ }
5376
+ .tds-combo-box-input::placeholder{
5377
+ color:var(--tds-field-placeholder-color);
5378
+ -webkit-user-select:none;
5379
+ -moz-user-select:none;
5380
+ user-select:none;
5381
+ }
5382
+ .tds-combo-box-button{
5383
+ flex-shrink:0;
5384
+ align-self:center;
5385
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
5386
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
5387
+ padding:0;
5388
+ margin-inline-end:var(--tds-combo-box-button-offset);
5389
+ }
5390
+ .tds-combo-box-button > svg{
5391
+ inline-size:var(--tds-field-font-size);
5392
+ block-size:var(--tds-field-font-size);
5393
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
5394
+ }
5395
+ .tds-combo-box-popover{
5396
+ width:var(--trigger-width);
5397
+ max-block-size:inherit;
5398
+ padding:var(--t-spacing-1);
5399
+ overflow:auto;
5400
+ scroll-behavior:smooth;
5401
+ overscroll-behavior:none;
5402
+ -webkit-user-select:none;
5403
+ -moz-user-select:none;
5404
+ user-select:none;
5405
+ outline:0;
5406
+ scrollbar-color:#0004 var(--t-surface-color-card);
5407
+ scrollbar-width:thin;
5408
+ background:var(--t-surface-color-card);
5409
+ background-clip:padding-box;
5410
+ border:1px solid var(--t-border-color);
5411
+ border-radius:var(--t-border-radius);
5412
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
5413
+ }
5414
+ .tds-combo-box-popover[data-entering]{
5415
+ animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
5416
+ }
5417
+ .tds-combo-box-popover[data-exiting]{
5418
+ animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
5419
+ }
5420
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
5421
+ will-change:opacity, transform;
5422
+ }
5423
+
5424
+ @keyframes tds-combo-box-popover{
5425
+ from{
5426
+ opacity:0;
5427
+ transform:translateY(-8px);
5428
+ }
5429
+ }
5430
+
5431
+ @media (prefers-reduced-motion: reduce){
5432
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
5433
+ animation:none;
5434
+ }
5435
+
5436
+ .tds-combo-box-button > svg{
5437
+ transition:none;
5438
+ }
5439
+ }
5440
+ .tds-combo-box-list{
5441
+ padding:0;
5442
+ margin:0;
5443
+ }
5444
+ .tds-combo-box-list-item{
5445
+ display:block;
5446
+ padding-block:var(--t-spacing-1);
5447
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
5448
+ overflow:hidden;
5449
+ text-overflow:ellipsis;
5450
+ font-size:1rem;
5451
+ color:var(--t-text-color);
5452
+ white-space:nowrap;
5453
+ cursor:default;
5454
+ border-radius:var(--t-border-radius);
5455
+ }
5456
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
5457
+ background:var(--t-fill-color-neutral-070);
5458
+ }
5459
+ .tds-combo-box-list-item[data-selected]{
5460
+ background:var(--t-fill-color-button-interaction-ghost-active);
5461
+ }
5462
+ .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
5463
+ background:var(--t-fill-color-neutral-060);
5464
+ }
5465
+ .tds-combo-box-list-item[data-disabled]{
5466
+ color:var(--t-form-color-disabled);
5467
+ cursor:not-allowed;
5468
+ }
5469
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
5470
+ background:transparent;
5471
+ }
5472
+ .tds-combo-box-empty-state{
5473
+ position:relative;
5474
+ min-block-size:var(--t-spacing-3);
5475
+ padding-block:var(--t-spacing-1);
5476
+ padding-inline:var(--t-spacing-2);
5477
+ font-size:var(--t-font-size-md);
5478
+ color:var(--t-text-color-secondary);
5479
+ }
5480
+ .tds-combo-box-load-more{
5481
+ position:relative;
5482
+ min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
5483
+ }
5484
+
5485
+ .tds-combo-box-empty-state,
5486
+ .tds-combo-box-load-more{
5487
+ --tds-loading-spinner-visibility:visible;
5488
+ --tds-loading-spinner-animation-play-state:running;
5489
+ }
5490
+ .tds-combo-box-list-section:not(:first-child){
5491
+ margin-block-start:var(--t-spacing-half);
5492
+ }
5493
+ .tds-combo-box-section-header{
5494
+ padding-block:var(--t-spacing-1);
5495
+ padding-inline:var(--t-spacing-1);
5496
+ font-size:var(--t-font-size-sm);
5497
+ font-weight:var(--t-font-weight-semibold);
5498
+ color:var(--t-text-color-secondary);
5499
+ }
5500
+
5501
+ .tds-loading-spinner{
5502
+ position:absolute;
5503
+ right:0;
5504
+ left:0;
5505
+ visibility:var(--tds-loading-spinner-visibility, hidden);
5506
+ width:var(--tds-loading-spinner-size, 1.25em);
5507
+ height:var(--tds-loading-spinner-size, 1.25em);
5508
+ margin:auto;
5509
+ border:var(--tds-loading-spinner-track-width, 4px) solid var(--tds-loading-spinner-track-color, var(--t-fill-color-transparency-dark-020));
5510
+ border-top-color:var(--tds-loading-spinner-color, currentcolor);
5511
+ border-radius:50%;
5512
+ animation:spinner-rotate 500ms infinite linear;
5513
+ animation-play-state:var(--tds-loading-spinner-animation-play-state, paused);
5514
+ }
5515
+
5516
+ @keyframes spinner-rotate{
5517
+ to{
5518
+ transform:rotate(360deg);
5519
+ }
5520
+ }
5521
+
5522
+ @media (prefers-reduced-motion: reduce){
5523
+ [class*="--loading"] .tds-loading-spinner{
5524
+ --tds-loading-spinner-animation-play-state:paused;
5525
+ }
5526
+ }
5527
+
5528
5528
  .tds-date-picker{
5529
5529
  --tds-date-picker-button-offset:4px;
5530
5530
  }