@planningcenter/tapestry 4.5.0 → 4.6.0-rc.0

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 (8) hide show
  1. package/dist/components/combo-box/ComboBox.d.ts +1 -1
  2. package/dist/components/combo-box/ComboBox.d.ts.map +1 -1
  3. package/dist/components/combo-box/ComboBox.js.map +1 -1
  4. package/dist/reactRender.css +1250 -1250
  5. package/dist/reactRender.css.map +1 -1
  6. package/dist/reactRenderLegacy.css +1250 -1250
  7. package/dist/reactRenderLegacy.css.map +1 -1
  8. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -954,1325 +954,1325 @@
954
954
  }
955
955
  }
956
956
 
957
- .tds-button-group{
958
- display:inline-flex;
959
- }
960
- .tds-button-group > .tds-btn{
961
- --tds-button-group-item-z-index:1;
962
957
 
963
- position:relative;
964
- z-index:var(--tds-button-group-item-z-index);
965
- border-radius:0;
966
- }
967
- :is(.tds-button-group > .tds-btn):not(:first-child){
968
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
969
- }
970
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
971
- position:absolute;
972
- inset-block:calc(var(--tds-btn-border-width) * -1);
973
- width:var(--tds-btn-border-width);
974
- pointer-events:none;
975
- content:"";
976
- background-color:var(--t-border-color-white);
977
- }
978
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
979
- inset-inline-start:calc(var(--tds-btn-border-width) * -1);
980
- }
981
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
982
- inset-inline-end:calc(var(--tds-btn-border-width) * -1);
983
- }
984
- :is(.tds-button-group > .tds-btn):hover{
985
- --tds-button-group-item-z-index:2;
986
- }
987
- :is(.tds-button-group > .tds-btn):focus-visible{
988
- --tds-button-group-item-z-index:5;
989
- }
990
- .tds-button-group > .tds-btn:first-child{
991
- border-start-start-radius:var(--tds-btn-border-radius);
992
- border-end-start-radius:var(--tds-btn-border-radius);
958
+ @media (prefers-reduced-motion: no-preference){
959
+
960
+ :root{
961
+ interpolate-size:allow-keywords;
962
+ }
993
963
  }
994
- .tds-button-group > .tds-btn:last-child{
995
- border-start-end-radius:var(--tds-btn-border-radius);
996
- border-end-end-radius:var(--tds-btn-border-radius);
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);
997
995
  }
998
996
 
999
- .tds-checkbox{
1000
- --tds-checkbox-font-size:var(--t-font-size-md);
1001
- --tds-checkbox-cursor:pointer;
1002
- --tds-checkbox-line-height:1.4;
1003
- --tds-checkbox-transition-property:background-color, border-color;
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
+ }
1004
1006
 
1005
- --tds-checkbox-input-size:var(--t-element-size-md);
1006
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1007
- --tds-checkbox-input-border-color:var(--t-form-border-color);
1008
- --tds-checkbox-input-background-color:var(--t-form-background-color);
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
+ }
1009
1015
 
1010
- --tds-checkbox-input-icon:none;
1011
- --tds-checkbox-input-icon-visibility:hidden;
1012
- --tds-checkbox-input-icon-opacity:0;
1013
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1016
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1017
+ display:flex;
1018
+ }
1014
1019
 
1015
- --tds-checkbox-label-color:var(--t-form-color);
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
+ }
1016
1025
 
1017
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
1018
- --tds-checkbox-description-line-height:1.35;
1019
- --tds-checkbox-description-color:var(--t-text-color-secondary);
1020
- --tds-checkbox-description-invalid-icon-display:none;
1026
+ .tds-sidenav-section-list{
1027
+ width:100%;
1028
+ padding:0;
1029
+ margin:0;
1030
+ list-style:none;
1031
+ }
1021
1032
 
1022
- position:relative;
1023
- display:inline-grid;
1024
- grid-template-columns:auto;
1025
- grid-auto-columns:1fr;
1026
- gap:var(--t-spacing-fourth) 0;
1027
- line-height:var(--tds-checkbox-line-height);
1028
- -webkit-user-select:none;
1029
- -moz-user-select:none;
1030
- user-select:none;
1033
+ .tds-sidenav-section-header{
1034
+ display:flex;
1035
+ align-items:baseline;
1036
+ justify-content:space-between;
1037
+ padding-top:var(--t-spacing-2);
1031
1038
  }
1032
1039
 
1033
- .tds-checkbox label{
1034
- grid-area:1 / 2;
1035
- padding-inline-start:var(--t-spacing-1);
1036
- font-size:var(--tds-checkbox-font-size);
1037
- font-weight:var(--t-font-weight-normal);
1038
- color:var(--tds-checkbox-label-color);
1039
- cursor:var(--tds-checkbox-cursor);
1040
+ .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;
1040
1047
  }
1041
1048
 
1042
- .tds-checkbox tds-indeterminate{
1049
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1050
+ padding-top:0;
1051
+ }
1052
+
1053
+ .tds-sidenav-section-header [slot="label-actions"]{
1043
1054
  display:flex;
1055
+ gap:var(--t-spacing-half);
1056
+ align-items:center;
1044
1057
  }
1045
1058
 
1046
- .tds-checkbox input[type="checkbox"]{
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){
1047
1075
  position:relative;
1048
- width:1em;
1049
- height:1em;
1050
- margin:calc((1lh - 1em) / 2) 0 0;
1051
- font-size:var(--tds-checkbox-font-size);
1052
- line-height:inherit;
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;
1053
1087
  -webkit-appearance:none;
1054
1088
  -moz-appearance:none;
1055
1089
  appearance:none;
1056
- cursor:var(--tds-checkbox-cursor);
1057
- background-color:var(--tds-checkbox-input-background-color);
1058
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1059
- border-radius:var(--tds-checkbox-input-border-radius);
1060
- transition-timing-function:var(--t-ease-in-out);
1061
- transition-duration:var(--t-duration-200);
1062
- transition-property:var(--tds-checkbox-transition-property);
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);
1063
1095
  }
1064
1096
 
1065
- :is(.tds-checkbox input[type="checkbox"])::before{
1066
- position:absolute;
1067
- top:50%;
1068
- left:50%;
1069
- visibility:var(--tds-checkbox-input-icon-visibility);
1070
- width:100%;
1071
- height:100%;
1072
- content:"";
1073
- background-color:var(--tds-checkbox-input-icon-fill);
1074
- border-radius:var(--tds-checkbox-input-border-radius);
1075
- opacity:var(--tds-checkbox-input-icon-opacity);
1076
- -webkit-mask-image:var(--tds-checkbox-input-icon);
1077
- mask-image:var(--tds-checkbox-input-icon);
1078
- -webkit-mask-repeat:no-repeat;
1079
- mask-repeat:no-repeat;
1080
- -webkit-mask-size:contain;
1081
- mask-size:contain;
1082
- transform:translate(-50%, -50%);
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;
1083
1104
  }
1084
1105
 
1085
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1086
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1087
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
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;
1088
1110
  }
1089
1111
 
1090
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1091
- outline:var(--t-focus-ring-outline);
1092
- outline-offset:var(--t-focus-ring-offset);
1112
+ :is(.tds-sidenav-item :is(a,button)):active{
1113
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1093
1114
  }
1094
1115
 
1095
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1096
- pointer-events:none;
1116
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1117
+ overflow:hidden;
1118
+ color:var(--tds-sidenav-item-icon-color);
1097
1119
  }
1098
1120
 
1099
- @media (prefers-reduced-motion: reduce){
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
+ }
1100
1126
 
1101
- .tds-checkbox input[type="checkbox"]{
1102
- --tds-checkbox-transition-property:none;
1103
- }
1104
- }
1105
-
1106
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1107
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
1108
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1109
- --tds-checkbox-input-icon-visibility:visible;
1110
- --tds-checkbox-input-icon-opacity:1;
1111
- }
1127
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1128
+ --tds-sidenav-indent:19px;
1129
+ }
1112
1130
 
1113
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1114
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1115
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
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;
1116
1135
  }
1117
1136
 
1118
- .tds-checkbox:has(input:checked){
1119
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1120
- }
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);
1121
1140
 
1122
- .tds-checkbox:has(input:indeterminate){
1123
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1141
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1142
+ font-weight:var(--t-font-weight-semibold);
1124
1143
  }
1125
1144
 
1126
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1127
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1128
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1129
- --tds-checkbox-description-invalid-icon-display:inline-block;
1145
+ .tds-sidenav-item:has(.tds-sidenav-section){
1146
+ display:flex;
1147
+ flex-direction:column;
1148
+ gap:var(--t-spacing-half);
1130
1149
  }
1131
1150
 
1132
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1133
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1134
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1135
- }
1151
+ .tds-sidenav-item .tds-sidenav-section-list{
1152
+ --tds-sidenav-item-depth:1;
1153
+ gap:0;
1154
+ }
1136
1155
 
1137
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
1138
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1139
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
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);
1140
1162
  }
1141
1163
 
1142
- :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
1143
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1144
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1145
- }
1146
-
1147
- .tds-checkbox:has(input:required) label::after{
1148
- margin-left:.25ch;
1149
- color:var(--t-text-color-status-error);
1150
- content:"*";
1164
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1165
+ --tds-sidenav-item-depth:2;
1151
1166
  }
1152
1167
 
1153
- .tds-checkbox:has(input:disabled){
1154
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1155
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1156
-
1157
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1158
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1159
- --tds-checkbox-cursor:not-allowed;
1160
- }
1161
-
1162
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1163
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
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;
1164
1174
  }
1165
1175
 
1166
- .tds-checkbox-description{
1167
- display:flex;
1168
- grid-area:2 / 2;
1169
- gap:var(--t-spacing-half);
1170
- align-items:flex-start;
1171
- padding-inline-start:var(--t-spacing-1);
1172
- margin:0;
1173
- font-size:var(--tds-checkbox-description-font-size);
1174
- line-height:var(--tds-checkbox-description-line-height);
1175
- color:var(--tds-checkbox-description-color);
1176
- cursor:text;
1177
- }
1178
-
1179
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1180
- display:var(--tds-checkbox-description-invalid-icon-display);
1181
- flex-shrink:0;
1182
- margin-top:calc(.5lh - .5em);
1183
- line-height:var(--tds-checkbox-description-line-height);
1184
- }
1185
-
1186
- .tds-checkbox--sm{
1187
- --tds-checkbox-line-height:1.35;
1188
- --tds-checkbox-input-size:var(--t-element-size-sm);
1189
- --tds-checkbox-font-size:var(--t-font-size-sm);
1190
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1191
- --tds-checkbox-description-line-height:1.3;
1192
- }
1193
-
1194
- .tds-checkbox-group{
1195
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1196
- --tds-checkbox-group-line-height:1.4;
1197
- --tds-checkbox-group-gap:var(--t-spacing-1);
1198
-
1199
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1200
- --tds-checkbox-group-description-line-height:1.35;
1201
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1202
- --tds-checkbox-group-description-invalid-icon-display:none;
1203
- display:flex;
1204
- flex-direction:column;
1205
- gap:0;
1206
- padding:0;
1207
- margin:0;
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
+ }
1208
1186
 
1209
- font-size:var(--tds-checkbox-group-font-size);
1210
- line-height:var(--tds-checkbox-group-line-height);
1211
- border:0;
1212
- }
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);
1196
+ }
1213
1197
 
1214
- .tds-checkbox-group legend{
1215
- float:left;
1216
- padding:0;
1217
- margin:0;
1218
- }
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
+ }
1219
1203
 
1220
- .tds-checkbox-group[aria-invalid="true"]{
1221
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1222
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1223
- }
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
+ }
1224
1208
 
1225
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1226
- margin-left:.25ch;
1227
- color:var(--t-text-color-status-error);
1228
- content:"*";
1229
- }
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
+ }
1230
1212
 
1231
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1232
- content:none;
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);
1233
1216
  }
1234
1217
 
1235
- .tds-checkbox-group-fields{
1236
- display:flex;
1237
- flex-direction:column;
1238
- gap:var(--tds-checkbox-group-gap);
1239
- align-items:flex-start;
1240
- margin-top:var(--t-spacing-1);
1241
- }
1242
-
1243
- .tds-checkbox-group-description{
1218
+ .tds-sidenav-responsive-header{
1244
1219
  display:flex;
1245
- gap:var(--t-spacing-half);
1246
- align-items:flex-start;
1247
- margin:var(--t-spacing-fourth) 0 0;
1248
- font-size:var(--tds-checkbox-group-description-font-size);
1249
- line-height:var(--tds-checkbox-group-description-line-height);
1250
- color:var(--tds-checkbox-group-description-color);
1251
- cursor:text;
1252
- }
1253
-
1254
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1255
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1256
- flex-shrink:0;
1257
- margin-top:calc(.5lh - .5em);
1258
- line-height:var(--tds-checkbox-group-description-line-height);
1259
- }
1260
-
1261
- .tds-checkbox-group--sm{
1262
- --tds-checkbox-group-line-height:1.35;
1263
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1264
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1265
- --tds-checkbox-group-description-line-height:1.3;
1266
- }
1267
-
1268
- .tds-modal-overlay{
1269
- --tds-modal-min-margin-block:var(--t-spacing-3);
1270
-
1271
- position:fixed;
1272
- inset:0;
1273
- z-index:1000;
1274
- display:grid;
1275
- grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
1276
- justify-items:center;
1277
- overflow-y:auto;
1278
- background:hsl(0 0% 0% / 40%);
1220
+ gap:var(--t-spacing-2);
1221
+ align-items:center;
1222
+ width:100%;
1279
1223
  }
