@planningcenter/tapestry 3.8.1-rc.4 → 4.0.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/components/DataTable/DataTable.d.ts +4 -2
  2. package/dist/components/DataTable/DataTable.d.ts.map +1 -1
  3. package/dist/components/DataTable/DataTable.js +19 -13
  4. package/dist/components/DataTable/DataTable.js.map +1 -1
  5. package/dist/reactRender.css +1156 -1122
  6. package/dist/reactRender.css.map +1 -1
  7. package/dist/reactRenderLegacy.css +1156 -1122
  8. package/dist/reactRenderLegacy.css.map +1 -1
  9. package/dist/unstable.css +34 -0
  10. package/dist/unstable.css.map +1 -1
  11. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -766,645 +766,227 @@
766
766
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
767
767
  }
768
768
 
769
- @layer t-critical{
770
- tds-page-header:not(.hydrated){
771
- display:none;
772
- }
773
- }
774
-
775
- @layer t-component{
776
- .tds-page-header{
777
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
778
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
779
- --tds-page-header-color:var(--t-text-color);
780
- --tds-page-header-bottom-border-color:transparent;
781
- --tds-page-header-headline-color:var(--t-text-color-headline);
782
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
783
- --tds-page-header-padding-x:var(--t-spacing-2);
784
- --tds-page-header-padding-y:var(--t-spacing-2);
785
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
786
- --tds-page-header-nav-gap:var(--t-spacing-1);
787
- --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
788
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
789
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
790
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
791
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
792
- --tds-page-header-nav-item-border-width:1px;
793
-
794
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
795
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
796
-
797
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
798
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
799
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
800
-
801
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
802
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
803
-
804
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
805
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
806
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
807
-
808
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
809
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
810
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
811
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
812
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
813
- }
814
-
815
- .tds-page-header--profile{
816
- --tds-page-header-padding-y:20px;
817
- }
818
-
819
- @supports (color: light-dark(#fff, #000)){
820
- .tds-page-header{
821
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
822
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
823
- }
824
- }
825
-
826
- @media (min-width: 600px){
827
- .tds-page-header{
828
- --tds-page-header-background-color:var(--t-surface-color-canvas);
829
- --tds-page-header-color:var(--t-text-color-secondary);
830
- --tds-page-header-bottom-border-color:var(--t-border-color);
831
- --tds-page-header-padding-x:var(--t-spacing-3);
832
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
833
- --tds-page-header-nav-gap:var(--t-spacing-half);
834
- --tds-page-header-nav-background:transparent;
835
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
836
- --tds-page-header-nav-item-border-width:1px;
837
- --tds-page-header-nav-item-color:var(--t-text-color);
838
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
839
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
840
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
841
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
842
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
843
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
844
- }
845
- }
846
- }
847
-
848
- .tds-page-header{
849
- display:flex;
850
- flex-direction:column;
851
- padding-top:var(--tds-page-header-padding-y);
852
- color:var(--tds-page-header-color);
853
- background:var(--tds-page-header-background-color);
854
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
855
- }
856
-
857
- .tds-page-header:not(.has-nav){
858
- padding-bottom:var(--tds-page-header-padding-y);
859
- }
860
-
861
- .tds-page-header.inactive{
862
- background:var(--tds-page-header-background-color-inactive);
863
- }
864
-
865
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
866
- width:100%;
867
- }
868
-
869
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
870
- display:flex;
871
- flex-flow:row wrap;
872
- gap:var(--t-spacing-half) var(--t-spacing-1);
873
- align-items:flex-start;
874
- justify-content:flex-start;
875
- min-width:0;
876
- }
877
-
878
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
879
- display:flex;
880
- gap:var(--tds-page-header-nav-gap);
881
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
882
- margin:0 0 -1px;
883
- overflow:auto;
884
- list-style:none;
885
- background:var(--tds-page-header-nav-background);
886
- }
887
-
888
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
889
- position:relative;
890
- display:inline-flex;
891
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
892
- font-size:var(--t-font-size-sm);
893
- line-height:22px;
894
- color:var(--tds-page-header-nav-item-color);
895
- white-space:nowrap;
896
- text-decoration:none;
897
- -webkit-appearance:none;
898
- -moz-appearance:none;
899
- appearance:none;
900
- cursor:pointer;
901
- outline-offset:-2px;
902
- background-color:var(--tds-page-header-nav-item-background-color);
903
- background-clip:padding-box;
904
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
905
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
906
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
907
- }
908
-
909
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
910
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
911
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
912
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
913
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
914
- }
915
-
916
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
917
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
918
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
919
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
920
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
921
- }
922
-
923
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
924
- background-color:var(--tds-page-header-nav-item-background-color-active);
925
- border-color:var(--tds-page-header-nav-item-border-color-active);
926
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
927
- }
928
-
929
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
930
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
931
- color:var(--tds-page-header-nav-item-color-disabled);
932
- cursor:not-allowed;
933
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
934
- opacity:1;
935
- }
936
-
937
- @media (min-width: 600px){
938
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
939
- position:absolute;
940
- inset:auto -1px -1px;
941
- height:1px;
942
- pointer-events:none;
943
- content:"";
944
- background-color:var(--tds-page-header-bottom-border-color);
945
- }
946
- }
947
-
948
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
949
- position:relative;
950
- }
951
-
952
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
953
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
954
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
955
- }
956
-
957
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
958
- position:absolute;
959
- top:-5px;
960
- right:-2px;
961
- width:10px;
962
- height:10px;
963
- content:"";
964
- background:var(--tds-page-header-nav-item-indicator-color);
965
- border-radius:50%;
966
- }
967
-
968
- @media (prefers-reduced-motion: no-preference){
969
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
970
- animation:indicator-pulse 1.25s ease infinite;
971
- }
972
- }
973
-
974
- .tds-page-header__title-bar{
975
- display:flex;
976
- flex-direction:column;
977
- gap:var(--t-spacing-2) var(--t-spacing-1);
978
- align-items:flex-start;
979
- justify-content:space-between;
980
- padding:0 var(--tds-page-header-padding-x);
981
- }
982
-
983
- .tds-page-header--profile > .tds-page-header__title-bar{
984
- align-items:center;
985
- }
986
-
987
- .tds-page-header__primary{
988
- width:100%;
769
+ .tds-button-group{
770
+ display:inline-flex;
989
771
  }
772
+ .tds-button-group > .tds-btn{
773
+ --tds-button-group-item-z-index:1;
990
774
 
991
- .tds-page-header__primary h1{
992
- margin:0;
993
- font-size:var(--tds-page-header-headline-font-size);
994
- font-weight:var(--t-font-weight-normal);
995
- line-height:32px;
996
- color:var(--tds-page-header-headline-color);
997
- overflow-wrap:break-word;
998
- }
999
-
1000
- @media (min-width: 960px){
1001
- .tds-page-header__primary{
1002
- flex:1 1 max-content;
1003
- width:auto;
1004
- min-width:0;
1005
- max-width:100%;
1006
- }
1007
-
1008
- .tds-page-header__title-bar,
1009
- .tds-page-header--profile .tds-page-header__title-bar{
1010
- flex-flow:row nowrap;
1011
- row-gap:12px;
1012
- align-items:flex-start;
775
+ z-index:var(--tds-button-group-item-z-index);
776
+ border-radius:0;
1013
777
  }
1014
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1015
- width:auto;
778
+ :is(.tds-button-group > .tds-btn):not(:first-child){
779
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1016
780
  }
1017
-
1018
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1019
- justify-content:flex-end;
781
+ :is(.tds-button-group > .tds-btn):hover{
782
+ --tds-button-group-item-z-index:2;
1020
783
  }
1021
- }
1022
-
1023
- .tds-page-header-phone,
1024
- .tds-page-header-email{
1025
- color:var(--tds-page-header-color);
1026
- white-space:nowrap;
1027
- }
1028
-
1029
- .tds-page-header-email{
1030
- max-width:100%;
1031
- overflow:hidden;
1032
- text-overflow:ellipsis;
1033
- }
1034
-
1035
- @keyframes indicator-pulse{
1036
- 0%{
1037
- opacity:.3;
1038
- transform:scale(.9);
1039
- }
1040
-
1041
- 100%{
1042
- opacity:0;
1043
- transform:scale(1.75);
1044
- }
1045
- }
1046
-
1047
-
1048
- @media (prefers-reduced-motion: no-preference){
1049
-
1050
- :root{
1051
- interpolate-size:allow-keywords;
1052
- }
1053
- }
1054
-
1055
- @layer tds-component{
1056
- tds-sidenav,
1057
- .tds-sidenav{
1058
- --tds-sidenav-indent:12px;
1059
- --tds-sidenav-item-depth:0;
1060
-
1061
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
1062
-
1063
- --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;
1064
- --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;
1065
- --tds-sidenav-collapse-closed-opacity:0;
1066
- --tds-sidenav-collapse-open-opacity:1;
1067
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
1068
- --tds-sidenav-collapse-open-transform:translateY(0);
1069
-
1070
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
1071
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1072
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1073
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1074
-
1075
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1076
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1077
- --tds-sidenav-item-nested-background-selected:transparent;
1078
-
1079
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1080
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1081
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1082
-
1083
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1084
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1085
- }
1086
-
1087
- @media (prefers-reduced-motion: reduce){
1088
- tds-sidenav,
1089
- .tds-sidenav{
1090
- --tds-sidenav-collapse-transition-enter:none;
1091
- --tds-sidenav-collapse-transition-exit:none;
1092
- --tds-sidenav-collapse-closed-transform:none;
1093
- --tds-sidenav-collapse-open-transform:none;
1094
- }
784
+ :is(.tds-button-group > .tds-btn):focus-visible{
785
+ --tds-button-group-item-z-index:5;
1095
786
  }
1096
-
1097
- .tds-sidenav--theme-gray{
1098
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1099
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1100
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1101
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1102
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1103
- }
1104
- }
1105
-
1106
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1107
- display:flex;
1108
- }
1109
-
1110
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1111
- flex-direction:column;
1112
- gap:var(--t-spacing-half);
1113
- width:100%;
1114
- }
1115
-
1116
- .tds-sidenav-section-list{
1117
- width:100%;
1118
- padding:0;
1119
- margin:0;
1120
- list-style:none;
1121
- }
1122
-
1123
- .tds-sidenav-section-header{
1124
- display:flex;
1125
- align-items:baseline;
1126
- justify-content:space-between;
1127
- padding-top:var(--t-spacing-2);
1128
- }
1129
-
1130
- .tds-sidenav-section-header h2{
1131
- margin:0;
1132
- font-size:var(--t-font-size-sm);
1133
- font-weight:var(--t-font-weight-semibold);
1134
- line-height:1.35;
1135
- color:var(--t-text-color-secondary);
1136
- text-transform:uppercase;
1137
- }
1138
-
1139
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1140
- padding-top:0;
1141
- }
1142
-
1143
- .tds-sidenav-section-header [slot="label-actions"]{
1144
- display:flex;
1145
- gap:var(--t-spacing-half);
1146
- align-items:center;
787
+ .tds-button-group > .tds-btn:first-child{
788
+ border-start-start-radius:var(--tds-btn-border-radius);
789
+ border-end-start-radius:var(--tds-btn-border-radius);
1147
790
  }
1148
-
1149
- .tds-sidenav-section [slot="section-actions"]{
1150
- display:flex;
1151
- gap:12px;
1152
- align-items:center;
1153
- min-height:42px;
1154
- padding:var(--t-spacing-1) 0;
1155
- }
1156
-
1157
- .tds-sidenav-section-list,
1158
- .tds-sidenav-item{
1159
- width:100%;
1160
- padding:0;
1161
- margin:0;
1162
- }
1163
-
1164
- .tds-sidenav-item :is(a,button){
1165
- position:relative;
1166
- display:flex;
1167
- gap:12px;
1168
- align-items:center;
1169
- width:100%;
1170
- padding:12px;
1171
- overflow:hidden;
1172
- font-size:var(--t-font-size-sm);
1173
- line-height:18px;
1174
- color:var(--t-text-color-headline);
1175
- white-space:nowrap;
1176
- text-decoration:none;
1177
- -webkit-appearance:none;
1178
- -moz-appearance:none;
1179
- appearance:none;
1180
- cursor:pointer;
1181
- background-color:var(--tds-sidenav-item-background, transparent);
1182
- border:0;
1183
- border-radius:var(--t-border-radius);
1184
- transition:var(--tds-sidenav-item-transition);
791
+ .tds-button-group > .tds-btn:last-child{
792
+ border-start-end-radius:var(--tds-btn-border-radius);
793
+ border-end-end-radius:var(--tds-btn-border-radius);
1185
794
  }
1186
795
 
1187
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1188
- display:block;
1189
- flex:1;
1190
- overflow:hidden;
1191
- text-overflow:ellipsis;
1192
- text-align:left;
1193
- white-space:nowrap;
1194
- }
1195
-
1196
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1197
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1198
- color:var(--t-text-color-headline);
1199
- text-decoration:none;
1200
- }
1201
-
1202
- :is(.tds-sidenav-item :is(a,button)):active{
1203
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1204
- }
1205
-
1206
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1207
- overflow:hidden;
1208
- color:var(--tds-sidenav-item-icon-color);
1209
- }
796
+ .tds-checkbox{
797
+ --tds-checkbox-font-size:var(--t-font-size-md);
798
+ --tds-checkbox-cursor:pointer;
799
+ --tds-checkbox-line-height:1.4;
800
+ --tds-checkbox-transition-property:background-color, border-color;
1210
801
 
1211
- :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{
1212
- display:block;
1213
- width:var(--tds-sidenav-item-icon-size);
1214
- height:var(--tds-sidenav-item-icon-size);
1215
- }
802
+ --tds-checkbox-input-size:var(--t-element-size-md);
803
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
804
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
805
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
1216
806
 
1217
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1218
- --tds-sidenav-indent:19px;
1219
- }
807
+ --tds-checkbox-input-icon:none;
808
+ --tds-checkbox-input-icon-visibility:hidden;
809
+ --tds-checkbox-input-icon-opacity:0;
810
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1220
811
 
