@planningcenter/tapestry 4.2.0-rc.8 → 4.2.0-rc.9

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