1280
1224
 
1281
- .tds-modal-overlay[data-entering]{
1282
- animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1225
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1226
+ order:0;
1283
1227
  }
1284
1228
 
1285
- .tds-modal-overlay[data-exiting]{
1286
- animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
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);
1287
1236
  }
1288
1237
 
1289
- @keyframes tds-modal-overlay-fade{
1290
- from{
1291
- opacity:0;
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;
1292
1256
  }
1293
- }
1294
-
1295
- .tds-modal-frame{
1296
- --tds-modal-width:600px;
1297
- --tds-modal-edge-margin-inline:var(--t-spacing-3);
1298
- display:flex;
1299
-
1300
- grid-row:2;
1301
- justify-content:center;
1302
- width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
1303
- }
1304
1257
 
1305
- .tds-modal-frame[data-entering]{
1306
- animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
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;
1307
1266
  }
1308
1267
 
1309
- .tds-modal-frame[data-exiting]{
1310
- animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1268
+ .tds-sidenav-item :is(a, button) :is(.prefix){
1269
+ display:none;
1311
1270
  }
1271
+ @supports selector(:popover-open){
1272
+ .tds-sidenav-collapse:popover-open{
1273
+ display:flex;
1274
+ }
1312
1275
 
1313
- .tds-modal-frame--sm{
1314
- --tds-modal-width:400px;
1315
- }
1316
-
1317
- .tds-modal-frame--lg{
1318
- --tds-modal-width:800px;
1319
- }
1320
-
1321
- .tds-modal-frame--xl{
1322
- --tds-modal-width:1000px;
1323
- }
1276
+ .tds-sidenav-collapse:not(:popover-open){
1277
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1278
+ transition:var(--tds-sidenav-collapse-transition-exit);
1279
+ }
1324
1280
 
1325
- @keyframes tds-modal-zoom{
1326
- from{
1327
- opacity:0;
1328
- scale:.96;
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
+ }
1286
+ }
1329
1287
  }
1330
- }
1288
+ @supports not selector(:popover-open){
1289
+ .tds-sidenav-collapse.\:popover-open{
1290
+ display:flex;
1291
+ }
1331
1292
 
1332
- @media (prefers-reduced-motion: reduce){
1333
- .tds-modal-overlay[data-entering],
1334
- .tds-modal-overlay[data-exiting],
1335
- .tds-modal-frame[data-entering],
1336
- .tds-modal-frame[data-exiting]{
1337
- animation:none;
1293
+ .tds-sidenav-collapse:not(.\:popover-open){
1294
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1295
+ transition:var(--tds-sidenav-collapse-transition-exit);
1296
+ }
1338
1297
  }
1339
1298
  }
1340
1299
 
1341
- .tds-modal{
1342
- display:flex;
1343
- flex-direction:column;
1344
- width:100%;
1345
- padding-block-start:var(--t-spacing-3);
1346
- padding-inline:0;
1347
- background:var(--t-surface-color-card);
1348
-
1349
- border:0;
1350
- border-radius:var(--t-border-radius-lg);
1351
- box-shadow:0 4px 18px 0 #0003;
1352
- }
1353
-
1354
- .tds-modal:focus{
1355
- outline:none;
1300
+ @media (min-width: 720px){
1301
+ .tds-sidenav-responsive-header{
1302
+ display:none;
1356
1303
  }
1357
-
1358
- .tds-modal-header{
1359
- display:grid;
1360
- grid-template-columns:1fr auto;
1361
- -moz-column-gap:var(--t-spacing-2);
1362
- column-gap:var(--t-spacing-2);
1363
- padding-block:0;
1364
- padding-inline:var(--t-spacing-4);
1365
1304
  }
1366
1305
 
1367
- .tds-modal-title{
1368
- grid-row:1;
1369
- grid-column:1;
1370
- margin:0;
1371
- font-size:var(--t-font-size-2xl);
1372
- font-weight:var(--t-font-weight-medium);
1373
- line-height:140%;
1374
- color:var(--t-text-color-headline);
1375
- }
1376
-
1377
- .tds-modal-subtitle{
1378
- grid-row:2;
1379
- grid-column:1;
1380
- margin:0;
1381
- font-size:var(--t-font-size-md);
1382
- font-weight:var(--t-font-weight-medium);
1383
- line-height:140%;
1384
- color:var(--t-text-color-secondary);
1385
- }
1386
-
1387
- .tds-modal-close{
1388
- grid-row:1;
1389
- grid-column:2;
1390
- align-self:center;
1391
- color:var(--t-icon-color-dim);
1392
- }
1393
-
1394
- .tds-modal-body{
1395
- padding-block:var(--t-spacing-3);
1396
- padding-inline:var(--t-spacing-4);
1397
- }
1398
-
1399
- .tds-modal-body--full-width{
1400
- padding-inline:0;
1401
- }
1402
-
1403
- .tds-modal-footer{
1404
- display:flex;
1405
- gap:var(--t-spacing-2);
1406
- align-items:center;
1407
- justify-content:flex-end;
1408
- padding-block:var(--t-spacing-3);
1409
- padding-inline:var(--t-spacing-4);
1410
- border-top:1px solid var(--t-border-color);
1411
- }
1412
-
1413
- .tds-modal-footer > [slot="start"]{
1414
- margin-inline-end:auto;
1415
- }
1306
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1307
+ display:none;
1308
+ }
1416
1309
 
1417
- @media (min-width: 720px){
1418
- .tds-modal-overlay{
1419
- --tds-modal-min-margin-block:0;
1420
- }
1310
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1311
+ display:block;
1312
+ }
1421
1313
 
1422
- .tds-modal-footer{
1423
- position:sticky;
1424
- bottom:0;
1425
- background:var(--t-surface-color-card);
1426
- border-end-start-radius:var(--t-border-radius-lg);
1427
- border-end-end-radius:var(--t-border-radius-lg);
1428
- }
1429
- }
1314
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1315
+ display:flex;
1316
+ flex-direction:column;
1317
+ }
1430
1318
 
1431
- .tds-radio{
1432
- --tds-radio-font-size:var(--t-font-size-md);
1433
- --tds-radio-cursor:pointer;
1434
- --tds-radio-line-height:1.4;
1435
- --tds-radio-transition-property:border-width;
1319
+ .tds-checkbox{
1320
+ --tds-checkbox-font-size:var(--t-font-size-md);
1321
+ --tds-checkbox-cursor:pointer;
1322
+ --tds-checkbox-line-height:1.4;
1323
+ --tds-checkbox-transition-property:background-color, border-color;
1436
1324
 
1437
- --tds-radio-input-size:var(--t-element-size-md);
1438
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1439
- --tds-radio-input-border-color:var(--t-form-border-color);
1440
- --tds-radio-input-border-width:var(--t-form-border-width);
1441
- --tds-radio-input-background-color:var(--t-form-background-color);
1325
+ --tds-checkbox-input-size:var(--t-element-size-md);
1326
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1327
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
1328
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
1442
1329
 
1443
- --tds-radio-label-color:var(--t-form-color);
1330
+ --tds-checkbox-input-icon:none;
1331
+ --tds-checkbox-input-icon-visibility:hidden;
1332
+ --tds-checkbox-input-icon-opacity:0;
1333
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1444
1334
 
1445
- --tds-radio-description-font-size:var(--t-font-size-sm);
1446
- --tds-radio-description-line-height:1.35;
1447
- --tds-radio-description-color:var(--t-text-color-secondary);
1335
+ --tds-checkbox-label-color:var(--t-form-color);
1336
+
1337
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
1338
+ --tds-checkbox-description-line-height:1.35;
1339
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
1340
+ --tds-checkbox-description-invalid-icon-display:none;
1448
1341
 
1449
1342
  position:relative;
1450
1343
  display:inline-grid;
1451
1344
  grid-template-columns:auto;
1452
1345
  grid-auto-columns:1fr;
1453
1346
  gap:var(--t-spacing-fourth) 0;
1454
- line-height:var(--tds-radio-line-height);
1347
+ line-height:var(--tds-checkbox-line-height);
1455
1348
  -webkit-user-select:none;
1456
1349
  -moz-user-select:none;
1457
1350
  user-select:none;
1458
1351
  }
1459
1352
 
1460
- .tds-radio label{
1353
+ .tds-checkbox label{
1461
1354
  grid-area:1 / 2;
1462
1355
  padding-inline-start:var(--t-spacing-1);
1463
- font-size:var(--tds-radio-font-size);
1356
+ font-size:var(--tds-checkbox-font-size);
1464
1357
  font-weight:var(--t-font-weight-normal);
1465
- color:var(--tds-radio-label-color);
1466
- cursor:var(--tds-radio-cursor);
1358
+ color:var(--tds-checkbox-label-color);
1359
+ cursor:var(--tds-checkbox-cursor);
1467
1360
  }
1468
1361
 
1469
- .tds-radio input[type="radio"]{
1362
+ .tds-checkbox tds-indeterminate{
1363
+ display:flex;
1364
+ }
1365
+
1366
+ .tds-checkbox input[type="checkbox"]{
1470
1367
  position:relative;
1471
1368
  width:1em;
1472
1369
  height:1em;
1473
1370
  margin:calc((1lh - 1em) / 2) 0 0;
1474
- font-size:var(--tds-radio-font-size);
1371
+ font-size:var(--tds-checkbox-font-size);
1475
1372
  line-height:inherit;
1476
1373
  -webkit-appearance:none;
1477
1374
  -moz-appearance:none;
1478
1375
  appearance:none;
1479
- cursor:var(--tds-radio-cursor);
1480
- background-color:var(--tds-radio-input-background-color);
1481
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1482
- border-radius:var(--tds-radio-input-border-radius);
1376
+ cursor:var(--tds-checkbox-cursor);
1377
+ background-color:var(--tds-checkbox-input-background-color);
1378
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1379
+ border-radius:var(--tds-checkbox-input-border-radius);
1483
1380
  transition-timing-function:var(--t-ease-in-out);
1484
1381
  transition-duration:var(--t-duration-200);
1485
- transition-property:var(--tds-radio-transition-property);
1382
+ transition-property:var(--tds-checkbox-transition-property);
1486
1383
  }
1487
1384
 
1488
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1489
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1490
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1385
+ :is(.tds-checkbox input[type="checkbox"])::before{
1386
+ position:absolute;
1387
+ top:50%;
1388
+ left:50%;
1389
+ visibility:var(--tds-checkbox-input-icon-visibility);
1390
+ width:100%;
1391
+ height:100%;
1392
+ content:"";
1393
+ background-color:var(--tds-checkbox-input-icon-fill);
1394
+ border-radius:var(--tds-checkbox-input-border-radius);
1395
+ opacity:var(--tds-checkbox-input-icon-opacity);
1396
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
1397
+ mask-image:var(--tds-checkbox-input-icon);
1398
+ -webkit-mask-repeat:no-repeat;
1399
+ mask-repeat:no-repeat;
1400
+ -webkit-mask-size:contain;
1401
+ mask-size:contain;
1402
+ transform:translate(-50%, -50%);
1491
1403
  }
1492
1404
 
1493
- :is(.tds-radio input[type="radio"]):focus-visible{
1405
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1406
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1407
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1408
+ }
1409
+
1410
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1494
1411
  outline:var(--t-focus-ring-outline);
1495
1412
  outline-offset:var(--t-focus-ring-offset);
1496
1413
  }
1497
1414
 
1498
- :is(.tds-radio input[type="radio"]):disabled{
1415
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
1499
1416
  pointer-events:none;
1500
1417
  }
1501
1418
 
1502
1419
  @media (prefers-reduced-motion: reduce){
1503
1420
 
1504
- .tds-radio input[type="radio"]{
1505
- --tds-radio-transition-property:none;
1421
+ .tds-checkbox input[type="checkbox"]{
1422
+ --tds-checkbox-transition-property:none;
1506
1423
  }
1507
1424
  }
1508
1425
 
1509
- .tds-radio:has(input:checked){
1510
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1511
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1512
- --tds-radio-input-border-width:4px;
1426
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1427
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
1428
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1429
+ --tds-checkbox-input-icon-visibility:visible;
1430
+ --tds-checkbox-input-icon-opacity:1;
1513
1431
  }
1514
1432
 
1515
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1516
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1517
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1433
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1434
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1435
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1518
1436
  }
1519
1437
 
1520
- .tds-radio:has(input:user-invalid){
1521
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1438
+ .tds-checkbox:has(input:checked){
1439
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1522
1440
  }
1523
1441
 
1524
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1525
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1526
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1527
- }
1528
-
1529
- .tds-radio:has(input:disabled){
1530
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1531
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1532
-
1533
- --tds-radio-label-color:var(--t-form-color-disabled);
1534
- --tds-radio-description-color:var(--t-form-color-disabled);
1535
- --tds-radio-cursor:not-allowed;
1442
+ .tds-checkbox:has(input:indeterminate){
1443
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1536
1444
  }
1537
1445
 
1538
- .tds-radio:has(input:disabled) input:checked{
1539
- --tds-radio-input-background-color:var(--t-form-background-color);
1540
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1541
- }
1542
-
1543
- .tds-radio-description{
1544
- display:flex;
1545
- grid-area:2 / 2;
1546
- gap:var(--t-spacing-half);
1547
- align-items:flex-start;
1548
- padding-inline-start:var(--t-spacing-1);
1549
- margin:0;
1550
- font-size:var(--tds-radio-description-font-size);
1551
- line-height:var(--tds-radio-description-line-height);
1552
- color:var(--tds-radio-description-color);
1553
- cursor:text;
1554
- }
1555
-
1556
- .tds-radio--sm{
1557
- --tds-radio-line-height:1.35;
1558
- --tds-radio-input-size:var(--t-element-size-sm);
1559
- --tds-radio-font-size:var(--t-font-size-sm);
1560
- --tds-radio-description-font-size:var(--t-font-size-xs);
1561
- --tds-radio-description-line-height:1.3;
1562
- }
1563
-
1564
- .tds-input:has(textarea){
1565
- --tds-input-padding-block:6px;
1566
- --tds-input-resizer-size:var(--t-element-size-sm);
1567
- --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
1568
- }
1569
-
1570
- @supports (x: attr(x type(*))){
1571
-
1572
- .tds-input textarea{
1573
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1574
- }
1446
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1447
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1448
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
1449
+ --tds-checkbox-description-invalid-icon-display:inline-block;
1575
1450
  }
1576
1451
 
1577
- .tds-input.tds-textarea--resize-vertical textarea{
1578
- resize:vertical;
1579
- }
1580
-
1581
- .tds-input.tds-textarea--resize-none textarea{
1582
- resize:none;
1452
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1453
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1454
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1583
1455
  }
1584
1456
 
1585
- .tds-input.tds-textarea--resize-auto textarea{
1586
- resize:vertical;
1457
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
1458
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1459
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1587
1460
  }
1588
1461
 
1589
- @supports (field-sizing: content){
1590
- .tds-input.tds-textarea--resize-auto textarea{
1591
- field-sizing:content;
1592
- resize:none;
1462
+ :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
1463
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1464
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1593
1465
  }
1594
- }
1595
-
1596
- .tds-input textarea{
1597
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1598
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1599
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1600
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1601
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1602
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1603
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1604
- --tds-input-scrollbar-thumb-border-radius:999px;
1605
- --tds-input-scrollbar-thumb-border-width:3px;
1606
- --tds-input-scrollbar-track-margin-block:.125rem;
1607
- scrollbar-color:initial;
1608
- transition-timing-function:var(--t-ease-in-out);
1609
- transition-duration:var(--t-duration-200);
1610
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1611
- }
1612
-
1613
- @media (pointer: fine){
1614
- :is(.tds-input textarea)::-webkit-scrollbar{
1615
- width:12px;
1616
- height:12px;
1617
- cursor:default;
1618
- }
1619
-
1620
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1621
- cursor:default;
1622
- background:var(--tds-input-scrollbar-thumb-color);
1623
- background-clip:content-box;
1624
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1625
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1626
- }
1627
-
1628
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1629
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1630
- }
1631
-
1632
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1633
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1634
- }
1635
1466
 
1636
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1637
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1467
+ .tds-checkbox:has(input:required) label::after{
1468
+ margin-left:.25ch;
1469
+ color:var(--t-text-color-status-error);
1470
+ content:"*";
1638
1471
  }
1639
1472
 
1640
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1641
- background:var(--tds-input-scrollbar-surface-color);
1642
- }
1473
+ .tds-checkbox:has(input:disabled){
1474
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1475
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1643
1476
 
1644
- :is(.tds-input textarea)::-webkit-resizer{
1645
- background:var(--tds-input-resizer-icon) no-repeat;
1646
- background-position:right bottom;
1647
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1648
- }
1477
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
1478
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
1479
+ --tds-checkbox-cursor:not-allowed;
1480
+ }
1649
1481
 