1221
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1222
- visibility:visible;
1223
- block-size:auto;
1224
- opacity:1;
1225
- }
812
+ --tds-checkbox-label-color:var(--t-form-color);
1226
813
 
1227
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1228
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1229
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
814
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
815
+ --tds-checkbox-description-line-height:1.35;
816
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
817
+ --tds-checkbox-description-invalid-icon-display:none;
1230
818
 
1231
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1232
- font-weight:var(--t-font-weight-semibold);
819
+ position:relative;
820
+ display:inline-grid;
821
+ grid-template-columns:auto;
822
+ grid-auto-columns:1fr;
823
+ gap:var(--t-spacing-fourth) 0;
824
+ line-height:var(--tds-checkbox-line-height);
825
+ -webkit-user-select:none;
826
+ -moz-user-select:none;
827
+ user-select:none;
828
+ }
829
+
830
+ .tds-checkbox label{
831
+ grid-area:1 / 2;
832
+ padding-inline-start:var(--t-spacing-1);
833
+ font-size:var(--tds-checkbox-font-size);
834
+ font-weight:var(--t-font-weight-normal);
835
+ color:var(--tds-checkbox-label-color);
836
+ cursor:var(--tds-checkbox-cursor);
1233
837
  }
1234
838
 
1235
- .tds-sidenav-item:has(.tds-sidenav-section){
839
+ .tds-checkbox tds-indeterminate{
1236
840
  display:flex;
1237
- flex-direction:column;
1238
- gap:var(--t-spacing-half);
1239
841
  }
1240
842
 
1241
- .tds-sidenav-item .tds-sidenav-section-list{
1242
- --tds-sidenav-item-depth:1;
1243
- gap:0;
843
+ .tds-checkbox input[type="checkbox"]{
844
+ position:relative;
845
+ width:1em;
846
+ height:1em;
847
+ margin:calc((1lh - 1em) / 2) 0 0;
848
+ font-size:var(--tds-checkbox-font-size);
849
+ line-height:inherit;
850
+ -webkit-appearance:none;
851
+ -moz-appearance:none;
852
+ appearance:none;
853
+ cursor:var(--tds-checkbox-cursor);
854
+ background-color:var(--tds-checkbox-input-background-color);
855
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
856
+ border-radius:var(--tds-checkbox-input-border-radius);
857
+ transition-timing-function:var(--t-ease-in-out);
858
+ transition-duration:var(--t-duration-200);
859
+ transition-property:var(--tds-checkbox-transition-property);
1244
860
  }
1245
861
 
1246
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1247
- visibility:hidden;
1248
- block-size:0;
1249
- overflow-y:clip;
1250
- opacity:0;
1251
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
862
+ :is(.tds-checkbox input[type="checkbox"])::before{
863
+ position:absolute;
864
+ top:50%;
865
+ left:50%;
866
+ visibility:var(--tds-checkbox-input-icon-visibility);
867
+ width:100%;
868
+ height:100%;
869
+ content:"";
870
+ background-color:var(--tds-checkbox-input-icon-fill);
871
+ border-radius:var(--tds-checkbox-input-border-radius);
872
+ opacity:var(--tds-checkbox-input-icon-opacity);
873
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
874
+ mask-image:var(--tds-checkbox-input-icon);
875
+ -webkit-mask-repeat:no-repeat;
876
+ mask-repeat:no-repeat;
877
+ -webkit-mask-size:contain;
878
+ mask-size:contain;
879
+ transform:translate(-50%, -50%);
1252
880
  }
1253
881
 
1254
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1255
- --tds-sidenav-item-depth:2;
882
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
883
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
884
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1256
885
  }
1257
886
 
1258
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1259
- min-height:var(--t-element-size-2xl);
1260
- padding-block:9px;
1261
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1262
- line-height:1;
1263
- background-color:transparent;
887
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
888
+ outline:var(--t-focus-ring-outline);
889
+ outline-offset:var(--t-focus-ring-offset);
1264
890
  }
1265
891
 
1266
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1267
- position:absolute;
1268
- top:0;
1269
- bottom:0;
1270
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1271
- width:2px;
1272
- content:"";
1273
- background-color:var(--tds-sidenav-item-nested-border-color);
1274
- transition:var(--tds-sidenav-item-transition);
1275
- }
1276
-
1277
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1278
- position:absolute;
1279
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1280
- z-index:-1;
1281
- height:100%;
1282
- content:"";
1283
- background-color:var(--tds-sidenav-item-nested-background);
1284
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1285
- transition:var(--tds-sidenav-item-transition);
1286
- }
1287
-
1288
- :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)){
1289
- display:block;
1290
- text-align:left;
1291
- white-space:normal;
1292
- }
1293
-
1294
- :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{
1295
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1296
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1297
- }
1298
-
1299
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1300
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1301
- }
1302
-
1303
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1304
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1305
- font-weight:var(--t-font-weight-medium);
892
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
893
+ pointer-events:none;
1306
894
  }
1307
895
 
1308
- .tds-sidenav-responsive-header{
1309
- display:flex;
1310
- gap:var(--t-spacing-2);
1311
- align-items:center;
1312
- width:100%;
1313
- }
896
+ @media (prefers-reduced-motion: reduce){
1314
897
 
1315
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1316
- order:0;
898
+ .tds-checkbox input[type="checkbox"]{
899
+ --tds-checkbox-transition-property:none;
1317
900
  }
901
+ }
1318
902
 
1319
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1320
- flex:1;
1321
- order:1;
1322
- margin:0;
1323
- font-size:var(--t-font-size-lg);
1324
- font-weight:var(--t-font-weight-medium);
1325
- color:var(--t-text-color-headline);
903
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
904
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
905
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
906
+ --tds-checkbox-input-icon-visibility:visible;
907
+ --tds-checkbox-input-icon-opacity:1;
1326
908
  }
1327
909
 
