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

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