1650
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1651
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1652
- cursor:default;
1482
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1483
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1653
1484
  }
1654
1485
 
1655
- @supports (-moz-appearance: none){
1656
- :is(.tds-input textarea){
1657
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1658
- scrollbar-width:thin;
1659
- }
1486
+ .tds-checkbox-description{
1487
+ display:flex;
1488
+ grid-area:2 / 2;
1489
+ gap:var(--t-spacing-half);
1490
+ align-items:flex-start;
1491
+ padding-inline-start:var(--t-spacing-1);
1492
+ margin:0;
1493
+ font-size:var(--tds-checkbox-description-font-size);
1494
+ line-height:var(--tds-checkbox-description-line-height);
1495
+ color:var(--tds-checkbox-description-color);
1496
+ cursor:text;
1497
+ }
1660
1498
 
1661
- @media (hover){
1662
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1663
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1664
- }
1665
- }
1666
- }
1499
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1500
+ display:var(--tds-checkbox-description-invalid-icon-display);
1501
+ flex-shrink:0;
1502
+ margin-top:calc(.5lh - .5em);
1503
+ line-height:var(--tds-checkbox-description-line-height);
1667
1504
  }
1668
1505
 
1669
- .tds-radio-group{
1670
- --tds-radio-group-font-size:var(--t-font-size-md);
1671
- --tds-radio-group-line-height:1.4;
1672
- --tds-radio-group-gap:var(--t-spacing-1);
1506
+ .tds-checkbox--sm{
1507
+ --tds-checkbox-line-height:1.35;
1508
+ --tds-checkbox-input-size:var(--t-element-size-sm);
1509
+ --tds-checkbox-font-size:var(--t-font-size-sm);
1510
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
1511
+ --tds-checkbox-description-line-height:1.3;
1512
+ }
1673
1513
 
1674
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1675
- --tds-radio-group-description-line-height:1.35;
1676
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1677
- --tds-radio-group-description-invalid-icon-display:none;
1514
+ .tds-checkbox-group{
1515
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1516
+ --tds-checkbox-group-line-height:1.4;
1517
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1518
+
1519
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1520
+ --tds-checkbox-group-description-line-height:1.35;
1521
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1522
+ --tds-checkbox-group-description-invalid-icon-display:none;
1678
1523
  display:flex;
1679
1524
  flex-direction:column;
1680
1525
  gap:0;
1681
1526
  padding:0;
1682
1527
  margin:0;
1683
1528
 
1684
- font-size:var(--tds-radio-group-font-size);
1685
- line-height:var(--tds-radio-group-line-height);
1529
+ font-size:var(--tds-checkbox-group-font-size);
1530
+ line-height:var(--tds-checkbox-group-line-height);
1686
1531
  border:0;
1687
1532
  }
1688
1533
 
1689
- .tds-radio-group legend{
1534
+ .tds-checkbox-group legend{
1690
1535
  float:left;
1691
1536
  padding:0;
1692
1537
  margin:0;
1693
1538
  }
1694
1539
 
1695
- .tds-radio-group[aria-invalid="true"]{
1696
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1697
- --tds-radio-group-description-invalid-icon-display:inline-block;
1540
+ .tds-checkbox-group[aria-invalid="true"]{
1541
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1542
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1698
1543
  }
1699
1544
 
1700
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1701
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1702
- }
1703
-
1704
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1705
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1706
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1707
- }
1708
-
1709
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1710
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1711
- }
1712
-
1713
- .tds-radio-group:has(input:required) legend::after{
1545
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1714
1546
  margin-left:.25ch;
1715
1547
  color:var(--t-text-color-status-error);
1716
1548
  content:"*";
1717
1549
  }
1718
1550
 
1719
- .tds-radio-group-fields{
1551
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1552
+ content:none;
1553
+ }
1554
+
1555
+ .tds-checkbox-group-fields{
1720
1556
  display:flex;
1721
1557
  flex-direction:column;
1722
- gap:var(--tds-radio-group-gap);
1558
+ gap:var(--tds-checkbox-group-gap);
1723
1559
  align-items:flex-start;
1724
1560
  margin-top:var(--t-spacing-1);
1725
1561
  }
1726
1562
 
1727
- .tds-radio-group-description{
1563
+ .tds-checkbox-group-description{
1728
1564
  display:flex;
1729
1565
  gap:var(--t-spacing-half);
1730
1566
  align-items:flex-start;
1731
1567
  margin:var(--t-spacing-fourth) 0 0;
1732
- font-size:var(--tds-radio-group-description-font-size);
1733
- line-height:var(--tds-radio-group-description-line-height);
1734
- color:var(--tds-radio-group-description-color);
1568
+ font-size:var(--tds-checkbox-group-description-font-size);
1569
+ line-height:var(--tds-checkbox-group-description-line-height);
1570
+ color:var(--tds-checkbox-group-description-color);
1735
1571
  cursor:text;
1736
1572
  }
1737
1573
 
1738
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1739
- display:var(--tds-radio-group-description-invalid-icon-display);
1574
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1575
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1740
1576
  flex-shrink:0;
1741
1577
  margin-top:calc(.5lh - .5em);
1742
- line-height:var(--tds-radio-group-description-line-height);
1578
+ line-height:var(--tds-checkbox-group-description-line-height);
1743
1579
  }
1744
1580
 