1328
- @media (max-width: 719px){
1329
- .tds-sidenav-collapse{
1330
- z-index:10001;
1331
- display:none;
1332
- max-width:min(448px, calc(100vw - 48px));
1333
- padding:0;
1334
- margin:12px 0;
1335
- position-area:bottom span-right;
1336
- overflow:hidden;
1337
- outline:0;
1338
- background:var(--t-surface-color-card);
1339
- border:0;
1340
- border-radius:6px;
1341
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1342
- opacity:var(--tds-sidenav-collapse-open-opacity);
1343
- transform:var(--tds-sidenav-collapse-open-transform);
1344
- transition:var(--tds-sidenav-collapse-transition-enter);
1345
- will-change:transform;
910
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
911
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
912
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
913
+ }
914
+
915
+ .tds-checkbox:has(input:checked){
916
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1346
917
  }
1347
918
 
1348
- .tds-sidenav-scroll-container{
1349
- --webkit-overflow-scrolling:touch;
1350
- display:block;
1351
- width:100%;
1352
- height:-moz-fit-content;
1353
- height:fit-content;
1354
- padding:var(--t-spacing-2);
1355
- overflow-y:auto;
919
+ .tds-checkbox:has(input:indeterminate){
920
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1356
921
  }
1357
922
 
1358
- .tds-sidenav-item :is(a, button) :is(.prefix){
1359
- display:none;
923
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
924
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
925
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
926
+ --tds-checkbox-description-invalid-icon-display:inline-block;
1360
927
  }
1361
- @supports selector(:popover-open){
1362
- .tds-sidenav-collapse:popover-open{
1363
- display:flex;
928
+
929
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
930
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
931
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1364
932
  }
1365
933
 
1366
- .tds-sidenav-collapse:not(:popover-open){
1367
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1368
- transition:var(--tds-sidenav-collapse-transition-exit);
934
+ :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{
935
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
936
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1369
937
  }
1370
938
 
1371
- @starting-style{
1372
- .tds-sidenav-collapse:popover-open{
1373
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1374
- transform:var(--tds-sidenav-collapse-closed-transform);
939
+ :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){
940
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
941
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1375
942
  }
943
+
944
+ .tds-checkbox:has(input:required) label::after{
945
+ margin-left:.25ch;
946
+ color:var(--t-text-color-status-error);
947
+ content:"*";
1376
948
  }
949
+
950
+ .tds-checkbox:has(input:disabled){
951
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
952
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
953
+
954
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
955
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
956
+ --tds-checkbox-cursor:not-allowed;
1377
957
  }
1378
- @supports not selector(:popover-open){
1379
- .tds-sidenav-collapse.\:popover-open{
1380
- display:flex;
1381
- }
1382
958
 
1383
- .tds-sidenav-collapse:not(.\:popover-open){
1384
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1385
- transition:var(--tds-sidenav-collapse-transition-exit);
959
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
960
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1386
961
  }
1387
- }
1388
- }
1389
962
 
1390
- @media (min-width: 720px){
1391
- .tds-sidenav-responsive-header{
1392
- display:none;
1393
- }
963
+ .tds-checkbox-description{
964
+ display:flex;
965
+ grid-area:2 / 2;
966
+ gap:var(--t-spacing-half);
967
+ align-items:flex-start;
968
+ padding-inline-start:var(--t-spacing-1);
969
+ margin:0;
970
+ font-size:var(--tds-checkbox-description-font-size);
971
+ line-height:var(--tds-checkbox-description-line-height);
972
+ color:var(--tds-checkbox-description-color);
973
+ cursor:text;
1394
974
  }
1395
975
 
1396
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1397
- display:none;
1398
- }
1399
-
1400
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1401
- display:block;
1402
- }
976
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
977
+ display:var(--tds-checkbox-description-invalid-icon-display);
978
+ flex-shrink:0;
979
+ margin-top:calc(.5lh - .5em);
980
+ line-height:var(--tds-checkbox-description-line-height);
981
+ }
1403
982
 
1404
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1405
- display:flex;
1406
- flex-direction:column;
1407
- }
983
+ .tds-checkbox--sm{
984
+ --tds-checkbox-line-height:1.35;
985
+ --tds-checkbox-input-size:var(--t-element-size-sm);
986
+ --tds-checkbox-font-size:var(--t-font-size-sm);
987
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
988
+ --tds-checkbox-description-line-height:1.3;
989
+ }
1408
990
 
1409
991
  .tds-combo-box{
1410
992
  --tds-combo-box-button-offset:4px;
@@ -1543,125 +1125,413 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1543
1125
  background:var(--t-fill-color-button-interaction-ghost-active);
1544
1126
  }
1545
1127
 
1546
- .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
1547
- background:var(--t-fill-color-neutral-060);
1128
+ .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
1129
+ background:var(--t-fill-color-neutral-060);
1130
+ }
1131
+
1132
+ .tds-combo-box-list-item[data-disabled]{
1133
+ color:var(--t-form-color-disabled);
1134
+ cursor:not-allowed;
1135
+ }
1136
+
1137
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
1138
+ background:transparent;
1139
+ }
1140
+
1141
+ .tds-combo-box-empty-state{
1142
+ position:relative;
1143
+ min-block-size:var(--t-spacing-3);
1144
+ padding-block:var(--t-spacing-1);
1145
+ padding-inline:var(--t-spacing-2);
1146
+ font-size:var(--t-font-size-md);
1147
+ color:var(--t-text-color-secondary);
1148
+ }
1149
+
1150
+ .tds-combo-box-load-more{
1151
+ position:relative;
1152
+ min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
1153
+ }
1154
+
1155
+ .tds-combo-box-empty-state,
1156
+ .tds-combo-box-load-more{
1157
+ --tds-loading-spinner-visibility:visible;
1158
+ --tds-loading-spinner-animation-play-state:running;
1159
+ }
1160
+
1161
+ .tds-combo-box-list-section:not(:first-child){
1162
+ margin-block-start:var(--t-spacing-half);
1163
+ }
1164
+
1165
+ .tds-combo-box-section-header{
1166
+ padding-block:var(--t-spacing-1);
1167
+ padding-inline:var(--t-spacing-1);
1168
+ font-size:var(--t-font-size-sm);
1169
+ font-weight:var(--t-font-weight-semibold);
1170
+ color:var(--t-text-color-secondary);
1171
+ }
1172
+
1173
+
1174
+ @media (prefers-reduced-motion: no-preference){
1175
+
1176
+ :root{
1177
+ interpolate-size:allow-keywords;
1178
+ }
1179
+ }
1180
+
1181
+ @layer tds-component{
1182
+ tds-sidenav,
1183
+ .tds-sidenav{
1184
+ --tds-sidenav-indent:12px;
1185
+ --tds-sidenav-item-depth:0;
1186
+
1187
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
1188
+
1189
+ --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;
1190
+ --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;
1191
+ --tds-sidenav-collapse-closed-opacity:0;
1192
+ --tds-sidenav-collapse-open-opacity:1;
1193
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
1194
+ --tds-sidenav-collapse-open-transform:translateY(0);
1195
+
1196
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
1197
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1198
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1199
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1200
+
1201
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1202
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1203
+ --tds-sidenav-item-nested-background-selected:transparent;
1204
+
1205
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1206
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1207
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1208
+
1209
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1210
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1211
+ }
1212
+
1213
+ @media (prefers-reduced-motion: reduce){
1214
+ tds-sidenav,
1215
+ .tds-sidenav{
1216
+ --tds-sidenav-collapse-transition-enter:none;
1217
+ --tds-sidenav-collapse-transition-exit:none;
1218
+ --tds-sidenav-collapse-closed-transform:none;
1219
+ --tds-sidenav-collapse-open-transform:none;
1220
+ }
1221
+ }
1222
+
1223
+ .tds-sidenav--theme-gray{
1224
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1225
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1226
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1227
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1228
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1229
+ }
1230
+ }
1231
+
1232
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1233
+ display:flex;
1234
+ }
1235
+
1236
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1237
+ flex-direction:column;
1238
+ gap:var(--t-spacing-half);
1239
+ width:100%;
1240
+ }
1241
+
1242
+ .tds-sidenav-section-list{
1243
+ width:100%;
1244
+ padding:0;
1245
+ margin:0;
1246
+ list-style:none;
1247
+ }
1248
+
1249
+ .tds-sidenav-section-header{
1250
+ display:flex;
1251
+ align-items:baseline;
1252
+ justify-content:space-between;
1253
+ padding-top:var(--t-spacing-2);
1254
+ }
1255
+
1256
+ .tds-sidenav-section-header h2{
1257
+ margin:0;
1258
+ font-size:var(--t-font-size-sm);
1259
+ font-weight:var(--t-font-weight-semibold);
1260
+ line-height:1.35;
1261
+ color:var(--t-text-color-secondary);
1262
+ text-transform:uppercase;
1263
+ }
1264
+
1265
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1266
+ padding-top:0;
1267
+ }
1268
+
1269
+ .tds-sidenav-section-header [slot="label-actions"]{
1270
+ display:flex;
1271
+ gap:var(--t-spacing-half);
1272
+ align-items:center;
1273
+ }
1274
+
1275
+ .tds-sidenav-section [slot="section-actions"]{
1276
+ display:flex;
1277
+ gap:12px;
1278
+ align-items:center;
1279
+ min-height:42px;
1280
+ padding:var(--t-spacing-1) 0;
1281
+ }
1282
+
1283
+ .tds-sidenav-section-list,
1284
+ .tds-sidenav-item{
1285
+ width:100%;
1286
+ padding:0;
1287
+ margin:0;
1288
+ }
1289
+
1290
+ .tds-sidenav-item :is(a,button){
1291
+ position:relative;
1292
+ display:flex;
1293
+ gap:12px;
1294
+ align-items:center;
1295
+ width:100%;
1296
+ padding:12px;
1297
+ overflow:hidden;
1298
+ font-size:var(--t-font-size-sm);
1299
+ line-height:18px;
1300
+ color:var(--t-text-color-headline);
1301
+ white-space:nowrap;
1302
+ text-decoration:none;
1303
+ -webkit-appearance:none;
1304
+ -moz-appearance:none;
1305
+ appearance:none;
1306
+ cursor:pointer;
1307
+ background-color:var(--tds-sidenav-item-background, transparent);
1308
+ border:0;
1309
+ border-radius:var(--t-border-radius);
1310
+ transition:var(--tds-sidenav-item-transition);
1311
+ }
1312
+
1313
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1314
+ display:block;
1315
+ flex:1;
1316
+ overflow:hidden;
1317
+ text-overflow:ellipsis;
1318
+ text-align:left;
1319
+ white-space:nowrap;
1320
+ }
1321
+
1322
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1323
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1324
+ color:var(--t-text-color-headline);
1325
+ text-decoration:none;
1326
+ }
1327
+
1328
+ :is(.tds-sidenav-item :is(a,button)):active{
1329
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1330
+ }
1331
+
1332
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1333
+ overflow:hidden;
1334
+ color:var(--tds-sidenav-item-icon-color);
1335
+ }
1336
+
1337
+ :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{
1338
+ display:block;
1339
+ width:var(--tds-sidenav-item-icon-size);
1340
+ height:var(--tds-sidenav-item-icon-size);
1341
+ }
1342
+
1343
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1344
+ --tds-sidenav-indent:19px;
1345
+ }
1346
+
1347
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1348
+ visibility:visible;
1349
+ block-size:auto;
1350
+ opacity:1;
1351
+ }
1352
+
1353
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1354
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1355
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1356
+
1357
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1358
+ font-weight:var(--t-font-weight-semibold);
1359
+ }
1360
+
1361
+ .tds-sidenav-item:has(.tds-sidenav-section){
1362
+ display:flex;
1363
+ flex-direction:column;
1364
+ gap:var(--t-spacing-half);
1548
1365
  }