1745
- .tds-radio-group--sm{
1746
- --tds-radio-group-line-height:1.35;
1747
- --tds-radio-group-font-size:var(--t-font-size-sm);
1748
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1749
- --tds-radio-group-description-line-height:1.3;
1581
+ .tds-checkbox-group--sm{
1582
+ --tds-checkbox-group-line-height:1.35;
1583
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1584
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1585
+ --tds-checkbox-group-description-line-height:1.3;
1750
1586
  }
1751
1587
 
1752
- .tds-toggle-switch{
1753
- --tds-toggle-switch-font-size:var(--t-font-size-md);
1754
- --tds-toggle-switch-cursor:pointer;
1755
- --tds-toggle-switch-display:inline-grid;
1756
- --tds-toggle-switch-line-height:1.4;
1588
+ .tds-modal-overlay{
1589
+ --tds-modal-min-margin-block:var(--t-spacing-3);
1590
+
1591
+ position:fixed;
1592
+ inset:0;
1593
+ z-index:1000;
1594
+ display:grid;
1595
+ grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
1596
+ justify-items:center;
1597
+ overflow-y:auto;
1598
+ background:hsl(0 0% 0% / 40%);
1599
+ }
1600
+
1601
+ .tds-modal-overlay[data-entering]{
1602
+ animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1603
+ }
1604
+
1605
+ .tds-modal-overlay[data-exiting]{
1606
+ animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1607
+ }
1608
+
1609
+ @keyframes tds-modal-overlay-fade{
1610
+ from{
1611
+ opacity:0;
1612
+ }
1613
+ }
1614
+
1615
+ .tds-modal-frame{
1616
+ --tds-modal-width:600px;
1617
+ --tds-modal-edge-margin-inline:var(--t-spacing-3);
1618
+ display:flex;
1619
+
1620
+ grid-row:2;
1621
+ justify-content:center;
1622
+ width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
1623
+ }
1624
+
1625
+ .tds-modal-frame[data-entering]{
1626
+ animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1627
+ }
1628
+
1629
+ .tds-modal-frame[data-exiting]{
1630
+ animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1631
+ }
1632
+
1633
+ .tds-modal-frame--sm{
1634
+ --tds-modal-width:400px;
1635
+ }
1636
+
1637
+ .tds-modal-frame--lg{
1638
+ --tds-modal-width:800px;
1639
+ }
1640
+
1641
+ .tds-modal-frame--xl{
1642
+ --tds-modal-width:1000px;
1643
+ }
1644
+
1645
+ @keyframes tds-modal-zoom{
1646
+ from{
1647
+ opacity:0;
1648
+ scale:.96;
1649
+ }
1650
+ }
1651
+
1652
+ @media (prefers-reduced-motion: reduce){
1653
+ .tds-modal-overlay[data-entering],
1654
+ .tds-modal-overlay[data-exiting],
1655
+ .tds-modal-frame[data-entering],
1656
+ .tds-modal-frame[data-exiting]{
1657
+ animation:none;
1658
+ }
1659
+ }
1660
+
1661
+ .tds-modal{
1662
+ display:flex;
1663
+ flex-direction:column;
1664
+ width:100%;
1665
+ padding-block-start:var(--t-spacing-3);
1666
+ padding-inline:0;
1667
+ background:var(--t-surface-color-card);
1668
+
1669
+ border:0;
1670
+ border-radius:var(--t-border-radius-lg);
1671
+ box-shadow:0 4px 18px 0 #0003;
1672
+ }
1673
+
1674
+ .tds-modal:focus{
1675
+ outline:none;
1676
+ }
1677
+
1678
+ .tds-modal-header{
1679
+ display:grid;
1680
+ grid-template-columns:1fr auto;
1681
+ -moz-column-gap:var(--t-spacing-2);
1682
+ column-gap:var(--t-spacing-2);
1683
+ padding-block:0;
1684
+ padding-inline:var(--t-spacing-4);
1685
+ }
1686
+
1687
+ .tds-modal-title{
1688
+ grid-row:1;
1689
+ grid-column:1;
1690
+ margin:0;
1691
+ font-size:var(--t-font-size-2xl);
1692
+ font-weight:var(--t-font-weight-medium);
1693
+ line-height:140%;
1694
+ color:var(--t-text-color-headline);
1695
+ }
1696
+
1697
+ .tds-modal-subtitle{
1698
+ grid-row:2;
1699
+ grid-column:1;
1700
+ margin:0;
1701
+ font-size:var(--t-font-size-md);
1702
+ font-weight:var(--t-font-weight-medium);
1703
+ line-height:140%;
1704
+ color:var(--t-text-color-secondary);
1705
+ }
1706
+
1707
+ .tds-modal-close{
1708
+ grid-row:1;
1709
+ grid-column:2;
1710
+ align-self:center;
1711
+ color:var(--t-icon-color-dim);
1712
+ }
1713
+
1714
+ .tds-modal-body{
1715
+ padding-block:var(--t-spacing-3);
1716
+ padding-inline:var(--t-spacing-4);
1717
+ }
1718
+
1719
+ .tds-modal-body--full-width{
1720
+ padding-inline:0;
1721
+ }
1722
+
1723
+ .tds-modal-footer{
1724
+ display:flex;
1725
+ gap:var(--t-spacing-2);
1726
+ align-items:center;
1727
+ justify-content:flex-end;
1728
+ padding-block:var(--t-spacing-3);
1729
+ padding-inline:var(--t-spacing-4);
1730
+ border-top:1px solid var(--t-border-color);
1731
+ }
1732
+
1733
+ .tds-modal-footer > [slot="start"]{
1734
+ margin-inline-end:auto;
1735
+ }
1736
+
1737
+ @media (min-width: 720px){
1738
+ .tds-modal-overlay{
1739
+ --tds-modal-min-margin-block:0;
1740
+ }
1741
+
1742
+ .tds-modal-footer{
1743
+ position:sticky;
1744
+ bottom:0;
1745
+ background:var(--t-surface-color-card);
1746
+ border-end-start-radius:var(--t-border-radius-lg);
1747
+ border-end-end-radius:var(--t-border-radius-lg);
1748
+ }
1749
+ }
1750
+
1751
+ .tds-radio{
1752
+ --tds-radio-font-size:var(--t-font-size-md);
1753
+ --tds-radio-cursor:pointer;
1754
+ --tds-radio-line-height:1.4;
1755
+ --tds-radio-transition-property:border-width;
1757
1756
 
1758
- --tds-toggle-switch-label-color:var(--t-form-color);
1757
+ --tds-radio-input-size:var(--t-element-size-md);
1758
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
1759
+ --tds-radio-input-border-color:var(--t-form-border-color);
1760
+ --tds-radio-input-border-width:var(--t-form-border-width);
1761
+ --tds-radio-input-background-color:var(--t-form-background-color);
1759
1762
 
1760
- --tds-toggle-switch-track-width:var(--t-container-size-md);
1761
- --tds-toggle-switch-track-outline:none;
1762
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
1763
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1764
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1763
+ --tds-radio-label-color:var(--t-form-color);
1765
1764
 
1766
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1767
- --tds-toggle-switch-thumb-transform:translateX(0);
1768
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1765
+ --tds-radio-description-font-size:var(--t-font-size-sm);
1766
+ --tds-radio-description-line-height:1.35;
1767
+ --tds-radio-description-color:var(--t-text-color-secondary);
1769
1768
 
1770
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1771
- --tds-toggle-switch-description-line-height:1.35;
1772
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1773
1769
  position:relative;
1774
-
1775
- display:var(--tds-toggle-switch-display);
1770
+ display:inline-grid;
1776
1771
  grid-template-columns:auto;
1777
1772
  grid-auto-columns:1fr;
1778
1773
  gap:var(--t-spacing-fourth) 0;
1774
+ line-height:var(--tds-radio-line-height);
1779
1775
  -webkit-user-select:none;
1780
1776
  -moz-user-select:none;
1781
1777
  user-select:none;
1782
1778
  }
1783
1779
 
1784
- .tds-toggle-switch input[type="checkbox"]{
1785
- position:absolute;
1786
- width:var(--tds-toggle-switch-track-width);
1787
- height:var(--tds-toggle-switch-track-height);
1788
- margin:0;
1780
+ .tds-radio label{
1781
+ grid-area:1 / 2;
1782
+ padding-inline-start:var(--t-spacing-1);
1783
+ font-size:var(--tds-radio-font-size);
1784
+ font-weight:var(--t-font-weight-normal);
1785
+ color:var(--tds-radio-label-color);
1786
+ cursor:var(--tds-radio-cursor);
1787
+ }
1788
+
1789
+ .tds-radio input[type="radio"]{
1790
+ position:relative;
1791
+ width:1em;
1792
+ height:1em;
1793
+ margin:calc((1lh - 1em) / 2) 0 0;
1794
+ font-size:var(--tds-radio-font-size);
1795
+ line-height:inherit;
1789
1796
  -webkit-appearance:none;
1790
1797
  -moz-appearance:none;
1791
1798
  appearance:none;
1792
- cursor:var(--tds-toggle-switch-cursor);
1793
- outline:var(--tds-toggle-switch-track-outline);
1794
- outline-offset:var(--t-focus-ring-offset);
1795
- background-color:transparent;
1796
- border:0;
1797
- border-radius:var(--t-border-radius-round);
1799
+ cursor:var(--tds-radio-cursor);
1800
+ background-color:var(--tds-radio-input-background-color);
1801
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1802
+ border-radius:var(--tds-radio-input-border-radius);
1803
+ transition-timing-function:var(--t-ease-in-out);
1804
+ transition-duration:var(--t-duration-200);
1805
+ transition-property:var(--tds-radio-transition-property);
1798
1806
  }
1799
1807
 
1800
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1801
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1808
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1809
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1810
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1802
1811
  }
1803
1812
 
1804
- .tds-toggle-switch label{
1805
- display:inline-flex;
1806
- grid-area:1 / 2;
1807
- padding-inline-start:var(--t-spacing-1);
1808
- margin-top:-.09375em;
1809
- font-size:var(--tds-toggle-switch-font-size);
1810
- font-weight:var(--t-font-weight-normal);
1811
- line-height:var(--tds-toggle-switch-line-height);
1812
- color:var(--tds-toggle-switch-label-color);
1813
- cursor:var(--tds-toggle-switch-cursor);
1814
- }
1813
+ :is(.tds-radio input[type="radio"]):focus-visible{
1814
+ outline:var(--t-focus-ring-outline);
1815
+ outline-offset:var(--t-focus-ring-offset);
1816
+ }
1815
1817
 
1816
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1817
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1818
- }
1818
+ :is(.tds-radio input[type="radio"]):disabled{
1819
+ pointer-events:none;
1820
+ }
1819
1821
 
1820
- .tds-toggle-switch:has(input:checked){
1821
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1822
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1823
- }
1822
+ @media (prefers-reduced-motion: reduce){
1824
1823
 
1825
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1826
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1824
+ .tds-radio input[type="radio"]{
1825
+ --tds-radio-transition-property:none;
1826
+ }
1827
1827
  }
1828
1828
 
1829
- .tds-toggle-switch:has(input:disabled){
1830
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1831
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1832
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1833
- --tds-toggle-switch-cursor:not-allowed;
1829
+ .tds-radio:has(input:checked){
1830
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1831
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
1832
+ --tds-radio-input-border-width:4px;
1834
1833
  }
1835
1834
 
1836
- .tds-toggle-switch-track{
1837
- position:relative;
1838
- flex-shrink:0;
1839
- width:var(--tds-toggle-switch-track-width);
1840
- height:var(--tds-toggle-switch-track-height);
1841
- background-color:var(--tds-toggle-switch-track-background-color);
1842
- border-radius:var(--t-border-radius-round);
1843
- transition:var(--tds-toggle-switch-track-transition);
1844
- }
1835
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
1836
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1837
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1838
+ }
1845
1839
 
1846
- .tds-toggle-switch-track::before{
1847
- position:absolute;
1848
- top:var(--t-spacing-fourth);
1849
- left:var(--t-spacing-fourth);
1850
- width:var(--tds-toggle-switch-thumb-size);
1851
- height:var(--tds-toggle-switch-thumb-size);
1852
- content:"";
1853
- background-color:#fff;
1854
- border-radius:var(--t-border-radius-round);
1855
- transform:var(--tds-toggle-switch-thumb-transform);
1856
- transition:var(--tds-toggle-switch-thumb-transition);
1840
+ .tds-radio:has(input:user-invalid){
1841
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1857
1842
  }
1858
1843
 
1859
- @media (prefers-reduced-motion: reduce){
1844
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1845
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1846
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1847
+ }
1860
1848
 
1861
- .tds-toggle-switch-track{
1862
- --tds-toggle-switch-track-transition:none;
1863
- --tds-toggle-switch-thumb-transition:none;
1864
- }
1849
+ .tds-radio:has(input:disabled){
1850
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1851
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1852
+
1853
+ --tds-radio-label-color:var(--t-form-color-disabled);
1854
+ --tds-radio-description-color:var(--t-form-color-disabled);
1855
+ --tds-radio-cursor:not-allowed;
1865
1856
  }
1866
1857
 
1867
- .tds-toggle-switch-description{
1858
+ .tds-radio:has(input:disabled) input:checked{
1859
+ --tds-radio-input-background-color:var(--t-form-background-color);
1860
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1861
+ }
1862
+
1863
+ .tds-radio-description{
1868
1864
  display:flex;
1869
1865
  grid-area:2 / 2;
1866
+ gap:var(--t-spacing-half);
1870
1867
  align-items:flex-start;
1871
1868
  padding-inline-start:var(--t-spacing-1);
1872
1869
  margin:0;
1873
- font-size:var(--tds-toggle-switch-description-font-size);
1874
- line-height:var(--tds-toggle-switch-description-line-height);
1875
- color:var(--tds-toggle-switch-description-color);
1870
+ font-size:var(--tds-radio-description-font-size);
1871
+ line-height:var(--tds-radio-description-line-height);
1872
+ color:var(--tds-radio-description-color);
1876
1873
  cursor:text;
1877
1874
  }
1878
1875
 
1879
- .tds-toggle-switch--sm{
1880
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1881
- --tds-toggle-switch-line-height:1.35;
1882
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1883
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1884
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1885
- --tds-toggle-switch-description-line-height:1.3;
1886
- }
1887
-
1888
- .tds-toggle-switch--hide-label{
1889
- --tds-toggle-switch-display:inline-flex;
1890
- }
1891
-
1892
-
1893
- @media (prefers-reduced-motion: no-preference){
1894
-
1895
- :root{
1896
- interpolate-size:allow-keywords;
1897
- }
1898
- }
1899
-
1900
- @layer tds-component{
1901
- tds-sidenav,
1902
- .tds-sidenav{
1903
- --tds-sidenav-indent:12px;
1904
- --tds-sidenav-item-depth:0;
1905
-
1906
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
1907
-
1908
- --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;
1909
- --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;
1910
- --tds-sidenav-collapse-closed-opacity:0;
1911
- --tds-sidenav-collapse-open-opacity:1;
1912
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
1913
- --tds-sidenav-collapse-open-transform:translateY(0);
1914
-
1915
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
1916
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1917
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1918
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1919
-
1920
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1921
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1922
- --tds-sidenav-item-nested-background-selected:transparent;
1923
-
1924
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1925
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1926
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1927
-
1928
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1929
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1930
- }
1931
-
1932
- @media (prefers-reduced-motion: reduce){
1933
- tds-sidenav,
1934
- .tds-sidenav{
1935
- --tds-sidenav-collapse-transition-enter:none;
1936
- --tds-sidenav-collapse-transition-exit:none;
1937
- --tds-sidenav-collapse-closed-transform:none;
1938
- --tds-sidenav-collapse-open-transform:none;
1939
- }
1940
- }
1941
-
1942
- .tds-sidenav--theme-gray{
1943
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1944
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1945
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1946
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1947
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1948
- }
1876
+ .tds-radio--sm{
1877
+ --tds-radio-line-height:1.35;
1878
+ --tds-radio-input-size:var(--t-element-size-sm);
1879
+ --tds-radio-font-size:var(--t-font-size-sm);
1880
+ --tds-radio-description-font-size:var(--t-font-size-xs);
1881
+ --tds-radio-description-line-height:1.3;
1949
1882
  }
1950
1883
 
1951
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1952
- display:flex;
1953
- }
1954
-
1955
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1956
- flex-direction:column;
1957
- gap:var(--t-spacing-half);
1958
- width:100%;
1959
- }
1960
-
1961
- .tds-sidenav-section-list{
1962
- width:100%;
1963
- padding:0;
1964
- margin:0;
1965
- list-style:none;
1884
+ .tds-input:has(textarea){
1885
+ --tds-input-padding-block:6px;
1886
+ --tds-input-resizer-size:var(--t-element-size-sm);
1887
+ --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
1966
1888
  }
1967
1889
 
1968
- .tds-sidenav-section-header{
1969
- display:flex;
1970
- align-items:baseline;
1971
- justify-content:space-between;
1972
- padding-top:var(--t-spacing-2);
1973
- }
1890
+ @supports (x: attr(x type(*))){
1974
1891
 
1975
- .tds-sidenav-section-header h2{
1976
- margin:0;
1977
- font-size:var(--t-font-size-sm);
1978
- font-weight:var(--t-font-weight-semibold);
1979
- line-height:1.35;
1980
- color:var(--t-text-color-secondary);
1981
- text-transform:uppercase;
1892
+ .tds-input textarea{
1893
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1894
+ }
1982
1895
  }
1983
1896
 
1984
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1985
- padding-top:0;
1986
- }
1897
+ .tds-input.tds-textarea--resize-vertical textarea{
1898
+ resize:vertical;
1899
+ }
1987
1900
 
1988
- .tds-sidenav-section-header [slot="label-actions"]{
1989
- display:flex;
1990
- gap:var(--t-spacing-half);
1991
- align-items:center;
1992
- }
1901
+ .tds-input.tds-textarea--resize-none textarea{
1902
+ resize:none;
1903
+ }
1993
1904
 
1994
- .tds-sidenav-section [slot="section-actions"]{
1995
- display:flex;
1996
- gap:12px;
1997
- align-items:center;
1998
- min-height:42px;
1999
- padding:var(--t-spacing-1) 0;
2000
- }
1905
+ .tds-input.tds-textarea--resize-auto textarea{
1906
+ resize:vertical;
1907
+ }
2001
1908
 
2002
- .tds-sidenav-section-list,
2003
- .tds-sidenav-item{
2004
- width:100%;
2005
- padding:0;
2006
- margin:0;
1909
+ @supports (field-sizing: content){
1910
+ .tds-input.tds-textarea--resize-auto textarea{
1911
+ field-sizing:content;
1912
+ resize:none;
1913
+ }
1914
+ }
1915
+
1916
+ .tds-input textarea{
1917
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1918
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1919
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1920
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1921
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1922
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1923
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1924
+ --tds-input-scrollbar-thumb-border-radius:999px;
1925
+ --tds-input-scrollbar-thumb-border-width:3px;
1926
+ --tds-input-scrollbar-track-margin-block:.125rem;
1927
+ scrollbar-color:initial;
1928
+ transition-timing-function:var(--t-ease-in-out);
1929
+ transition-duration:var(--t-duration-200);
1930
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2007
1931
  }
2008
1932
 
2009
- .tds-sidenav-item :is(a,button){
2010
- position:relative;
2011
- display:flex;
2012
- gap:12px;
2013
- align-items:center;
2014
- width:100%;
2015
- padding:12px;
2016
- overflow:hidden;
2017
- font-size:var(--t-font-size-sm);
2018
- line-height:18px;
2019
- color:var(--t-text-color-headline);
2020
- white-space:nowrap;
2021
- text-decoration:none;
2022
- -webkit-appearance:none;
2023
- -moz-appearance:none;
2024
- appearance:none;
2025
- cursor:pointer;
2026
- background-color:var(--tds-sidenav-item-background, transparent);
2027
- border:0;
2028
- border-radius:var(--t-border-radius);
2029
- transition:var(--tds-sidenav-item-transition);
2030
- }
1933
+ @media (pointer: fine){
1934
+ :is(.tds-input textarea)::-webkit-scrollbar{
1935
+ width:12px;
1936
+ height:12px;
1937
+ cursor:default;
1938
+ }
2031
1939
 
2032
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
2033
- display:block;
2034
- flex:1;
2035
- overflow:hidden;
2036
- text-overflow:ellipsis;
2037
- text-align:left;
2038
- white-space:nowrap;
1940
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1941
+ cursor:default;
1942
+ background:var(--tds-input-scrollbar-thumb-color);
1943
+ background-clip:content-box;
1944
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1945
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2039
1946
  }
2040
1947
 
2041
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
2042
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
2043
- color:var(--t-text-color-headline);
2044
- text-decoration:none;
1948
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1949
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2045
1950
  }
2046
1951
 
2047
- :is(.tds-sidenav-item :is(a,button)):active{
2048
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1952
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1953
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2049
1954
  }
2050
1955
 
2051
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
2052
- overflow:hidden;
2053
- color:var(--tds-sidenav-item-icon-color);
1956
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1957
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2054
1958
  }
2055
1959
 
2056
- :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{
2057
- display:block;
2058
- width:var(--tds-sidenav-item-icon-size);
2059
- height:var(--tds-sidenav-item-icon-size);
2060
- }
1960
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1961
+ background:var(--tds-input-scrollbar-surface-color);
1962
+ }
2061
1963
 
2062
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
2063
- --tds-sidenav-indent:19px;
1964
+ :is(.tds-input textarea)::-webkit-resizer{
1965
+ background:var(--tds-input-resizer-icon) no-repeat;
1966
+ background-position:right bottom;
1967
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2064
1968
  }
2065
1969
 
2066
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
2067
- visibility:visible;
2068
- block-size:auto;
2069
- opacity:1;
1970
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1971
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1972
+ cursor:default;
2070
1973
  }