1549
1366
 
1550
- .tds-combo-box-list-item[data-disabled]{
1551
- color:var(--t-form-color-disabled);
1552
- cursor:not-allowed;
1367
+ .tds-sidenav-item .tds-sidenav-section-list{
1368
+ --tds-sidenav-item-depth:1;
1369
+ gap:0;
1553
1370
  }
1554
1371
 
1555
- .tds-combo-box-list-item[data-disabled][data-hovered]{
1556
- background:transparent;
1372
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1373
+ visibility:hidden;
1374
+ block-size:0;
1375
+ overflow-y:clip;
1376
+ opacity:0;
1377
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
1557
1378
  }
1558
1379
 
1559
- .tds-combo-box-empty-state{
1560
- position:relative;
1561
- min-block-size:var(--t-spacing-3);
1562
- padding-block:var(--t-spacing-1);
1563
- padding-inline:var(--t-spacing-2);
1564
- font-size:var(--t-font-size-md);
1565
- color:var(--t-text-color-secondary);
1566
- }
1380
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1381
+ --tds-sidenav-item-depth:2;
1382
+ }
1567
1383
 
1568
- .tds-combo-box-load-more{
1569
- position:relative;
1570
- min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
1571
- }
1384
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1385
+ min-height:var(--t-element-size-2xl);
1386
+ padding-block:9px;
1387
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1388
+ line-height:1;
1389
+ background-color:transparent;
1390
+ }
1572
1391
 
1573
- .tds-combo-box-empty-state,
1574
- .tds-combo-box-load-more{
1575
- --tds-loading-spinner-visibility:visible;
1576
- --tds-loading-spinner-animation-play-state:running;
1577
- }
1392
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1393
+ position:absolute;
1394
+ top:0;
1395
+ bottom:0;
1396
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1397
+ width:2px;
1398
+ content:"";
1399
+ background-color:var(--tds-sidenav-item-nested-border-color);
1400
+ transition:var(--tds-sidenav-item-transition);
1401
+ }
1578
1402
 
1579
- .tds-combo-box-list-section:not(:first-child){
1580
- margin-block-start:var(--t-spacing-half);
1581
- }
1403
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1404
+ position:absolute;
1405
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1406
+ z-index:-1;
1407
+ height:100%;
1408
+ content:"";
1409
+ background-color:var(--tds-sidenav-item-nested-background);
1410
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1411
+ transition:var(--tds-sidenav-item-transition);
1412
+ }
1582
1413
 
1583
- .tds-combo-box-section-header{
1584
- padding-block:var(--t-spacing-1);
1585
- padding-inline:var(--t-spacing-1);
1586
- font-size:var(--t-font-size-sm);
1587
- font-weight:var(--t-font-weight-semibold);
1588
- color:var(--t-text-color-secondary);
1589
- }
1414
+ :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)){
1415
+ display:block;
1416
+ text-align:left;
1417
+ white-space:normal;
1418
+ }
1590
1419
 
1591
- .tds-checkbox-group{
1592
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1593
- --tds-checkbox-group-line-height:1.4;
1594
- --tds-checkbox-group-gap:var(--t-spacing-1);
1420
+ :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{
1421
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1422
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1423
+ }
1595
1424
 
1596
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1597
- --tds-checkbox-group-description-line-height:1.35;
1598
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1599
- --tds-checkbox-group-description-invalid-icon-display:none;
1600
- display:flex;
1601
- flex-direction:column;
1602
- gap:0;
1603
- padding:0;
1604
- margin:0;
1425
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1426
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1427
+ }
1605
1428
 
1606
- font-size:var(--tds-checkbox-group-font-size);
1607
- line-height:var(--tds-checkbox-group-line-height);
1608
- border:0;
1429
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1430
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1431
+ font-weight:var(--t-font-weight-medium);
1432
+ }
1433
+
1434
+ .tds-sidenav-responsive-header{
1435
+ display:flex;
1436
+ gap:var(--t-spacing-2);
1437
+ align-items:center;
1438
+ width:100%;
1609
1439
  }
1610
1440
 
1611
- .tds-checkbox-group legend{
1612
- float:left;
1613
- padding:0;
1441
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1442
+ order:0;
1443
+ }
1444
+
1445
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1446
+ flex:1;
1447
+ order:1;
1614
1448
  margin:0;
1449
+ font-size:var(--t-font-size-lg);
1450
+ font-weight:var(--t-font-weight-medium);
1451
+ color:var(--t-text-color-headline);
1615
1452
  }
1616
1453
 
1617
- .tds-checkbox-group[aria-invalid="true"]{
1618
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1619
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1454
+ @media (max-width: 719px){
1455
+ .tds-sidenav-collapse{
1456
+ z-index:10001;
1457
+ display:none;
1458
+ max-width:min(448px, calc(100vw - 48px));
1459
+ padding:0;
1460
+ margin:12px 0;
1461
+ position-area:bottom span-right;
1462
+ overflow:hidden;
1463
+ outline:0;
1464
+ background:var(--t-surface-color-card);
1465
+ border:0;
1466
+ border-radius:6px;
1467
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1468
+ opacity:var(--tds-sidenav-collapse-open-opacity);
1469
+ transform:var(--tds-sidenav-collapse-open-transform);
1470
+ transition:var(--tds-sidenav-collapse-transition-enter);
1471
+ will-change:transform;
1620
1472
  }
1621
1473
 
1622
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1623
- margin-left:.25ch;
1624
- color:var(--t-text-color-status-error);
1625
- content:"*";
1474
+ .tds-sidenav-scroll-container{
1475
+ --webkit-overflow-scrolling:touch;
1476
+ display:block;
1477
+ width:100%;
1478
+ height:-moz-fit-content;
1479
+ height:fit-content;
1480
+ padding:var(--t-spacing-2);
1481
+ overflow-y:auto;
1482
+ }
1483
+
1484
+ .tds-sidenav-item :is(a, button) :is(.prefix){
1485
+ display:none;
1486
+ }
1487
+ @supports selector(:popover-open){
1488
+ .tds-sidenav-collapse:popover-open{
1489
+ display:flex;
1626
1490
  }
1627
1491
 
1628
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1629
- content:none;
1492
+ .tds-sidenav-collapse:not(:popover-open){
1493
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1494
+ transition:var(--tds-sidenav-collapse-transition-exit);
1630
1495
  }
1631
1496
 
1632
- .tds-checkbox-group-fields{
1633
- display:flex;
1634
- flex-direction:column;
1635
- gap:var(--tds-checkbox-group-gap);
1636
- align-items:flex-start;
1637
- margin-top:var(--t-spacing-1);
1638
- }
1497
+ @starting-style{
1498
+ .tds-sidenav-collapse:popover-open{
1499
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1500
+ transform:var(--tds-sidenav-collapse-closed-transform);
1501
+ }
1502
+ }
1503
+ }
1504
+ @supports not selector(:popover-open){
1505
+ .tds-sidenav-collapse.\:popover-open{
1506
+ display:flex;
1507
+ }
1639
1508
 
1640
- .tds-checkbox-group-description{
1641
- display:flex;
1642
- gap:var(--t-spacing-half);
1643
- align-items:flex-start;
1644
- margin:var(--t-spacing-fourth) 0 0;
1645
- font-size:var(--tds-checkbox-group-description-font-size);
1646
- line-height:var(--tds-checkbox-group-description-line-height);
1647
- color:var(--tds-checkbox-group-description-color);
1648
- cursor:text;
1509
+ .tds-sidenav-collapse:not(.\:popover-open){
1510
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1511
+ transition:var(--tds-sidenav-collapse-transition-exit);
1512
+ }
1513
+ }
1649
1514
  }
1650
1515
 
1651
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1652
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1653
- flex-shrink:0;
1654
- margin-top:calc(.5lh - .5em);
1655
- line-height:var(--tds-checkbox-group-description-line-height);
1516
+ @media (min-width: 720px){
1517
+ .tds-sidenav-responsive-header{
1518
+ display:none;
1656
1519
  }
1657
-
1658
- .tds-checkbox-group--sm{
1659
- --tds-checkbox-group-line-height:1.35;
1660
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1661
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1662
- --tds-checkbox-group-description-line-height:1.3;
1663
1520
  }
1664
1521
 
1522
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1523
+ display:none;
1524
+ }
1525
+
1526
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1527
+ display:block;
1528
+ }
1529
+
1530
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1531
+ display:flex;
1532
+ flex-direction:column;
1533
+ }
1534
+
1665
1535
  .tds-dropdown-popover{
1666
1536
  min-inline-size:10rem;
1667
1537
  max-inline-size:24rem;
@@ -1796,32 +1666,103 @@ a.tds-dropdown-item:is(:hover, :active){
1796
1666
  border-top:1px solid var(--t-border-color);
1797
1667
  }
1798
1668
 
1799
- .tds-button-group{
1800
- display:inline-flex;
1669
+ .tds-checkbox-group{
1670
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1671
+ --tds-checkbox-group-line-height:1.4;
1672
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1673
+
1674
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1675
+ --tds-checkbox-group-description-line-height:1.35;
1676
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1677
+ --tds-checkbox-group-description-invalid-icon-display:none;
1678
+ display:flex;
1679
+ flex-direction:column;
1680
+ gap:0;
1681
+ padding:0;
1682
+ margin:0;
1683
+
1684
+ font-size:var(--tds-checkbox-group-font-size);
1685
+ line-height:var(--tds-checkbox-group-line-height);
1686
+ border:0;
1687
+ }
1688
+
1689
+ .tds-checkbox-group legend{
1690
+ float:left;
1691
+ padding:0;
1692
+ margin:0;
1693
+ }
1694
+
1695
+ .tds-checkbox-group[aria-invalid="true"]{
1696
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1697
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1698
+ }
1699
+
1700
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1701
+ margin-left:.25ch;
1702
+ color:var(--t-text-color-status-error);
1703
+ content:"*";
1704
+ }
1705
+
1706
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1707
+ content:none;
1708
+ }
1709
+
1710
+ .tds-checkbox-group-fields{
1711
+ display:flex;
1712
+ flex-direction:column;
1713
+ gap:var(--tds-checkbox-group-gap);
1714
+ align-items:flex-start;
1715
+ margin-top:var(--t-spacing-1);
1716
+ }
1717
+
1718
+ .tds-checkbox-group-description{
1719
+ display:flex;
1720
+ gap:var(--t-spacing-half);
1721
+ align-items:flex-start;
1722
+ margin:var(--t-spacing-fourth) 0 0;
1723
+ font-size:var(--tds-checkbox-group-description-font-size);
1724
+ line-height:var(--tds-checkbox-group-description-line-height);
1725
+ color:var(--tds-checkbox-group-description-color);
1726
+ cursor:text;
1801
1727
  }
1802
- .tds-button-group > .tds-btn{
1803
- --tds-button-group-item-z-index:1;
1804
1728
 
1805
- z-index:var(--tds-button-group-item-z-index);
1806
- border-radius:0;
1729
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1730
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1731
+ flex-shrink:0;
1732
+ margin-top:calc(.5lh - .5em);
1733
+ line-height:var(--tds-checkbox-group-description-line-height);
1807
1734
  }
1808
- :is(.tds-button-group > .tds-btn):not(:first-child){
1809
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1810
- }
1811
- :is(.tds-button-group > .tds-btn):hover{
1812
- --tds-button-group-item-z-index:2;
1735
+
1736
+ .tds-checkbox-group--sm{
1737
+ --tds-checkbox-group-line-height:1.35;
1738
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1739
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1740
+ --tds-checkbox-group-description-line-height:1.3;
1741
+ }
1742
+
1743
+
1744
+ :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{
1745
+ -webkit-appearance:none;
1746
+ appearance:none;
1813
1747
  }
1814
- :is(.tds-button-group > .tds-btn):focus-visible{
1815
- --tds-button-group-item-z-index:5;
1748
+
1749
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1750
+ inline-size:1em;
1751
+ block-size:2em;
1816
1752
  }
1817
- .tds-button-group > .tds-btn:first-child{
1818
- border-start-start-radius:var(--tds-btn-border-radius);
1819
- border-end-start-radius:var(--tds-btn-border-radius);
1753
+
1754
+ @supports (field-sizing: content){
1755
+ .tds-input--auto-width{
1756
+ inline-size:-moz-fit-content;
1757
+ inline-size:fit-content;
1758
+ min-inline-size:min(100%, 122px);
1820
1759
  }
1821
- .tds-button-group > .tds-btn:last-child{
1822
- border-start-end-radius:var(--tds-btn-border-radius);
1823
- border-end-end-radius:var(--tds-btn-border-radius);
1760
+
1761
+ .tds-input--auto-width input{
1762
+ field-sizing:content;
1763
+ inline-size:auto;
1824
1764
  }
1765
+ }
1825
1766
 
1826
1767
  .tds-modal-overlay{
1827
1768
  position:fixed;
@@ -1967,111 +1908,282 @@ a.tds-dropdown-item:is(:hover, :active){
1967
1908
  margin-inline-end:auto;
1968
1909
  }
1969
1910
 
1911
+ @layer t-critical{
1912
+ tds-page-header:not(.hydrated){
1913
+ display:none;
1914
+ }
1915
+ }
1970
1916
 
1971
- :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{
1917
+ @layer t-component{
1918
+ .tds-page-header{
1919
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1920
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1921
+ --tds-page-header-color:var(--t-text-color);
1922
+ --tds-page-header-bottom-border-color:transparent;
1923
+ --tds-page-header-headline-color:var(--t-text-color-headline);
1924
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1925
+ --tds-page-header-padding-x:var(--t-spacing-2);
1926
+ --tds-page-header-padding-y:var(--t-spacing-2);
1927
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1928
+ --tds-page-header-nav-gap:var(--t-spacing-1);
1929
+ --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
1930
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1931
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1932
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1933
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1934
+ --tds-page-header-nav-item-border-width:1px;
1935
+
1936
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1937
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
1938
+
1939
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
1940
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1941
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1942
+
1943
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1944
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1945
+
1946
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1947
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1948
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1949
+
1950
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
1951
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1952
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1953
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1954
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1955
+ }
1956
+
1957
+ .tds-page-header--profile{
1958
+ --tds-page-header-padding-y:20px;
1959
+ }
1960
+
1961
+ @supports (color: light-dark(#fff, #000)){
1962
+ .tds-page-header{
1963
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1964
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1965
+ }
1966
+ }
1967
+
1968
+ @media (min-width: 600px){
1969
+ .tds-page-header{
1970
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
1971
+ --tds-page-header-color:var(--t-text-color-secondary);
1972
+ --tds-page-header-bottom-border-color:var(--t-border-color);
1973
+ --tds-page-header-padding-x:var(--t-spacing-3);
1974
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1975
+ --tds-page-header-nav-gap:var(--t-spacing-half);
1976
+ --tds-page-header-nav-background:transparent;
1977
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1978
+ --tds-page-header-nav-item-border-width:1px;
1979
+ --tds-page-header-nav-item-color:var(--t-text-color);
1980
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1981
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1982
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1983
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1984
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1985
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1986
+ }
1987
+ }
1988
+ }
1989
+
1990
+ .tds-page-header{
1991
+ display:flex;
1992
+ flex-direction:column;
1993
+ padding-top:var(--tds-page-header-padding-y);
1994
+ color:var(--tds-page-header-color);
1995
+ background:var(--tds-page-header-background-color);
1996
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1997
+ }
1998
+
1999
+ .tds-page-header:not(.has-nav){
2000
+ padding-bottom:var(--tds-page-header-padding-y);
2001
+ }
2002
+
2003
+ .tds-page-header.inactive{
2004
+ background:var(--tds-page-header-background-color-inactive);
2005
+ }
2006
+
2007
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2008
+ width:100%;
2009
+ }
2010
+
2011
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2012
+ display:flex;
2013
+ flex-flow:row wrap;
2014
+ gap:var(--t-spacing-half) var(--t-spacing-1);
2015
+ align-items:flex-start;
2016
+ justify-content:flex-start;
2017
+ min-width:0;
2018
+ }
2019
+
2020
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
2021
+ display:flex;
2022
+ gap:var(--tds-page-header-nav-gap);
2023
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
2024
+ margin:0 0 -1px;
2025
+ overflow:auto;
2026
+ list-style:none;
2027
+ background:var(--tds-page-header-nav-background);
2028
+ }
2029
+
2030
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
2031
+ position:relative;
2032
+ display:inline-flex;
2033
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
2034
+ font-size:var(--t-font-size-sm);
2035
+ line-height:22px;
2036
+ color:var(--tds-page-header-nav-item-color);
2037
+ white-space:nowrap;
2038
+ text-decoration:none;
1972
2039
  -webkit-appearance:none;
2040
+ -moz-appearance:none;
1973
2041
  appearance:none;
2042
+ cursor:pointer;
2043
+ outline-offset:-2px;
2044
+ background-color:var(--tds-page-header-nav-item-background-color);
2045
+ background-clip:padding-box;
2046
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
2047
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
2048
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1974
2049
  }
1975
2050
 
1976
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1977
- inline-size:1em;
1978
- block-size:2em;
2051
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
2052
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
2053
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
2054
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
2055
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
2056
+ }
2057
+
2058
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
2059
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
2060
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
2061
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
2062
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
2063
+ }
2064
+
2065
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
2066
+ background-color:var(--tds-page-header-nav-item-background-color-active);
2067
+ border-color:var(--tds-page-header-nav-item-border-color-active);
2068
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
2069
+ }
2070
+
2071
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
2072
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
2073
+ color:var(--tds-page-header-nav-item-color-disabled);
2074
+ cursor:not-allowed;
2075
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
2076
+ opacity:1;
2077
+ }
2078
+
2079
+ @media (min-width: 600px){
2080
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
2081
+ position:absolute;
2082
+ inset:auto -1px -1px;
2083
+ height:1px;
2084
+ pointer-events:none;
2085
+ content:"";
2086
+ background-color:var(--tds-page-header-bottom-border-color);
2087
+ }
2088
+ }
2089
+
2090
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
2091
+ position:relative;
1979
2092
  }
1980
2093
 
1981
- @supports (field-sizing: content){
1982
- .tds-input--auto-width{
1983
- inline-size:-moz-fit-content;
1984
- inline-size:fit-content;
1985
- min-inline-size:min(100%, 122px);
1986
- }
2094
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
2095
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2096
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2097
+ }
1987
2098
 
1988
- .tds-input--auto-width input{
1989
- field-sizing:content;
1990
- inline-size:auto;
1991
- }
1992
- }
2099
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
2100
+ position:absolute;
2101
+ top:-5px;
2102
+ right:-2px;
2103
+ width:10px;
2104
+ height:10px;
2105
+ content:"";
2106
+ background:var(--tds-page-header-nav-item-indicator-color);
2107
+ border-radius:50%;
2108
+ }
1993
2109
 
1994
- .tds-radio-group{
1995
- --tds-radio-group-font-size:var(--t-font-size-md);
1996
- --tds-radio-group-line-height:1.4;
1997
- --tds-radio-group-gap:var(--t-spacing-1);
2110
+ @media (prefers-reduced-motion: no-preference){
2111
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
2112
+ animation:indicator-pulse 1.25s ease infinite;
2113
+ }
2114
+ }
1998
2115
 