2071
1974
 
2072
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
2073
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
2074
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1975
+ @supports (-moz-appearance: none){
1976
+ :is(.tds-input textarea){
1977
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1978
+ scrollbar-width:thin;
1979
+ }
2075
1980
 
2076
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
2077
- font-weight:var(--t-font-weight-semibold);
1981
+ @media (hover){
1982
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1983
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1984
+ }
1985
+ }
1986
+ }
2078
1987
  }
2079
1988
 
2080
- .tds-sidenav-item:has(.tds-sidenav-section){
2081
- display:flex;
2082
- flex-direction:column;
2083
- gap:var(--t-spacing-half);
1989
+
1990
+ :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1991
+ -webkit-appearance:none;
1992
+ appearance:none;
1993
+ }
1994
+
1995
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1996
+ inline-size:1em;
1997
+ block-size:2em;
1998
+ }
1999
+ @supports (field-sizing: content){
2000
+ .tds-input--auto-width{
2001
+ inline-size:-moz-fit-content;
2002
+ inline-size:fit-content;
2003
+ min-inline-size:min(100%, 122px);
2084
2004
  }
2085
2005
 
2086
- .tds-sidenav-item .tds-sidenav-section-list{
2087
- --tds-sidenav-item-depth:1;
2088
- gap:0;
2006
+ .tds-input--auto-width input{
2007
+ field-sizing:content;
2008
+ inline-size:auto;
2089
2009
  }
2010
+ }
2090
2011
 
2091
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
2092
- visibility:hidden;
2093
- block-size:0;
2094
- overflow-y:clip;
2095
- opacity:0;
2096
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
2097
- }
2012
+ .tds-radio-group{
2013
+ --tds-radio-group-font-size:var(--t-font-size-md);
2014
+ --tds-radio-group-line-height:1.4;
2015
+ --tds-radio-group-gap:var(--t-spacing-1);
2098
2016
 
2099
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
2100
- --tds-sidenav-item-depth:2;
2101
- }
2017
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
2018
+ --tds-radio-group-description-line-height:1.35;
2019
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
2020
+ --tds-radio-group-description-invalid-icon-display:none;
2021
+ display:flex;
2022
+ flex-direction:column;
2023
+ gap:0;
2024
+ padding:0;
2025
+ margin:0;
2102
2026
 
2103
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2104
- min-height:var(--t-element-size-2xl);
2105
- padding-block:9px;
2106
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
2107
- line-height:1;
2108
- background-color:transparent;
2109
- }
2027
+ font-size:var(--tds-radio-group-font-size);
2028
+ line-height:var(--tds-radio-group-line-height);
2029
+ border:0;
2030
+ }
2110
2031
 
2111
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
2112
- position:absolute;
2113
- top:0;
2114
- bottom:0;
2115
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2116
- width:2px;
2117
- content:"";
2118
- background-color:var(--tds-sidenav-item-nested-border-color);
2119
- transition:var(--tds-sidenav-item-transition);
2120
- }
2032
+ .tds-radio-group legend{
2033
+ float:left;
2034
+ padding:0;
2035
+ margin:0;
2036
+ }
2121
2037
 
2122
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
2123
- position:absolute;
2124
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2125
- z-index:-1;
2126
- height:100%;
2127
- content:"";
2128
- background-color:var(--tds-sidenav-item-nested-background);
2129
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
2130
- transition:var(--tds-sidenav-item-transition);
2131
- }
2038
+ .tds-radio-group[aria-invalid="true"]{
2039
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
2040
+ --tds-radio-group-description-invalid-icon-display:inline-block;
2041
+ }
2132
2042
 
2133
- :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)){
2134
- display:block;
2135
- text-align:left;
2136
- white-space:normal;
2137
- }
2043
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
2044
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2045
+ }
2138
2046
 
2139
- :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{
2140
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
2141
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
2047
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2048
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2049
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2142
2050
  }
2143
2051
 
2144
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
2145
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
2052
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2053
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2146
2054
  }
2147
2055
 
2148
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2149
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
2150
- font-weight:var(--t-font-weight-medium);
2056
+ .tds-radio-group:has(input:required) legend::after{
2057
+ margin-left:.25ch;
2058
+ color:var(--t-text-color-status-error);
2059
+ content:"*";
2151
2060
  }
2152
2061
 
2153
- .tds-sidenav-responsive-header{
2062
+ .tds-radio-group-fields{
2154
2063
  display:flex;
2155
- gap:var(--t-spacing-2);
2156
- align-items:center;
2157
- width:100%;
2064
+ flex-direction:column;
2065
+ gap:var(--tds-radio-group-gap);
2066
+ align-items:flex-start;
2067
+ margin-top:var(--t-spacing-1);
2158
2068
  }
2159
2069
 
2160
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
2161
- order:0;
2070
+ .tds-radio-group-description{
2071
+ display:flex;
2072
+ gap:var(--t-spacing-half);
2073
+ align-items:flex-start;
2074
+ margin:var(--t-spacing-fourth) 0 0;
2075
+ font-size:var(--tds-radio-group-description-font-size);
2076
+ line-height:var(--tds-radio-group-description-line-height);
2077
+ color:var(--tds-radio-group-description-color);
2078
+ cursor:text;
2079
+ }
2080
+
2081
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2082
+ display:var(--tds-radio-group-description-invalid-icon-display);
2083
+ flex-shrink:0;
2084
+ margin-top:calc(.5lh - .5em);
2085
+ line-height:var(--tds-radio-group-description-line-height);
2162
2086
  }
2163
2087
 