1999
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
2000
- --tds-radio-group-description-line-height:1.35;
2001
- --tds-radio-group-description-color:var(--t-text-color-secondary);
2002
- --tds-radio-group-description-invalid-icon-display:none;
2116
+ .tds-page-header__title-bar{
2003
2117
  display:flex;
2004
2118
  flex-direction:column;
2005
- gap:0;
2006
- padding:0;
2007
- margin:0;
2119
+ gap:var(--t-spacing-2) var(--t-spacing-1);
2120
+ align-items:flex-start;
2121
+ justify-content:space-between;
2122
+ padding:0 var(--tds-page-header-padding-x);
2123
+ }
2008
2124
 
2009
- font-size:var(--tds-radio-group-font-size);
2010
- line-height:var(--tds-radio-group-line-height);
2011
- border:0;
2125
+ .tds-page-header--profile > .tds-page-header__title-bar{
2126
+ align-items:center;
2127
+ }
2128
+
2129
+ .tds-page-header__primary{
2130
+ width:100%;
2012
2131
  }
2013
2132
 
2014
- .tds-radio-group legend{
2015
- float:left;
2016
- padding:0;
2133
+ .tds-page-header__primary h1{
2017
2134
  margin:0;
2135
+ font-size:var(--tds-page-header-headline-font-size);
2136
+ font-weight:var(--t-font-weight-normal);
2137
+ line-height:32px;
2138
+ color:var(--tds-page-header-headline-color);
2139
+ overflow-wrap:break-word;
2018
2140
  }
2019
2141
 
2020
- .tds-radio-group[aria-invalid="true"]{
2021
- --tds-radio-group-description-color:var(--t-text-color-status-error);
2022
- --tds-radio-group-description-invalid-icon-display:inline-block;
2142
+ @media (min-width: 960px){
2143
+ .tds-page-header__primary{
2144
+ flex:1 1 max-content;
2145
+ width:auto;
2146
+ min-width:0;
2147
+ max-width:100%;
2023
2148
  }
2024
2149
 
2025
- .tds-radio-group[aria-invalid="true"] .tds-radio{
2026
- --tds-radio-input-border-color:var(--t-form-border-color-error);
2150
+ .tds-page-header__title-bar,
2151
+ .tds-page-header--profile .tds-page-header__title-bar{
2152
+ flex-flow:row nowrap;
2153
+ row-gap:12px;
2154
+ align-items:flex-start;
2155
+ }
2156
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2157
+ width:auto;
2027
2158
  }
2028
2159
 
2029
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2030
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2031
- --tds-radio-input-background-color:var(--t-form-background-color-error);
2032
- }
2033
-
2034
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2035
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2036
- }
2037
-
2038
- .tds-radio-group:has(input:required) legend::after{
2039
- margin-left:.25ch;
2040
- color:var(--t-text-color-status-error);
2041
- content:"*";
2160
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2161
+ justify-content:flex-end;
2042
2162
  }
2163
+ }
2043
2164
 
2044
- .tds-radio-group-fields{
2045
- display:flex;
2046
- flex-direction:column;
2047
- gap:var(--tds-radio-group-gap);
2048
- align-items:flex-start;
2049
- margin-top:var(--t-spacing-1);
2165
+ .tds-page-header-phone,
2166
+ .tds-page-header-email{
2167
+ color:var(--tds-page-header-color);
2168
+ white-space:nowrap;
2050
2169
  }
2051
2170
 
2052
- .tds-radio-group-description{
2053
- display:flex;
2054
- gap:var(--t-spacing-half);
2055
- align-items:flex-start;
2056
- margin:var(--t-spacing-fourth) 0 0;
2057
- font-size:var(--tds-radio-group-description-font-size);
2058
- line-height:var(--tds-radio-group-description-line-height);
2059
- color:var(--tds-radio-group-description-color);
2060
- cursor:text;
2171
+ .tds-page-header-email{
2172
+ max-width:100%;
2173
+ overflow:hidden;
2174
+ text-overflow:ellipsis;
2061
2175
  }
2062
2176
 
2063
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2064
- display:var(--tds-radio-group-description-invalid-icon-display);
2065
- flex-shrink:0;
2066
- margin-top:calc(.5lh - .5em);
2067
- line-height:var(--tds-radio-group-description-line-height);
2177
+ @keyframes indicator-pulse{
2178
+ 0%{
2179
+ opacity:.3;
2180
+ transform:scale(.9);
2068
2181
  }
2069
2182
 
2070
- .tds-radio-group--sm{
2071
- --tds-radio-group-line-height:1.35;
2072
- --tds-radio-group-font-size:var(--t-font-size-sm);
2073
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
2074
- --tds-radio-group-description-line-height:1.3;
2183
+ 100%{
2184
+ opacity:0;
2185
+ transform:scale(1.75);
2186
+ }
2075
2187
  }
2076
2188
 
2077
2189
  .tds-radio{
@@ -2256,422 +2368,283 @@ a.tds-dropdown-item:is(:hover, :active){
2256
2368
  transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2257
2369
  }
2258
2370
 
2259
- @media (pointer: fine){
2260
- :is(.tds-input textarea)::-webkit-scrollbar{
2261
- width:12px;
2262
- height:12px;
2263
- cursor:default;
2264
- }
2265
-
2266
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2267
- cursor:default;
2268
- background:var(--tds-input-scrollbar-thumb-color);
2269
- background-clip:content-box;
2270
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2271
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2272
- }
2273
-
2274
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2275
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2276
- }
2277
-
2278
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2279
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2280
- }
2281
-
2282
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2283
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2284
- }
2285
-
2286
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
2287
- background:var(--tds-input-scrollbar-surface-color);
2288
- }
2289
-
2290
- :is(.tds-input textarea)::-webkit-resizer{
2291
- background:var(--tds-input-resizer-icon) no-repeat;
2292
- background-position:right bottom;
2293
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2294
- }
2295
-
2296
- :is(.tds-input textarea)::-webkit-scrollbar-track{
2297
- margin-block:var(--tds-input-scrollbar-track-margin-block);
2298
- cursor:default;
2299
- }
2300
-
2301
- @supports (-moz-appearance: none){
2302
- :is(.tds-input textarea){
2303
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2304
- scrollbar-width:thin;
2305
- }
2306
-
2307
- @media (hover){
2308
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2309
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2310
- }
2311
- }
2312
- }
2313
- }
2314
-
2315
- .tds-toggle-switch{
2316
- --tds-toggle-switch-font-size:var(--t-font-size-md);
2317
- --tds-toggle-switch-cursor:pointer;
2318
- --tds-toggle-switch-display:inline-grid;
2319
- --tds-toggle-switch-line-height:1.4;
2320
-
2321
- --tds-toggle-switch-label-color:var(--t-form-color);
2322
-
2323
- --tds-toggle-switch-track-width:var(--t-container-size-md);
2324
- --tds-toggle-switch-track-outline:none;
2325
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
2326
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
2327
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
2328
-
2329
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
2330
- --tds-toggle-switch-thumb-transform:translateX(0);
2331
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
2332
-
2333
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
2334
- --tds-toggle-switch-description-line-height:1.35;
2335
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
2336
- position:relative;
2337
-
2338
- display:var(--tds-toggle-switch-display);
2339
- grid-template-columns:auto;
2340
- grid-auto-columns:1fr;
2341
- gap:var(--t-spacing-fourth) 0;
2342
- -webkit-user-select:none;
2343
- -moz-user-select:none;
2344
- user-select:none;
2345
- }
2346
-
2347
- .tds-toggle-switch input[type="checkbox"]{
2348
- position:absolute;
2349
- width:var(--tds-toggle-switch-track-width);
2350
- height:var(--tds-toggle-switch-track-height);
2351
- margin:0;
2352
- -webkit-appearance:none;
2353
- -moz-appearance:none;
2354
- appearance:none;
2355
- cursor:var(--tds-toggle-switch-cursor);
2356
- outline:var(--tds-toggle-switch-track-outline);
2357
- outline-offset:var(--t-focus-ring-offset);
2358
- background-color:transparent;
2359
- border:0;
2360
- border-radius:var(--t-border-radius-round);
2361
- }
2362
-
2363
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2364
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2371
+ @media (pointer: fine){
2372
+ :is(.tds-input textarea)::-webkit-scrollbar{
2373
+ width:12px;
2374
+ height:12px;
2375
+ cursor:default;
2365
2376
  }
2366
2377
 
2367
- .tds-toggle-switch label{
2368
- display:inline-flex;
2369
- grid-area:1 / 2;
2370
- padding-inline-start:var(--t-spacing-1);
2371
- margin-top:-.09375em;
2372
- font-size:var(--tds-toggle-switch-font-size);
2373
- font-weight:var(--t-font-weight-normal);
2374
- line-height:var(--tds-toggle-switch-line-height);
2375
- color:var(--tds-toggle-switch-label-color);
2376
- cursor:var(--tds-toggle-switch-cursor);
2377
- }
2378
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2379
+ cursor:default;
2380
+ background:var(--tds-input-scrollbar-thumb-color);
2381
+ background-clip:content-box;
2382
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2383
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2384
+ }
2378
2385
 
2379
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2380
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2381
- }
2386
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2387
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2388
+ }
2382
2389
 
2383
- .tds-toggle-switch:has(input:checked){
2384
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2385
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2386
- }
2390
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2391
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2392
+ }
2387
2393
 
2388
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2389
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2394
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2395
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2390
2396
  }
2391
2397
 
2392
- .tds-toggle-switch:has(input:disabled){
2393
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2394
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2395
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2396
- --tds-toggle-switch-cursor:not-allowed;
2397
- }
2398
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
2399
+ background:var(--tds-input-scrollbar-surface-color);
2400
+ }
2398
2401
 
2399
- .tds-toggle-switch-track{
2400
- position:relative;
2401
- flex-shrink:0;
2402
- width:var(--tds-toggle-switch-track-width);
2403
- height:var(--tds-toggle-switch-track-height);
2404
- background-color:var(--tds-toggle-switch-track-background-color);
2405
- border-radius:var(--t-border-radius-round);
2406
- transition:var(--tds-toggle-switch-track-transition);
2407
- }
2402
+ :is(.tds-input textarea)::-webkit-resizer{
2403
+ background:var(--tds-input-resizer-icon) no-repeat;
2404
+ background-position:right bottom;
2405
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2406
+ }
2408
2407
 
2409
- .tds-toggle-switch-track::before{
2410
- position:absolute;
2411
- top:var(--t-spacing-fourth);
2412
- left:var(--t-spacing-fourth);
2413
- width:var(--tds-toggle-switch-thumb-size);
2414
- height:var(--tds-toggle-switch-thumb-size);
2415
- content:"";
2416
- background-color:#fff;
2417
- border-radius:var(--t-border-radius-round);
2418
- transform:var(--tds-toggle-switch-thumb-transform);
2419
- transition:var(--tds-toggle-switch-thumb-transition);
2420
- }
2408
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
2409
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
2410
+ cursor:default;
2411
+ }
2421
2412
 
2422
- @media (prefers-reduced-motion: reduce){
2413
+ @supports (-moz-appearance: none){
2414
+ :is(.tds-input textarea){
2415
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2416
+ scrollbar-width:thin;
2417
+ }
2423
2418
 
2424
- .tds-toggle-switch-track{
2425
- --tds-toggle-switch-track-transition:none;
2426
- --tds-toggle-switch-thumb-transition:none;
2427
- }
2419
+ @media (hover){
2420
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2421
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2422
+ }
2423
+ }
2424
+ }
2428
2425
  }
2429
2426
 
2430
- .tds-toggle-switch-description{
2427
+ .tds-radio-group{
2428
+ --tds-radio-group-font-size:var(--t-font-size-md);
2429
+ --tds-radio-group-line-height:1.4;
2430
+ --tds-radio-group-gap:var(--t-spacing-1);
2431
+
2432
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
2433
+ --tds-radio-group-description-line-height:1.35;
2434
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
2435
+ --tds-radio-group-description-invalid-icon-display:none;
2431
2436
  display:flex;
2432
- grid-area:2 / 2;
2433
- align-items:flex-start;
2434
- padding-inline-start:var(--t-spacing-1);
2437
+ flex-direction:column;
2438
+ gap:0;
2439
+ padding:0;
2435
2440
  margin:0;
2436
- font-size:var(--tds-toggle-switch-description-font-size);
2437
- line-height:var(--tds-toggle-switch-description-line-height);
2438
- color:var(--tds-toggle-switch-description-color);
2439
- cursor:text;
2440
- }
2441
2441
 
2442
- .tds-toggle-switch--sm{
2443
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
2444
- --tds-toggle-switch-line-height:1.35;
2445
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
2446
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2447
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2448
- --tds-toggle-switch-description-line-height:1.3;
2442
+ font-size:var(--tds-radio-group-font-size);
2443
+ line-height:var(--tds-radio-group-line-height);
2444
+ border:0;
2449
2445
  }
2450
2446
 
2451
- .tds-toggle-switch--hide-label{
2452
- --tds-toggle-switch-display:inline-flex;
2453
- }
2447
+ .tds-radio-group legend{
2448
+ float:left;
2449
+ padding:0;
2450
+ margin:0;
2451
+ }
2454
2452
 
2455
- .tds-checkbox{
2456
- --tds-checkbox-font-size:var(--t-font-size-md);
2457
- --tds-checkbox-cursor:pointer;
2458
- --tds-checkbox-line-height:1.4;
2459
- --tds-checkbox-transition-property:background-color, border-color;
2453
+ .tds-radio-group[aria-invalid="true"]{
2454
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
2455
+ --tds-radio-group-description-invalid-icon-display:inline-block;
2456
+ }
2460
2457
 
2461
- --tds-checkbox-input-size:var(--t-element-size-md);
2462
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
2463
- --tds-checkbox-input-border-color:var(--t-form-border-color);
2464
- --tds-checkbox-input-background-color:var(--t-form-background-color);
2458
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
2459
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2460
+ }
2465
2461
 
2466
- --tds-checkbox-input-icon:none;
2467
- --tds-checkbox-input-icon-visibility:hidden;
2468
- --tds-checkbox-input-icon-opacity:0;
2469
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
2462
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2463
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2464
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2465
+ }
2470
2466
 
2471
- --tds-checkbox-label-color:var(--t-form-color);
2467
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2468
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2469
+ }
2472
2470
 
2473
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
2474
- --tds-checkbox-description-line-height:1.35;
2475
- --tds-checkbox-description-color:var(--t-text-color-secondary);
2476
- --tds-checkbox-description-invalid-icon-display:none;
2471
+ .tds-radio-group:has(input:required) legend::after{
2472
+ margin-left:.25ch;
2473
+ color:var(--t-text-color-status-error);
2474
+ content:"*";
2475
+ }
2477
2476
 
2478
- position:relative;
2479
- display:inline-grid;
2480
- grid-template-columns:auto;
2481
- grid-auto-columns:1fr;
2482
- gap:var(--t-spacing-fourth) 0;
2483
- line-height:var(--tds-checkbox-line-height);
2484
- -webkit-user-select:none;
2485
- -moz-user-select:none;
2486
- user-select:none;
2477
+ .tds-radio-group-fields{
2478
+ display:flex;
2479
+ flex-direction:column;
2480
+ gap:var(--tds-radio-group-gap);
2481
+ align-items:flex-start;
2482
+ margin-top:var(--t-spacing-1);
2487
2483
  }
2488
2484
 
2489
- .tds-checkbox label{
2490
- grid-area:1 / 2;
2491
- padding-inline-start:var(--t-spacing-1);
2492
- font-size:var(--tds-checkbox-font-size);
2493
- font-weight:var(--t-font-weight-normal);
2494
- color:var(--tds-checkbox-label-color);
2495
- cursor:var(--tds-checkbox-cursor);
2496
- }
2485
+ .tds-radio-group-description{
2486
+ display:flex;
2487
+ gap:var(--t-spacing-half);
2488
+ align-items:flex-start;
2489
+ margin:var(--t-spacing-fourth) 0 0;
2490
+ font-size:var(--tds-radio-group-description-font-size);
2491
+ line-height:var(--tds-radio-group-description-line-height);
2492
+ color:var(--tds-radio-group-description-color);
2493
+ cursor:text;
2494
+ }
2497
2495
 
2498
- .tds-checkbox tds-indeterminate{
2499
- display:flex;
2496
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2497
+ display:var(--tds-radio-group-description-invalid-icon-display);
2498
+ flex-shrink:0;
2499
+ margin-top:calc(.5lh - .5em);
2500
+ line-height:var(--tds-radio-group-description-line-height);
2500
2501
  }
2501
2502
 
2502
- .tds-checkbox input[type="checkbox"]{
2503
- position:relative;
2504
- width:1em;
2505
- height:1em;
2506
- margin:calc((1lh - 1em) / 2) 0 0;
2507
- font-size:var(--tds-checkbox-font-size);
2508
- line-height:inherit;
2509
- -webkit-appearance:none;
2510
- -moz-appearance:none;
2511
- appearance:none;
2512
- cursor:var(--tds-checkbox-cursor);
2513
- background-color:var(--tds-checkbox-input-background-color);
2514
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
2515
- border-radius:var(--tds-checkbox-input-border-radius);
2516
- transition-timing-function:var(--t-ease-in-out);
2517
- transition-duration:var(--t-duration-200);
2518
- transition-property:var(--tds-checkbox-transition-property);
2519
- }
2503
+ .tds-radio-group--sm{
2504
+ --tds-radio-group-line-height:1.35;
2505
+ --tds-radio-group-font-size:var(--t-font-size-sm);
2506
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
2507
+ --tds-radio-group-description-line-height:1.3;
2508
+ }
2520
2509
 
2521
- :is(.tds-checkbox input[type="checkbox"])::before{
2522
- position:absolute;
2523
- top:50%;
2524
- left:50%;
2525
- visibility:var(--tds-checkbox-input-icon-visibility);
2526
- width:100%;
2527
- height:100%;
2528
- content:"";
2529
- background-color:var(--tds-checkbox-input-icon-fill);
2530
- border-radius:var(--tds-checkbox-input-border-radius);
2531
- opacity:var(--tds-checkbox-input-icon-opacity);
2532
- -webkit-mask-image:var(--tds-checkbox-input-icon);
2533
- mask-image:var(--tds-checkbox-input-icon);
2534
- -webkit-mask-repeat:no-repeat;
2535
- mask-repeat:no-repeat;
2536
- -webkit-mask-size:contain;
2537
- mask-size:contain;
2538
- transform:translate(-50%, -50%);
2539
- }
2510
+ .tds-toggle-switch{
2511
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
2512
+ --tds-toggle-switch-cursor:pointer;
2513
+ --tds-toggle-switch-display:inline-grid;
2514
+ --tds-toggle-switch-line-height:1.4;
2540
2515
 
2541
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
2542
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
2543
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
2544
- }
2516
+ --tds-toggle-switch-label-color:var(--t-form-color);
2545
2517
 
2546
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
2547
- outline:var(--t-focus-ring-outline);
2548
- outline-offset:var(--t-focus-ring-offset);
2549
- }
2518
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
2519
+ --tds-toggle-switch-track-outline:none;
2520
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
2521
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
2522
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
2550
2523
 
2551
- :is(.tds-checkbox input[type="checkbox"]):disabled{
2552
- pointer-events:none;
2553
- }
2524
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
2525
+ --tds-toggle-switch-thumb-transform:translateX(0);
2526
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
2554
2527
 
2555
- @media (prefers-reduced-motion: reduce){
2528
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
2529
+ --tds-toggle-switch-description-line-height:1.35;
2530
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
2531
+ position:relative;
2556
2532
 
2557
- .tds-checkbox input[type="checkbox"]{
2558
- --tds-checkbox-transition-property:none;
2559
- }
2560
- }
2533
+ display:var(--tds-toggle-switch-display);
2534
+ grid-template-columns:auto;
2535
+ grid-auto-columns:1fr;
2536
+ gap:var(--t-spacing-fourth) 0;
2537
+ -webkit-user-select:none;
2538
+ -moz-user-select:none;
2539
+ user-select:none;
2540
+ }
2561
2541
 