2164
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
2165
- flex:1;
2166
- order:1;
2088
+ .tds-radio-group--sm{
2089
+ --tds-radio-group-line-height:1.35;
2090
+ --tds-radio-group-font-size:var(--t-font-size-sm);
2091
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
2092
+ --tds-radio-group-description-line-height:1.3;
2093
+ }
2094
+
2095
+ .tds-toggle-switch{
2096
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
2097
+ --tds-toggle-switch-cursor:pointer;
2098
+ --tds-toggle-switch-display:inline-grid;
2099
+ --tds-toggle-switch-line-height:1.4;
2100
+
2101
+ --tds-toggle-switch-label-color:var(--t-form-color);
2102
+
2103
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
2104
+ --tds-toggle-switch-track-outline:none;
2105
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
2106
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
2107
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
2108
+
2109
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
2110
+ --tds-toggle-switch-thumb-transform:translateX(0);
2111
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
2112
+
2113
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
2114
+ --tds-toggle-switch-description-line-height:1.35;
2115
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
2116
+ position:relative;
2117
+
2118
+ display:var(--tds-toggle-switch-display);
2119
+ grid-template-columns:auto;
2120
+ grid-auto-columns:1fr;
2121
+ gap:var(--t-spacing-fourth) 0;
2122
+ -webkit-user-select:none;
2123
+ -moz-user-select:none;
2124
+ user-select:none;
2125
+ }
2126
+
2127
+ .tds-toggle-switch input[type="checkbox"]{
2128
+ position:absolute;
2129
+ width:var(--tds-toggle-switch-track-width);
2130
+ height:var(--tds-toggle-switch-track-height);
2167
2131
  margin:0;
2168
- font-size:var(--t-font-size-lg);
2169
- font-weight:var(--t-font-weight-medium);
2170
- color:var(--t-text-color-headline);
2132
+ -webkit-appearance:none;
2133
+ -moz-appearance:none;
2134
+ appearance:none;
2135
+ cursor:var(--tds-toggle-switch-cursor);
2136
+ outline:var(--tds-toggle-switch-track-outline);
2137
+ outline-offset:var(--t-focus-ring-offset);
2138
+ background-color:transparent;
2139
+ border:0;
2140
+ border-radius:var(--t-border-radius-round);
2171
2141
  }
2172
2142
 
2173
- @media (max-width: 719px){
2174
- .tds-sidenav-collapse{
2175
- z-index:10001;
2176
- display:none;
2177
- max-width:min(448px, calc(100vw - 48px));
2178
- padding:0;
2179
- margin:12px 0;
2180
- position-area:bottom span-right;
2181
- overflow:hidden;
2182
- outline:0;
2183
- background:var(--t-surface-color-card);
2184
- border:0;
2185
- border-radius:6px;
2186
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
2187
- opacity:var(--tds-sidenav-collapse-open-opacity);
2188
- transform:var(--tds-sidenav-collapse-open-transform);
2189
- transition:var(--tds-sidenav-collapse-transition-enter);
2190
- will-change:transform;
2143
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2144
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2145
+ }
2146
+
2147
+ .tds-toggle-switch label{
2148
+ display:inline-flex;
2149
+ grid-area:1 / 2;
2150
+ padding-inline-start:var(--t-spacing-1);
2151
+ margin-top:-.09375em;
2152
+ font-size:var(--tds-toggle-switch-font-size);
2153
+ font-weight:var(--t-font-weight-normal);
2154
+ line-height:var(--tds-toggle-switch-line-height);
2155
+ color:var(--tds-toggle-switch-label-color);
2156
+ cursor:var(--tds-toggle-switch-cursor);
2191
2157
  }
2192
2158
 
2193
- .tds-sidenav-scroll-container{
2194
- --webkit-overflow-scrolling:touch;
2195
- display:block;
2196
- width:100%;
2197
- height:-moz-fit-content;
2198
- height:fit-content;
2199
- padding:var(--t-spacing-2);
2200
- overflow-y:auto;
2159
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2160
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2201
2161
  }
2202
2162
 
2203
- .tds-sidenav-item :is(a, button) :is(.prefix){
2204
- display:none;
2163
+ .tds-toggle-switch:has(input:checked){
2164
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2165
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2205
2166
  }
2206
- @supports selector(:popover-open){
2207
- .tds-sidenav-collapse:popover-open{
2208
- display:flex;
2209
- }
2210
2167
 
2211
- .tds-sidenav-collapse:not(:popover-open){
2212
- opacity:var(--tds-sidenav-collapse-closed-opacity);
2213
- transition:var(--tds-sidenav-collapse-transition-exit);
2168
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2169
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2214
2170
  }
2215
2171
 
2216
- @starting-style{
2217
- .tds-sidenav-collapse:popover-open{
2218
- opacity:var(--tds-sidenav-collapse-closed-opacity);
2219
- transform:var(--tds-sidenav-collapse-closed-transform);
2220
- }
2221
- }
2172
+ .tds-toggle-switch:has(input:disabled){
2173
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2174
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2175
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2176
+ --tds-toggle-switch-cursor:not-allowed;
2222
2177
  }
2223
- @supports not selector(:popover-open){
2224
- .tds-sidenav-collapse.\:popover-open{
2225
- display:flex;
2226
- }
2227
2178
 
2228
- .tds-sidenav-collapse:not(.\:popover-open){
2229
- opacity:var(--tds-sidenav-collapse-closed-opacity);
2230
- transition:var(--tds-sidenav-collapse-transition-exit);
2231
- }
2232
- }
2179
+ .tds-toggle-switch-track{
2180
+ position:relative;
2181
+ flex-shrink:0;
2182
+ width:var(--tds-toggle-switch-track-width);
2183
+ height:var(--tds-toggle-switch-track-height);
2184
+ background-color:var(--tds-toggle-switch-track-background-color);
2185
+ border-radius:var(--t-border-radius-round);
2186
+ transition:var(--tds-toggle-switch-track-transition);
2233
2187
  }
2234
2188
 
2235
- @media (min-width: 720px){
2236
- .tds-sidenav-responsive-header{
2237
- display:none;
2189
+ .tds-toggle-switch-track::before{
2190
+ position:absolute;
2191
+ top:var(--t-spacing-fourth);
2192
+ left:var(--t-spacing-fourth);
2193
+ width:var(--tds-toggle-switch-thumb-size);
2194
+ height:var(--tds-toggle-switch-thumb-size);
2195
+ content:"";
2196
+ background-color:#fff;
2197
+ border-radius:var(--t-border-radius-round);
2198
+ transform:var(--tds-toggle-switch-thumb-transform);
2199
+ transition:var(--tds-toggle-switch-thumb-transition);
2238
2200
  }
2201
+
2202
+ @media (prefers-reduced-motion: reduce){
2203
+
2204
+ .tds-toggle-switch-track{
2205
+ --tds-toggle-switch-track-transition:none;
2206
+ --tds-toggle-switch-thumb-transition:none;
2239
2207
  }
2208
+ }
2240
2209
 
2241
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
2242
- display:none;
2243
- }
2210
+ .tds-toggle-switch-description{
2211
+ display:flex;
2212
+ grid-area:2 / 2;
2213
+ align-items:flex-start;
2214
+ padding-inline-start:var(--t-spacing-1);
2215
+ margin:0;
2216
+ font-size:var(--tds-toggle-switch-description-font-size);
2217
+ line-height:var(--tds-toggle-switch-description-line-height);
2218
+ color:var(--tds-toggle-switch-description-color);
2219
+ cursor:text;
2220
+ }
2244
2221
 
2245
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
2246
- display:block;
2247
- }
2222
+ .tds-toggle-switch--sm{
2223
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
2224
+ --tds-toggle-switch-line-height:1.35;
2225
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
2226
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2227
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2228
+ --tds-toggle-switch-description-line-height:1.3;
2229
+ }
2248
2230
 
2249
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2250
- display:flex;
2251
- flex-direction:column;
2252
- }
2231
+ .tds-toggle-switch--hide-label{
2232
+ --tds-toggle-switch-display:inline-flex;
2233
+ }
2253
2234
 
2235
+ .tds-button-group{
2236
+ display:inline-flex;
2237
+ }
2238
+ .tds-button-group > .tds-btn{
2239
+ --tds-button-group-item-z-index:1;
2254
2240
 
2255
- :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{
2256
- -webkit-appearance:none;
2257
- appearance:none;
2241
+ position:relative;
2242
+ z-index:var(--tds-button-group-item-z-index);
2243
+ border-radius:0;
2244
+ }
2245
+ :is(.tds-button-group > .tds-btn):not(:first-child){
2246
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
2247
+ }
2248
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
2249
+ position:absolute;
2250
+ inset-block:calc(var(--tds-btn-border-width) * -1);
2251
+ width:var(--tds-btn-border-width);
2252
+ pointer-events:none;
2253
+ content:"";
2254
+ background-color:var(--t-border-color-white);
2255
+ }
2256
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
2257
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
2258
+ }
2259
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
2260
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
2261
+ }
2262
+ :is(.tds-button-group > .tds-btn):hover{
2263
+ --tds-button-group-item-z-index:2;
2258
2264
  }
2259
-
2260
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
2261
- inline-size:1em;
2262
- block-size:2em;
2265
+ :is(.tds-button-group > .tds-btn):focus-visible{
2266
+ --tds-button-group-item-z-index:5;
2263
2267
  }