2562
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
2563
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
2564
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
2565
- --tds-checkbox-input-icon-visibility:visible;
2566
- --tds-checkbox-input-icon-opacity:1;
2542
+ .tds-toggle-switch input[type="checkbox"]{
2543
+ position:absolute;
2544
+ width:var(--tds-toggle-switch-track-width);
2545
+ height:var(--tds-toggle-switch-track-height);
2546
+ margin:0;
2547
+ -webkit-appearance:none;
2548
+ -moz-appearance:none;
2549
+ appearance:none;
2550
+ cursor:var(--tds-toggle-switch-cursor);
2551
+ outline:var(--tds-toggle-switch-track-outline);
2552
+ outline-offset:var(--t-focus-ring-offset);
2553
+ background-color:transparent;
2554
+ border:0;
2555
+ border-radius:var(--t-border-radius-round);
2567
2556
  }
2568
2557
 
2569
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
2570
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
2571
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
2558
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2559
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2572
2560
  }
2573
2561
 
2574
- .tds-checkbox:has(input:checked){
2575
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
2562
+ .tds-toggle-switch label{
2563
+ display:inline-flex;
2564
+ grid-area:1 / 2;
2565
+ padding-inline-start:var(--t-spacing-1);
2566
+ margin-top:-.09375em;
2567
+ font-size:var(--tds-toggle-switch-font-size);
2568
+ font-weight:var(--t-font-weight-normal);
2569
+ line-height:var(--tds-toggle-switch-line-height);
2570
+ color:var(--tds-toggle-switch-label-color);
2571
+ cursor:var(--tds-toggle-switch-cursor);
2576
2572
  }
2577
2573
 
2578
- .tds-checkbox:has(input:indeterminate){
2579
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
2574
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2575
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2580
2576
  }
2581
2577
 
2582
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
2583
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
2584
- --tds-checkbox-description-color:var(--t-text-color-status-error);
2585
- --tds-checkbox-description-invalid-icon-display:inline-block;
2578
+ .tds-toggle-switch:has(input:checked){
2579
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2580
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2586
2581
  }
2587
2582
 
2588
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
2589
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
2590
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
2583
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2584
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2591
2585
  }
2592
2586
 
2593
- :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{
2594
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
2595
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
2596
- }
2587
+ .tds-toggle-switch:has(input:disabled){
2588
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2589
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2590
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2591
+ --tds-toggle-switch-cursor:not-allowed;
2592
+ }
2597
2593
 
2598
- :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){
2599
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
2600
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
2601
- }
2594
+ .tds-toggle-switch-track{
2595
+ position:relative;
2596
+ flex-shrink:0;
2597
+ width:var(--tds-toggle-switch-track-width);
2598
+ height:var(--tds-toggle-switch-track-height);
2599
+ background-color:var(--tds-toggle-switch-track-background-color);
2600
+ border-radius:var(--t-border-radius-round);
2601
+ transition:var(--tds-toggle-switch-track-transition);
2602
+ }
2602
2603
 
2603
- .tds-checkbox:has(input:required) label::after{
2604
- margin-left:.25ch;
2605
- color:var(--t-text-color-status-error);
2606
- content:"*";
2607
- }
2604
+ .tds-toggle-switch-track::before{
2605
+ position:absolute;
2606
+ top:var(--t-spacing-fourth);
2607
+ left:var(--t-spacing-fourth);
2608
+ width:var(--tds-toggle-switch-thumb-size);
2609
+ height:var(--tds-toggle-switch-thumb-size);
2610
+ content:"";
2611
+ background-color:#fff;
2612
+ border-radius:var(--t-border-radius-round);
2613
+ transform:var(--tds-toggle-switch-thumb-transform);
2614
+ transition:var(--tds-toggle-switch-thumb-transition);
2615
+ }
2608
2616
 
2609
- .tds-checkbox:has(input:disabled){
2610
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
2611
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
2617
+ @media (prefers-reduced-motion: reduce){
2612
2618
 
2613
- --tds-checkbox-label-color:var(--t-form-color-disabled);
2614
- --tds-checkbox-description-color:var(--t-form-color-disabled);
2615
- --tds-checkbox-cursor:not-allowed;
2619
+ .tds-toggle-switch-track{
2620
+ --tds-toggle-switch-track-transition:none;
2621
+ --tds-toggle-switch-thumb-transition:none;
2622
+ }
2616
2623
  }
2617
2624
 
2618
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
2619
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
2620
- }
2621
-
2622
- .tds-checkbox-description{
2625
+ .tds-toggle-switch-description{
2623
2626
  display:flex;
2624
2627
  grid-area:2 / 2;
2625
- gap:var(--t-spacing-half);
2626
2628
  align-items:flex-start;
2627
2629
  padding-inline-start:var(--t-spacing-1);
2628
2630
  margin:0;
2629
- font-size:var(--tds-checkbox-description-font-size);
2630
- line-height:var(--tds-checkbox-description-line-height);
2631
- color:var(--tds-checkbox-description-color);
2631
+ font-size:var(--tds-toggle-switch-description-font-size);
2632
+ line-height:var(--tds-toggle-switch-description-line-height);
2633
+ color:var(--tds-toggle-switch-description-color);
2632
2634
  cursor:text;
2633
2635
  }
2634
2636
 
2635
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
2636
- display:var(--tds-checkbox-description-invalid-icon-display);
2637
- flex-shrink:0;
2638
- margin-top:calc(.5lh - .5em);
2639
- line-height:var(--tds-checkbox-description-line-height);
2640
- }
2641
-
2642
- .tds-checkbox--sm{
2643
- --tds-checkbox-line-height:1.35;
2644
- --tds-checkbox-input-size:var(--t-element-size-sm);
2645
- --tds-checkbox-font-size:var(--t-font-size-sm);
2646
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
2647
- --tds-checkbox-description-line-height:1.3;
2648
- }
2649
-
2650
- .tds-loading-spinner{
2651
- position:absolute;
2652
- right:0;
2653
- left:0;
2654
- visibility:var(--tds-loading-spinner-visibility, hidden);
2655
- width:var(--tds-loading-spinner-size, 1.25em);
2656
- height:var(--tds-loading-spinner-size, 1.25em);
2657
- margin:auto;
2658
- border:var(--tds-loading-spinner-track-width, 4px) solid var(--tds-loading-spinner-track-color, var(--t-fill-color-transparency-dark-020));
2659
- border-top-color:var(--tds-loading-spinner-color, currentcolor);
2660
- border-radius:50%;
2661
- animation:spinner-rotate 500ms infinite linear;
2662
- animation-play-state:var(--tds-loading-spinner-animation-play-state, paused);
2663
- }
2664
-
2665
- @keyframes spinner-rotate{
2666
- to{
2667
- transform:rotate(360deg);
2668
- }
2637
+ .tds-toggle-switch--sm{
2638
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
2639
+ --tds-toggle-switch-line-height:1.35;
2640
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
2641
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2642
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2643
+ --tds-toggle-switch-description-line-height:1.3;
2669
2644
  }
2670
2645
 
2671
- @media (prefers-reduced-motion: reduce){
2672
- [class*="--loading"] .tds-loading-spinner{
2673
- --tds-loading-spinner-animation-play-state:paused;
2674
- }
2646
+ .tds-toggle-switch--hide-label{
2647
+ --tds-toggle-switch-display:inline-flex;
2675
2648
  }
2676
2649
 
2677
2650
  .tds-input{
@@ -2811,6 +2784,33 @@ a.tds-dropdown-item:is(:hover, :active){
2811
2784
  line-height:1.35;
2812
2785
  }
2813
2786
 
2787
+ .tds-loading-spinner{
2788
+ position:absolute;
2789
+ right:0;
2790
+ left:0;
2791
+ visibility:var(--tds-loading-spinner-visibility, hidden);
2792
+ width:var(--tds-loading-spinner-size, 1.25em);
2793
+ height:var(--tds-loading-spinner-size, 1.25em);
2794
+ margin:auto;
2795
+ border:var(--tds-loading-spinner-track-width, 4px) solid var(--tds-loading-spinner-track-color, var(--t-fill-color-transparency-dark-020));
2796
+ border-top-color:var(--tds-loading-spinner-color, currentcolor);
2797
+ border-radius:50%;
2798
+ animation:spinner-rotate 500ms infinite linear;
2799
+ animation-play-state:var(--tds-loading-spinner-animation-play-state, paused);
2800
+ }
2801
+
2802
+ @keyframes spinner-rotate{
2803
+ to{
2804
+ transform:rotate(360deg);
2805
+ }
2806
+ }
2807
+
2808
+ @media (prefers-reduced-motion: reduce){
2809
+ [class*="--loading"] .tds-loading-spinner{
2810
+ --tds-loading-spinner-animation-play-state:paused;
2811
+ }
2812
+ }
2813
+
2814
2814
  @layer t-critical, t-component;
2815
2815
 
2816
2816
  :root{
@@ -4698,6 +4698,40 @@ a.tds-dropdown-item:is(:hover, :active){
4698
4698
  .tds-data-table-cell--numeric{
4699
4699
  font-variant-numeric:tabular-nums;
4700
4700
  }
4701
+ .tds-data-table-selectable-checkbox{
4702
+ position:relative;
4703
+ display:inline-block;
4704
+ width:1em;
4705
+ height:1em;
4706
+ vertical-align:middle;
4707
+ cursor:pointer;
4708
+ border:var(--t-form-border-width) solid var(--t-form-border-color);
4709
+ border-radius:var(--t-border-radius-sm);
4710
+ }
4711
+ .tds-data-table-selectable-checkbox::before{
4712
+ position:absolute;
4713
+ inset:0;
4714
+ display:flex;
4715
+ visibility:hidden;
4716
+ align-items:center;
4717
+ justify-content:center;
4718
+ content:"";
4719
+ opacity:0;
4720
+ }
4721
+ .tds-data-table-selectable-checkbox[data-focus-visible]{
4722
+ outline:var(--t-focus-ring-outline);
4723
+ outline-offset:var(--t-focus-ring-offset);
4724
+ }
4725
+ :is(.tds-data-table-selectable-checkbox[data-selected],.tds-data-table-selectable-checkbox[data-indeterminate])::before{
4726
+ visibility:visible;
4727
+ opacity:1;
4728
+ }
4729
+ .tds-data-table-selectable-checkbox[data-selected]::before{
4730
+ content:"✅";
4731
+ }
4732
+ .tds-data-table-selectable-checkbox[data-indeterminate]::before{
4733
+ content:"➖";
4734
+ }
4701
4735
 
4702
4736
  .t-banner{
4703
4737
  --t-banner-font-size:var(--t-font-size-md);