2264
- @supports (field-sizing: content){
2265
- .tds-input--auto-width{
2266
- inline-size:-moz-fit-content;
2267
- inline-size:fit-content;
2268
- min-inline-size:min(100%, 122px);
2268
+ .tds-button-group > .tds-btn:first-child{
2269
+ border-start-start-radius:var(--tds-btn-border-radius);
2270
+ border-end-start-radius:var(--tds-btn-border-radius);
2269
2271
  }
2270
-
2271
- .tds-input--auto-width input{
2272
- field-sizing:content;
2273
- inline-size:auto;
2272
+ .tds-button-group > .tds-btn:last-child{
2273
+ border-start-end-radius:var(--tds-btn-border-radius);
2274
+ border-end-end-radius:var(--tds-btn-border-radius);
2274
2275
  }
2275
- }
2276
2276
 
2277
2277
  .tds-input{
2278
2278
  --tds-input-border-color:var(--t-form-border-color);
@@ -3915,249 +3915,83 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3915
3915
  [data-flex-grow-xl="1"]{ flex-grow:1; }
3916
3916
 
3917
3917
  [data-flex-shrink-xl="0"]{ flex-shrink:0; }
3918
- [data-flex-shrink-xl="1"]{ flex-shrink:1; }
3919
-
3920
- [data-flex-gap-xl="0"]{ gap:0; }
3921
- [data-flex-gap-xl="0.25"]{ gap:var(--t-spacing-fourth); }
3922
- [data-flex-gap-xl="0.5"]{ gap:var(--t-spacing-half); }
3923
- [data-flex-gap-xl="1"]{ gap:var(--t-spacing-1); }
3924
- [data-flex-gap-xl="1.5"]{ gap:var(--t-spacing-1-half); }
3925
- [data-flex-gap-xl="2"]{ gap:var(--t-spacing-2); }
3926
- [data-flex-gap-xl="3"]{ gap:var(--t-spacing-3); }
3927
- [data-flex-gap-xl="4"]{ gap:var(--t-spacing-4); }
3928
- [data-flex-gap-xl="5"]{ gap:var(--t-spacing-5); }
3929
- [data-flex-gap-xl="6"]{ gap:var(--t-spacing-6); }
3930
- [data-flex-gap-xl="7"]{ gap:var(--t-spacing-7); }
3931
-
3932
- [data-flex-row-gap-xl="0"]{ row-gap:0; }
3933
- [data-flex-row-gap-xl="0.25"]{ row-gap:var(--t-spacing-fourth); }
3934
- [data-flex-row-gap-xl="0.5"]{ row-gap:var(--t-spacing-half); }
3935
- [data-flex-row-gap-xl="1"]{ row-gap:var(--t-spacing-1); }
3936
- [data-flex-row-gap-xl="1.5"]{ row-gap:var(--t-spacing-1-half); }
3937
- [data-flex-row-gap-xl="2"]{ row-gap:var(--t-spacing-2); }
3938
- [data-flex-row-gap-xl="3"]{ row-gap:var(--t-spacing-3); }
3939
- [data-flex-row-gap-xl="4"]{ row-gap:var(--t-spacing-4); }
3940
- [data-flex-row-gap-xl="5"]{ row-gap:var(--t-spacing-5); }
3941
- [data-flex-row-gap-xl="6"]{ row-gap:var(--t-spacing-6); }
3942
- [data-flex-row-gap-xl="7"]{ row-gap:var(--t-spacing-7); }
3943
-
3944
- [data-flex-column-gap-xl="0"]{ -moz-column-gap:0; column-gap:0; }
3945
- [data-flex-column-gap-xl="0.25"]{ -moz-column-gap:var(--t-spacing-fourth); column-gap:var(--t-spacing-fourth); }
3946
- [data-flex-column-gap-xl="0.5"]{ -moz-column-gap:var(--t-spacing-half); column-gap:var(--t-spacing-half); }
3947
- [data-flex-column-gap-xl="1"]{ -moz-column-gap:var(--t-spacing-1); column-gap:var(--t-spacing-1); }
3948
- [data-flex-column-gap-xl="1.5"]{ -moz-column-gap:var(--t-spacing-1-half); column-gap:var(--t-spacing-1-half); }
3949
- [data-flex-column-gap-xl="2"]{ -moz-column-gap:var(--t-spacing-2); column-gap:var(--t-spacing-2); }
3950
- [data-flex-column-gap-xl="3"]{ -moz-column-gap:var(--t-spacing-3); column-gap:var(--t-spacing-3); }
3951
- [data-flex-column-gap-xl="4"]{ -moz-column-gap:var(--t-spacing-4); column-gap:var(--t-spacing-4); }
3952
- [data-flex-column-gap-xl="5"]{ -moz-column-gap:var(--t-spacing-5); column-gap:var(--t-spacing-5); }
3953
- [data-flex-column-gap-xl="6"]{ -moz-column-gap:var(--t-spacing-6); column-gap:var(--t-spacing-6); }
3954
- [data-flex-column-gap-xl="7"]{ -moz-column-gap:var(--t-spacing-7); column-gap:var(--t-spacing-7); }
3955
-
3956
- [data-flex-basis-xl="auto"]{ flex-basis:auto; }
3957
- [data-flex-basis-xl="0"]{ flex-basis:0; }
3958
- [data-flex-basis-xl="100%"]{ flex-basis:100%; }
3959
-
3960
- [data-padding-xl="0"]{ padding:0; }
3961
- [data-padding-xl="0.25"]{ padding:var(--t-spacing-fourth); }
3962
- [data-padding-xl="0.5"]{ padding:var(--t-spacing-half); }
3963
- [data-padding-xl="1"]{ padding:var(--t-spacing-1); }
3964
- [data-padding-xl="1.5"]{ padding:var(--t-spacing-1-half); }
3965
- [data-padding-xl="2"]{ padding:var(--t-spacing-2); }
3966
- [data-padding-xl="3"]{ padding:var(--t-spacing-3); }
3967
- [data-padding-xl="4"]{ padding:var(--t-spacing-4); }
3968
- [data-padding-xl="5"]{ padding:var(--t-spacing-5); }
3969
- [data-padding-xl="6"]{ padding:var(--t-spacing-6); }
3970
- [data-padding-xl="7"]{ padding:var(--t-spacing-7); }
3971
-
3972
- [data-padding-block-xl="0"]{ padding-block:0; }
3973
- [data-padding-block-xl="0.25"]{ padding-block:var(--t-spacing-fourth); }
3974
- [data-padding-block-xl="0.5"]{ padding-block:var(--t-spacing-half); }
3975
- [data-padding-block-xl="1"]{ padding-block:var(--t-spacing-1); }
3976
- [data-padding-block-xl="1.5"]{ padding-block:var(--t-spacing-1-half); }
3977
- [data-padding-block-xl="2"]{ padding-block:var(--t-spacing-2); }
3978
- [data-padding-block-xl="3"]{ padding-block:var(--t-spacing-3); }
3979
- [data-padding-block-xl="4"]{ padding-block:var(--t-spacing-4); }
3980
- [data-padding-block-xl="5"]{ padding-block:var(--t-spacing-5); }
3981
- [data-padding-block-xl="6"]{ padding-block:var(--t-spacing-6); }
3982
- [data-padding-block-xl="7"]{ padding-block:var(--t-spacing-7); }
3983
-
3984
- [data-padding-inline-xl="0"]{ padding-inline:0; }
3985
- [data-padding-inline-xl="0.25"]{ padding-inline:var(--t-spacing-fourth); }
3986
- [data-padding-inline-xl="0.5"]{ padding-inline:var(--t-spacing-half); }
3987
- [data-padding-inline-xl="1"]{ padding-inline:var(--t-spacing-1); }
3988
- [data-padding-inline-xl="1.5"]{ padding-inline:var(--t-spacing-1-half); }
3989
- [data-padding-inline-xl="2"]{ padding-inline:var(--t-spacing-2); }
3990
- [data-padding-inline-xl="3"]{ padding-inline:var(--t-spacing-3); }
3991
- [data-padding-inline-xl="4"]{ padding-inline:var(--t-spacing-4); }
3992
- [data-padding-inline-xl="5"]{ padding-inline:var(--t-spacing-5); }
3993
- [data-padding-inline-xl="6"]{ padding-inline:var(--t-spacing-6); }
3994
- [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
3995
- }
3996
-
3997
- .tds-popover{
3998
- max-inline-size:24rem;
3999
- overflow:auto;
4000
- overscroll-behavior:none;
4001
- outline:0;
4002
- scrollbar-color:#0004 var(--t-surface-color-card);
4003
- scrollbar-width:thin;
4004
- background:var(--t-surface-color-card);
4005
- background-clip:padding-box;
4006
- border:1px solid var(--t-border-color);
4007
- border-radius:var(--t-border-radius);
4008
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4009
- }
4010
-
4011
- @media (prefers-reduced-motion: no-preference){
4012
- .tds-popover[data-entering]{
4013
- animation:tds-popover var(--t-duration-300) var(--t-ease-out);
4014
- }
4015
-
4016
- .tds-popover[data-exiting]{
4017
- animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
4018
- }
4019
-
4020
- .tds-popover[data-entering],.tds-popover[data-exiting]{
4021
- will-change:opacity, transform;
4022
- }
4023
-
4024
- @keyframes tds-popover{
4025
- from{
4026
- opacity:0;
4027
- transform:translateY(-8px);
4028
- }
4029
- }
4030
- }
4031
-
4032
- .tds-popover-content{
4033
- display:flex;
4034
- flex-direction:column;
4035
- padding:var(--t-spacing-1);
4036
- outline:0;
4037
- }
4038
-
4039
- .tds-segmented-control{
4040
- --tds-segmented-control-font-size:var(--t-font-size-md);
4041
- --tds-segmented-control-padding:var(--t-spacing-half);
4042
- --tds-segmented-control-padding-inline:var(--t-spacing-1-half);
4043
- --tds-segmented-control-icon-size:.66666667lh;
4044
- --tds-segmented-control-border-radius:var(--t-border-radius-md);
4045
- --tds-segmented-control-max-width:280px;
4046
- --tds-segmented-control-min-height:var(--t-container-size-md);
4047
- --tds-segmented-control-padding-inline-icon-only:calc((var(--tds-segmented-control-min-height) - var(--tds-segmented-control-icon-size)) / 2);
4048
- --tds-segmented-control-track-gap:var(--tds-segmented-control-padding);
4049
- --tds-segmented-control-width:fit-content;
4050
-
4051
- display:flex;
4052
- flex-direction:column;
4053
- gap:var(--t-spacing-half);
4054
- align-items:flex-start;
4055
- width:var(--tds-segmented-control-width);
4056
- }
4057
-
4058
- .tds-segmented-control--sm{
4059
- --tds-segmented-control-font-size:var(--t-font-size-sm);
4060
- --tds-segmented-control-padding-inline:7px;
4061
- --tds-segmented-control-min-height:var(--t-container-size-sm);
4062
- }
4063
-
4064
- .tds-segmented-control--full-width{
4065
- --tds-segmented-control-width:100%;
4066
- --tds-segmented-control-max-width:none;
4067
- }
4068
-
4069
- .tds-segmented-control--full-width .tds-segmented-control-segment{
4070
- flex:1 1 0;
4071
- }
4072
-
4073
- .tds-segmented-control-label{
4074
- font-size:var(--tds-segmented-control-font-size);
4075
- font-weight:var(--t-font-weight-normal);
4076
- color:var(--t-text-color-headline);
4077
- }
4078
-
4079
- .tds-segmented-control-label--hidden{
4080
- position:absolute;
4081
- width:1px;
4082
- height:1px;
4083
- overflow:hidden;
4084
- white-space:nowrap;
4085
- clip-path:inset(50%);
4086
- }
4087
-
4088
- .tds-segmented-control-track{
4089
- display:inline-flex;
4090
- gap:var(--tds-segmented-control-track-gap);
4091
- width:var(--tds-segmented-control-width);
4092
- padding:var(--tds-segmented-control-padding);
4093
- background-color:var(--t-form-background-color);
4094
- border:1px solid var(--t-border-color);
4095
- border-radius:var(--tds-segmented-control-border-radius);
4096
- }
4097
-
4098
- .tds-segmented-control-segment{
4099
- --tds-segmented-control-color:var(--t-text-color-status-neutral);
4100
- --tds-segmented-control-background-color:transparent;
4101
-
4102
- display:inline-flex;
4103
- gap:var(--t-spacing-1);
4104
- align-items:center;
4105
- justify-content:center;
4106
- max-width:var(--tds-segmented-control-max-width);
4107
- min-height:var(--tds-segmented-control-min-height);
4108
- padding-block:calc((var(--tds-segmented-control-min-height) - 1lh) / 2);
4109
- padding-inline:var(--tds-segmented-control-padding-inline);
4110
- font:inherit;
4111
- font-size:var(--tds-segmented-control-font-size);
4112
- color:var(--tds-segmented-control-color);
4113
- text-align:center;
4114
- cursor:pointer;
4115
- -webkit-user-select:none;
4116
- -moz-user-select:none;
4117
- user-select:none;
4118
- background-color:var(--tds-segmented-control-background-color);
4119
- border:0;
4120
- border-radius:var(--t-border-radius-sm);
4121
- transition-timing-function:var(--t-ease-in-out);
4122
- transition-duration:var(--t-duration-200);
4123
- transition-property:color, background-color;
4124
- }
4125
-
4126
- .tds-segmented-control-segment.tds-segmented-control-segment--icon-only{
4127
- padding-inline:var(--tds-segmented-control-padding-inline-icon-only);
4128
- }
4129
-
4130
- .tds-segmented-control-segment .symbol{
4131
- display:block;
4132
- flex-shrink:0;
4133
- width:var(--tds-segmented-control-icon-size);
4134
- height:var(--tds-segmented-control-icon-size);
4135
- }
3918
+ [data-flex-shrink-xl="1"]{ flex-shrink:1; }
4136
3919
 
4137
- .tds-segmented-control-segment:focus-visible{
4138
- outline:var(--t-focus-ring-outline);
4139
- outline-offset:var(--t-focus-ring-offset);
4140
- }
3920
+ [data-flex-gap-xl="0"]{ gap:0; }
3921
+ [data-flex-gap-xl="0.25"]{ gap:var(--t-spacing-fourth); }
3922
+ [data-flex-gap-xl="0.5"]{ gap:var(--t-spacing-half); }
3923
+ [data-flex-gap-xl="1"]{ gap:var(--t-spacing-1); }
3924
+ [data-flex-gap-xl="1.5"]{ gap:var(--t-spacing-1-half); }
3925
+ [data-flex-gap-xl="2"]{ gap:var(--t-spacing-2); }
3926
+ [data-flex-gap-xl="3"]{ gap:var(--t-spacing-3); }
3927
+ [data-flex-gap-xl="4"]{ gap:var(--t-spacing-4); }
3928
+ [data-flex-gap-xl="5"]{ gap:var(--t-spacing-5); }
3929
+ [data-flex-gap-xl="6"]{ gap:var(--t-spacing-6); }
3930
+ [data-flex-gap-xl="7"]{ gap:var(--t-spacing-7); }
4141
3931
 
4142
- .tds-segmented-control-segment[aria-checked="true"]{
4143
- --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-checked);
4144
- --tds-segmented-control-color:var(--tds-segmented-control-color-checked);
3932
+ [data-flex-row-gap-xl="0"]{ row-gap:0; }
3933
+ [data-flex-row-gap-xl="0.25"]{ row-gap:var(--t-spacing-fourth); }
3934
+ [data-flex-row-gap-xl="0.5"]{ row-gap:var(--t-spacing-half); }
3935
+ [data-flex-row-gap-xl="1"]{ row-gap:var(--t-spacing-1); }
3936
+ [data-flex-row-gap-xl="1.5"]{ row-gap:var(--t-spacing-1-half); }
3937
+ [data-flex-row-gap-xl="2"]{ row-gap:var(--t-spacing-2); }
3938
+ [data-flex-row-gap-xl="3"]{ row-gap:var(--t-spacing-3); }
3939
+ [data-flex-row-gap-xl="4"]{ row-gap:var(--t-spacing-4); }
3940
+ [data-flex-row-gap-xl="5"]{ row-gap:var(--t-spacing-5); }
3941
+ [data-flex-row-gap-xl="6"]{ row-gap:var(--t-spacing-6); }
3942
+ [data-flex-row-gap-xl="7"]{ row-gap:var(--t-spacing-7); }
4145
3943
 
4146
- cursor:default;
4147
- }
3944
+ [data-flex-column-gap-xl="0"]{ -moz-column-gap:0; column-gap:0; }
3945
+ [data-flex-column-gap-xl="0.25"]{ -moz-column-gap:var(--t-spacing-fourth); column-gap:var(--t-spacing-fourth); }
3946
+ [data-flex-column-gap-xl="0.5"]{ -moz-column-gap:var(--t-spacing-half); column-gap:var(--t-spacing-half); }
3947
+ [data-flex-column-gap-xl="1"]{ -moz-column-gap:var(--t-spacing-1); column-gap:var(--t-spacing-1); }
3948
+ [data-flex-column-gap-xl="1.5"]{ -moz-column-gap:var(--t-spacing-1-half); column-gap:var(--t-spacing-1-half); }
3949
+ [data-flex-column-gap-xl="2"]{ -moz-column-gap:var(--t-spacing-2); column-gap:var(--t-spacing-2); }
3950
+ [data-flex-column-gap-xl="3"]{ -moz-column-gap:var(--t-spacing-3); column-gap:var(--t-spacing-3); }
3951
+ [data-flex-column-gap-xl="4"]{ -moz-column-gap:var(--t-spacing-4); column-gap:var(--t-spacing-4); }
3952
+ [data-flex-column-gap-xl="5"]{ -moz-column-gap:var(--t-spacing-5); column-gap:var(--t-spacing-5); }
3953
+ [data-flex-column-gap-xl="6"]{ -moz-column-gap:var(--t-spacing-6); column-gap:var(--t-spacing-6); }
3954
+ [data-flex-column-gap-xl="7"]{ -moz-column-gap:var(--t-spacing-7); column-gap:var(--t-spacing-7); }
4148
3955
 
4149
- .tds-segmented-control-segment:disabled{
4150
- --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-disabled);
4151
- --tds-segmented-control-color:var(--tds-segmented-control-color-disabled);
3956
+ [data-flex-basis-xl="auto"]{ flex-basis:auto; }
3957
+ [data-flex-basis-xl="0"]{ flex-basis:0; }
3958
+ [data-flex-basis-xl="100%"]{ flex-basis:100%; }
4152
3959
 
4153
- pointer-events:none;
4154
- }
3960
+ [data-padding-xl="0"]{ padding:0; }
3961
+ [data-padding-xl="0.25"]{ padding:var(--t-spacing-fourth); }
3962
+ [data-padding-xl="0.5"]{ padding:var(--t-spacing-half); }
3963
+ [data-padding-xl="1"]{ padding:var(--t-spacing-1); }
3964
+ [data-padding-xl="1.5"]{ padding:var(--t-spacing-1-half); }
3965
+ [data-padding-xl="2"]{ padding:var(--t-spacing-2); }
3966
+ [data-padding-xl="3"]{ padding:var(--t-spacing-3); }
3967
+ [data-padding-xl="4"]{ padding:var(--t-spacing-4); }
3968
+ [data-padding-xl="5"]{ padding:var(--t-spacing-5); }
3969
+ [data-padding-xl="6"]{ padding:var(--t-spacing-6); }
3970
+ [data-padding-xl="7"]{ padding:var(--t-spacing-7); }
4155
3971
 
4156
- .tds-segmented-control-segment--interaction-subtle{
4157
- --tds-segmented-control-color-checked:var(--t-text-color-interaction);
4158
- --tds-segmented-control-background-color-checked:var(--t-fill-color-button-interaction-outline-active);
4159
- --tds-segmented-control-color-disabled:var(--t-text-color-disabled);
4160
- --tds-segmented-control-background-color-disabled:transparent;
3972
+ [data-padding-block-xl="0"]{ padding-block:0; }
3973
+ [data-padding-block-xl="0.25"]{ padding-block:var(--t-spacing-fourth); }
3974
+ [data-padding-block-xl="0.5"]{ padding-block:var(--t-spacing-half); }
3975
+ [data-padding-block-xl="1"]{ padding-block:var(--t-spacing-1); }
3976
+ [data-padding-block-xl="1.5"]{ padding-block:var(--t-spacing-1-half); }
3977
+ [data-padding-block-xl="2"]{ padding-block:var(--t-spacing-2); }
3978
+ [data-padding-block-xl="3"]{ padding-block:var(--t-spacing-3); }
3979
+ [data-padding-block-xl="4"]{ padding-block:var(--t-spacing-4); }
3980
+ [data-padding-block-xl="5"]{ padding-block:var(--t-spacing-5); }
3981
+ [data-padding-block-xl="6"]{ padding-block:var(--t-spacing-6); }
3982
+ [data-padding-block-xl="7"]{ padding-block:var(--t-spacing-7); }
3983
+
3984
+ [data-padding-inline-xl="0"]{ padding-inline:0; }
3985
+ [data-padding-inline-xl="0.25"]{ padding-inline:var(--t-spacing-fourth); }
3986
+ [data-padding-inline-xl="0.5"]{ padding-inline:var(--t-spacing-half); }
3987
+ [data-padding-inline-xl="1"]{ padding-inline:var(--t-spacing-1); }
3988
+ [data-padding-inline-xl="1.5"]{ padding-inline:var(--t-spacing-1-half); }
3989
+ [data-padding-inline-xl="2"]{ padding-inline:var(--t-spacing-2); }
3990
+ [data-padding-inline-xl="3"]{ padding-inline:var(--t-spacing-3); }
3991
+ [data-padding-inline-xl="4"]{ padding-inline:var(--t-spacing-4); }
3992
+ [data-padding-inline-xl="5"]{ padding-inline:var(--t-spacing-5); }
3993
+ [data-padding-inline-xl="6"]{ padding-inline:var(--t-spacing-6); }
3994
+ [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
4161
3995
  }
4162
3996
 
4163
3997
  .tds-data-table{
@@ -4581,6 +4415,172 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4581
4415
  max-block-size:inherit;
4582
4416
  }
4583
4417
 
4418
+ .tds-popover{
4419
+ max-inline-size:24rem;
4420
+ overflow:auto;
4421
+ overscroll-behavior:none;
4422
+ outline:0;
4423
+ scrollbar-color:#0004 var(--t-surface-color-card);
4424
+ scrollbar-width:thin;
4425
+ background:var(--t-surface-color-card);
4426
+ background-clip:padding-box;
4427
+ border:1px solid var(--t-border-color);
4428
+ border-radius:var(--t-border-radius);
4429
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4430
+ }
4431
+
4432
+ @media (prefers-reduced-motion: no-preference){
4433
+ .tds-popover[data-entering]{
4434
+ animation:tds-popover var(--t-duration-300) var(--t-ease-out);
4435
+ }
4436
+
4437
+ .tds-popover[data-exiting]{
4438
+ animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
4439
+ }
4440
+
4441
+ .tds-popover[data-entering],.tds-popover[data-exiting]{
4442
+ will-change:opacity, transform;
4443
+ }
4444
+
4445
+ @keyframes tds-popover{
4446
+ from{
4447
+ opacity:0;
4448
+ transform:translateY(-8px);
4449
+ }
4450
+ }
4451
+ }
4452
+
4453
+ .tds-popover-content{
4454
+ display:flex;
4455
+ flex-direction:column;
4456
+ padding:var(--t-spacing-1);
4457
+ outline:0;
4458
+ }
4459
+
4460
+ .tds-segmented-control{
4461
+ --tds-segmented-control-font-size:var(--t-font-size-md);
4462
+ --tds-segmented-control-padding:var(--t-spacing-half);
4463
+ --tds-segmented-control-padding-inline:var(--t-spacing-1-half);
4464
+ --tds-segmented-control-icon-size:.66666667lh;
4465
+ --tds-segmented-control-border-radius:var(--t-border-radius-md);
4466
+ --tds-segmented-control-max-width:280px;
4467
+ --tds-segmented-control-min-height:var(--t-container-size-md);
4468
+ --tds-segmented-control-padding-inline-icon-only:calc((var(--tds-segmented-control-min-height) - var(--tds-segmented-control-icon-size)) / 2);
4469
+ --tds-segmented-control-track-gap:var(--tds-segmented-control-padding);
4470
+ --tds-segmented-control-width:fit-content;
4471
+
4472
+ display:flex;
4473
+ flex-direction:column;
4474
+ gap:var(--t-spacing-half);
4475
+ align-items:flex-start;
4476
+ width:var(--tds-segmented-control-width);
4477
+ }
4478
+
4479
+ .tds-segmented-control--sm{
4480
+ --tds-segmented-control-font-size:var(--t-font-size-sm);
4481
+ --tds-segmented-control-padding-inline:7px;
4482
+ --tds-segmented-control-min-height:var(--t-container-size-sm);
4483
+ }
4484
+
4485
+ .tds-segmented-control--full-width{
4486
+ --tds-segmented-control-width:100%;
4487
+ --tds-segmented-control-max-width:none;
4488
+ }
4489
+
4490
+ .tds-segmented-control--full-width .tds-segmented-control-segment{
4491
+ flex:1 1 0;
4492
+ }
4493
+
4494
+ .tds-segmented-control-label{
4495
+ font-size:var(--tds-segmented-control-font-size);
4496
+ font-weight:var(--t-font-weight-normal);
4497
+ color:var(--t-text-color-headline);
4498
+ }
4499
+
4500
+ .tds-segmented-control-label--hidden{
4501
+ position:absolute;
4502
+ width:1px;
4503
+ height:1px;
4504
+ overflow:hidden;
4505
+ white-space:nowrap;
4506
+ clip-path:inset(50%);
4507
+ }
4508
+
4509
+ .tds-segmented-control-track{
4510
+ display:inline-flex;
4511
+ gap:var(--tds-segmented-control-track-gap);
4512
+ width:var(--tds-segmented-control-width);
4513
+ padding:var(--tds-segmented-control-padding);
4514
+ background-color:var(--t-form-background-color);
4515
+ border:1px solid var(--t-border-color);
4516
+ border-radius:var(--tds-segmented-control-border-radius);
4517
+ }
4518
+
4519
+ .tds-segmented-control-segment{
4520
+ --tds-segmented-control-color:var(--t-text-color-status-neutral);
4521
+ --tds-segmented-control-background-color:transparent;
4522
+
4523
+ display:inline-flex;
4524
+ gap:var(--t-spacing-1);
4525
+ align-items:center;
4526
+ justify-content:center;
4527
+ max-width:var(--tds-segmented-control-max-width);
4528
+ min-height:var(--tds-segmented-control-min-height);
4529
+ padding-block:calc((var(--tds-segmented-control-min-height) - 1lh) / 2);
4530
+ padding-inline:var(--tds-segmented-control-padding-inline);
4531
+ font:inherit;
4532
+ font-size:var(--tds-segmented-control-font-size);
4533
+ color:var(--tds-segmented-control-color);
4534
+ text-align:center;
4535
+ cursor:pointer;
4536
+ -webkit-user-select:none;
4537
+ -moz-user-select:none;
4538
+ user-select:none;
4539
+ background-color:var(--tds-segmented-control-background-color);
4540
+ border:0;
4541
+ border-radius:var(--t-border-radius-sm);
4542
+ transition-timing-function:var(--t-ease-in-out);
4543
+ transition-duration:var(--t-duration-200);
4544
+ transition-property:color, background-color;
4545
+ }
4546
+
4547
+ .tds-segmented-control-segment.tds-segmented-control-segment--icon-only{
4548
+ padding-inline:var(--tds-segmented-control-padding-inline-icon-only);
4549
+ }
4550
+
4551
+ .tds-segmented-control-segment .symbol{
4552
+ display:block;
4553
+ flex-shrink:0;
4554
+ width:var(--tds-segmented-control-icon-size);
4555
+ height:var(--tds-segmented-control-icon-size);
4556
+ }
4557
+
4558
+ .tds-segmented-control-segment:focus-visible{
4559
+ outline:var(--t-focus-ring-outline);
4560
+ outline-offset:var(--t-focus-ring-offset);
4561
+ }
4562
+
4563
+ .tds-segmented-control-segment[aria-checked="true"]{
4564
+ --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-checked);
4565
+ --tds-segmented-control-color:var(--tds-segmented-control-color-checked);
4566
+
4567
+ cursor:default;
4568
+ }
4569
+
4570
+ .tds-segmented-control-segment:disabled{
4571
+ --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-disabled);
4572
+ --tds-segmented-control-color:var(--tds-segmented-control-color-disabled);
4573
+
4574
+ pointer-events:none;
4575
+ }
4576
+
4577
+ .tds-segmented-control-segment--interaction-subtle{
4578
+ --tds-segmented-control-color-checked:var(--t-text-color-interaction);
4579
+ --tds-segmented-control-background-color-checked:var(--t-fill-color-button-interaction-outline-active);
4580
+ --tds-segmented-control-color-disabled:var(--t-text-color-disabled);
4581
+ --tds-segmented-control-background-color-disabled:transparent;
4582
+ }
4583
+
4584
4584
  .tds-pagination{
4585
4585
  --tds-pagination-background-color:var(--t-surface-color-canvas);
4586
4586
  --tds-pagination-page-background-color-hover:var(--t-fill-color-neutral-100);